LeoVasanko/calendar
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CSS rewritten to replace left/right with start/end.

Browse Source
This commit is contained in:
Leo Vasanko 2025-08-26 10:20:26 -06:00
parent 7ba5494ae5
commit 3e8cdf1b75
9 changed files with 14 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/assets/layout.css
View File

@ -131,7 +131,7 @@ header {
overflow: visible; overflow: visible;
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; inset-inline-end: 0;
width: 100%; width: 100%;
} }
.month-name-label > span { .month-name-label > span {

4
src/components/BaseDialog.vue
View File

@ -79,10 +79,10 @@ const modalStyle = computed(() => {
if (modalRef.value && props.modelValue) { if (modalRef.value && props.modelValue) {
const style = { const style = {
transform: 'none', transform: 'none',
left: modalPosition.value.x + 'px', insetInlineStart: modalPosition.value.x + 'px',
top: modalPosition.value.y + 'px', top: modalPosition.value.y + 'px',
bottom: 'auto', bottom: 'auto',
right: 'auto', insetInlineEnd: 'auto',
} }
if (hasMoved.value) { if (hasMoved.value) {
style.width = dialogWidth.value ? dialogWidth.value + 'px' : undefined style.width = dialogWidth.value ? dialogWidth.value + 'px' : undefined

2
src/components/CalendarDay.vue
View File

@ -32,7 +32,7 @@ const props = defineProps({
<style scoped> <style scoped>
.cell { .cell {
position: relative; position: relative;
border-right: 1px solid var(--border-color); border-inline-end: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
user-select: none; user-select: none;
display: grid; display: grid;

2
src/components/CalendarView.vue
View File

@ -560,7 +560,7 @@ header h1 {
.month-label { .month-label {
position: absolute; position: absolute;
left: 0; inset-inline-start: 0;
width: 100%; width: 100%;
background-image: linear-gradient(to bottom, rgba(186, 186, 186, 0.3), rgba(186, 186, 186, 0.2)); background-image: linear-gradient(to bottom, rgba(186, 186, 186, 0.3), rgba(186, 186, 186, 0.2));
font-size: 2em; font-size: 2em;

2
src/components/EventDialog.vue
View File

@ -943,7 +943,7 @@ const recurrenceSummary = computed(() => {
border-radius: 0.4rem; border-radius: 0.4rem;
cursor: pointer; cursor: pointer;
font-size: 0.9rem; font-size: 0.9rem;
text-align: left; text-align: start;
transition: background-color 0.15s ease; transition: background-color 0.15s ease;
} }
.ec-recurrence-toggle:hover { .ec-recurrence-toggle:hover {

4
src/components/EventOverlay.vue
View File

@ -464,10 +464,10 @@ function applyRangeDuringDrag(st, startDate, endDate) {
} }
.event-span .resize-handle.left { .event-span .resize-handle.left {
left: 0; inset-inline-start: 0;
} }
.event-span .resize-handle.right { .event-span .resize-handle.right {
right: 0; inset-inline-end: 0;
} }
</style> </style>

2
src/components/HeaderControls.vue
View File

@ -204,6 +204,6 @@ onBeforeUnmount(() => {
.today-date { .today-date {
white-space: pre-line; white-space: pre-line;
text-align: center; text-align: center;
margin-right: 2rem; margin-inline-end: 2rem;
} }
</style> </style>

2
src/components/Jogwheel.vue
View File

@ -181,7 +181,7 @@ defineExpose({
.jogwheel-viewport { .jogwheel-viewport {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; inset-inline-end: 0;
bottom: 0; bottom: 0;
width: var(--month-w); width: var(--month-w);
overflow-y: auto; overflow-y: auto;

8
src/components/SettingsDialog.vue
View File

@ -159,7 +159,7 @@ defineExpose({ open })
v-model="show" v-model="show"
title="Settings" title="Settings"
class="settings-modal" class="settings-modal"
:style="{ top: '4.5rem', right: '2rem', bottom: 'auto', left: 'auto', transform: 'none' }" :style="{ top: '4.5rem', insetInlineEnd: '2rem', bottom: 'auto', insetInlineStart: 'auto', transform: 'none' }"
> >
<div class="setting-group"> <div class="setting-group">
<label class="ec-field"> <label class="ec-field">
@ -242,9 +242,9 @@ defineExpose({ open })
.holiday-settings { .holiday-settings {
display: grid; display: grid;
gap: 0.75rem; gap: 0.75rem;
margin-left: 1rem; margin-inline-start: 1rem;
padding-left: 1rem; padding-inline-start: 1rem;
border-left: 2px solid var(--border-color); border-inline-start: 2px solid var(--border-color);
} }
select { select {
border: 1px solid var(--muted); border: 1px solid var(--muted);