improve responsive behavior

Author: stefanseifert

src/components/round/ActionBox.vue

@@ -3,9 +3,9 @@
       :class="{'instruction': hasInstruction, 'managedByApp': managedByApp}">
     <slot name="action"></slot>
     <div v-if="vp" class="vpGain">
-      <span v-html="t('roundTurnBot.gainVP', {vp: vp})"></span><template v-if="xp">,
-      <span v-html="t('roundTurnBot.gainXP')"/>
-      <FlowerIcon v-for="flower in xp" :key="flower" :flower="flower" class="xpFlowerIcon"/></template>
+      <span class="text-nowrap" v-html="t('roundTurnBot.gainVP', {vp: vp})"></span><template v-if="xp">,
+      <span class="text-nowrap"><span v-html="t('roundTurnBot.gainXP')"/>
+      <FlowerIcon v-for="flower in xp" :key="flower" :flower="flower" class="xpFlowerIcon"/></span></template>
     </div>
     <div v-if="currentCard?.remove" class="remove"><AppIcon name="x" class="icon"/></div>
   </div>

src/components/round/PlayerMakeDelivery.vue

@@ -143,7 +143,6 @@ export default defineComponent({
 <style lang="scss" scoped>
 .floor-windows {
   display: flex;
-  flex-wrap: wrap;
   gap: 0.75rem;
 }
 .window-box {

src/components/round/SideBar.vue

@@ -8,7 +8,7 @@
       <div v-for="price in marketPrices.prices" :key="price.flower" class="flowerPrice"
           :data-bs-toggle="readOnly ? '' : 'modal'" data-bs-target="#marketPriceModal" :role="readOnly ? '' : 'button'"
           @click="openPriceEdit(price.flower, price.price)">
-        <FlowerIcon :flower="price.flower"/>
+        <FlowerIcon :flower="price.flower" class="flowerIcon"/>
         <div class="price buy">$<span class="value">{{price.price}}</span></div>
         <div class="price sell">$<span class="value">{{price.priceSell}}</span></div>
       </div>
@@ -154,10 +154,15 @@ export default defineComponent({
   hr {
     margin: 0.6rem 0;
   }
+  @media (max-width: 600px) {
+    font-size: 0.8rem;
+    width: 110px;
+  }
 }
 .flowerPrice {
   display: flex;
   gap: 0.5rem;
+  align-items: center;
   margin-bottom: 0.25rem;
   .price {
     &.buy {
@@ -170,6 +175,11 @@ export default defineComponent({
       font-weight: bold;
     }
   }
+  @media (max-width: 600px) {
+    .flowerIcon {
+      width: 1.5rem;
+    }
+  }
 }
 .numberInput {
   width: 4rem;
@@ -187,6 +197,9 @@ export default defineComponent({
   }
   .flowerIcon {
     width: 1.5rem;
+    @media (max-width: 600px) {
+      width: 1.3rem;
+    }
   }
 }
 </style>

src/components/scoring/FinalAmounts.vue

@@ -54,11 +54,11 @@
         <td>
           <NumberInput v-model="amount.playerBillboardVP[floor-1]" :max="18"/>
         </td>
-        <td v-for="player in billboardWonSelection" :key="player">
-          <div class="form-check">
+        <td class="wonBy">
+          <div class="form-check" v-for="player in billboardWonSelection" :key="player">
             <label class="form-check-label">
               <input class="form-check-input" type="radio" :name="`billboardWonFloor${floor}`" v-model="amount.billboardsWon[floor-1]" :value="player">
-              {{t(player ? `player.${player}` : 'endOfGameAmounts.billboards.tied')}}
+              <span class="text-nowrap">{{t(player ? `player.${player}` : 'endOfGameAmounts.billboards.tied')}}</span>
             </label>
           </div>
         </td>
@@ -230,4 +230,13 @@ th {
 input[type=text] {
   width: 5rem;
 }
+td.wonBy {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  text-align: left;
+  @media (max-width: 600px) {
+    display: block;
+  }
+}
 </style>

src/locales/en.json

@@ -87,6 +87,7 @@
     "gainXP": "XP: "
   },
   "roundStart": {
+    "title": "{season} Year {year}",
     "harvest": "Harvest your garden."
   },
   "endOfGameAmounts": {
@@ -132,7 +133,7 @@
     "fifthFloor": "Fifth Floor"
   },
   "sideBar": {
-    "year": "Year {year}",
+    "year": "Y{year}",
     "marketPrice": {
       "title": "Market Price",
       "decrease": "Decrease",

src/views/RoundStart.vue

@@ -1,6 +1,6 @@
 <template>
   <SideBar :navigationState="navigationState" :readOnly="true"/>
-  <h1>{{t(`season.${season}`)}} {{t('sideBar.year', {year})}}</h1>
+  <h1>{{t('roundStart.title', {season: t(`season.${season}`), year})}}</h1>
 
   <p class="mt-4 mb-5" v-html="t('roundStart.harvest')"></p>