add first design of new shift markup

includes/view/ShiftCalendarRenderer.php

@@ -108,13 +108,7 @@ 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'])) . "</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) {
         $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_may_join_shift |= in_array('user_shifts_admin', $privileges);
         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 {
           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']) . ' &dash; ' . date('H:i', $shift['end']) . ' &mdash; ' . 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']),
+                '<a href="' . shift_link($shift) . '">' . $shift_heading . '</a>',
-                '&dash;',
-                date('H:i', $shift['end']),
-                '&mdash;',
-                ShiftType($shift['shifttype_id'])['name'],
                 $header_buttons 
             ]),
             div('panel-body', [
@@ -200,7 +192,8 @@ class ShiftCalendarRenderer {
                     'Name' => $shift['room_name'] 
                 ]) 
             ]),
-            $shifts_row 
+            $shifts_row,
+            div('shift-spacer') 
         ]) . '</td>' 
     ];
   }

public/css/theme0.css

@@ -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;

public/css/theme1.css

@@ -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;

public/css/theme2.css

@@ -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;

public/css/theme3.css

@@ -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;

shift_markup.html

@@ -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>

themes/base.less

@@ -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;
 		}
   }
 }