CSR-1483: styling fixes

This commit is contained in:
Adam Caouette 2023-07-17 10:45:51 -04:00
parent 5a9ab3b565
commit 8301d4b27f

View file

@ -56,15 +56,15 @@
:class="[!isLoading ? 'date-picker-hidden' : '']" :class="[!isLoading ? 'date-picker-hidden' : '']"
loaderColor="blue" loaderColor="blue"
loaderPosition="center" /> loaderPosition="center" />
<button
v-if="calendarViewDirection === 'future' && !disableViewMoreDatesButton"
type="button"
class="btn btn-link"
:disabled="isLoading"
@click="showAnotherMonth">
View more dates
</button>
</fieldset> </fieldset>
<button
v-if="calendarViewDirection === 'future' && !disableViewMoreDatesButton"
type="button"
class="btn btn-link"
:disabled="isLoading"
@click="showAnotherMonth">
View more dates
</button>
</div> </div>
</template> </template>
@ -660,27 +660,22 @@ export default {
max-height: 0; max-height: 0;
} }
.date-picker { .date-picker {
overflow: hidden;
position: relative; position: relative;
flex-grow: 1; flex-grow: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
fieldset { fieldset {
overflow-y: auto;
flex-grow: 1; flex-grow: 1;
position: relative; position: relative;
padding-bottom: 6rem; // arbitrary amount to provide enough spacing for scroll animation
max-height: 21.25rem; // 340px... arbitrary amount to not push View More link out of view on iphones
} }
.loader { .loader {
position: absolute;
height: 2rem; height: 2rem;
width: 2rem; width: calc(100% - 1.5rem);
&::after { &::after {
width: 100%; width: 1.5rem;
height: 100%; height: 1.5rem;
} }
} }
.calendar-grid-container { .calendar-grid-container {
@ -813,9 +808,9 @@ export default {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 3rem; min-width: 2.5rem;
width: 2.5rem;
height: 2.5rem; height: 2.5rem;
min-width: 3rem;
span { span {
&.small { &.small {