add first design of new shift markup
This commit is contained in:
msquare
parent
d59b1c8812
commit
902866ff3a
|
|
@ -108,14 +108,8 @@ class ShiftCalendarRenderer {
|
|||
$freeloader ++;
|
||||
$style = " text-decoration: line-through;";
|
||||
}
|
||||
if (in_array('user_shifts_admin', $privileges)) {
|
||||
$entry_list[] = "<span style=\"$style\">" . User_Nick_render(User($entry['UID'])) . ' ' . table_buttons([
|
||||
button(page_link_to('user_shifts') . '&entry_id=' . $entry['id'], glyph('trash'), 'btn-xs')
|
||||
]) . '</span>';
|
||||
} else {
|
||||
$entry_list[] = "<span style=\"$style\">" . User_Nick_render(User($entry['UID'])) . "</span>";
|
||||
}
|
||||
}
|
||||
if ($angeltype['count'] - count($angeltype['shift_entries']) - $freeloader > 0) {
|
||||
$inner_text = sprintf(ngettext("%d helper needed", "%d helpers needed", $angeltype['count'] - count($angeltype['shift_entries'])), $angeltype['count'] - count($angeltype['shift_entries']));
|
||||
// is the shift still running or alternatively is the user shift admin?
|
||||
|
|
@ -138,7 +132,7 @@ class ShiftCalendarRenderer {
|
|||
// User shift admins may join anybody in every shift
|
||||
$user_may_join_shift |= in_array('user_shifts_admin', $privileges);
|
||||
if ($user_may_join_shift) {
|
||||
$entry_list[] = '<a href="' . page_link_to('user_shifts') . '&shift_id=' . $shift['SID'] . '&type_id=' . $angeltype['id'] . '">' . $inner_text . '</a> ' . button(page_link_to('user_shifts') . '&shift_id=' . $shift['SID'] . '&type_id=' . $angeltype['id'], _('Sign up'), 'btn-xs');
|
||||
$entry_list[] = '<a href="' . page_link_to('user_shifts') . '&shift_id=' . $shift['SID'] . '&type_id=' . $angeltype['id'] . '">' . $inner_text . '</a> ' . button(page_link_to('user_shifts') . '&shift_id=' . $shift['SID'] . '&type_id=' . $angeltype['id'], _('Sign up'), 'btn-xs btn-primary');
|
||||
} else {
|
||||
if (time() > $shift['start']) {
|
||||
$entry_list[] = $inner_text . ' (' . _('ended') . ')';
|
||||
|
|
@ -182,15 +176,13 @@ class ShiftCalendarRenderer {
|
|||
if ($blocks < 1) {
|
||||
$blocks = 1;
|
||||
}
|
||||
$shift_length = ($shift["end"] - $shift["start"]) / (60 * 60);
|
||||
$shift_heading = date('H:i', $shift['start']) . ' ‐ ' . date('H:i', $shift['end']) . ' — ' . ShiftType($shift['shifttype_id'])['name'];
|
||||
return [
|
||||
$blocks,
|
||||
'<td class="shift" rowspan="' . $blocks . '">' . div('panel panel-' . $class, [
|
||||
'<td class="shift" rowspan="' . $blocks . '">' . div('panel panel-' . $class . '" style="min-height: ' . ($shift_length * 100) . 'px"', [
|
||||
div('panel-heading', [
|
||||
date('H:i', $shift['start']),
|
||||
'‐',
|
||||
date('H:i', $shift['end']),
|
||||
'—',
|
||||
ShiftType($shift['shifttype_id'])['name'],
|
||||
'<a href="' . shift_link($shift) . '">' . $shift_heading . '</a>',
|
||||
$header_buttons
|
||||
]),
|
||||
div('panel-body', [
|
||||
|
|
@ -200,7 +192,8 @@ class ShiftCalendarRenderer {
|
|||
'Name' => $shift['room_name']
|
||||
])
|
||||
]),
|
||||
$shifts_row
|
||||
$shifts_row,
|
||||
div('shift-spacer')
|
||||
]) . '</td>'
|
||||
];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6739,10 +6739,10 @@ body {
|
|||
}
|
||||
#shifts.table td.shift {
|
||||
height: 1px;
|
||||
padding: 0px 5px 5px 0px;
|
||||
padding: 0;
|
||||
}
|
||||
#shifts.table td.shift .panel {
|
||||
margin-bottom: 0px;
|
||||
margin: 0px 0px 0px 5px;
|
||||
}
|
||||
.row-day {
|
||||
border-top: 2px solid #777777;
|
||||
|
|
|
|||
|
|
@ -6762,10 +6762,10 @@ body {
|
|||
}
|
||||
#shifts.table td.shift {
|
||||
height: 1px;
|
||||
padding: 0px 5px 5px 0px;
|
||||
padding: 0;
|
||||
}
|
||||
#shifts.table td.shift .panel {
|
||||
margin-bottom: 0px;
|
||||
margin: 0px 0px 0px 5px;
|
||||
}
|
||||
.row-day {
|
||||
border-top: 2px solid #888888;
|
||||
|
|
|
|||
|
|
@ -6739,10 +6739,10 @@ body {
|
|||
}
|
||||
#shifts.table td.shift {
|
||||
height: 1px;
|
||||
padding: 0px 5px 5px 0px;
|
||||
padding: 0;
|
||||
}
|
||||
#shifts.table td.shift .panel {
|
||||
margin-bottom: 0px;
|
||||
margin: 0px 0px 0px 5px;
|
||||
}
|
||||
.row-day {
|
||||
border-top: 2px solid #777777;
|
||||
|
|
|
|||
|
|
@ -6748,10 +6748,10 @@ body {
|
|||
}
|
||||
#shifts.table td.shift {
|
||||
height: 1px;
|
||||
padding: 0px 5px 5px 0px;
|
||||
padding: 0;
|
||||
}
|
||||
#shifts.table td.shift .panel {
|
||||
margin-bottom: 0px;
|
||||
margin: 0px 0px 0px 5px;
|
||||
}
|
||||
.row-day {
|
||||
border-top: 2px solid #777777;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,121 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" type="text/css" href="public/css/theme3.css" />
|
||||
<style>
|
||||
.shift-calendar {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
align-itmes: stretch;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
align-itmes: stretch;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.shift-calendar .lane {
|
||||
background: #f0f0f0;
|
||||
flex-grow: 1;
|
||||
min-width: 300px;
|
||||
width: 300px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.shift-calendar .lane.time {
|
||||
flex-grow: 0;
|
||||
min-width: 100px;
|
||||
width: 100px;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.shift-calendar .lane .tick {
|
||||
height: 20px;
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.shift-calendar .lane .tick.hour {
|
||||
border-top: 1px solid #aaa;
|
||||
}
|
||||
|
||||
.shift-calendar .shift {
|
||||
margin-bottom: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="shift-calendar">
|
||||
<div class="lane time">
|
||||
<div class="tick hour">10:00</div>
|
||||
<div class="tick"></div>
|
||||
<div class="tick"></div>
|
||||
<div class="tick"></div>
|
||||
<div class="tick hour">11:00</div>
|
||||
<div class="tick"></div>
|
||||
<div class="tick"></div>
|
||||
<div class="tick"></div>
|
||||
<div class="tick hour">12:00</div>
|
||||
<div class="tick"></div>
|
||||
<div class="tick"></div>
|
||||
<div class="tick"></div>
|
||||
<div class="tick hour">13:00</div>
|
||||
<div class="tick"></div>
|
||||
<div class="tick"></div>
|
||||
<div class="tick"></div>
|
||||
</div>
|
||||
<div class="lane">
|
||||
<div class="tick hour"></div>
|
||||
<div class="tick"></div>
|
||||
<div class="tick"></div>
|
||||
<div class="tick"></div>
|
||||
<div class="shift panel panel-success" style="height: 160px;">
|
||||
<div class="panel-heading">
|
||||
<a href="?p=shifts&action=view&shift_id=2696">00:00 ‐ 02:00 — Bottle Collection</a>
|
||||
<div class="pull-right">
|
||||
<div class="btn-group">
|
||||
<a href="?p=user_shifts&edit_shift=2696" class="btn btn-default btn-xs"> <span class="glyphicon glyphicon-edit"></span>
|
||||
</a> <a href="?p=user_shifts&delete_shift=2696" class="btn btn-default btn-xs"> <span class="glyphicon glyphicon-trash"></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<span class="glyphicon glyphicon-info-sign"></span> Bottle Collection Quick Response Team<br> <a href="?p=rooms&action=view&room_id=42"> <span class="glyphicon glyphicon-map-marker"></span> Bottle Sorting (Hall H)
|
||||
</a>
|
||||
</div>
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item"><strong><a href="?p=angeltypes&action=view&angeltype_id=104575">Angel</a>:</strong> <span style=""><a class="" href="?p=users&action=view&user_id=1755"><span class="icon-icon_angel"></span> Pantomime</a></span>, <span style=""><a
|
||||
class="" href="?p=users&action=view&user_id=50"><span class="icon-icon_angel"></span> sandzwerg</a></span></li>
|
||||
<li class="list-group-item"><a href="?p=user_shifts&shift_id=2696&type_id=104575" class="btn btn-default btn-xs">Neue Engel hinzufügen</a></li>
|
||||
</ul>
|
||||
<div class="shift-spacer"></div>
|
||||
</div>
|
||||
<div class="tick hour"></div>
|
||||
<div class="tick"></div>
|
||||
<div class="tick"></div>
|
||||
<div class="tick"></div>
|
||||
</div>
|
||||
<div class="lane">
|
||||
<div class="tick hour"></div>
|
||||
<div class="tick"></div>
|
||||
<div class="tick"></div>
|
||||
<div class="tick"></div>
|
||||
<div class="tick hour"></div>
|
||||
<div class="tick"></div>
|
||||
<div class="tick"></div>
|
||||
<div class="tick"></div>
|
||||
<div class="tick hour"></div>
|
||||
<div class="tick"></div>
|
||||
<div class="tick"></div>
|
||||
<div class="tick"></div>
|
||||
<div class="tick hour"></div>
|
||||
<div class="tick"></div>
|
||||
<div class="tick"></div>
|
||||
<div class="tick"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -21,10 +21,11 @@ body {
|
|||
|
||||
td.shift {
|
||||
height: 1px;
|
||||
padding: 0px 5px 5px 0px;
|
||||
padding: 0;
|
||||
|
||||
.panel {
|
||||
margin-bottom: 0px;
|
||||
margin: 0px 0px 0px 5px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue