feat: improve RWD

eslint · Apr 4, 2024 · e4739df · e4739df
1 parent 03d4d77
commit e4739df
Show file tree

Hide file tree

Showing 7 changed files with 92 additions and 64 deletions.
diff --git a/app/app.vue b/app/app.vue
@@ -41,7 +41,7 @@ await ensureDataFetch()
       only works with the <a href="https://eslint.org/docs/latest/use/configure/configuration-files-new" target="_blank" font-bold hover:underline>flat config format</a>.
     </div>
   </div>
-  <div v-else px14 py10>
+  <div v-else px4 py6 lg:px14 lg:py10>
     <NavBar />
     <NuxtPage />
   </div>

diff --git a/app/components/ConfigItem.vue b/app/components/ConfigItem.vue
@@ -44,47 +44,51 @@ const extraConfigs = computed(() => {
     @toggle="open = $event.target.open"
   >
     <summary block>
-      <div class="absolute right-[calc(100%+10px)] top-1.5" text-right font-mono op35>
+      <div class="absolute right-[calc(100%+10px)] top-1.5" text-right font-mono op35 lt-lg:hidden>
         #{{ index + 1 }}
       </div>
-      <div flex="~ gap-2 items-start wrap" cursor-pointer select-none bg-hover px2 py2 text-sm font-mono>
+      <div flex="~ gap-2 items-start wrap items-center" cursor-pointer select-none bg-hover px2 py2 text-sm font-mono>
         <div i-ph-caret-right class="[details[open]_&]:rotate-90" transition op50 />
-        <span :class="config.name ? '' : 'op50 italic'" flex-auto>
-          <ColorizedConfigName v-if="config.name" :name="config.name" />
-          <span v-else>anonymous #{{ index + 1 }}</span>
-        </span>
+        <div flex flex-col gap-3 md:flex-row flex-auto>
+          <span :class="config.name ? '' : 'op50 italic'" flex-auto>
+            <ColorizedConfigName v-if="config.name" :name="config.name" />
+            <span v-else>anonymous #{{ index + 1 }}</span>
+          </span>
 
-        <SummarizeItem
-          icon="i-ph-file-magnifying-glass-duotone"
-          :number="config.files?.length || 0"
-          color="text-yellow5"
-          title="Files"
-        />
-        <SummarizeItem
-          icon="i-ph-eye-closed-duotone"
-          :number="config.ignores?.length || 0"
-          color="text-purple5 dark:text-purple4"
-          title="Ignores"
-        />
-        <SummarizeItem
-          icon="i-ph-sliders-duotone"
-          :number="Object.keys(extraConfigs).length"
-          color="text-green5"
-          title="Options"
-        />
-        <SummarizeItem
-          icon="i-ph-plug-duotone"
-          :number="Object.keys(config.plugins || {}).length"
-          color="text-teal5"
-          title="Plugins"
-        />
-        <SummarizeItem
-          icon="i-ph-list-dashes-duotone"
-          :number="Object.keys(config.rules || {}).length"
-          color="text-blue5 dark:text-blue4"
-          title="Rules"
-          mr-2
-        />
+          <div flex="~ gap-2 items-start wrap">
+            <SummarizeItem
+              icon="i-ph-file-magnifying-glass-duotone"
+              :number="config.files?.length || 0"
+              color="text-yellow5"
+              title="Files"
+            />
+            <SummarizeItem
+              icon="i-ph-eye-closed-duotone"
+              :number="config.ignores?.length || 0"
+              color="text-purple5 dark:text-purple4"
+              title="Ignores"
+            />
+            <SummarizeItem
+              icon="i-ph-sliders-duotone"
+              :number="Object.keys(extraConfigs).length"
+              color="text-green5"
+              title="Options"
+            />
+            <SummarizeItem
+              icon="i-ph-plug-duotone"
+              :number="Object.keys(config.plugins || {}).length"
+              color="text-teal5"
+              title="Plugins"
+            />
+            <SummarizeItem
+              icon="i-ph-list-dashes-duotone"
+              :number="Object.keys(config.rules || {}).length"
+              color="text-blue5 dark:text-blue4"
+              title="Rules"
+              mr-2
+            />
+          </div>
+        </div>
       </div>
     </summary>
 
@@ -144,7 +148,7 @@ const extraConfigs = computed(() => {
         </div>
         <RuleList
           py2
-          :class="stateStorage.viewType === 'grid' ? 'pl6' : ''"
+          :class="isGridView ? 'pl6' : ''"
           :rules="config.rules"
           :filter="name => !filters?.rule || filters.rule === name"
           :get-bind="(name: string) => ({ class: getRuleLevel(config.rules?.[name]) === 'off' ? 'op50' : '' })"

diff --git a/app/components/NavBar.vue b/app/components/NavBar.vue
@@ -76,6 +76,7 @@ function toggleRuleView() {
     />
     <button
       title="Toggle Rule View"
+      lt-md:hidden
       :class="stateStorage.viewType === 'list' ? 'i-ph-list-duotone' : 'i-ph-grid-four-duotone'"
       text-xl op50 hover:op75
       @click="toggleRuleView()"

diff --git a/app/components/RuleList.vue b/app/components/RuleList.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
 import { Fragment, computed, defineComponent, h } from 'vue'
 import type { Linter } from 'eslint'
 import { getRuleFromName, payload } from '~/composables/payload'
@@ -24,22 +25,22 @@ const getValue = function (name: string) {
 }
 
 const containerClass = computed(() => {
-  if (stateStorage.value.viewType === 'list') {
+  if (isGridView.value) {
+    return 'grid grid-cols-[repeat(auto-fill,minmax(min(100%,350px),1fr))] gap-2'
+  }
+  else {
     if (Array.isArray(props.rules))
       return 'grid grid-cols-[max-content_max-content_max-content_1fr] gap-x-2 gap-y-2 items-center'
     else
       return 'grid grid-cols-[max-content_max-content_max-content_1fr] gap-x-2 gap-y-2 items-center'
   }
-  else {
-    return 'grid grid-cols-[repeat(auto-fill,minmax(min(100%,350px),1fr))] gap-2'
-  }
 })
 
 const Wrapper = defineComponent({
   setup(_, { slots }) {
-    return () => stateStorage.value.viewType === 'list'
-      ? h(Fragment, slots.default?.())
-      : h('div', { class: 'relative border border-base max-w-full rounded-lg p4 py3 flex flex-col gap-2 of-hidden justify-start' }, slots.default?.())
+    return () => isGridView.value
+      ? h('div', { class: 'relative border border-base max-w-full rounded-lg p4 py3 flex flex-col gap-2 of-hidden justify-start' }, slots.default?.())
+      : h(Fragment, slots.default?.())
   },
 })
 </script>
@@ -54,7 +55,7 @@ const Wrapper = defineComponent({
         <RuleItem
           :rule="getRule(name)!"
           :rule-states="Array.isArray(rules) ? payload.ruleStateMap.get(name) || [] : undefined"
-          :grid-view="stateStorage.viewType === 'grid'"
+          :grid-view="isGridView"
           :value="getValue(name)"
           v-bind="getBind?.(name)"
         >

diff --git a/app/composables/state.ts b/app/composables/state.ts
@@ -1,3 +1,4 @@
+import { breakpointsTailwind } from '@vueuse/core'
 import type { FiltersConfigsPage } from '~~/types'
 
 export const filtersConfigs = reactive<FiltersConfigsPage>({
@@ -22,3 +23,8 @@ export const stateStorage = useLocalStorage(
   },
   { mergeDefaults: true },
 )
+
+const bp = useBreakpoints(breakpointsTailwind)
+const bpSm = bp.smallerOrEqual('md')
+
+export const isGridView = computed(() => bpSm.value || stateStorage.value.viewType === 'grid')
diff --git a/package.json b/package.json
@@ -46,7 +46,7 @@
     "ws": "^8.16.0"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^2.12.0",
+    "@antfu/eslint-config": "^2.12.1",
     "@eslint/js": "^8.57.0",
     "@iconify-json/carbon": "^1.1.31",
     "@iconify-json/ph": "^1.1.11",
@@ -63,7 +63,7 @@
     "fuse.js": "^7.0.0",
     "nuxt": "^3.11.1",
     "nuxt-eslint-auto-explicit-import": "^0.0.2",
-    "nuxt-shiki": "^0.2.1",
+    "nuxt-shiki": "^0.3.0",
     "typescript": "^5.4.3",
     "unbuild": "^2.0.0",
     "vue-tsc": "^2.0.7"

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml