remanso-space/remanso
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: reorganize FontChange layout and resize header icons

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Julien Calixte
2026-03-28 20:37:58 +01:00
parent 982f3070a1
commit ac68c68f8a
3 changed files with 60 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
src/components/FontChange.vue
View File

@@ -16,54 +16,63 @@ const fontSizes = Array.from({ length: 7 }, (_, i) => `${9 + i * 2}pt`)
<template>
<div class="font-change" v-if="sortedFontFamilies.length > 0">
<theme-swap />
<div>
<label for="title-font" class="font-label">t</label>
<select
id="title-font"
class="select"
:value="store.userSettings?.chosenTitleFont"
@change="store.setTitleFont(($event.target as HTMLSelectElement).value)"
>
<option v-for="font in sortedFontFamilies" :key="font" :value="font">
{{ font }}
</option>
</select>
<label class="font-label">t</label>
<select
class="select"
:value="store.userSettings?.chosenTitleFont"
@change="store.setTitleFont(($event.target as HTMLSelectElement).value)"
>
<option v-for="font in sortedFontFamilies" :key="font" :value="font">
{{ font }}
</option>
</select>
<label for="body-font" class="font-label">p</label>
<select
id="body-font"
class="select"
:value="store.userSettings?.chosenBodyFont"
@change="store.setBodyFont(($event.target as HTMLSelectElement).value)"
>
<option v-for="font in sortedFontFamilies" :key="font" :value="font">
{{ font }}
</option>
</select>
</div>
<div>
<theme-swap />
<label class="font-label">p</label>
<select
class="select"
:value="store.userSettings?.chosenBodyFont"
@change="store.setBodyFont(($event.target as HTMLSelectElement).value)"
>
<option v-for="font in sortedFontFamilies" :key="font" :value="font">
{{ font }}
</option>
</select>
<select
class="select"
:value="store.userSettings?.chosenFontSize"
@change="store.setFontSize(($event.target as HTMLSelectElement).value)"
>
<option v-for="size in fontSizes" :key="size" :value="size">
{{ size }}
</option>
</select>
<label for="font-size" class="font-label">s</label>
<select
id="font-size"
class="select"
:value="store.userSettings?.chosenFontSize"
@change="store.setFontSize(($event.target as HTMLSelectElement).value)"
>
<option v-for="size in fontSizes" :key="size" :value="size">
{{ size }}
</option>
</select>
</div>
</div>
</template>
<style lang="scss" scoped>
.font-change {
flex: 1;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1rem;
select {
flex: 1;
display: flex;
}
div {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
margin: 1rem;
}
}
.font-label {