Merge branch 'main' into docker

src/controllers/eventlineup.js

@@ -210,10 +210,14 @@ const processPostedEventLineupEntries = (body, eventLineupEntries, eventLineup)
     const lineupEntryFlags = body.flags[i]
     if (lineupEntryId != '' && lineupEntryLabel != '') {
       // Update lineup entry
-      const eventLineupEntry = eventLineupEntries.find((e)=>e.id==Number(lineupEntryId))
-      eventLineupEntry.sequence = lineupEntrySequence
-      eventLineupEntry.label = compilePositionLabel(lineupEntryLabel, lineupEntryFlags)
-      newEventLineupEntries.push(eventLineupEntry)
+      try {
+        const eventLineupEntry = eventLineupEntries.find((e)=>e.id==Number(lineupEntryId))
+        eventLineupEntry.sequence = lineupEntrySequence
+        eventLineupEntry.label = compilePositionLabel(lineupEntryLabel, lineupEntryFlags)
+        newEventLineupEntries.push(eventLineupEntry)
+      } catch {
+        console.log
+      }
     }
     else if (lineupEntryId != '') {
       // Delete lineup entry

src/public/css/application.css

@@ -7104,8 +7104,6 @@ div[id^=event-lineup] .Panel.position-only .Panel-cell:has(.sequence), div[id^=e
 @media (max-width: 480px) {
   .Panel--full {
     border-radius: 0;
-    margin-right: -16px;
-    margin-left: -16px;
     border-right: none;
     border-left: none;
   }
@@ -7143,4 +7141,8 @@ div[id^=event-lineup] .Panel.position-only .Panel-cell:has(.sequence), div[id^=e
   margin: 0;
 }
 
+.scroll-horizontal {
+  overflow-x: scroll;
+}
+
 /*# sourceMappingURL=application.css.map */

src/public/js/eventlineup.js

@@ -252,6 +252,7 @@ function copyEmailTable(itemEl, subject, recipients) {
 
 function emailModal(el, url) {
   form = el.closest("form");
+  console.log(form)
   data = new FormData(form);
 
   fetch(url, {
@@ -598,10 +599,23 @@ function insertLineup(direction, teamId, eventId, element) {
       const parser = new DOMParser();
       const new_lineup_doc = parser.parseFromString(html, 'text/html')
       const new_lineup_doc_node = new_lineup_doc.firstElementChild.querySelector('[id*=event-lineup]')
-      const lineup_container = document.querySelector("#lineup-container")
+      const main = document.querySelector("main")
 
+      direction > 0 ? main.appendChild(new_lineup_doc_node) : main.insertBefore(new_lineup_doc_node, element.closest('[id*=event-lineup]'))
+
+      main.classList.remove(...main.classList)
+      main.classList.add('scroll-horizontal', 'u-spaceSidesSm', 'u-flex')
+
+      Array.from(document.querySelectorAll("[id^=event-lineup]")).forEach((bcLineup) => {
+        // main.classList.remove('.u-max1200', 'u-flexExpandSides')
+        bcLineup.classList.remove('u-spaceSidesNone', 'u-sm-spaceSidesAuto')
+      }
+      )
+
+      Array.from(document.querySelectorAll("[id^=event-lineup] .Panel")).forEach((bcLineupPanel) => {
+        bcLineupPanel.classList.remove('Panel--full')
+      })
 
-      direction > 0 ? lineup_container.appendChild(new_lineup_doc_node) : lineup_container.insertBefore(new_lineup_doc_node, element.closest('[id*=event-lineup]'))
       initPage();
     })
 

src/scss/application.scss

@@ -311,8 +311,8 @@ div[id^="event-lineup"] .Panel {
 @media (max-width: 480px){
 .Panel--full {
     border-radius: 0;
-    margin-right: -16px;
-    margin-left: -16px;
+    // margin-right: -16px;
+    // margin-left: -16px;
     border-right: none;
     border-left: none;
 }}
@@ -359,3 +359,7 @@ div[id^="event-lineup"] .Panel {
   // border-bottom: 1px solid #d6d6d6;
   margin: 0;
 }
+
+.scroll-horizontal {
+  overflow-x: scroll;
+}

src/views/eventlineup/edit.hbs

@@ -1,124 +1,123 @@
-<div class="u-flex" id="lineup-container">
-  <div class="u-spaceSidessAuto" id="event-lineup-{{event.id}}" data-event-lineup-id="{{event_lineup.id}}" data-event-id="{{event.id}}">
-  <form onsubmit="onSubmit(this,event)" action="#">
-    <input type="hidden" name="event_lineup_id" value="{{event_lineup.id}}">
-    {{!-- <input type="hidden" name="_csrf" value="{{csrfToken}}"> --}}
-    <input type="hidden" name="csrfToken" value="{{csrfToken}}">
-    <div class="Panel Panel--full">
-      <div class="Panel-header u-padEndsSm">
-        <h3 style="flex: 1 1 0%;">{{event.formattedTitle}}</h3>
-        <div class="ButtonGroup">
-          <button class="Button Button--orange" type="submit" formmethod="post">
-            <div>
-              <span id="teamsnap-icon">{{{embeddedSvgFromPath "/media/teamsnap_star.svg"}}}</span>
-              <span id="waiting-icon" class="u-hidden">{{{embeddedSvgFromPath "/teamsnap-ui/assets/icons/loader.svg" "Icon--loader"}}}</span>
-              <span id="success-icon" class="u-hidden">{{{embeddedSvgFromPath "/teamsnap-ui/assets/icons/check.svg"}}}</span>
-              <span id="failure-icon" class="u-hidden">{{{embeddedSvgFromPath "/teamsnap-ui/assets/icons/dismiss.svg"}}}</span>
-              Save
-              </div>
-          </button>
-          <div class="Button Button--orange .u-padSidesXs Popup" onclick="togglePopup(this)">
-            {{{embeddedSvgFromPath "/teamsnap-ui/assets/icons/caret-down.svg"}}}
-            <div class="Popup-container Popup-container--down Popup-container--right" style="width: 200px">
-              <div class="Popup-content u-textDecorationNone">
-                <a class="u-padEndsSm u-padSidesMd u-textDecorationNone" href="javascript:void(0)" onclick="emailModal(this, '{{event_lineup.id}}/email')">
-                    {{{embeddedSvgFromPath "/bootstrap-icons/envelope.svg"}}}
-                    <span>Generate Email</span>
-                </a>
-                <hr class="Divider u-spaceEndsNone">
-                <a class="u-padEndsSm u-padSidesMd u-textDecorationNone" href="../sheet">
-                    {{{embeddedSvgFromPath "/bootstrap-icons/book.svg"}}}
-                    <span>Lineup Card</span>
-                </a>
-                <hr class="Divider u-spaceEndsNone">
-                <a class="u-padEndsSm u-padSidesMd u-textDecorationNone" href="javascript:void(0)" onclick="insertLineup(1, {{team.id}}, {{event.id}}, this)">
-                    {{{embeddedSvgFromPath "/bootstrap-icons/caret-right.svg"}}}
-                    <span>Insert next lineup</span>
-                </a>
-                <hr class="Divider u-spaceEndsNone">
-                <a class="u-padEndsSm u-padSidesMd u-textDecorationNone" href="javascript:void(0)" onclick="insertLineup(-1, {{team.id}}, {{event.id}}, this)">
-                    {{{embeddedSvgFromPath "/bootstrap-icons/caret-left.svg"}}}
-                    <span>Insert previous lineup</span>
-                </a>
-              </div>
+<div class="u-spaceSidesNone u-sm-spaceSidesAuto" id="event-lineup-{{event.id}}" data-event-lineup-id="{{event_lineup.id}}" data-event-id="{{event.id}}">
+<form onsubmit="onSubmit(this,event)" action="#">
+  <input type="hidden" name="event_lineup_id" value="{{event_lineup.id}}">
+  {{!-- <input type="hidden" name="_csrf" value="{{csrfToken}}"> --}}
+  <input type="hidden" name="csrfToken" value="{{csrfToken}}">
+  <div class="Panel Panel--full">
+    <div class="Panel-header u-padEndsSm">
+      <h3 style="flex: 1 1 0%;">{{event.formattedTitle}}</h3>
+      <div class="ButtonGroup">
+        <button class="Button Button--orange" type="submit" formmethod="post">
+          <div>
+            <span id="teamsnap-icon">{{{embeddedSvgFromPath "/media/teamsnap_star.svg"}}}</span>
+            <span id="waiting-icon" class="u-hidden">{{{embeddedSvgFromPath "/teamsnap-ui/assets/icons/loader.svg" "Icon--loader"}}}</span>
+            <span id="success-icon" class="u-hidden">{{{embeddedSvgFromPath "/teamsnap-ui/assets/icons/check.svg"}}}</span>
+            <span id="failure-icon" class="u-hidden">{{{embeddedSvgFromPath "/teamsnap-ui/assets/icons/dismiss.svg"}}}</span>
+            Save
             </div>
+        </button>
+        <div class="Button Button--orange .u-padSidesXs Popup" onclick="togglePopup(this)">
+          {{{embeddedSvgFromPath "/teamsnap-ui/assets/icons/caret-down.svg"}}}
+          <div class="Popup-container Popup-container--down Popup-container--right" style="width: 200px">
+            <div class="Popup-content u-textDecorationNone">
+              <a class="u-padEndsSm u-padSidesMd u-textDecorationNone" href="javascript:void(0)" onclick="emailModal(this, '{{event_lineup.id}}/email')">
+                  {{{embeddedSvgFromPath "/bootstrap-icons/envelope.svg"}}}
+                  <span>Generate Email</span>
+              </a>
+              <hr class="Divider u-spaceEndsNone">
+              <a class="u-padEndsSm u-padSidesMd u-textDecorationNone" href="../sheet">
+                  {{{embeddedSvgFromPath "/bootstrap-icons/book.svg"}}}
+                  <span>Lineup Card</span>
+              </a>
+              <hr class="Divider u-spaceEndsNone">
+              <a class="u-padEndsSm u-padSidesMd u-textDecorationNone" href="javascript:void(0)" onclick="insertLineup(1, {{team.id}}, {{event.id}}, this)">
+                  {{{embeddedSvgFromPath "/bootstrap-icons/caret-right.svg"}}}
+                  <span>Insert next lineup</span>
+              </a>
+              <hr class="Divider u-spaceEndsNone">
+              <a class="u-padEndsSm u-padSidesMd u-textDecorationNone" href="javascript:void(0)" onclick="insertLineup(-1, {{team.id}}, {{event.id}}, this)">
+                  {{{embeddedSvgFromPath "/bootstrap-icons/caret-left.svg"}}}
+                  <span>Insert previous lineup</span>
+              </a>
             </div>
-        </div>
-      </div>
-      <div class=" Panel-body u-padEndsSm">
-          <div class=" u-padSidesSm">
-              <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>
+      </div>
+    </div>
+    <div class=" Panel-body u-padEndsSm">
+        <div class=" u-padSidesSm">
+            <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>
-      </div>
-    </div>
-    <div id="lineup-starting-{{event.id}}" class="Panel u-maxWidthSm starting Panel--fullWidthMobile Panel--full">
-      <div class="Panel-body">
-        <div class="Panel-row Panel-title u-padXs">
-          <i>{{{embeddedSvgFromPath "/bootstrap-icons/clipboard-check.svg"}}}</i>
-          <span>Starting Lineup</span>
-        </div>
-        <div class=" Panel-row Grid Grid--fit u-textBold u-textCenter u-padXs">
-          {{#each (positions)}}
-            <div class="Grid-cell position-status">{{this}}</div>
-          {{/each}}
-        </div>
-        <div class="slot-set">
-          {{#each members}}
-            {{#if (isInStartingLineup this)}}
-              {{> slot member=this}}
-            {{/if}}
-          {{/each}}
-        </div>
-      </div>
-    </div>
-    <div id="lineup-positiononly-{{event.id}}" class="Panel u-maxWidthSm position-only Panel--full">
-      <div class="Panel-row Panel-title u-padXs">
-          {{{embeddedSvgFromPath "/bootstrap-icons/clipboard-check.svg"}}}
-          <span>Position Only</span>
-        </div>
-        <div class="slot-set">
-          {{#each members}}
-            {{#if (isInPositionOnly this)}}
-              {{> slot member=this}}
-            {{/if}}
-          {{/each}}
         </div>
     </div>
-    <div id="lineup-bench-{{event.id}}" class="Panel u-maxWidthSm bench Panel--full">
-      <div class="Panel-row Panel-title u-padXs">
-          {{{embeddedSvgFromPath "/bootstrap-icons/clipboard-minus.svg"}}}
-          <span>Bench</span>
-        </div>
-      <div class="slot-set">
-        {{#each members}}
-        {{#if (isInBench this)}}
-          {{> slot member=this event=../event}}
-        {{/if}}
-        {{/each}}
-      </div>
-    </div>
-    <div id="lineup-out-{{event.id}}" class="Panel u-maxWidthSm out Panel--full">
-      <div class="Panel-row Panel-title u-padXs u-flex">
-          <div><span style="flex: 1 1 0%;">{{{embeddedSvgFromPath "/bootstrap-icons/clipboard-x.svg"}}}Out</span></div>
-          <div class="u-flexGrow1"></div>
-          <div class="Toggle">
-            <input class="Toggle-input" type="checkbox" id="enable-slots" onclick="toggleChildSlots(this);">
-            <label class="Toggle-label" for="enable-slots"></label>
-          </div>
-        </div>
-      <div class="slot-set">
-        {{#each members}}
-        {{#if (isInOut this)}}
-          {{> slot member=this}}
-        {{/if}}
-        {{/each}}
-      </div>
-    </div>
-  </form>
   </div>
+  <div id="lineup-starting-{{event.id}}" class="Panel u-maxWidthSm starting Panel--fullWidthMobile Panel--full">
+    <div class="Panel-body">
+      <div class="Panel-row Panel-title u-padXs">
+        <i>{{{embeddedSvgFromPath "/bootstrap-icons/clipboard-check.svg"}}}</i>
+        <span>Starting Lineup</span>
+      </div>
+      <div class=" Panel-row Grid Grid--fit u-textBold u-textCenter u-padXs">
+        {{#each (positions)}}
+          <div class="Grid-cell position-status">{{this}}</div>
+        {{/each}}
+      </div>
+      <div class="slot-set">
+        {{#each members}}
+          {{#if (isInStartingLineup this)}}
+            {{> slot member=this}}
+          {{/if}}
+        {{/each}}
+      </div>
+    </div>
+  </div>
+  <div id="lineup-positiononly-{{event.id}}" class="Panel u-maxWidthSm position-only Panel--full">
+    <div class="Panel-row Panel-title u-padXs">
+        {{{embeddedSvgFromPath "/bootstrap-icons/clipboard-check.svg"}}}
+        <span>Position Only</span>
+      </div>
+      <div class="slot-set">
+        {{#each members}}
+          {{#if (isInPositionOnly this)}}
+            {{> slot member=this}}
+          {{/if}}
+        {{/each}}
+      </div>
+  </div>
+  <div id="lineup-bench-{{event.id}}" class="Panel u-maxWidthSm bench Panel--full">
+    <div class="Panel-row Panel-title u-padXs">
+        {{{embeddedSvgFromPath "/bootstrap-icons/clipboard-minus.svg"}}}
+        <span>Bench</span>
+      </div>
+    <div class="slot-set">
+      {{#each members}}
+      {{#if (isInBench this)}}
+        {{> slot member=this event=../event}}
+      {{/if}}
+      {{/each}}
+    </div>
+  </div>
+  <div id="lineup-out-{{event.id}}" class="Panel u-maxWidthSm out Panel--full">
+    <div class="Panel-row Panel-title u-padXs u-flex">
+        <div><span style="flex: 1 1 0%;">{{{embeddedSvgFromPath "/bootstrap-icons/clipboard-x.svg"}}}Out</span></div>
+        <div class="u-flexGrow1"></div>
+        <div class="Toggle">
+          <input class="Toggle-input" type="checkbox" id="enable-slots" onclick="toggleChildSlots(this);">
+          <label class="Toggle-label" for="enable-slots"></label>
+        </div>
+      </div>
+    <div class="slot-set">
+      {{#each members}}
+      {{#if (isInOut this)}}
+        {{> slot member=this}}
+      {{/if}}
+      {{/each}}
+    </div>
+  </div>
+</form>
 </div>
 
+

src/views/eventlineup/partials/slot.hbs

@@ -35,7 +35,7 @@
           </span>
       </div>
       <div class="u-flexGrow1"></div>
-      <div class="position-label-flags">
+      <div class="position-label-flags u-textNoWrap">
         <div class="Checkbox Checkbox--inline">
           <input class="Checkbox-input" type="checkbox" name="flag-drd" id="flag-drd-{{member.id}}-{{member.benchcoach.eventLineupEntry.id}}" onclick="refreshLineup()">
           <label class="Checkbox-label" for="flag-drd-{{member.id}}-{{member.benchcoach.eventLineupEntry.id}}">DR<small>d</small></label>

src/views/layouts/main.hbs

@@ -21,15 +21,13 @@
 </head>
 
 <body>
-    <header>
+    <header class="u-spaceBottomMd">
         {{> navbar }}
         {{{_sections.header}}}
     </header>
-    <div class="u-padSidesMd u-xs-padSidesLg">
-        <div class="u-max1200 u-flexExpandSides u-xs-size5of6 u-sm-size2of3 u-md-sizeFull u-padEndsLg u-sm-padEndsXl">
-        {{{ body }}}
-        </div>
-    </div>
+    <main class="">
+    {{{ body }}}
+    </main>
 </body>
 {{{script_tags scripts}}}
 </html>