86fde6d7dc
This commit fixes layout shifts experienced in macOS Safari when hovering over top menu items. Instead of making text bold — which was causing layout shifts — the hover effect now changes the text color. This ensures a consistent UI across different browsers and platforms. Additionally, this commit fixes the styling of the privacy button located in the bottom right corner. Previously styled as an `<a>` element, it is now correctly represented as a `<button>`. Furthermore, the commit enhances HTML conformity and accessibility by correctly using `<button>` and `<a>` tags instead of relying on click interactions on `<span>` elements. This commit introduces `FlatButton` Vue component and a new `flat-button` mixin. These centralize button usage and link styles, aligning the hover/touch reactions of buttons across the application, thereby creating a more consistent user interface.
74 lines
1.6 KiB
Vue
74 lines
1.6 KiB
Vue
<template>
|
|
<!-- Use `button` instead of DIV as it is semantically correct and accessibility best-practice -->
|
|
<button
|
|
v-non-collapsing
|
|
type="button"
|
|
class="flat-button"
|
|
:class="{
|
|
disabled: disabled,
|
|
}"
|
|
@click="onClicked"
|
|
>
|
|
<AppIcon v-if="icon" :icon="icon" />
|
|
<span v-if="label">{{ label }}</span>
|
|
</button>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, PropType } from 'vue';
|
|
import { NonCollapsing } from '@/presentation/components/Scripts/View/Cards/NonCollapsingDirective';
|
|
import { IconName } from '@/presentation/components/Shared/Icon/IconName';
|
|
import AppIcon from '@/presentation/components/Shared/Icon/AppIcon.vue';
|
|
|
|
export default defineComponent({
|
|
components: { AppIcon },
|
|
directives: { NonCollapsing },
|
|
props: {
|
|
label: {
|
|
type: String,
|
|
default: undefined,
|
|
required: false,
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false,
|
|
required: false,
|
|
},
|
|
icon: {
|
|
type: String as PropType<IconName | undefined>,
|
|
default: undefined,
|
|
required: false,
|
|
},
|
|
},
|
|
emits: [
|
|
'click',
|
|
],
|
|
setup(props, { emit }) {
|
|
function onClicked() {
|
|
if (props.disabled) {
|
|
return;
|
|
}
|
|
emit('click');
|
|
}
|
|
return { onClicked };
|
|
},
|
|
});
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@use "@/presentation/assets/styles/main" as *;
|
|
|
|
.flat-button {
|
|
display: inline-flex;
|
|
gap: 0.5em;
|
|
font-family: $font-normal;
|
|
&.disabled {
|
|
@include flat-button($disabled: true);
|
|
}
|
|
&:not(.disabled) {
|
|
@include flat-button($disabled: false);
|
|
}
|
|
}
|
|
</style>
|