eventsheet styling improvements

src/public/css/eventsheet.css

@@ -153,13 +153,53 @@ table tr th:empty::after, table tr td:empty::after {
   flex-direction: column;
   align-items: stretch;
 }
-
 .eventsheet > section > div {
   display: flex;
   flex: 1;
   align-items: stretch;
   height: auto;
 }
+.eventsheet > section.NW {
+  grid-area: 1/1/2/2;
+}
+.eventsheet > section.NE {
+  grid-area: 1/2/2/3;
+}
+.eventsheet > section.SW {
+  grid-area: 2/1/3/2;
+}
+.eventsheet > section.SE {
+  grid-area: 2/2/3/3;
+}
+
+.eventsheet > .section-divider {
+  position: absolute;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(2, 1fr);
+  grid-column-gap: 0px;
+  grid-row-gap: 0px;
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+  --divider-border: lightgrey dashed 1px;
+}
+.eventsheet > .section-divider .NW {
+  grid-area: 1/1/2/2;
+  border-right: var(--divider-border);
+  border-bottom: var(--divider-border);
+}
+.eventsheet > .section-divider .NE {
+  grid-area: 1/2/2/3;
+  border-bottom: var(--divider-border);
+}
+.eventsheet > .section-divider .SW {
+  grid-area: 2/1/3/2;
+  border-right: var(--divider-border);
+}
+.eventsheet > .section-divider .SE {
+  grid-area: 2/2/3/3;
+}
 
 .lineup-card th {
   width: inherit;
@@ -735,14 +775,6 @@ td.is-present-checkbox.available-status-code-None > span {
   display: none;
 }
 
-.game-number .label {
-  font-size: xx-small;
-}
-
-.game-number .label, .game-number .value {
-  display: none;
-}
-
 #front-cover {
   border: solid 1px black;
 }
@@ -759,10 +791,18 @@ td.is-present-checkbox.available-status-code-None > span {
 }
 #front-cover .game-number, #front-cover .homeaway {
   display: grid;
-  font-size: xx-large;
   align-content: center;
   width: 1.4em;
+}
+#front-cover .homeaway {
   font-weight: 800;
