Put checkout suggestions next to total score instead of below

kcapp · Nov 10, 2024 · 1dabd33 · 1dabd33
1 parent 9c69349
commit 1dabd33
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 17 deletions.
diff --git a/src/components/scorecard/components/checkout-suggestion/checkout-suggestion.marko b/src/components/scorecard/components/checkout-suggestion/checkout-suggestion.marko
@@ -1,7 +1,9 @@
-<div class=`checkout-suggestion ${state.suggestion.length == 0 ? 'transparent' : ''}`>
-    <for|dart| of=state.suggestion>
-        <div class=`suggested-dart dart-score-${dart.modifier}`>
-            ${dart.modifier == 'triple' ? 'T-' : (dart.modifier == 'double' ? 'D-' : '')}${dart.value}
-        </div>
-    </for>
-</div>
+<span class="checkout-suggestion-container">
+    <div class=`checkout-suggestion ${state.suggestion.length == 0 ? 'transparent' : ''}`>
+        <for|dart| of=state.suggestion>
+            <div class=`suggested-dart dart-score-${dart.modifier}`>
+                ${dart.modifier == 'triple' ? 'T-' : (dart.modifier == 'double' ? 'D-' : '')}${dart.value}
+            </div>
+        </for>
+    </div>
+</span>
diff --git a/src/components/scorecard/components/checkout-suggestion/checkout-suggestion.style.less b/src/components/scorecard/components/checkout-suggestion/checkout-suggestion.style.less
@@ -1,3 +1,12 @@
+.checkout-suggestion-container {
+  font-size: 0.8em;
+  color: #666;
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+  position: absolute;
+  right: 0;
+}
 
 .checkout-suggestion {
   .block-container;
@@ -16,6 +25,7 @@
   font-size: 16px;
   font-weight: 700;
   border-radius: 4px;
+  min-width: 65px;
 }
 
 .transparent {

diff --git a/src/components/scorecard/scorecard.marko b/src/components/scorecard/scorecard.marko
@@ -21,19 +21,20 @@ $ const cricket = require("./components/cricket");
       <if(state.type == types.X01 || state.type == types.X01HANDICAP || state.type == types.SHOOTOUT || state.type == types.ONESEVENTY)>
         <tr>
           <td colspan="3">
-            <div class=["total-score", state.submitClass]>${state.totalScore}</div>
-          </td>
-        </tr>
-      </if>
-      <if(state.type == types.X01 || state.type == types.X01HANDICAP || state.type == types.ONESEVENTY)>
-        <tr>
-          <td colspan="3" style="height: 44px;">
-            <if(!state.player.player.options || state.player.player.options.show_checkout_guide)>
-              <checkout-suggestion key="suggestion" score=state.player.current_score currentDart=state.currentDart />
-            </if>
+            <div class="total-score-container">
+              <div class="total-score">
+                ${state.totalScore}
+              </div>
+              <if(state.type == types.X01 || state.type == types.X01HANDICAP || state.type == types.ONESEVENTY)>
+                <if(!state.player.player.options || state.player.player.options.show_checkout_guide)>
+                  <checkout-suggestion key="suggestion" score=state.player.current_score currentDart=state.currentDart />
+                </if>
+              </if>
+            </div>
           </td>
         </tr>
       </if>
+
       <if(state.type == types.CRICKET)>
         <tr>
           <td colspan="3">

diff --git a/src/components/scorecard/scorecard.style.less b/src/components/scorecard/scorecard.style.less
@@ -16,8 +16,22 @@ table {
     transition: 40ms;
     margin-bottom: 10px;
     padding: 0px 5px 0px 5px;
+
+    border: none;
+    margin-top: 10px;
+}
+
+.total-score-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    position: relative;
+    background-color: white;
+    border: 1px solid #ebeff6
 }
 
+
 .total-score.submitting {
     background-color: @dart-single;
     color: white;