ae172000a6
This commit improves UI consistency. It also improves maintainability by
removing "magic values" in favor of standardized spacing throughout the
application.
- Adjust spacing variables to match the convention.
- Add `_spacing.scss` to define a centralized set of spacing variables, both
absolute and relative, to standardize the spacing throughout the application.
This new approach ensures a consistent spacing logic across all components and
layouts, facilitating easier maintenance and scalability of the styling codebase.
- Update various SCSS styles to utilize the new spacing variables. This change
harmonizes the spacing across different parts of the application, aligning with
the new design system's principles.
- Slightly adjust existing padding/margin/gaps for better consistency.
Other supporting changes per component:
- RatingCircle: Update style names to match convention and simplify
hacky way to inject circle width value through CSS variables. Add
tests for the new behavior and refactor existing tests for easier
extensibility.
- TheFooter: Add small gap when footer items wrap.
- HiearchicalTreeNode: Refactor variables to separate caret size clearly
from padding applied.
- App: Make padding responsive as initial behavior of v0.13.0 before
5d940b57ef.
- ModalDialog: Use responsive absolute values instead of percentage.
- HorizontalResizeSlider:
- Use `v-bind` instead of hacky way to inject SCSS values through variables.
- Remove `verticalMargin` property to simplify its styling.
- Move `src/presentation/assets/styles/components/_card.scss` closer to
components that it styles. Update structure documentation.
The centralization of spacing definitions will aid in future design
adjustments, ensuring that updates to spacing can be made swiftly and
uniformly across the application. It's a step towards a more maintainable
and scalable frontend architecture.
89 lines
1.8 KiB
Vue
89 lines
1.8 KiB
Vue
<template>
|
|
<ModalContainer
|
|
v-model="showDialog"
|
|
>
|
|
<div class="dialog">
|
|
<div class="dialog__content">
|
|
<slot />
|
|
</div>
|
|
<FlatButton
|
|
icon="xmark"
|
|
class="dialog__close-button"
|
|
@click="hide"
|
|
/>
|
|
</div>
|
|
</ModalContainer>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, computed } from 'vue';
|
|
import FlatButton from '@/presentation/components/Shared/FlatButton.vue';
|
|
import ModalContainer from './ModalContainer.vue';
|
|
|
|
export default defineComponent({
|
|
components: {
|
|
ModalContainer,
|
|
FlatButton,
|
|
},
|
|
props: {
|
|
modelValue: {
|
|
type: Boolean,
|
|
required: true,
|
|
},
|
|
},
|
|
emits: {
|
|
/* eslint-disable @typescript-eslint/no-unused-vars */
|
|
'update:modelValue': (isOpen: boolean) => true,
|
|
/* eslint-enable @typescript-eslint/no-unused-vars */
|
|
},
|
|
setup(props, { emit }) {
|
|
const showDialog = computed({
|
|
get: () => props.modelValue,
|
|
set: (value) => {
|
|
if (value !== props.modelValue) {
|
|
emit('update:modelValue', value);
|
|
}
|
|
},
|
|
});
|
|
|
|
function hide() {
|
|
showDialog.value = false;
|
|
}
|
|
|
|
return {
|
|
showDialog,
|
|
hide,
|
|
};
|
|
},
|
|
});
|
|
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@use "@/presentation/assets/styles/main" as *;
|
|
|
|
.dialog {
|
|
margin-bottom: $spacing-absolute-medium;
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
&__content {
|
|
margin: $spacing-absolute-xx-large;
|
|
@media screen and (max-width: $media-screen-big-width) {
|
|
margin: $spacing-absolute-x-large;
|
|
}
|
|
@media screen and (max-width: $media-screen-medium-width) {
|
|
margin: $spacing-absolute-large;
|
|
}
|
|
}
|
|
|
|
.dialog__close-button {
|
|
color: $color-primary-dark;
|
|
width: auto;
|
|
font-size: $font-size-absolute-large;
|
|
margin-right: $spacing-absolute-small;
|
|
align-self: flex-start;
|
|
}
|
|
}
|
|
</style>
|