+  font-size: xx-large;
+}
+#front-cover .game-number {
+  font-size: large;
+  font-stretch: extra-condensed;
+  font-weight: 700;
+  text-wrap: nowrap;
 }
 #front-cover .title {
   display: grid;

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;;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"}
+{"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;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;AACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;;AAKN;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;;;AAGF;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;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;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

@@ -153,10 +153,6 @@ table {
   float: left;
 }
 
-
-
-
-
 .B5 > .eventsheet {
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -173,13 +169,58 @@ table {
   display: flex;
   flex-direction: column;
   align-items: stretch;
+
+  > div {
+    display: flex;
+    flex: 1;
+    align-items: stretch;
+    height: auto;
+  }
+
+  &.NW {
+    grid-area: 1 / 1 / 2 / 2;
+  }
+  &.NE {
+    grid-area: 1 / 2 / 2 / 3;
+    }
+  &.SW {
+    grid-area: 2 / 1 / 3 / 2;
+    }
+  &.SE {
+    grid-area: 2 / 2 / 3 / 3;
+    }
+
 }
 
-.eventsheet > section > div {
+.eventsheet > .section-divider {
-  display: flex;
+  position:  absolute;
-  flex: 1;
+  display: grid;
-  align-items: stretch;
+  grid-template-columns: repeat(2, 1fr);
-  height: auto;
+  grid-template-rows: repeat(2, 1fr);
+  grid-column-gap: 0px;
+  grid-row-gap: 0px;
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+  --divider-border: lightgrey dashed 1px;
+
+  .NW {
+      grid-area: 1 / 1 / 2 / 2;
+      border-right:var(--divider-border);
+      border-bottom:var(--divider-border);
+    }
+  .NE {
+      grid-area: 1 / 2 / 2 / 3;
+      border-bottom:var(--divider-border);
+    }
+  .SW {
+      grid-area: 2 / 1 / 3 / 2;
+      border-right:var(--divider-border);
+    }
+  .SE {
+      grid-area: 2 / 2 / 3 / 3;
+    }
+  
 }
 
 .lineup-card th {
@@ -231,8 +272,6 @@ div.grid-container > .substitution-table {
   grid-area: "substitution-table";
 }
 
-
-
 section.lineup-card {
   counter-reset: lineup-sequence-counter 0;
 
@@ -298,7 +337,7 @@ section.blank {
   }
   td.substitution {
     border-width: 0.5;
-}
+  }
 }
 
 #lineup-card-exchange td.player-name {
@@ -839,14 +878,6 @@ td.is-present-checkbox.available-status-code-None > span {
   display: none;
 }
 
-.game-number .label {
-  font-size: xx-small
-}
-
-.game-number .label, .game-number .value{
-  display:none;
-}
-
 #front-cover {
   border: solid 1px black;
 
@@ -864,10 +895,20 @@ td.is-present-checkbox.available-status-code-None > span {
 
   .game-number, .homeaway{
     display: grid;
-    font-size: xx-large;
     align-content: center;
     width: 1.4em;
+  }
+  
+  .homeaway {
     font-weight: 800;
+    font-size: xx-large;
+  }
+
+  .game-number {
+    font-size: large;
+    font-stretch: extra-condensed;
+    font-weight: 700;
+    text-wrap: nowrap;
   }
 
   .title {

src/views/eventlineup/partials/page_section_divider.hbs

@@ -0,0 +1,7 @@
+
+<div class="section-divider">
+    <div class="dotted-line NW" style=""></div>
+    <div class="dotted-line NE" style=""></div>
+    <div class="dotted-line SW" style=""></div>
+    <div class="dotted-line SE" style=""></div>
+</div>

src/views/eventsheet/sheet.hbs

@@ -2,8 +2,8 @@
 
 <body class="B5">
   <div class="sheet eventsheet" id="page-1">
-    {{!-- NW --}}
+    {{>page_section_divider}}
-    <section id="defense-card" data-card-location="NW">
+    <section class="NW" id="defense-card">
       <header>
         <div class="event-title float-left">
           {{event.formattedTitle}} – {{dateFormat event.startDate "ddd, MMM D h:mm A" }}
@@ -32,8 +32,7 @@
         </div>
       </div>
     </section>
-    {{!-- NE --}}
+    <section class="NE" id="roster-and-history">
-    <section id="roster-and-history" data-card-location="NE">
       <div class="roster-and-history">
         {{> roster_and_history 
           event=event 
@@ -44,8 +43,7 @@
           }}
       </div>
     </section>
-    {{!-- SW --}}
+    <section class="SW lineup-card dugout" id="lineup-card-dugout">
-    <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>
@@ -83,8 +81,7 @@
         </table>
       </div>
     </section>
-    {{!-- SE --}}
+    <section class="SE lineup-card exchange" id="lineup-card-exchange">
-    <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>
@@ -124,19 +121,18 @@
     </section>
   </div>
   <div class="sheet eventsheet" id="page-2">
-    {{!-- NW --}}
+    {{>page_section_divider}}
-    <section id="front-cover">
+    <section class="NW" id="front-cover">
       <header>
-        <div class="homeaway">
+        <div class="game-number">
-          <span>{{firstLetter event.gameType}}</span>
+          {{event.label}}
         </div>
         <div class="title">
           <span class="date-time">{{dateFormat event.startDate "ddd, MMM D h:mm A" }}</span>
           <span class="location">{{event.locationName}}</span>
         </div>
-        <div class="game-number">
+        <div class="homeaway">
-          <span class="label">Game #</span>
+          <span>{{firstLetter event.gameType}}</span>
-          <span class="value">XX</span>
         </div>
       </header>
       <div style="display:block;max-height: 1em;background-color: lightgray;border-bottom: solid 2px black;">
@@ -184,8 +180,7 @@
         {{/if}}
       </div>
     </section>
-    {{!-- NE --}}
+    <section class="NE blank" id="defense-card">
-    <section id="defense-card" class="blank">
       <header>
         <div class="event-title float-left">
           &nbsp;
@@ -214,8 +209,7 @@
         </div>
       </div>
     </section>
-    {{!-- SW --}}
+    <section class="SW lineup-card exchange blank" id="lineup-card-exchange-blank">
-    <section class="lineup-card exchange blank" id="lineup-card-exchange-blank">
       <div class="starting-lineup-table">
         <table>
           <thead>
@@ -247,8 +241,7 @@
         </table>
       </div>
     </section>
-    {{!-- SE --}}
+    <section class="SE lineup-card dugout blank" id="lineup-card-dugout-blank">
-    <section class="lineup-card exchange blank" id="lineup-card-dugout-blank">
       <div class="starting-lineup-table">
         <table>
           <thead>