Merge pull request #620 from osushi-academy/nagata/ui/room_create_res…

…ponsive ルーム作成画面のレスポンシブ
osushi-academy · Jan 18, 2022 · bc54a60 · bc54a60
2 parents 88164ad + b5c7389
commit bc54a60
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 12 deletions.
diff --git a/app/front/assets/scss/home/home.scss b/app/front/assets/scss/home/home.scss
@@ -126,28 +126,28 @@
       display: grid;
       margin: 1rem 0;
       grid-template-columns: auto 1fr;
+      align-items: center;
       &__index {
         grid-column: 1;
         margin: 0 0.5rem 0 0;
         &--element {
-          margin: 0.2rem 0 0.9em 0;
-          padding: 0.5rem 0;
+          margin: 0 0 0.5rem 0;
+          padding: 0.55rem 0;
         }
       }
       &__list {
         grid-column: 2;
         &--element {
           display: flex;
           align-items: center;
-          width: 85%;
           margin: 0 0 0.5rem 0;
           &--input {
             display: flex;
             flex: 1;
             margin: 0 0.5rem 0 0;
             padding: 0 !important;
-            @include white-text-box($expand: "true");
             input {
+              width: 100%;
               border: none;
               flex: 1;
               padding: 0;
@@ -158,7 +158,7 @@
             }
           }
           &--remove {
-            margin: 0.2rem;
+            margin: 0.2rem 0;
             @include material-icon-button(
               $size: "sm",
               $color: #f07b7b,
@@ -171,6 +171,7 @@
             }
           }
           &--sort {
+            margin: 0;
             cursor: grab !important;
             @include material-icon-button;
             &--dragging {

diff --git a/app/front/assets/scss/home/variables.scss b/app/front/assets/scss/home/variables.scss
@@ -88,8 +88,8 @@
   $color: $text-gray,
   $border: "none"
 ) {
-  width: 36px;
-  height: 36px;
+  width: 24px;
+  height: 24px;
   display: inline-flex;
   align-items: center;
   justify-content: center;

diff --git a/app/front/components/Home/Modal.vue b/app/front/components/Home/Modal.vue
@@ -40,7 +40,7 @@ export default Vue.extend({
   computed: {
     width() {
       if (DeviceStore.device === "smartphone") {
-        return "100%"
+        return "90%"
       } else {
         return "50%"
       }

diff --git a/app/front/pages/room/create.vue b/app/front/pages/room/create.vue
@@ -74,21 +74,23 @@
                   />
                   <button
                     type="button"
-                    class="home-create__room__sessions__list--element--remove"
                     :disabled="!canDeleteSessionInput"
                     @click="removeSession(idx)"
                   >
-                    <MinusCircleIcon size="1.2x"></MinusCircleIcon>
+                    <MinusCircleIcon
+                      class="home-create__room__sessions__list--element--remove"
+                    ></MinusCircleIcon>
                   </button>
                 </form>
                 <button
-                  class="home-create__room__sessions__list--element--sort"
                   :class="{
                     'home-create__room__sessions__list--element--sort--dragging':
                       isDragging === true,
                   }"
                 >
-                  <MenuIcon size="1.2x"></MenuIcon>
+                  <MenuIcon
+                    class="home-create__room__sessions__list--element--sort"
+                  ></MenuIcon>
                 </button>
               </div>
             </transition-group>