granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

minor ui tweaks

Browse source 
- fix datepicker css class name conflict
- remove border and margin from detail header/scaffold
This commit is contained in:
Justin Edmund 2025-12-15 12:51:19 -08:00
parent 6da599403c
commit cc60a57e3e
3 changed files with 13 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
src/lib/components/ui/DatePicker.svelte
View file

@ -104,7 +104,7 @@
</BitsDatePicker.Trigger> </BitsDatePicker.Trigger>
</div> </div>
<BitsDatePicker.Content class="content" sideOffset={8}> <BitsDatePicker.Content class="date-picker-content" sideOffset={8}>
<BitsDatePicker.Calendar class="calendar"> <BitsDatePicker.Calendar class="calendar">
{#snippet children({ months, weekdays })} {#snippet children({ months, weekdays })}
<BitsDatePicker.Header class="calendar-header"> <BitsDatePicker.Header class="calendar-header">
@ -175,7 +175,7 @@
</BitsDatePicker.Trigger> </BitsDatePicker.Trigger>
</div> </div>
<BitsDatePicker.Content class="content" sideOffset={8}> <BitsDatePicker.Content class="date-picker-content" sideOffset={8}>
<BitsDatePicker.Calendar class="calendar"> <BitsDatePicker.Calendar class="calendar">
{#snippet children({ months, weekdays })} {#snippet children({ months, weekdays })}
<BitsDatePicker.Header class="calendar-header"> <BitsDatePicker.Header class="calendar-header">
@ -313,7 +313,8 @@
} }
} }
:global(.content) { // Portalled content - use specific class name to avoid conflicts
:global(.date-picker-content) {
z-index: 50; z-index: 50;
background-color: $grey-85; background-color: $grey-85;
border-radius: $card-corner; border-radius: $card-corner;
@ -322,26 +323,26 @@
border: 1px solid $grey-80; border: 1px solid $grey-80;
} }
:global(.calendar) { :global(.date-picker-content .calendar) {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: $unit; gap: $unit;
} }
:global(.calendar-header) { :global(.date-picker-content .calendar-header) {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding-bottom: $unit; padding-bottom: $unit;
} }
:global(.heading) { :global(.date-picker-content .heading) {
font-size: $font-regular; font-size: $font-regular;
font-weight: $medium; font-weight: $medium;
color: var(--text-primary); color: var(--text-primary);
} }
:global(.nav-button) { :global(.date-picker-content .nav-button) {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -365,16 +366,16 @@
} }
} }
:global(.grid) { :global(.date-picker-content .grid) {
border-collapse: collapse; border-collapse: collapse;
} }
:global(.grid-row) { :global(.date-picker-content .grid-row) {
display: flex; display: flex;
gap: $unit-fourth; gap: $unit-fourth;
} }
:global(.head-cell) { :global(.date-picker-content .head-cell) {
width: 32px; width: 32px;
height: 32px; height: 32px;
display: flex; display: flex;
@ -385,13 +386,13 @@
color: var(--text-tertiary); color: var(--text-tertiary);
} }
:global(.cell) { :global(.date-picker-content .cell) {
width: 32px; width: 32px;
height: 32px; height: 32px;
padding: 0; padding: 0;
} }
:global(.day) { :global(.date-picker-content .day) {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;

1
src/lib/components/ui/DetailsHeader.svelte
View file

@ -143,7 +143,6 @@
justify-content: space-between; justify-content: space-between;
gap: spacing.$unit * 2; gap: spacing.$unit * 2;
padding: spacing.$unit * 2; padding: spacing.$unit * 2;
border-bottom: 1px solid #e5e5e5;
// position: sticky; // position: sticky;
// top: 0; // top: 0;
// z-index: 10; // z-index: 10;

1
src/lib/features/database/detail/DetailScaffold.svelte
View file

@ -184,7 +184,6 @@
border-radius: layout.$card-corner; border-radius: layout.$card-corner;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
overflow: visible; overflow: visible;
margin-top: spacing.$unit-2x;
position: relative; position: relative;
} }