natty
/
calckey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Set font size directly rather than using classes, add 18px font size option, fixes

This commit is contained in:
Freeplay 2023-06-13 14:42:18 -04:00
parent 35fd45965d
commit e8ae6738d1
5 changed files with 39 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/backend/src/server/web/boot.js
View File

@ -95,9 +95,13 @@
} }
//#endregion //#endregion
const fontSize = localStorage.getItem("fontSize"); let fontSize = localStorage.getItem("fontSize");
if (fontSize) { if (fontSize) {
document.documentElement.classList.add("f-" + fontSize); if (fontSize < 10) { // need to do this for now, as values before were 1, 2, 3 depending on the option
localStorage.setItem("fontSize", null);
fontSize = localStorage.getItem("fontSize");
}
document.documentElement.style.fontSize = fontSize + "px";
} }
const useSystemFont = localStorage.getItem("useSystemFont"); const useSystemFont = localStorage.getItem("useSystemFont");

6
packages/client/src/components/form/range.vue
View File

@ -23,9 +23,9 @@
/> />
<datalist v-if="showTicks && steps" :id="id"> <datalist v-if="showTicks && steps" :id="id">
<option <option
v-for="i in steps + 1" v-for="i in steps"
:value="i" :value="i + min"
:label="i.toString()" :label="(i + min).toString()"
></option> ></option>
</datalist> </datalist>
</div> </div>

10
packages/client/src/components/global/MkPageHeader.vue
View File

@ -431,7 +431,8 @@ onUnmounted(() => {
> .icon { > .icon {
margin-right: 8px; margin-right: 8px;
width: 16px; min-width: 16px;
width: 1em;
text-align: center; text-align: center;
} }
@ -508,10 +509,11 @@ onUnmounted(() => {
} }
&.collapse { &.collapse {
--width: 38px; --width: 2.7em;
// --width: 1.33333em
> .tab { > .tab {
width: 38px; width: 2.7em;
min-width: 38px !important; min-width: 2.7em !important;
&:not(.active) > .title { &:not(.active) > .title {
opacity: 0; opacity: 0;
} }

30
packages/client/src/pages/settings/general.vue
View File

@ -114,18 +114,34 @@
<FormRadios v-model="fontSize" class="_formBlock"> <FormRadios v-model="fontSize" class="_formBlock">
<template #label>{{ i18n.ts.fontSize }}</template> <template #label>{{ i18n.ts.fontSize }}</template>
<option :value="null"> <option :value="null">
<span style="font-size: 14px">Aa</span> <span style="font-size: 14px">14</span>
</option> </option>
<option value="1"> <option value="15">
<span style="font-size: 15px">Aa</span> <span style="font-size: 15px">15</span>
</option> </option>
<option value="2"> <option value="16">
<span style="font-size: 16px">Aa</span> <span style="font-size: 16px">16</span>
</option> </option>
<option value="3"> <option value="17">
<span style="font-size: 17px">Aa</span> <span style="font-size: 17px">17</span>
</option>
<option value="18">
<span style="font-size: 18px">18</span>
</option> </option>
</FormRadios> </FormRadios>
<!-- <FormRange
v-model="fontSize"
:min="12"
:max="18"
:step="1"
:value="fontSize ? fontSize : 14"
easing
:showTicks="true"
class="_formBlock"
>
<template #label>{{ i18n.ts.fontSize }}</template>
</FormRange> -->
</FormSection> </FormSection>
<FormSection> <FormSection>

14
packages/client/src/style.scss
View File

@ -54,20 +54,8 @@ html {
tab-size: 2; tab-size: 2;
scroll-padding: 60px; scroll-padding: 60px;
&.f-1 {
font-size: 15px;
}
&.f-2 {
font-size: 16px;
}
&.f-3 {
font-size: 17px;
}
&.useSystemFont { &.useSystemFont {
font-family: sans-serif; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
} }
} }
body::-webkit-scrollbar { body::-webkit-scrollbar {