sim1222/test1
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

chore(client): refactor and style tweaks

Browse Source
This commit is contained in:
syuilo
2022-06-28 15:59:49 +09:00
parent 57bb6e611f
commit 270e1212ac
4 changed files with 250 additions and 358 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
packages/client/src/pages/settings/theme.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="_formRoot">
<div class="_formRoot root">
<div v-adaptive-border class="rfqxtzch _panel _formBlock">
<div class="toggle">
<div class="toggleWrapper">
@ -26,18 +26,8 @@
</div>
</div>
<template v-if="darkMode">
<FormSelect v-model="darkThemeId" class="_formBlock">
<template #label>{{ $ts.themeForDarkMode }}</template>
<template #prefix><i class="fas fa-moon"></i></template>
<optgroup :label="$ts.darkThemes">
<option v-for="x in darkThemes" :key="x.id" :value="x.id">{{ x.name }}</option>
</optgroup>
<optgroup :label="$ts.lightThemes">
<option v-for="x in lightThemes" :key="x.id" :value="x.id">{{ x.name }}</option>
</optgroup>
</FormSelect>
<FormSelect v-model="lightThemeId" class="_formBlock">
<div class="selects _formBlock">
<FormSelect v-model="lightThemeId" large class="select">
<template #label>{{ $ts.themeForLightMode }}</template>
<template #prefix><i class="fas fa-sun"></i></template>
<optgroup :label="$ts.lightThemes">
@ -47,19 +37,7 @@
<option v-for="x in darkThemes" :key="x.id" :value="x.id">{{ x.name }}</option>
</optgroup>
</FormSelect>
</template>
<template v-else>
<FormSelect v-model="lightThemeId" class="_formBlock">
<template #label>{{ $ts.themeForLightMode }}</template>
<template #prefix><i class="fas fa-sun"></i></template>
<optgroup :label="$ts.lightThemes">
<option v-for="x in lightThemes" :key="x.id" :value="x.id">{{ x.name }}</option>
</optgroup>
<optgroup :label="$ts.darkThemes">
<option v-for="x in darkThemes" :key="x.id" :value="x.id">{{ x.name }}</option>
</optgroup>
</FormSelect>
<FormSelect v-model="darkThemeId" class="_formBlock">
<FormSelect v-model="darkThemeId" large class="select">
<template #label>{{ $ts.themeForDarkMode }}</template>
<template #prefix><i class="fas fa-moon"></i></template>
<optgroup :label="$ts.darkThemes">
@ -69,7 +47,7 @@
<option v-for="x in lightThemes" :key="x.id" :value="x.id">{{ x.name }}</option>
</optgroup>
</FormSelect>
</template>
</div>
<FormSection>
<div class="_formLinksGrid">
@ -406,4 +384,17 @@ definePageMetadata({
border-top: solid 0.5px var(--divider);
}
}
.root {
> .selects {
display: flex;
gap: var(--margin);
flex-wrap: wrap;
> .select {
flex: 1;
min-width: 280px;
}
}
}
</style>