iger
/
engelsystem
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add first design of new shift markup

This commit is contained in:
msquare 2016-11-03 18:28:22 +01:00
parent d59b1c8812
commit 902866ff3a
7 changed files with 140 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
includes/view/ShiftCalendarRenderer.php
View File

@ -108,13 +108,7 @@ class ShiftCalendarRenderer {
$freeloader ++; $freeloader ++;
$style = " text-decoration: line-through;"; $style = " text-decoration: line-through;";
} }
if (in_array('user_shifts_admin', $privileges)) { $entry_list[] = "<span style=\"$style\">" . User_Nick_render(User($entry['UID'])) . "</span>";
$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) { 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'])); $inner_text = sprintf(ngettext("%d helper needed", "%d helpers needed", $angeltype['count'] - count($angeltype['shift_entries'])), $angeltype['count'] - count($angeltype['shift_entries']));
@ -138,7 +132,7 @@ class ShiftCalendarRenderer {
// User shift admins may join anybody in every shift // User shift admins may join anybody in every shift
$user_may_join_shift |= in_array('user_shifts_admin', $privileges); $user_may_join_shift |= in_array('user_shifts_admin', $privileges);
if ($user_may_join_shift) { if ($user_may_join_shift) {
$entry_list[] = '<a href="' . page_link_to('user_shifts') . '&amp;shift_id=' . $shift['SID'] . '&amp;type_id=' . $angeltype['id'] . '">' . $inner_text . '</a> ' . button(page_link_to('user_shifts') . '&amp;shift_id=' . $shift['SID'] . '&amp;type_id=' . $angeltype['id'], _('Sign up'), 'btn-xs'); $entry_list[] = '<a href="' . page_link_to('user_shifts') . '&amp;shift_id=' . $shift['SID'] . '&amp;type_id=' . $angeltype['id'] . '">' . $inner_text . '</a> ' . button(page_link_to('user_shifts') . '&amp;shift_id=' . $shift['SID'] . '&amp;type_id=' . $angeltype['id'], _('Sign up'), 'btn-xs btn-primary');
} else { } else {
if (time() > $shift['start']) { if (time() > $shift['start']) {
$entry_list[] = $inner_text . ' (' . _('ended') . ')'; $entry_list[] = $inner_text . ' (' . _('ended') . ')';
@ -182,15 +176,13 @@ class ShiftCalendarRenderer {
if ($blocks < 1) { if ($blocks < 1) {
$blocks = 1; $blocks = 1;
} }
$shift_length = ($shift["end"] - $shift["start"]) / (60 * 60);
$shift_heading = date('H:i', $shift['start']) . ' &dash; ' . date('H:i', $shift['end']) . ' &mdash; ' . ShiftType($shift['shifttype_id'])['name'];
return [ return [
$blocks, $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', [ div('panel-heading', [
date('H:i', $shift['start']), '<a href="' . shift_link($shift) . '">' . $shift_heading . '</a>',
'&dash;',
date('H:i', $shift['end']),
'&mdash;',
ShiftType($shift['shifttype_id'])['name'],
$header_buttons $header_buttons
]), ]),
div('panel-body', [ div('panel-body', [
@ -200,7 +192,8 @@ class ShiftCalendarRenderer {
'Name' => $shift['room_name'] 'Name' => $shift['room_name']
]) ])
]), ]),
$shifts_row $shifts_row,
div('shift-spacer')
]) . '</td>' ]) . '</td>'
]; ];
} }

4
public/css/theme0.css
View File

@ -6739,10 +6739,10 @@ body {
} }
#shifts.table td.shift { #shifts.table td.shift {
height: 1px; height: 1px;
padding: 0px 5px 5px 0px; padding: 0;
} }
#shifts.table td.shift .panel { #shifts.table td.shift .panel {
margin-bottom: 0px; margin: 0px 0px 0px 5px;
} }
.row-day { .row-day {
border-top: 2px solid #777777; border-top: 2px solid #777777;

4
public/css/theme1.css
View File

@ -6762,10 +6762,10 @@ body {
} }
#shifts.table td.shift { #shifts.table td.shift {
height: 1px; height: 1px;
padding: 0px 5px 5px 0px; padding: 0;
} }
#shifts.table td.shift .panel { #shifts.table td.shift .panel {
margin-bottom: 0px; margin: 0px 0px 0px 5px;
} }
.row-day { .row-day {
border-top: 2px solid #888888; border-top: 2px solid #888888;

4
public/css/theme2.css
View File

@ -6739,10 +6739,10 @@ body {
} }
#shifts.table td.shift { #shifts.table td.shift {
height: 1px; height: 1px;
padding: 0px 5px 5px 0px; padding: 0;
} }
#shifts.table td.shift .panel { #shifts.table td.shift .panel {
margin-bottom: 0px; margin: 0px 0px 0px 5px;
} }
.row-day { .row-day {
border-top: 2px solid #777777; border-top: 2px solid #777777;

4
public/css/theme3.css
View File

@ -6748,10 +6748,10 @@ body {
} }
#shifts.table td.shift { #shifts.table td.shift {
height: 1px; height: 1px;
padding: 0px 5px 5px 0px; padding: 0;
} }
#shifts.table td.shift .panel { #shifts.table td.shift .panel {
margin-bottom: 0px; margin: 0px 0px 0px 5px;
} }
.row-day { .row-day {
border-top: 2px solid #777777; border-top: 2px solid #777777;

121
shift_markup.html Normal file
View File

@ -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&amp;action=view&amp;shift_id=2696">00:00 ‐ 02:00 — Bottle Collection</a>
<div class="pull-right">
<div class="btn-group">
<a href="?p=user_shifts&amp;edit_shift=2696" class="btn btn-default btn-xs"> <span class="glyphicon glyphicon-edit"></span>
</a> <a href="?p=user_shifts&amp;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&amp;action=view&amp;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&amp;action=view&amp;angeltype_id=104575">Angel</a>:</strong> <span style=""><a class="" href="?p=users&amp;action=view&amp;user_id=1755"><span class="icon-icon_angel"></span> Pantomime</a></span>, <span style=""><a
class="" href="?p=users&amp;action=view&amp;user_id=50"><span class="icon-icon_angel"></span> sandzwerg</a></span></li>
<li class="list-group-item"><a href="?p=user_shifts&amp;shift_id=2696&amp;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>

5
themes/base.less
View File

@ -21,10 +21,11 @@ body {
td.shift { td.shift {
height: 1px; height: 1px;
padding: 0px 5px 5px 0px; padding: 0;
.panel { .panel {
margin-bottom: 0px; margin: 0px 0px 0px 5px;
overflow: hidden;
} }
} }
} }