styling fixes

Fixes for event sheet, added availability bar to event lineup

src/public/css/eventsheet.css

@@ -15,15 +15,18 @@
 }
 /** For Print **/
 @media print {
+  body {
+    margin: 0;
+  }
   body .sheet {
     size: B5;
-    padding: 0.2in;
+    padding: 0.175in;
   }
 }
 /** For screen preview **/
 @media screen {
   body .sheet {
-    padding: 0.2in;
+    padding: 0.175in;
   }
   body {
     background: #e0e0e0;
@@ -137,8 +140,8 @@ table tr th:empty::after, table tr td:empty::after {
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-template-rows: 1fr 1fr;
-  column-gap: 0.2in;
+  column-gap: 0.35in;
-  row-gap: 0.2in;
+  row-gap: 0.35in;
   background-size: 100%;
 }
 
@@ -256,6 +259,16 @@ td.substitution {
   border-left: 1px solid black;
 }
 
+section.blank {
+  filter: opacity(0.4);
+}
+section.blank img, section.blank header {
+  filter: grayscale(1);
+}
+section.blank td.substitution {
+  border-width: 0.5;
+}
+
 #lineup-card-exchange td.player-name {
   font-stretch: 100%;
 }
@@ -370,8 +383,7 @@ td.substitution {
   grid-area: defense;
   padding: 4px 4px 0px 4px; /* top right bottom left */
   display: flex;
-  border-right: 0.5px solid grey;
+  border: 0.5px solid grey;
-  border-bottom: 0.5px solid grey;
 }
 #defense-pane .field-container {
   display: grid;
@@ -590,16 +602,11 @@ header {
   background-color: inherit;
 }
 
-.past.available-status-code-1 {
+.past.available-status-code-1.Y {
   color: inherit;
   background-color: var(--color-warning);
 }
 
-.past.available-status-code-1.started {
-  color: inherit;
-  background-color: inherit;
-}
-
 .available-status-code-2 {
   color: blue;
   background-color: #acc9fe;
@@ -613,6 +620,9 @@ header {
   font-weight: bold;
 }
 
+#roster-and-history thead {
+  border: black solid 1px;
+}
 #roster-and-history > div > table {
   /* font-size: 10.5px; */
   padding: 0;

src/public/css/eventsheet.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../scss/eventsheet.scss"],"names":[],"mappings":";AAAQ;AACA;AACA;AACA;AACA;AAER;EACE;EACA;EACA;EACA;;AAGF;EACE;;AAGF;AACA;EACE;IACE;IACA;;;AAIJ;AACA;EACE;IACE;;EAEF;IACE;;EAEF;IACE;IACA;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAKA;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAKJ;EACE;EACA;EACA;EACA;;AAEA;EACE;;;AAQR;EACE;;;AAGF;EACE;;;AAOF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;AACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;AAAA;EAEE;EACA;EACA;EACA,qBACE;;;AAIJ;AAAA;EAEE;EACA;EACA;EACA,qBACE;;;AAIJ;AAAA;AAAA;AAAA;EAIE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAKF;EACE;;AAEA;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEA;EACE;;;AAQN;EACE;;;AAGF;AACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;EAEE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAKA;EACE;EACA;EACA;EACA,qBACE;;AAIJ;EACE;;AAGF;EACE;;AAGF;AACE;EACA;EACA;EACA;AACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAIJ;EACE;EACA;;AAGF;EACE;EACA;;AACA;EACE;;AAQJ;EACE;EACA;EACA;;AAEF;EACE;;;AAON;EACE;;AAGF;EACE;;AAIA;EACE;EACA;;AAMF;EACE;;AAGF;EAOE;EACA;EACA;EACA;;AATA;EACE;;AACA;EACE;;;AAeV;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAMI;EACE,SALM;;AAIR;EACE,SALM;;AAIR;EACE,SALM;;AAIR;EACE,SALM;;AAIR;EACE,SALM;;AAIR;EACE,SALM;;AAIR;EACE,SALM;;AAIR;EACE,SALM;;AAIR;EACE,SALM;;AAUZ;EACE;EAEA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EAIE;EACA;EACA;;AALA;EACE;;AAKF;EACI;;;AASV;EACE;AACA;EACA;EAEA;EACA;AACA;;AAEA;EACE;EACA;;AAGF;EACE;;AACA;EACE;;;AAON;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;AACA;AACA;AACA;EACA;EAEA;EACA;EACA;EACA;EACA;;;AAKF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAEF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AASA;AACE;EACA;EACA;AACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EAEE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EAEE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAMN;EACE;EACA;EACA;;AAEF;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EAEE;;AAGF;EACE;EACA;EACA;;AAEA;EACE;;AAQJ;EACE;;AAGF;EACE;;AAGF;EACE;;;AAOJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;AACA;AAAA;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACI;EACA;EACA;EACA;;AAGJ;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE","file":"eventsheet.css"}
+{"version":3,"sourceRoot":"","sources":["../../scss/eventsheet.scss"],"names":[],"mappings":";AAAQ;AACA;AACA;AACA;AACA;AAER;EACE;EACA;EACA;EACA;;AAGF;EACE;;AAGF;AACA;EACE;IACE;;EAEF;IACE;IACA;;;AAIJ;AACA;EACE;IACE;;EAEF;IACE;;EAEF;IACE;IACA;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAKA;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAKJ;EACE;EACA;EACA;EACA;;AAEA;EACE;;;AAQR;EACE;;;AAGF;EACE;;;AAOF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;AACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;AAAA;EAEE;EACA;EACA;EACA,qBACE;;;AAIJ;AAAA;EAEE;EACA;EACA;EACA,qBACE;;;AAIJ;AAAA;AAAA;AAAA;EAIE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAKF;EACE;;AAEA;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEA;EACE;;;AAQN;EACE;;;AAGF;AACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;;AAGF;EACE;;;AAGF;EACE;;AACA;EACE;;AAEF;EACE;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;EAEE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAKA;EACE;EACA;EACA;EACA,qBACE;;AAIJ;EACE;;AAGF;EACE;;AAGF;AACE;EACA;EACA;EACA;AACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAIJ;EACE;EACA;;AAGF;EACE;EACA;;AACA;EACE;;AAQJ;EACE;EACA;EACA;;AAEF;EACE;;;AAON;EACE;;AAGF;EACE;;AAIA;EACE;EACA;;AAMF;EACE;;AAGF;EAOE;EACA;EACA;EACA;;AATA;EACE;;AACA;EACE;;;AAeV;EACE;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAMI;EACE,SALM;;AAIR;EACE,SALM;;AAIR;EACE,SALM;;AAIR;EACE,SALM;;AAIR;EACE,SALM;;AAIR;EACE,SALM;;AAIR;EACE,SALM;;AAIR;EACE,SALM;;AAIR;EACE,SALM;;AAUZ;EACE;EAEA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EAIE;EACA;EACA;;AALA;EACE;;AAKF;EACI;;;AASV;EACE;AACA;EACA;EAEA;EACA;AACA;;AAEA;EACE;EACA;;AAGF;EACE;;AACA;EACE;;;AAON;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;AACA;AACA;AACA;EACA;EAEA;EACA;EACA;EACA;EACA;;;AAKF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAEF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AASA;EACE;;AAEF;AACE;EACA;EACA;AACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EAEE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EAEE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAMN;EACE;EACA;EACA;;AAEF;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EAEE;;AAGF;EACE;EACA;EACA;;AAEA;EACE;;AAQJ;EACE;;AAGF;EACE;;AAGF;EACE;;;AAOJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;AACA;AAAA;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACI;EACA;EACA;EACA;;AAGJ;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE","file":"eventsheet.css"}

src/scss/eventsheet.scss

@@ -17,16 +17,19 @@
 
 /** For Print **/
 @media print {
+  body {
+    margin:0;
+  }
   body .sheet {
     size: B5;
-    padding: 0.2in;
+    padding: 0.175in;
   }
 }
 
 /** For screen preview **/
 @media screen {
   body .sheet {
-    padding: 0.2in;
+    padding: 0.175in;
   }
   body {
     background: #e0e0e0;
@@ -158,8 +161,8 @@ table {
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-template-rows: 1fr 1fr;
-  column-gap: 0.2in;
+  column-gap: 0.35in;
-  row-gap: 0.2in;
+  row-gap: 0.35in;
   background-size: 100%;
 }
 
@@ -288,6 +291,16 @@ td.substitution {
   border-left: 1px solid black;
 }
 
+section.blank {
+  filter: opacity(0.4);
+  img, header {
+    filter: grayscale(1);
+  }
+  td.substitution {
+    border-width: 0.5;
+}
+}
+
 #lineup-card-exchange td.player-name {
   font-stretch: 100%;
 }
@@ -435,8 +448,8 @@ td.substitution {
   grid-area: defense;
   padding: 4px 4px 0px 4px; /* top right bottom left */
   display: flex;
-  border-right: 0.5px solid grey;
+  border: 0.5px solid grey;
-  border-bottom: 0.5px solid grey;
+  // border-bottom: 0.5px solid grey;
 
   .field-container {
     display: grid;
@@ -661,16 +674,11 @@ header {
   background-color: inherit;
 }
 
-.past.available-status-code-1 {
+.past.available-status-code-1.Y {
   color: inherit;
   background-color: var(--color-warning);
 }
 
-.past.available-status-code-1.started {
-  color: inherit;
-  background-color: inherit;
-}
-
 .available-status-code-2 {
   color: blue;
   background-color: #acc9fe;
@@ -690,6 +698,9 @@ header {
   //   text-transform: uppercase;
   //   font-size: 0.8em;
   // }
+  thead {
+    border: black solid 1px;
+  }
   > div > table {
     /* font-size: 10.5px; */
     padding: 0;

src/views/eventlineup/edit.hbs

@@ -68,8 +68,8 @@
             <div class="date">{{dateFormat event.startDate "ddd, MMM D h:mm A" }}</div>
             <div class="location">{{event.locationName}}</div>
         </div>
-        <div class=" availability-bar fullwidth">
+        <div class="availability-bar fullwidth">
-
+            {{> availability_bar availabilitySummary=availabilitySummary}}
         </div>
     </div>
   </div>

src/views/eventsheet/partials/roster_and_history.hbs

@@ -62,14 +62,14 @@
     <td class="position-capability outfield">{{positionCapabilityFor this "OF"}}</td>
     {{#loopEvents ../upcoming_events}}
       {{#timepointForMember ../this ../../timeline this}}
-      <td class="availability-on-day future available-status-code-{{this.availability.statusCode}}">
+      <td class="availability-on-day future available-status-code-{{this.availability.statusCode}} {{this.value}}">
         {{this.value}}
       </td>
       {{/timepointForMember}}
     {{/loopEvents}}
     {{#loopEvents ../recent_events}}
       {{#timepointForMember ../this ../../timeline this}}
-      <td class="availability-on-day past available-status-code-{{this.availability.statusCode}}">
+      <td class="availability-on-day past available-status-code-{{this.availability.statusCode}} {{this.value}}">
         {{this.value}}
       </td>
       {{/timepointForMember}}

src/views/eventsheet/sheet.hbs

@@ -2,7 +2,8 @@
 
 <body class="B5">
   <div class="sheet eventsheet" id="page-1">
-    <section id="defense-card">
+    {{!-- NW --}}
+    <section id="defense-card" data-card-location="NW">
       <header>
         <div class="event-title float-left">
           {{event.formattedTitle}} – {{dateFormat event.startDate "ddd, MMM D h:mm A" }}
@@ -31,7 +32,8 @@
         </div>
       </div>
     </section>
-    <section id="roster-and-history">
+    {{!-- NE --}}
+    <section id="roster-and-history" data-card-location="NE">
       <div class="roster-and-history">
         {{> roster_and_history 
           event=event 
@@ -42,7 +44,8 @@
           }}
       </div>
     </section>
-    <section class="lineup-card" id="lineup-card-dugout">
+    {{!-- SW --}}
+    <section class="lineup-card" id="lineup-card-dugout" data-card-location="SW">
       <header>
         <div class="float-left event-title">{{event.formattedTitle}}</div>
         <div class="float-right homeaway">{{event.gameType}}</div>
@@ -80,7 +83,8 @@
         </table>
       </div>
     </section>
-    <section class="lineup-card" id="lineup-card-exchange">
+    {{!-- SE --}}
+    <section class="lineup-card" id="lineup-card-exchange" data-card-location="SE">
       <header>
         <div class="float-left event-title">{{event.formattedTitle}}</div>
         <div class="float-right homeaway">{{event.gameType}}</div>
@@ -120,11 +124,7 @@
     </section>
   </div>
   <div class="sheet eventsheet" id="page-2">
-    <section id="defense-card" style="border:solid black;">
+    {{!-- NW --}}
-      <div id="defense-pane">
-        {{> defense_pane}}
-      </div>
-    </section>
     <section id="front-cover">
       <header>
         <div class="homeaway">
@@ -184,7 +184,71 @@
         {{/if}}
       </div>
     </section>
-    <section class="lineup-card" id="lineup-card-dugout-blank">
+    {{!-- NE --}}
+    <section id="defense-card" class="blank">
+      <header>
+        <div class="event-title float-left">
+          &nbsp;
+        </div>
+        <div class="homeaway float-right">
+          &nbsp;
+        </div>
+      </header>
+      <div>
+        <div id="defense-pane">
+          {{> defense_pane event_lineup_entries=null members=null}}
+        </div>
+        <div class="footer">
+          <table class="notes">
+            <tbody>
+              <tr>
+                <th>Notes</th>
+              </tr>
+              {{#repeat 3}}
+              <tr>
+                <td></td>
+              </tr>
+              {{/repeat}}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </section>
+    {{!-- SW --}}
+    <section class="lineup-card exchange blank" id="lineup-card-exchange-blank">
+      <div class="starting-lineup-table">
+        <table>
+          <thead>
+            <tr>
+              <th colspan="4">
+              Starting
+              </th>
+              <th class="substitution">
+              Substitution
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {{#repeat 12}}
+            <tr class="slot">
+              <th class="sequence">
+              </th>
+              <td class="player-name">
+              </td>
+              <td class="jersey-number">
+              </td>
+              <td class="position">
+              </td>
+              <td class="substitution">
+              </td>
+            </tr>
+            {{/repeat}}
+          </tbody>
+        </table>
+      </div>
+    </section>
+    {{!-- SE --}}
+    <section class="lineup-card exchange blank" id="lineup-card-dugout-blank">
       <div class="starting-lineup-table">
         <table>
           <thead>
@@ -218,38 +282,6 @@
         </table>
       </div>
     </section>
-    <section class="lineup-card" id="lineup-card-exchange-blank">
-      <div class="starting-lineup-table">
-        <table>
-          <thead>
-            <tr>
-              <th colspan="4">
-              Starting
-              </th>
-              <th class="substitution">
-              Substitution
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            {{#repeat 12}}
-            <tr class="slot">
-              <th class="sequence">
-              </th>
-              <td class="player-name">
-              </td>
-              <td class="jersey-number">
-              </td>
-              <td class="position">
-              </td>
-              <td class="substitution">
-              </td>
-            </tr>
-            {{/repeat}}
-          </tbody>
-        </table>
-      </div>
-    </section>
 
   </div>
 </body>