partial #3073

include/controllers/default/cockpit2/api/drivershifts/index.php

@@ -21,7 +21,7 @@ class Controller_api_drivershifts extends Crunchbutton_Controller_RestAccount {
 				if( $driver->id_admin == c::user()->id_admin ){
 					$mine = 1;
 				}
-				$_drivers[] = [ 'name' => $driver->name, 'phone' => $driver->phone() ];
+				$_drivers[] = [ 'name' => $driver->name, 'phone' => $driver->phone(), 'id' => $driver->id_admin];
 			}
 			$export[] = Model::toModel( [
 					'id_community_shift' => $shift->id_community_shift,

include/views/default/cockpit2/frontend/drivers-shifts.phtml

@@ -1,37 +1,44 @@
 <div class="top-pad"></div>
 
 <div class="content-padding" ng-show="ready">
+	<h1 class="title left"><i class="fa fa-calendar"></i><span>Shifts</span></h1>
 
-	<div class="box-filter">
+	<div class="box-filter right">
 		<button class="button orange" ng-class="{ 'inactive' : !show.all }" ng-click="show.all = true">All</button>
 		<button class="button orange" ng-class="{ 'inactive' : show.all }" ng-click="show.all = false">Mine</button>
 		<div class="divider"></div>
 	</div>
+	
+	<div class="divider"></div>
 
 	<div class="drivers-shifts-list">
 		
 		<div ng-if="drivershifts.length">
 		
-			<div class="box-content item" ng-repeat="shift in drivershifts | filter:filterShifts">
+			<div class="drivers-shift" ng-repeat="shift in drivershifts | filter:filterShifts">
 
-				<h4 class="community">{{shift.community}}</h4>
+				<span class="day">{{shift.date.day}}</span>
-				<h2 class="day">{{shift.date.day}}</h2>
+
-				<h1 class="start_end">{{shift.date.start_end}}</h1>
+					
-				<h4 class="timezone">{{shift.date.timezone}}</h4>
+				<div ng-if="shift.drivers" class="box-content">
-				
+					<table class="drivers">
-				<div nf-if="shift.drivers">
+						<tr class="driver" ng-repeat="driver in shift.drivers" ng-class="{me: (driver.id == account.user.id_admin)}">
-					<ul class="drivers">
+							<td class="start-end"><div class="start-end-brace">{{shift.date.start_end}}</div></td>
-						<li class="driver" ng-repeat="driver in shift.drivers">
+							<td class="driver-spacer"></td>
-							<strong>{{driver.name}}</strong> <span class="phone">{{driver.phone | formatPhone}}</span>
+							<td class="driver-details">
-						</li>
+								<span class="driver-name">{{driver.name}}</span><br>
-					</ul>
+								<a href="tel:{{driver.phone | formatPhone}}" class="driver-phone">{{driver.phone | formatPhone}}</a>
+							</td>
+						</tr>
+					</table>
 				</div>
 
-				<div ng-if="!shift.drivers">
+				<div ng-if="!shift.drivers" class="box-content box-content-red">
-					<h3>No drivers</h3>
+					<table class="drivers">
+						<tr><td>No drivers</td></tr>
+					</table>
 				</div>
 
-				<div class="divider"></div>
 
 			</div>
 

include/views/default/cockpit2/layout/html.top.phtml

@@ -25,6 +25,7 @@
 <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.2/css/font-awesome.min.css" rel="stylesheet" type="text/css">
 <link href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet" type="text/css">
 <link href="//fonts.googleapis.com/css?family=Ruda:400,700,900" rel="stylesheet" type="text/css">
+<link href="//fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900" rel="stylesheet" type="text/css">
 
 <script type="text/javascript" src="https://www.google.com/jsapi"></script>
 

www/assets/cockpit/scss/cockpit.scss

@@ -693,6 +693,100 @@ input {
 	overflow: hidden;
 }
 
+
+
+
+
+/* Driver shift page */
+
+.drivers-shift .day {
+	font-weight: bold;
+}
+
+.drivers-shift .box-content {
+	margin-top: .7em;
+	margin-bottom: 1em;
+	padding: .3em;
+}
+.drivers-shift .driver {
+	line-height: 1.2em;
+	font-size: 1.2em;
+}
+.drivers-shift .driver-phone {
+
+}
+.drivers-shift .drivers {
+	width: 100%;
+}
+.drivers-shift .driver td {
+	padding: .3em .4em .3em .4em;
+}
+.drivers-shift .driver {
+	border-bottom: 1px solid #eee;
+}
+.drivers-shift .driver:last-child{
+	border-bottom: none;
+}
+.drivers-shift .start-end {
+	white-space: nowrap;
+}
+.drivers-shift .start-end-brace {
+	width: 8em;
+}
+.drivers-shift .driver td.driver-spacer {
+	padding: .2px;
+	width: 1px;
+	overflow: hidden;
+}
+.drivers-shift .driver-spacer {
+	background: #f68275;
+}
+.drivers-shift .me .driver-spacer {
+	background: #4ecdc4;
+}
+.drivers-shift td.driver-details {
+	width: 100%;
+	padding-left: .7em;
+}
+.drivers-shift .me .driver-name {
+	font-weight: bold;
+}
+
+.drivers-shift .me .driver-phone {
+	color: #4ecdc4;
+}
+
+
+
+/* new stuff */
+.box-content.box-content-red {
+	background: #ff6b6b;
+	color: #fff;
+}
+
+h1.title {
+	font-family: Source Sans Pro;
+	font-weight: 300;
+	font-size: 2.5em;
+	color: #5d5f63;
+	margin-bottom: 1.2em;
+	margin-top: .2em;
+}
+h1.title .fa {
+	font-size: .8em;
+	padding-right: .5em;
+	padding-top: .1em;
+	vertical-align: top;
+}
+.right {
+	float: right;
+}
+.left {
+	float: left;
+}
+
+
+
 /* drivers order list page */
 .last-updated{
 	font-size: 1em;
@@ -730,19 +824,7 @@ input {
 		margin-bottom: 0.4em;
 	}
 
-.drivers-shifts-list .community{
+
-	float: right;
-}
-	.drivers-shifts-list .timezone{
-		font-weight: normal;
-		text-align: right;
-	}
-	.drivers-shifts-list .drivers{
-		margin: 1em 0 0 0;
-	}
-		.drivers-shifts-list .drivers li{
-			line-height: 1.5em;
-		}
 
 .box-filter{
 	margin: 0 0 1em 0;
@@ -750,16 +832,19 @@ input {
 	.box-filter .button{
 		display: table;
 		float: left;
-		width: 8em;
+		width: 7em;
 		margin-right: 1em;
 		border: 2px solid transparent;
-		font-size: 1.2em;
+		font-size: 1.1em;
 	}
 	.box-filter .button.inactive{
 		border: 2px solid $orange;
 		color: $orange;
 		background: transparent;
 	}
+	.box-filter .button:last-child {
+		margin-right: 0;
+	}
 
 /* todo:organize it --- order start  */
 	.drivers-order{
@@ -1083,25 +1168,21 @@ body.loading .loader-wrap {
 }	
 
 
-/* generics */
+
-h1{ font-size: 2em;}
+
-h2{ font-size: 1.5em;}
+b, strong{ font-weight: bold; }
-h3{ font-size: 1.17em;}
-h4{ font-size: 1.17em;}
-h5{ font-size: .83em;}
-h6{ font-size: .75em;}
-h1, h2, h3, h4, h5, h6 { font-weight: bolder }
-p{ font-size: 1em; }
-strong{ font-weight: bold; }
 
 .pointer{
 	cursor: pointer;
 }
-.box-content{
+.box-content {
-	background: #FFF;
+	background: #fff;
-	padding: 15px;
+	padding: 10px;
 	margin-bottom: 15px;
-	box-shadow: 0px 3px 2px #AAB2BD;
+}
+
+.box-content.green {
+	background: #43b1a9;
 }
 
 .hide{ display: none; }
@@ -1123,4 +1204,4 @@ strong{ font-weight: bold; }
 }
 .mfp-close {
 	display: none !important;
-}
+}