improve responsive behavior

brdgm · Nov 19, 2023 · 9b42527 · 9b42527
1 parent dbb8f83
commit 9b42527
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 11 deletions.
diff --git a/src/components/round/TimelineSelection.vue b/src/components/round/TimelineSelection.vue
@@ -137,7 +137,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-$breakpoint: 800px;
+$breakpoint-small: 800px;
+$breakpoint-xsmall: 500px;
 .action {
   display: flex;
   align-items: center;
@@ -150,19 +151,28 @@ $breakpoint: 800px;
     &.btn-outline-primary:not(:hover) {
       background-color: #fff;
     }
-    @media (max-width: $breakpoint) {
+    @media (max-width: $breakpoint-small) {
       width: 55px;
       height: 55px;
       margin-right: 10px;
     }
+    @media (max-width: $breakpoint-xsmall) {
+      width: 50px;
+      height: 50px;
+      margin-right: 8px;
+      margin-bottom: 5px;
+    }
   }
   .actionIcon {
     width: 60px;
-    @media (max-width: $breakpoint) {
+    @media (max-width: $breakpoint-small) {
       width: 30px;
     }
+    @media (max-width: $breakpoint-xsmall) {
+      width: 25px;
+    }
   }
-  @media (max-width: $breakpoint) {
+  @media (max-width: $breakpoint-small) {
     margin-bottom: 15px;
   }
 }
@@ -174,7 +184,7 @@ $breakpoint: 800px;
   color: #e86720;
   font-size: 30px;
   font-weight: bold;
-  @media (max-width: $breakpoint) {
+  @media (max-width: $breakpoint-small) {
     display: none;
   }
 }
@@ -196,9 +206,12 @@ $breakpoint: 800px;
     &:nth-child(2) {
       margin-left: -15px;
       z-index: 40;
-      @media (max-width: $breakpoint) {
+      @media (max-width: $breakpoint-small) {
         margin-left: -40px;
       }
+      @media (max-width: $breakpoint-xsmall) {
+        margin-left: -30px;
+      }
     }
     &.selectable {
       cursor: pointer;
@@ -211,15 +224,24 @@ $breakpoint: 800px;
       opacity: 25%;
       filter: none;
     }
-    @media (max-width: $breakpoint) {
+    @media (max-width: $breakpoint-small) {
       width: 60px;
       height: 60px;
       margin-right: 12px;
       margin-bottom: 10px;
     }
+    @media (max-width: $breakpoint-xsmall) {
+      width: 40px;
+      height: 40px;
+      margin-right: 12px;
+      margin-bottom: 10px;
+    }
   }
   .eventIcon {
-    width: 35px;    
+    width: 35px;
+    @media (max-width: $breakpoint-xsmall) {
+      width: 25px;
+    }
   }
   .income .eventIcon {
     margin-top: 8px;
@@ -234,9 +256,13 @@ $breakpoint: 800px;
     color: #fff;
     text-align: center;
     margin-top: 4px;
-    @media (max-width: $breakpoint) {
+    @media (max-width: $breakpoint-small) {
       min-width: 55px;
     }
+    @media (max-width: $breakpoint-xsmall) {
+      min-width: 40px;
+      font-size: 9px;
+    }
   }
 }
 </style>
diff --git a/src/components/structure/DepartmentShop.vue b/src/components/structure/DepartmentShop.vue
@@ -1,5 +1,5 @@
 <template>
-  <ModalDialog :id="id" :title="t('departmentShop.title')" :size-xl="true" :scrollable="true" :centered="false">
+  <ModalDialog :id="id" :title="t('departmentShop.title')" :size-xl="true" :scrollable="true" :centered="false" :fullscreen-lg-down="true">
     <template #body>
 
       <ul class="nav nav-tabs">
@@ -21,7 +21,7 @@
         <div v-if="selectedDepartment" class="p-4">
           <div class="alert alert-warning" role="alert" v-if="isDepartmentSelectionPossible && isDuplicateDepartment" v-html="t('departmentShop.duplicateDepartmentWarning')"></div>
           <div class="alert alert-warning" role="alert" v-if="isDepartmentSelectionPossible && isNotPlayerReserveWhichIsNotEmpty" v-html="t('departmentShop.playerReserveWarning')"></div>
-          <div class="department float-md-start ms-3 me-4 mb-3">
+          <div class="department float-md-start ms-3 me-4 mb-3 single">
             <AppIcon type="department" :name="selectedDepartment.department.id" extension="jpg"
                     class="icon single"
                     :title="t(`department.${selectedDepartment.department.id}.title`)"
@@ -178,6 +178,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+$breakpoint: 550px;
 .departmentContent {
   min-height: 300px;
 }
@@ -189,6 +190,14 @@ export default defineComponent({
   display: inline-block;
   height: 140px;
   width: 180px;
+  @media (max-width: $breakpoint) {
+    height: 93px;
+    width: 120px;
+    &.single {
+      height: 140px;
+      width: 180px;
+    }
+  }
   .icon {
     position: absolute;
     left: 5px;
@@ -198,6 +207,12 @@ export default defineComponent({
     border: 1px solid #888;
     filter: drop-shadow(#333 3px 3px 3px);
     cursor: pointer;
+    @media (max-width: $breakpoint) {
+      height: 86px;
+      &.single {
+        height: 130px;
+      }
+    }
     &.double:nth-child(1) {
       position: absolute;
       left: 10px;