トグルボタンのレイアウト修正 (#169)

Co-authored-by: sayako21 <>
teritamas · Nov 23, 2023 · a21a26d · a21a26d
1 parent 9038022
commit a21a26d
Showing 1 changed file with 14 additions and 11 deletions.
diff --git a/pages/create.vue b/pages/create.vue
@@ -95,19 +95,22 @@
       </div>
 
       <!-- 公開ビンゴカードとするか -->
-      <label class="relative inline-flex items-center cursor-pointer mb-3 m">
-        <input type="checkbox" v-model="form.isPublic" class="sr-only peer" />
-        <div
-          class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"
-        ></div>
-        <span class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300"
-          >パブリックモード（ビンゴカードを公開する）</span
-        >
-      </label>
-
+      <div class="mb-5">
+        <label class="relative inline-flex items-center cursor-pointer">
+          <input type="checkbox" v-model="form.isPublic" class="sr-only peer" />
+          <div
+            class="w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"
+          ></div>
+          <span
+            class="ms-3 text-sm font-medium text-gray-900 dark:text-gray-300"
+            >パブリックモード</span
+          >
+        </label>
+        <small class="block">※ビンゴカードを公開する</small>
+      </div>
       <div class="flex justify-between">
         <router-link
-          class="text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2"
+          class="text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-5 py-2.5 mr-2"
           to="/"
         >
           戻る