Skip to content

Commit e4739df

Browse files
antfuantfu
committed
feat: improve RWD
1 parent 03d4d77 commit e4739df

File tree

7 files changed

+92
-64
lines changed

7 files changed

+92
-64
lines changed

‎app/app.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ await ensureDataFetch()
4141
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>.
4242
</div>
4343
</div>
44-
<div v-else px14 py10>
44+
<div v-else px4 py6 lg:px14 lg:py10>
4545
<NavBar />
4646
<NuxtPage />
4747
</div>

‎app/components/ConfigItem.vue

Lines changed: 42 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -44,47 +44,51 @@ const extraConfigs = computed(() => {
4444
@toggle="open = $event.target.open"
4545
>
4646
<summary block>
47-
<div class="absolute right-[calc(100%+10px)] top-1.5" text-right font-mono op35>
47+
<div class="absolute right-[calc(100%+10px)] top-1.5" text-right font-mono op35 lt-lg:hidden>
4848
#{{ index + 1 }}
4949
</div>
50-
<div flex="~ gap-2 items-start wrap" cursor-pointer select-none bg-hover px2 py2 text-sm font-mono>
50+
<div flex="~ gap-2 items-start wrap items-center" cursor-pointer select-none bg-hover px2 py2 text-sm font-mono>
5151
<div i-ph-caret-right class="[details[open]_&]:rotate-90" transition op50 />
52-
<span :class="config.name ? '' : 'op50 italic'" flex-auto>
53-
<ColorizedConfigName v-if="config.name" :name="config.name" />
54-
<span v-else>anonymous #{{ index + 1 }}</span>
55-
</span>
52+
<div flex flex-col gap-3 md:flex-row flex-auto>
53+
<span :class="config.name ? '' : 'op50 italic'" flex-auto>
54+
<ColorizedConfigName v-if="config.name" :name="config.name" />
55+
<span v-else>anonymous #{{ index + 1 }}</span>
56+
</span>
5657

57-
<SummarizeItem
58-
icon="i-ph-file-magnifying-glass-duotone"
59-
:number="config.files?.length || 0"
60-
color="text-yellow5"
61-
title="Files"
62-
/>
63-
<SummarizeItem
64-
icon="i-ph-eye-closed-duotone"
65-
:number="config.ignores?.length || 0"
66-
color="text-purple5 dark:text-purple4"
67-
title="Ignores"
68-
/>
69-
<SummarizeItem
70-
icon="i-ph-sliders-duotone"
71-
:number="Object.keys(extraConfigs).length"
72-
color="text-green5"
73-
title="Options"
74-
/>
75-
<SummarizeItem
76-
icon="i-ph-plug-duotone"
77-
:number="Object.keys(config.plugins || {}).length"
78-
color="text-teal5"
79-
title="Plugins"
80-
/>
81-
<SummarizeItem
82-
icon="i-ph-list-dashes-duotone"
83-
:number="Object.keys(config.rules || {}).length"
84-
color="text-blue5 dark:text-blue4"
85-
title="Rules"
86-
mr-2
87-
/>
58+
<div flex="~ gap-2 items-start wrap">
59+
<SummarizeItem
60+
icon="i-ph-file-magnifying-glass-duotone"
61+
:number="config.files?.length || 0"
62+
color="text-yellow5"
63+
title="Files"
64+
/>
65+
<SummarizeItem
66+
icon="i-ph-eye-closed-duotone"
67+
:number="config.ignores?.length || 0"
68+
color="text-purple5 dark:text-purple4"
69+
title="Ignores"
70+
/>
71+
<SummarizeItem
72+
icon="i-ph-sliders-duotone"
73+
:number="Object.keys(extraConfigs).length"
74+
color="text-green5"
75+
title="Options"
76+
/>
77+
<SummarizeItem
78+
icon="i-ph-plug-duotone"
79+
:number="Object.keys(config.plugins || {}).length"
80+
color="text-teal5"
81+
title="Plugins"
82+
/>
83+
<SummarizeItem
84+
icon="i-ph-list-dashes-duotone"
85+
:number="Object.keys(config.rules || {}).length"
86+
color="text-blue5 dark:text-blue4"
87+
title="Rules"
88+
mr-2
89+
/>
90+
</div>
91+
</div>
8892
</div>
8993
</summary>
9094

@@ -144,7 +148,7 @@ const extraConfigs = computed(() => {
144148
</div>
145149
<RuleList
146150
py2
147-
:class="stateStorage.viewType === 'grid' ? 'pl6' : ''"
151+
:class="isGridView ? 'pl6' : ''"
148152
:rules="config.rules"
149153
:filter="name => !filters?.rule || filters.rule === name"
150154
:get-bind="(name: string) => ({ class: getRuleLevel(config.rules?.[name]) === 'off' ? 'op50' : '' })"

‎app/components/NavBar.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,7 @@ function toggleRuleView() {
7676
/>
7777
<button
7878
title="Toggle Rule View"
79+
lt-md:hidden
7980
:class="stateStorage.viewType === 'list' ? 'i-ph-list-duotone' : 'i-ph-grid-four-duotone'"
8081
text-xl op50 hover:op75
8182
@click="toggleRuleView()"

‎app/components/RuleList.vue

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<script setup lang="ts">
2+
import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
23
import { Fragment, computed, defineComponent, h } from 'vue'
34
import type { Linter } from 'eslint'
45
import { getRuleFromName, payload } from '~/composables/payload'
@@ -24,22 +25,22 @@ const getValue = function (name: string) {
2425
}
2526
2627
const containerClass = computed(() => {
27-
if (stateStorage.value.viewType === 'list') {
28+
if (isGridView.value) {
29+
return 'grid grid-cols-[repeat(auto-fill,minmax(min(100%,350px),1fr))] gap-2'
30+
}
31+
else {
2832
if (Array.isArray(props.rules))
2933
return 'grid grid-cols-[max-content_max-content_max-content_1fr] gap-x-2 gap-y-2 items-center'
3034
else
3135
return 'grid grid-cols-[max-content_max-content_max-content_1fr] gap-x-2 gap-y-2 items-center'
3236
}
33-
else {
34-
return 'grid grid-cols-[repeat(auto-fill,minmax(min(100%,350px),1fr))] gap-2'
35-
}
3637
})
3738
3839
const Wrapper = defineComponent({
3940
setup(_, { slots }) {
40-
return () => stateStorage.value.viewType === 'list'
41-
? h(Fragment, slots.default?.())
42-
: 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?.())
41+
return () => isGridView.value
42+
? 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?.())
43+
: h(Fragment, slots.default?.())
4344
},
4445
})
4546
</script>
@@ -54,7 +55,7 @@ const Wrapper = defineComponent({
5455
<RuleItem
5556
:rule="getRule(name)!"
5657
:rule-states="Array.isArray(rules) ? payload.ruleStateMap.get(name) || [] : undefined"
57-
:grid-view="stateStorage.viewType === 'grid'"
58+
:grid-view="isGridView"
5859
:value="getValue(name)"
5960
v-bind="getBind?.(name)"
6061
>

‎app/composables/state.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { breakpointsTailwind } from '@vueuse/core'
12
import type { FiltersConfigsPage } from '~~/types'
23

34
export const filtersConfigs = reactive<FiltersConfigsPage>({
@@ -22,3 +23,8 @@ export const stateStorage = useLocalStorage(
2223
},
2324
{ mergeDefaults: true },
2425
)
26+
27+
const bp = useBreakpoints(breakpointsTailwind)
28+
const bpSm = bp.smallerOrEqual('md')
29+
30+
export const isGridView = computed(() => bpSm.value || stateStorage.value.viewType === 'grid')

‎package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@
4646
"ws": "^8.16.0"
4747
},
4848
"devDependencies": {
49-
"@antfu/eslint-config": "^2.12.0",
49+
"@antfu/eslint-config": "^2.12.1",
5050
"@eslint/js": "^8.57.0",
5151
"@iconify-json/carbon": "^1.1.31",
5252
"@iconify-json/ph": "^1.1.11",
@@ -63,7 +63,7 @@
6363
"fuse.js": "^7.0.0",
6464
"nuxt": "^3.11.1",
6565
"nuxt-eslint-auto-explicit-import": "^0.0.2",
66-
"nuxt-shiki": "^0.2.1",
66+
"nuxt-shiki": "^0.3.0",
6767
"typescript": "^5.4.3",
6868
"unbuild": "^2.0.0",
6969
"vue-tsc": "^2.0.7"

‎pnpm-lock.yaml

Lines changed: 31 additions & 15 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)