Reduce the number of column in the waves on mobile

V-Paranoiaque · Apr 28, 2024 · 2f3d9ef · 2f3d9ef
1 parent 7a544e1
commit 2f3d9ef
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 6 deletions.
diff --git a/CHANGELOG/CHANGELOG-2.0.md b/CHANGELOG/CHANGELOG-2.0.md
@@ -67,3 +67,4 @@
 * Fix alliance members display on mobile
 * Fix bugs when pausing or returning
 * Improve the popup to signal messages
+* Reduce the number of column in the waves on mobile
diff --git a/src/app/strategies/strategies.component.html b/src/app/strategies/strategies.component.html
@@ -72,7 +72,7 @@
                         : 0)
                   ) {
                     <div
-                      class="col-3 col-md-2 d-flex flex-column align-self-start"
+                      class="col-4 col-sm-3 col-md-2 d-flex flex-column align-self-start"
                       role="button"
                       id="{{ army.code }}-0-{{
                         user.getPropertyNb(army.code) -
@@ -129,7 +129,7 @@ <h3>{{ 'Wave { value }' | translate: { value: i } }}</h3>
                             id="{{ army.code }}-{{ i }}-{{
                               getWaveUnit(wave, army.code)
                             }}"
-                            class="col-3 col-md-2 d-flex flex-column align-self-start"
+                            class="col-4 col-sm-3 col-md-2 d-flex flex-column align-self-start"
                             cdkDrag>
                             <div class="mt-auto m-1-xs m-4-md text-center">
                               <app-ew-icon
@@ -334,7 +334,7 @@ <h3>{{ 'Wave { value }' | translate: { value: 1 } }}</h3>
                         : 0)
                   ) {
                     <div
-                      class="col-3 col-md-2 d-flex flex-column align-self-start"
+                      class="col-4 col-sm-3 col-md-2 d-flex flex-column align-self-start"
                       role="button"
                       id="{{ army.code }}-0-{{
                         user.getPropertyNb(army.code) -
@@ -382,7 +382,7 @@ <h3>{{ 'Wave { value }' | translate: { value: 1 } }}</h3>
                         : 0)
                   ) {
                     <div
-                      class="col-3 col-md-2 d-flex flex-column align-self-start"
+                      class="col-4 col-sm-3 col-md-2 d-flex flex-column align-self-start"
                       role="button"
                       id="{{ building.code }}-0-{{
                         user.getPropertyNb(building.code) -
@@ -439,7 +439,7 @@ <h3>{{ 'Wave { value }' | translate: { value: i } }}</h3>
                             id="{{ army.code }}-{{ i }}-{{
                               getWaveUnit(wave, army.code)
                             }}"
-                            class="col-3 col-md-2 d-flex flex-column align-self-start"
+                            class="col-4 col-sm-3 col-md-2 d-flex flex-column align-self-start"
                             cdkDrag>
                             <div class="mt-auto m-1-xs m-4-md text-center">
                               <app-ew-icon
@@ -516,7 +516,7 @@ <h3>{{ 'Wave { value }' | translate: { value: i } }}</h3>
                             id="{{ building.code }}-{{ i }}-{{
                               getWaveUnit(wave, building.code)
                             }}"
-                            class="col-3 col-md-2 d-flex flex-column align-self-start"
+                            class="col-4 col-sm-3 col-md-2 d-flex flex-column align-self-start"
                             cdkDrag>
                             <div class="mt-auto m-1-xs m-4-md text-center">
                               <app-ew-icon