Merge pull request 'Refactor: Update styling and functionality in various components' (#43) from ph4 into prod
Reviewed-on: #43
This commit is contained in:
commit
3be38002e7
@ -37,13 +37,11 @@
|
||||
|
||||
/* Textures */
|
||||
--paper-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23a59a8a' fill-opacity='0.15'%3E%3Cpath opacity='.5' d='M36 60v-6h6v6h-6zm18-12v-6h6v6h-6zM6 0v6H0V0h6zM6 12v6H0v-6h6zM18 0v6h-6V0h6zM18 12v6h-6v-6h6zM30 0v6h-6V0h6zM30 12v6h-6v-6h6zM42 0v6h-6V0h6zM42 12v6h-6v-6h6zM54 0v6h-6V0h6zM54 12v6h-6v-6h6zM6 24v6H0v-6h6zM6 36v6H0v-6h6zM6 48v6H0v-6h6zM18 24v6h-6v-6h6zM18 36v6h-6v-6h6zM18 48v6h-6v-6h6zM30 24v6h-6v-6h6zM30 36v6h-6v-6h6zM30 48v6h-6v-6h6zM42 24v6h-6v-6h6zM42 36v6h-6v-6h6zM42 48v6h-6v-6h6zM54 24v6h-6v-6h6zM54 36v6h-6v-6h6zM54 48v6h-6v-6h6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
||||
--progress-texture: repeating-linear-gradient(
|
||||
45deg,
|
||||
rgba(0, 0, 0, 0.05),
|
||||
rgba(0, 0, 0, 0.05) 5px,
|
||||
transparent 5px,
|
||||
transparent 10px
|
||||
);
|
||||
--progress-texture: repeating-linear-gradient(45deg,
|
||||
rgba(0, 0, 0, 0.05),
|
||||
rgba(0, 0, 0, 0.05) 5px,
|
||||
transparent 5px,
|
||||
transparent 10px);
|
||||
}
|
||||
|
||||
/* Accessibility Helpers */
|
||||
@ -61,6 +59,7 @@
|
||||
|
||||
/* Reduced Motion Preference */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
@ -133,8 +132,8 @@ body {
|
||||
/* Higher than non-focused tabs */
|
||||
}
|
||||
|
||||
.checkbox-label input:focus-visible ~ .checkmark,
|
||||
.radio-label input:focus-visible ~ .checkmark {
|
||||
.checkbox-label input:focus-visible~.checkmark,
|
||||
.radio-label input:focus-visible~.checkmark {
|
||||
outline: var(--focus-outline);
|
||||
outline-offset: var(--focus-outline-offset);
|
||||
box-shadow:
|
||||
@ -142,7 +141,7 @@ body {
|
||||
0 0 0 var(--focus-outline-width) var(--focus-outline-color);
|
||||
}
|
||||
|
||||
.switch-container input:focus-visible + .switch {
|
||||
.switch-container input:focus-visible+.switch {
|
||||
outline: var(--focus-outline);
|
||||
outline-offset: var(--focus-outline-offset);
|
||||
}
|
||||
@ -211,7 +210,7 @@ h3 {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
button > .icon:last-child {
|
||||
button>.icon:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
@ -300,6 +299,7 @@ button > .icon:last-child {
|
||||
}
|
||||
|
||||
@keyframes jiggle-subtle {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: translate(2px, 2px) scale(0.98) rotate(0deg);
|
||||
@ -340,7 +340,7 @@ button > .icon:last-child {
|
||||
/* Prevent texture from interfering */
|
||||
}
|
||||
|
||||
.card > * {
|
||||
.card>* {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
/* Ensure content is above texture */
|
||||
@ -513,8 +513,8 @@ select.form-input {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.checkbox-label input:checked ~ .checkmark:after,
|
||||
.radio-label input:checked ~ .checkmark:after {
|
||||
.checkbox-label input:checked~.checkmark:after,
|
||||
.radio-label input:checked~.checkmark:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: block;
|
||||
@ -723,12 +723,12 @@ select.form-input {
|
||||
/* Push to the right on larger screens */
|
||||
}
|
||||
|
||||
.list-item-details > * {
|
||||
.list-item-details>* {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
/* Spacing between items in details */
|
||||
.list-item-details > :first-child {
|
||||
.list-item-details> :first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
@ -908,7 +908,7 @@ select.form-input {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.tab-content > * {
|
||||
.tab-content>* {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
@ -1073,7 +1073,7 @@ select.form-input {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.alert > .alert-content {
|
||||
.alert>.alert-content {
|
||||
/* Wrap main content */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -1241,11 +1241,11 @@ select.form-input {
|
||||
/* Vertical centering */
|
||||
}
|
||||
|
||||
.switch-container input:checked + .switch {
|
||||
.switch-container input:checked+.switch {
|
||||
background-color: var(--secondary-accent);
|
||||
}
|
||||
|
||||
.switch-container input:checked + .switch:before {
|
||||
.switch-container input:checked+.switch:before {
|
||||
background-color: var(--light);
|
||||
border-color: var(--dark);
|
||||
/* Width (64) - border*2 (6) - left (2) - width (24) = 32 */
|
||||
@ -1497,8 +1497,8 @@ select.form-input {
|
||||
border-color: var(--dark) transparent transparent transparent;
|
||||
}
|
||||
|
||||
.tooltip .tooltip-trigger:hover + .tooltip-text,
|
||||
.tooltip .tooltip-trigger:focus-visible + .tooltip-text,
|
||||
.tooltip .tooltip-trigger:hover+.tooltip-text,
|
||||
.tooltip .tooltip-trigger:focus-visible+.tooltip-text,
|
||||
.tooltip-text.visible {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
@ -1544,6 +1544,7 @@ select.form-input {
|
||||
}
|
||||
|
||||
@keyframes pulse-dot {
|
||||
|
||||
0%,
|
||||
80%,
|
||||
100% {
|
||||
@ -1678,7 +1679,7 @@ select.form-input {
|
||||
/* Allow badges/avatar wrap on mobile */
|
||||
}
|
||||
|
||||
.list-item-details > * {
|
||||
.list-item-details>* {
|
||||
margin-left: 0;
|
||||
margin-right: 0.5rem;
|
||||
margin-bottom: 0.25rem;
|
||||
@ -1723,7 +1724,7 @@ select.form-input {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.flex-layout-stack-mobile > .card {
|
||||
.flex-layout-stack-mobile>.card {
|
||||
width: 100% !important;
|
||||
margin: 0 0 1.5rem 0 !important;
|
||||
flex-basis: auto !important;
|
||||
@ -1733,12 +1734,12 @@ select.form-input {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.form-row-wrap-mobile > .form-group {
|
||||
.form-row-wrap-mobile>.form-group {
|
||||
margin-right: 0 !important;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-row-wrap-mobile > .form-group:not(:last-child) {
|
||||
.form-row-wrap-mobile>.form-group:not(:last-child) {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
}
|
||||
@ -7,7 +7,7 @@
|
||||
</VFormField>
|
||||
|
||||
<VFormField label="Description">
|
||||
<VTextarea v-model="description" rows="3" />
|
||||
<VTextarea v-model="description" :rows="3" />
|
||||
</VFormField>
|
||||
|
||||
<VFormField label="Associate with Group (Optional)" v-if="props.groups && props.groups.length > 0">
|
||||
@ -52,7 +52,8 @@ const emit = defineEmits<{
|
||||
const isOpen = useVModel(props, 'modelValue', emit);
|
||||
const listName = ref('');
|
||||
const description = ref('');
|
||||
const selectedGroupId = ref<number | null>(null); // Store only the ID
|
||||
const SENTINEL_NO_GROUP = 0; // Using 0 to represent 'None' or 'Personal List'
|
||||
const selectedGroupId = ref<number>(SENTINEL_NO_GROUP); // Initialize with sentinel
|
||||
const loading = ref(false);
|
||||
const formErrors = ref<{ listName?: string }>({});
|
||||
const notificationStore = useNotificationStore();
|
||||
@ -61,14 +62,8 @@ const listNameInput = ref<InstanceType<typeof VInput> | null>(null);
|
||||
// const modalContainerRef = ref<HTMLElement | null>(null); // Removed
|
||||
|
||||
const groupOptionsForSelect = computed(() => {
|
||||
const options = props.groups ? props.groups.map(g => ({ label: g.label, value: g.value })) : [];
|
||||
// VSelect expects placeholder to be passed as a prop, not as an option for empty value usually
|
||||
// However, if 'None' is a valid selectable option representing null, this is okay.
|
||||
// The VSelect component's placeholder prop is typically for a non-selectable first option.
|
||||
// Let's adjust this to provide a clear "None" option if needed, or rely on VSelect's placeholder.
|
||||
// For now, assuming VSelect handles `null` modelValue with its placeholder prop.
|
||||
// If selectedGroupId can be explicitly null via selection:
|
||||
return [{ label: 'None (Personal List)', value: null }, ...options];
|
||||
// VSelect's placeholder should work if selectedGroupId is the sentinel value
|
||||
return props.groups ? props.groups.map(g => ({ label: g.label, value: g.value })) : [];
|
||||
});
|
||||
|
||||
|
||||
@ -77,10 +72,15 @@ watch(isOpen, (newVal) => {
|
||||
// Reset form when opening
|
||||
listName.value = '';
|
||||
description.value = '';
|
||||
selectedGroupId.value = null; // Default to 'None' or personal list
|
||||
// If a single group is passed, pre-select it. Otherwise, default to sentinel
|
||||
if (props.groups && props.groups.length === 1) {
|
||||
selectedGroupId.value = props.groups[0].value;
|
||||
} else {
|
||||
selectedGroupId.value = SENTINEL_NO_GROUP; // Reset to sentinel
|
||||
}
|
||||
formErrors.value = {};
|
||||
nextTick(() => {
|
||||
listNameInput.value?.focus?.();
|
||||
// listNameInput.value?.focus?.(); // This might still be an issue depending on VInput. Commenting out for now.
|
||||
});
|
||||
}
|
||||
});
|
||||
@ -105,11 +105,12 @@ const onSubmit = async () => {
|
||||
}
|
||||
loading.value = true;
|
||||
try {
|
||||
const response = await apiClient.post(API_ENDPOINTS.LISTS.BASE, {
|
||||
const payload = {
|
||||
name: listName.value,
|
||||
description: description.value,
|
||||
group_id: selectedGroupId.value,
|
||||
});
|
||||
group_id: selectedGroupId.value === SENTINEL_NO_GROUP ? null : selectedGroupId.value,
|
||||
};
|
||||
const response = await apiClient.post(API_ENDPOINTS.LISTS.BASE, payload);
|
||||
|
||||
notificationStore.addNotification({ message: 'List created successfully', type: 'success' });
|
||||
|
||||
@ -125,7 +126,7 @@ const onSubmit = async () => {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style>
|
||||
.form-error-text {
|
||||
color: var(--danger);
|
||||
font-size: 0.85rem;
|
||||
|
||||
@ -1,34 +1,14 @@
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<Transition
|
||||
name="modal-fade"
|
||||
@after-enter="onOpened"
|
||||
@after-leave="onClosed"
|
||||
>
|
||||
<div
|
||||
v-if="modelValue"
|
||||
class="modal-backdrop"
|
||||
@click="handleBackdropClick"
|
||||
>
|
||||
<div
|
||||
class="modal-container"
|
||||
:class="['modal-container-' + size, { 'open': modelValue }]"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
:aria-labelledby="titleId"
|
||||
:aria-describedby="bodyId"
|
||||
@click.stop
|
||||
>
|
||||
<Transition name="modal-fade" @after-enter="onOpened" @after-leave="onClosed">
|
||||
<div v-if="modelValue" class="modal-backdrop open" @click="handleBackdropClick">
|
||||
<div class="modal-container" :class="['modal-container-' + size, { 'open': modelValue }]" role="dialog"
|
||||
aria-modal="true" :aria-labelledby="titleId" :aria-describedby="bodyId" @click.stop>
|
||||
<div v-if="$slots.header || title || !hideCloseButton" class="modal-header">
|
||||
<slot name="header">
|
||||
<h3 v-if="title" :id="titleId" class="modal-title">{{ title }}</h3>
|
||||
<button
|
||||
v-if="!hideCloseButton"
|
||||
type="button"
|
||||
class="close-button"
|
||||
@click="closeModal"
|
||||
aria-label="Close modal"
|
||||
>
|
||||
<button v-if="!hideCloseButton" type="button" class="close-button" @click="closeModal"
|
||||
aria-label="Close modal">
|
||||
<VIcon name="close" />
|
||||
</button>
|
||||
</slot>
|
||||
@ -131,115 +111,10 @@ const onClosed = () => {
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1050; // Ensure it's above most other content
|
||||
<style lang="scss">
|
||||
// Global style for body when modal is open - this is the only style needed
|
||||
// All other modal styles are in valerie-ui.scss
|
||||
body.modal-open {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.modal-container {
|
||||
background-color: #fff;
|
||||
border-radius: 0.375rem; // 6px
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 90vh; // Prevent modal from being too tall
|
||||
overflow: hidden; // Needed for children with overflow (e.g. scrollable body)
|
||||
|
||||
// Default size (md)
|
||||
width: 500px; // Example, adjust as needed
|
||||
max-width: 90%;
|
||||
|
||||
&.modal-container-sm {
|
||||
width: 300px;
|
||||
}
|
||||
&.modal-container-lg {
|
||||
width: 800px;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1rem 1.25rem;
|
||||
border-bottom: 1px solid #e0e0e0; // Example border
|
||||
|
||||
.modal-title {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.close-button {
|
||||
background: transparent;
|
||||
border: none;
|
||||
font-size: 1.5rem; // Make VIcon larger if it inherits font-size
|
||||
padding: 0.25rem;
|
||||
margin: -0.25rem; // Adjust for padding to align visual edge
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
color: #6c757d; // Muted color
|
||||
|
||||
&:hover {
|
||||
color: #343a40;
|
||||
}
|
||||
// VIcon specific styling if needed, e.g., for stroke width or size
|
||||
// ::v-deep(.icon) { font-size: 1.2em; }
|
||||
}
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 1.25rem;
|
||||
overflow-y: auto; // Scrollable body if content exceeds max-height
|
||||
flex-grow: 1; // Allow body to take available space
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end; // Common: buttons to the right
|
||||
padding: 1rem 1.25rem;
|
||||
border-top: 1px solid #e0e0e0;
|
||||
gap: 0.5rem; // Space between footer items (buttons)
|
||||
}
|
||||
|
||||
// Transitions
|
||||
.modal-fade-enter-active,
|
||||
.modal-fade-leave-active {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
.modal-fade-enter-active .modal-container,
|
||||
.modal-fade-leave-active .modal-container {
|
||||
transition: transform 0.3s ease-out; // Slightly different timing for container
|
||||
}
|
||||
|
||||
.modal-fade-enter-from,
|
||||
.modal-fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
.modal-fade-enter-from .modal-container,
|
||||
.modal-fade-leave-to .modal-container {
|
||||
transform: translateY(-50px) scale(0.95); // Example: slide down and scale
|
||||
}
|
||||
|
||||
// This class is applied to <body>
|
||||
// ::v-global(body.modal-open) {
|
||||
// overflow: hidden;
|
||||
// }
|
||||
// Note: ::v-global is not standard. This is typically handled in main CSS or via JS on body.
|
||||
// The JS part `document.body.classList.add('modal-open')` is already there.
|
||||
// The style for `body.modal-open` should be in a global stylesheet.
|
||||
// For demo purposes, if it were here (which it shouldn't be):
|
||||
// :global(body.modal-open) {
|
||||
// overflow: hidden;
|
||||
// }
|
||||
</style>
|
||||
|
||||
@ -1,19 +1,10 @@
|
||||
<template>
|
||||
<textarea
|
||||
:id="id"
|
||||
:value="modelValue"
|
||||
:placeholder="placeholder"
|
||||
:disabled="disabled"
|
||||
:required="required"
|
||||
:rows="rows"
|
||||
:class="textareaClasses"
|
||||
:aria-invalid="error ? 'true' : null"
|
||||
@input="onInput"
|
||||
></textarea>
|
||||
<textarea :id="id" :value="modelValue" :placeholder="placeholder" :disabled="disabled" :required="required"
|
||||
:rows="rows" :class="textareaClasses" :aria-invalid="error ? 'true' : 'false'" @input="onInput"></textarea>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, computed, PropType } from 'vue';
|
||||
import { defineComponent, computed, type PropType } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'VTextarea',
|
||||
@ -108,7 +99,8 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
&[disabled],
|
||||
&[readonly] { // readonly is not a prop here, but good for general form-input style
|
||||
&[readonly] {
|
||||
// readonly is not a prop here, but good for general form-input style
|
||||
background-color: #e9ecef;
|
||||
opacity: 1;
|
||||
cursor: not-allowed;
|
||||
@ -116,6 +108,7 @@ export default defineComponent({
|
||||
|
||||
&.error {
|
||||
border-color: #dc3545;
|
||||
|
||||
&:focus {
|
||||
border-color: #dc3545;
|
||||
box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
|
||||
@ -135,5 +128,4 @@ export default defineComponent({
|
||||
// CSS variable for rows to potentially influence height if needed by .textarea class
|
||||
// This is an alternative way to use props.rows in CSS if you need more complex calculations.
|
||||
// For direct attribute binding like :rows="rows", this is not strictly necessary.
|
||||
// :style="{ '--v-textarea-rows': rows }" could be bound to the textarea element.
|
||||
</style>
|
||||
// :style="{ '--v-textarea-rows': rows }" could be bound to the textarea element.</style>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
export const API_VERSION = 'v1'
|
||||
|
||||
// API Base URL
|
||||
export const API_BASE_URL = (window as any).ENV?.VITE_API_URL || 'https://mitlistbe.mohamad.dev'
|
||||
export const API_BASE_URL = (window as any).ENV?.VITE_API_URL || 'http://localhost:8000'
|
||||
|
||||
// API Endpoints
|
||||
export const API_ENDPOINTS = {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user