client: add default margin to FormSwitch and MkButton
All checks were successful
ci/woodpecker/push/lint-client Pipeline was successful
ci/woodpecker/push/lint-foundkey-js Pipeline was successful
ci/woodpecker/push/lint-backend Pipeline was successful
ci/woodpecker/push/build Pipeline was successful
ci/woodpecker/push/lint-sw Pipeline was successful
ci/woodpecker/push/test Pipeline was successful

This commit is contained in:
Johann150 2022-12-18 00:11:32 +01:00
parent 263fb94f3f
commit 4574db523a
Signed by: Johann150
GPG key ID: 9EE6577A2A06F8F1
4 changed files with 6 additions and 4 deletions

View file

@ -316,8 +316,8 @@ This does not apply when using the Composition API since reactivation is manual.
If you import json in TypeScript, the json file will be spit out together with the TypeScript file into the dist directory when compiling with tsc. This behavior may cause unintentional rewriting of files, so when importing json files, be sure to check whether the files are allowed to be rewritten or not. If you do not want the file to be rewritten, you should make sure that the file can be rewritten by importing the json file. If you do not want the file to be rewritten, use functions such as `fs.readFileSync` to read the file instead of importing it.
### Component style definitions do not have a `margin`
Setting the `margin` of a component may be confusing.
Instead, it should always be the user of a component that sets a `margin`.
~~Setting the `margin` of a component may be confusing. Instead, it should always be the user of a component that sets a `margin`.~~
This was a philosophy used previously. Hoever it now seems a better idea to add a default margin to the top level element of a component which can be easily overwritten on the usage of that component with a `style` attribute.
### Do not use the word "follow" in HTML class names
This has caused things to be blocked by an ad blocker in the past.

View file

@ -13,7 +13,7 @@
<div class="knob"></div>
</span>
<span class="label">
<!-- TODO: 無名slotの方は廃止 -->
<!-- TODO: do not use unnamed slot -->
<span @click="toggle"><slot name="label"></slot><slot></slot></span>
<p class="caption"><slot name="caption"></slot></p>
</span>
@ -50,6 +50,7 @@ const toggle = () => {
position: relative;
display: flex;
transition: all 0.2s ease;
margin: var(--margin) 0;
> * {
user-select: none;

View file

@ -134,6 +134,7 @@ function onMousedown(evt: MouseEvent): void {
overflow: clip;
box-sizing: border-box;
transition: background 0.1s ease;
margin: var(--margin) 0;
&:not(:disabled):hover {
background: var(--buttonHoverBg);

View file

@ -9,7 +9,7 @@
<template #prefix><i class="fas fa-search"></i></template>
<template #label>{{ i18n.ts.search }}</template>
</FormInput>
<FormSwitch v-model="selectMode" style="margin: 8px 0;">
<FormSwitch v-model="selectMode">
<template #label>{{ i18n.ts.selectMode }}</template>
</FormSwitch>
<div v-if="selectMode" style="display: flex; gap: var(--margin); flex-wrap: wrap;">