jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

WIP

Browse source
This commit is contained in:
Bryan Mauger 2023-03-22 13:57:46 -04:00
parent c1badf70f2
commit 4b56db8c9c
2 changed files with 46 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
src/digital-components/date-picker/date-picker.vue
View file

@ -12,7 +12,7 @@
month.monthClass, month.monthClass,
isAddingNewMonth === true ? 'is-adding-new-month' : '', isAddingNewMonth === true ? 'is-adding-new-month' : '',
]"> ]">
<div class="month-year body-small d-flex align-items-center ps-3 small"> <div class="month-year body-small d-flex align-items-center small">
{{ month.monthLabel }} {{ month.yearNum.toString() }} {{ month.monthLabel }} {{ month.yearNum.toString() }}
</div> </div>
<div <div
@ -20,6 +20,7 @@
class="legend caption d-flex align-items-center justify-content-end"> class="legend caption d-flex align-items-center justify-content-end">
<span class="legend-circle me-1"></span> &equals; Available <span class="legend-circle me-1"></span> &equals; Available
</div> </div>
<div class="separator-line"></div>
<div class="nav-back ps-3"><button></button></div> <div class="nav-back ps-3"><button></button></div>
<div class="nav-forward pe-3"><button></button></div> <div class="nav-forward pe-3"><button></button></div>
<!-- Do the days of the weeek need to be read? --> <!-- Do the days of the weeek need to be read? -->
@ -52,16 +53,16 @@
</div> </div>
</div> </div>
</fieldset> </fieldset>
<button
v-if="calendarViewDirection === 'future'"
type="button"
class="btn-link"
@click="
goForward();
">
View more dates
</button>
</div> </div>
<button
v-if="calendarViewDirection === 'future'"
type="button"
class="btn-link"
@click="
goForward();
">
View more dates
</button>
</template> </template>
<script> <script>
@ -391,8 +392,18 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.date-picker { .date-picker {
position: relative;
display: flex;
width: 100%;
flex-direction: column;
height: 98vh;
fieldset {
height: 600px;
overflow: auto;
position: relative;
}
.calendar-grid-container { .calendar-grid-container {
margin: 4px auto; margin: 0 auto 2rem auto;
max-width: 414px; max-width: 414px;
max-height: 500px; max-height: 500px;
overflow: hidden; overflow: hidden;
@ -401,11 +412,11 @@ export default {
grid-template-columns: repeat(7, 1fr); grid-template-columns: repeat(7, 1fr);
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 0; padding: 0 .75rem;
.grid-item { .grid-item {
text-align: center; text-align: center;
margin: 10%; margin: 10px 3px;
&.first-day-, &.first-day-,
&.first-day-0 { &.first-day-0 {
@ -431,19 +442,17 @@ export default {
} }
} }
.separator-line {
grid-area: 2/1/2/8;
border-top: 1px solid $gray-500;
margin: 0.75rem 0;
}
.month-year { .month-year {
grid-area: 1 / 1 / 2 / 5; grid-area: 1 / 1 / 2 / 5;
text-transform: uppercase; text-transform: uppercase;
font-weight: 300; font-weight: 300;
letter-spacing: 0.75px; letter-spacing: 0.75px;
&:after {
content: '';
position: absolute;
width: 100%;
margin: 6rem 0 4.2rem 0;
border-bottom: 1px solid $gray-300;
}
} }
.legend { .legend {
grid-area: 1 / 5 / 2 / 8; grid-area: 1 / 5 / 2 / 8;
@ -674,13 +683,17 @@ export default {
} }
} }
} }
.btn-link {
background: transparent;
border: none;
margin-top: 2rem;
}
.new-month { .new-month {
max-height: 550px; max-height: 550px;
} }
} }
.btn-link {
display: flex;
width: 100%;
justify-content: center;
background: transparent;
border: none;
position: absolute;
bottom: 2rem;
}
</style> </style>

7
src/layouts/demo-date-picker/demo-date-picker.vue
View file

@ -50,6 +50,7 @@ export default {
{ year: 2023, month: 3, date: 5 }, { year: 2023, month: 3, date: 5 },
{ year: 2023, month: 3, date: 22 }, { year: 2023, month: 3, date: 22 },
{ year: 2023, month: 4, date: 13 }, { year: 2023, month: 4, date: 13 },
{ year: 2023, month: 4, date: 7 },
{ year: 2023, month: 4, date: 14 }, { year: 2023, month: 4, date: 14 },
{ year: 2023, month: 4, date: 26 }, { year: 2023, month: 4, date: 26 },
{ year: 2023, month: 5, date: 21 }, { year: 2023, month: 5, date: 21 },
@ -81,3 +82,9 @@ export default {
}, },
}; };
</script> </script>
<style lang="scss">
// .page-container-grouped-styles {
// padding: 0 .5rem !important;
// }
</style>