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.
80 lines
1.6 KiB
Vue
80 lines
1.6 KiB
Vue
<template>
|
|
<div class="slider">
|
|
<div ref="firstElement" class="first">
|
|
<slot name="first" />
|
|
</div>
|
|
<SliderHandle class="handle" @resized="onResize($event)" />
|
|
<div class="second">
|
|
<slot name="second" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, shallowRef } from 'vue';
|
|
import SliderHandle from './SliderHandle.vue';
|
|
|
|
export default defineComponent({
|
|
components: {
|
|
SliderHandle,
|
|
},
|
|
props: {
|
|
firstMinWidth: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
firstInitialWidth: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
secondMinWidth: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
},
|
|
setup() {
|
|
const firstElement = shallowRef<HTMLElement>();
|
|
|
|
function onResize(displacementX: number): void {
|
|
const element = firstElement.value;
|
|
if (!element) {
|
|
throw new Error('The element reference ref is not correctly assigned to a DOM element.');
|
|
}
|
|
const leftWidth = element.offsetWidth + displacementX;
|
|
element.style.width = `${leftWidth}px`;
|
|
}
|
|
|
|
return {
|
|
firstElement,
|
|
onResize,
|
|
};
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@use "@/presentation/assets/styles/main" as *;
|
|
|
|
.slider {
|
|
display: flex;
|
|
flex-direction: row;
|
|
.first {
|
|
min-width: v-bind(firstMinWidth);
|
|
width: v-bind(firstInitialWidth);
|
|
}
|
|
.second {
|
|
flex: 1;
|
|
min-width: v-bind(secondMinWidth);
|
|
}
|
|
@media screen and (max-width: $media-vertical-view-breakpoint) {
|
|
flex-direction: column;
|
|
.first {
|
|
width: auto !important;
|
|
}
|
|
.handle {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
</style>
|