Improve docs for mobile

nathanreyes · Apr 2, 2023 · 5cec695 · 5cec695
1 parent cc6fd4c
commit 5cec695
Show file tree

Hide file tree

Showing 8 changed files with 31 additions and 38 deletions.
diff --git a/docs/.vitepress/components/base/BaseField.vue b/docs/.vitepress/components/base/BaseField.vue
@@ -1,5 +1,7 @@
 <template>
-  <div class="flex items-center space-x-2 text-sm font-semibold">
+  <div
+    class="flex flex-col space-y-2 sm:flex-row sm:items-center sm:space-x-2 sm:space-y-0 text-sm font-semibold"
+  >
     <span
       class="flex-shrink-0 text-gray-500 dark:text-gray-400 tracking-wide"
       >{{ label }}</span

diff --git a/docs/.vitepress/components/base/BasePicker.vue b/docs/.vitepress/components/base/BasePicker.vue
@@ -1,6 +1,6 @@
 <template>
   <BaseField>
-    <div class="flex items-center space-x-3">
+    <div class="flex flex-col sm:flex-row sm:items-center sm:space-x-3">
       <div
         class="flex space-x-2 hover:cursor-pointer text-sm font-medium hover:text-gray-500"
         v-for="option in opts"
@@ -14,7 +14,7 @@
           class="hover:cursor-pointer"
           @click.stop
         />
-        <label :for="option.id" class="hover:cursor-pointer">
+        <label :for="option.id" class="hover:cursor-pointer whitespace-nowrap">
           {{ option.label }}
         </label>
       </div>

diff --git a/docs/.vitepress/components/base/BaseSwitch.vue b/docs/.vitepress/components/base/BaseSwitch.vue
@@ -1,25 +1,23 @@
 <template>
-  <div class="flex justify-center">
-    <div class="form-check form-switch">
-      <label class="relative inline-flex items-center cursor-pointer">
-        <input type="checkbox" v-model="value" class="sr-only peer" />
-        <div
-          :class="`w-11 h-6 bg-gray-200 peer-focus:outline-none
+  <div class="form-check form-switch">
+    <label class="relative inline-flex items-center cursor-pointer">
+      <input type="checkbox" v-model="value" 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`"
-        />
-        <span
-          v-if="label"
-          class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300"
-          >{{ label }}</span
-        >
-      </label>
-    </div>
+      />
+      <span
+        v-if="label"
+        class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300"
+        >{{ label }}</span
+      >
+    </label>
   </div>
 </template>
 

diff --git a/docs/.vitepress/components/calendar/CalendarReminders.vue b/docs/.vitepress/components/calendar/CalendarReminders.vue
@@ -10,7 +10,7 @@
     borderless
     expanded
   />
-  <div v-if="calendar" class="py-4 px-6 w-full h-[18rem]">
+  <div v-if="calendar" class="py-4 px-6 w-full h-[18rem] overflow-y-auto">
     <div class="py-4 flex justify-between items-center">
       <h2 class="font-semibold text-lg">Reminders</h2>
       <IconBell class="text-gray-400 dark:text-gray-500" />
@@ -38,8 +38,11 @@
                   {{ day.locale.formatDate(cell.startDate, 'WWWW, H:mm a') }}
                 </p>
               </div>
-              <BaseSwitch v-model="cell.data.customData.notify" />
             </div>
+            <BaseSwitch
+              v-model="cell.data.customData.notify"
+              class="self-start mt-1"
+            />
           </div>
         </li>
       </ul>

diff --git a/docs/.vitepress/components/calendar/ThemeColors.vue b/docs/.vitepress/components/calendar/ThemeColors.vue
@@ -1,18 +1,8 @@
 <template>
   <div class="space-y-2">
-    <div class="flex justify-center space-x-1">
+    <div class="grid grid-cols-2 sm:grid-cols-5 gap-2">
       <button
-        v-for="color in colors_1"
-        :key="color.value"
-        :class="colorClass(color)"
-        @click="selectedColor = color"
-      >
-        {{ color.label }}
-      </button>
-    </div>
-    <div class="flex justify-center space-x-1">
-      <button
-        v-for="color in colors_2"
+        v-for="color in colors"
         :key="color.value"
         :class="colorClass(color)"
         @click="selectedColor = color"
@@ -129,8 +119,6 @@ const colors = ref([
   },
 ]);
 const selectedColor = ref(colors.value.find(c => c.value === 'blue'));
-const colors_1 = colors.value.slice(0, 5);
-const colors_2 = colors.value.slice(5, 10);
 const isDark = ref(props.showDarkMode ? false : undefined);
 
 const attrs = ref([

diff --git a/docs/.vitepress/components/datepicker/DateDisplay.vue b/docs/.vitepress/components/datepicker/DateDisplay.vue
@@ -14,7 +14,9 @@
       <template v-else>
         <BaseField v-if="value == null" label="Date Value"> null </BaseField>
         <template v-else>
-          <div class="flex space-x-4">
+          <div
+            class="flex flex-col space-y-2 sm:flex-row sm:space-x-4 sm:space-y-0"
+          >
             <BaseField label="Start:"
               >{{ dateRaw(value.start) }}
               <span v-if="dateType(value.start)"

diff --git a/docs/.vitepress/components/icons/IconArrowRight.vue b/docs/.vitepress/components/icons/IconArrowRight.vue
@@ -1,6 +1,6 @@
 <template>
   <svg
-    class="text-gray-400 dark:text-gray-500 w-4 h-4 mx-2"
+    class="w-4 h-4 mx-2"
     fill="none"
     viewBox="0 0 24 24"
     stroke="currentColor"

diff --git a/docs/index.md b/docs/index.md
@@ -10,14 +10,14 @@ Version 3 brings a host of feature improvements and bug fixes, including [weekly
 
 If upgrading from version 2.0, be sure to view the [upgrade guide](/getting-started/upgrade-guide) for breaking changes.
 
-<div class="flex space-x-4 not-prose">
+<div class="flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0 not-prose">
   <BaseButton url="/getting-started/installation">
     <span>Get Started</span>
-    <IconArrowRight class="w-4 h-4 text-accent-500 dark:text-gray-200" />
+    <IconArrowRight class="w-4 h-4 text-accent-200" />
   </BaseButton>
   <BaseButton url="https://v2.vcalendar.io" light>
     View 2.0 Documentation
-    <IconArrowRight class="w-4 h-4 text-accent-600" />
+    <IconArrowRight class="w-4 h-4 text-accent-400" />
   </BaseButton>
 </div>