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

CSR-886: changes to get scrolling animation working right

Browse source
This commit is contained in:
Adam Caouette 2023-04-26 14:29:27 -04:00
parent 603be6d206
commit 8af6ec853d
1 changed files with 124 additions and 384 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,70 +1,69 @@
<template>
<div v-if="months" class="date-picker text-center" :class="calendarViewDirection">
<!-- <p style="text-align: left">savedHeight: {{ savedHeight }}</p> -->
<!-- <p style="text-align: left">selectableDatesData: {{ selectableDatesData }}</p> -->
<!-- <p style="text-align: left">months: {{ months }}</p> -->
<fieldset id="date-picker-fieldset" ref="datePickerFieldset">
<legend class="sr-only">Date Picker</legend>
<!-- <h4 id="tracker" ref="tracker">currentScrollTop: {{ currentScrollTop }}</h4> -->
<div
v-for="month in months"
:key="`${month.monthLabel}-${month.yearNum?.toString()}`"
:id="`${month.monthLabel}-${month.yearNum?.toString()}`"
class="calendar-grid-container position-relative"
:class="[
isInitialView === true ? 'initial-view' : '',
month.monthClass,
isAddingNewMonth === true ? 'is-adding-new-month' : '',
]">
<div class="month-year body-small d-flex align-items-center small">
{{ month.monthLabel }} {{ month.yearNum?.toString() }}
</div>
<div
v-if="calendarViewDirection === 'future'"
class="legend caption d-flex align-items-center justify-content-end">
<span class="legend-circle me-1"></span> &equals; Available
</div>
<div class="separator-line"></div>
<div class="nav-back ps-3"><button></button></div>
<div class="nav-forward pe-3"><button></button></div>
<!-- Do the days of the weeek need to be read? -->
<div class="grid-item caption"><span class="sr-only">Sunday</span>S</div>
<div class="grid-item caption"><span class="sr-only">Monday</span>M</div>
<div class="grid-item caption"><span class="sr-only">Tuesday</span>T</div>
<div class="grid-item caption"><span class="sr-only">Wednesday</span>W</div>
<div class="grid-item caption"><span class="sr-only">Thursday</span>T</div>
<div class="grid-item caption"><span class="sr-only">Friday</span>F</div>
<div class="grid-item caption"><span class="sr-only">Saturday</span>S</div>
<div
v-for="date in month.dates"
:key="`${month.monthLabel}-${date.dateNum.toString()}-${months.length}`"
class="grid-item radio-wrapper"
:class="[
date.dateNum === 1 ? 'first-day-' + month.startDateDayIndex : '',
date.dayClasses,
]">
<input
:disabled="!isSelectableDate(date.inputValue)"
type="radio"
name="day-of-month"
v-model="selectedDate"
:value="date.inputValue"
:id="`${month.monthLabel}-${date.dateNum.toString()}`" />
<label :for="`${month.monthLabel}-${date.dateNum.toString()}`">
<span>{{ date.dateNum.toString() }}</span>
</label>
</div>
</div>
<!-- <div id="bottom-spacer"></div> -->
</fieldset>
<button
v-if="calendarViewDirection === 'future'"
type="button"
class="btn btn-link"
@click="goForward">
View more dates
</button>
</div>
<div v-if="months" class="date-picker text-center" :class="calendarViewDirection">
<!-- <p style="text-align: left">selectableDatesData: {{ selectableDatesData }}</p> -->
<!-- <p style="text-align: left">months: {{ months }}</p> -->
<fieldset id="date-picker-fieldset" ref="datePickerFieldset">
<legend class="sr-only">Date Picker</legend>
<!-- <h4 id="tracker" ref="tracker">currentScrollTop: {{ currentScrollTop }}</h4> -->
<div
v-for="month in months"
:key="`${month.monthLabel}-${month.yearNum?.toString()}`"
:id="`${month.monthLabel}-${month.yearNum?.toString()}`"
class="calendar-grid-container position-relative"
:class="[
isInitialView === true ? 'initial-view' : '',
month.monthClass,
isAddingNewMonth === true ? 'is-adding-new-month' : '',
]">
<div class="month-year body-small d-flex align-items-center small">
{{ month.monthLabel }} {{ month.yearNum?.toString() }}
</div>
<div
v-if="calendarViewDirection === 'future'"
class="legend caption d-flex align-items-center justify-content-end">
<span class="legend-circle me-1"></span> &equals; Available
</div>
<div class="separator-line"></div>
<div class="nav-back ps-3"><button></button></div>
<div class="nav-forward pe-3"><button></button></div>
<!-- Do the days of the weeek need to be read? -->
<div class="grid-item caption"><span class="sr-only">Sunday</span>S</div>
<div class="grid-item caption"><span class="sr-only">Monday</span>M</div>
<div class="grid-item caption"><span class="sr-only">Tuesday</span>T</div>
<div class="grid-item caption"><span class="sr-only">Wednesday</span>W</div>
<div class="grid-item caption"><span class="sr-only">Thursday</span>T</div>
<div class="grid-item caption"><span class="sr-only">Friday</span>F</div>
<div class="grid-item caption"><span class="sr-only">Saturday</span>S</div>
<div
v-for="date in month.dates"
:key="`${month.monthLabel}-${date.dateNum.toString()}-${months.length}`"
class="grid-item radio-wrapper"
:class="[
date.dateNum === 1 ? 'first-day-' + month.startDateDayIndex : '',
date.dayClasses,
]">
<input
:disabled="!isSelectableDate(date.inputValue)"
type="radio"
name="day-of-month"
v-model="selectedDate"
:value="date.inputValue"
:id="`${month.monthLabel}-${date.dateNum.toString()}`" />
<label :for="`${month.monthLabel}-${date.dateNum.toString()}`">
<span>{{ date.dateNum.toString() }}</span>
</label>
</div>
</div>
<div id="bottom-spacer"></div>
</fieldset>
<button
v-if="calendarViewDirection === 'future'"
type="button"
class="btn btn-link"
@click="goForward">
View more dates
</button>
</div>
</template>
<script>
@ -80,7 +79,6 @@ export default {
name: "datePicker",
data() {
return {
// calendarData: [],
monthsBeforeToLoadOffset: 0,
monthsAfterToLoadOffset: 12,
selectableDatesData: [], // NOTE: uses monthNum (1-based), NOT monthIndex (0-based)
@ -88,19 +86,14 @@ export default {
initialViewRowsToShow: 5,
initialViewRowsTally: 0,
isAddingNewMonth: false,
savedHeight: 0,
newestMonthId: "",
currentScrollTop: 0,
months: null, // NEW
months: null,
};
},
mounted() {
this.setCalendarData();
// this.$nextTick(() => {
this.trackScrollTop();
// });
// this.trackScrollTop(); // TODO - THIS FUNCTION IS TEMPORARY; REMOVE WHEN SCROLLING WORK IS DONE
},
props: {
@ -114,18 +107,14 @@ export default {
modelValue: {
type: Object,
},
// selectableDates: {
// type: Array,
// },
todayOverrideDateString: {
// only used for unit tests to override today's date
// keep for use in unit tests to override today's date
type: String,
default: null,
},
customSelectableDatesCallback: {
type: Function,
default() {
// console.log(" running default...")
return [];
},
},
@ -136,13 +125,6 @@ export default {
? new Date(this.todayOverrideDateString)
: new Date();
},
// months() {
// if (this.calendarData?.length < 1) {
// this.setCalendarData();
// }
// console.log("( ( (( ( ()))))) MONTHS READY")
// return this.calendarData;
// },
calendarViewDirection() {
if (this.selectableDatesSetting === "past") return "past";
if (this.selectableDatesSetting === "custom") return "future";
@ -158,37 +140,20 @@ export default {
},
},
methods: {
// setMonths() { /// NEW, ONLY RUN ON MOUNTED?
// if (this.months?.length < 1) { // DO I NEED THIS CHECK, IF ONLY TRIGGERED WITH MOUNTED HOOK NOW?
// this.setCalendarData();
// }
// // this.months = this.calendarData;
// trackScrollTop() { // TODO - THIS FUNCTION IS TEMPORARY; REMOVE WHEN SCROLLING WORK IS DONE
// setInterval(() => {
// this.currentScrollTop = this.$refs.datePickerFieldset?.scrollTop.toString();
// }, 250);
// },
trackScrollTop() {
// this.$nextTick(() => {
// setTimeout(() => {
// // const outputSlot = document.querySelector("#tracker");
// // const fieldset = document.querySelector("#date-picker-fieldset");
// // console.log("fieldset: ", fieldset)
setInterval(() => {
this.currentScrollTop = this.$refs.datePickerFieldset?.scrollTop.toString();
}, 250);
// }, 500);
// });
},
scrollToElement(elementId, speed, easing) {
const TIMINGFUNC_MAP = {
"linear": t => t,
"ease-in": t => t * t,
"ease-out": t => t * ( 2 - t ),
"ease-in-out": t => ( t < .5 ? 2 * t * t : -1 + ( 4 - 2 * t ) * t )
linear: (t) => t,
"ease-in": (t) => t * t,
"ease-out": (t) => t * (2 - t),
"ease-in-out": (t) => (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t),
};
const BUFFER_OFFSET = 10;
function scrollTopSmooth( wrapper, target, duration = 300, timingName = "linear" ) {
function scrollTopSmooth(wrapper, target, duration = 300, timingName = "linear") {
const initY = wrapper.scrollTop;
const wrapperRect = wrapper.getBoundingClientRect();
// console.log("wrapperRect: ", wrapperRect)
@ -197,18 +162,17 @@ export default {
const targetY = targetRect.top - wrapperRect.top - BUFFER_OFFSET;
// console.log("targetY: ", targetY)
const timingFunc = TIMINGFUNC_MAP[ timingName ];
const timingFunc = TIMINGFUNC_MAP[timingName];
let start = null;
const step = ( timestamp ) => {
const step = (timestamp) => {
start = start || timestamp;
const progress = timestamp - start,
// Growing from 0 to 1
time = Math.min( 1, ( ( timestamp - start ) / duration ) );
time = Math.min(1, (timestamp - start) / duration);
let percentageNew = timingFunc( time );
let percentageNew = timingFunc(time);
let distanceToGo = targetY; // 592 is the goal for June-2023 targetY
let thisDistance = percentageNew * distanceToGo;
@ -218,15 +182,14 @@ export default {
// console.log(" ", progress.toFixed(2), " - thisDistance: ", thisDistance.toFixed(2))
// console.log(" ")
wrapper.scrollTo( 0, initY + thisDistance );
wrapper.scrollTo(0, initY + thisDistance);
if ( percentageNew < 1 ) {
window.requestAnimationFrame( step );
if (percentageNew < 1) {
window.requestAnimationFrame(step);
}
};
window.requestAnimationFrame( step );
window.requestAnimationFrame(step);
}
// scrollTopSmooth( window.scrollY, 300, "ease-in-out" );
@ -237,176 +200,25 @@ export default {
// get Target
let targetMonth = document.getElementById(elementId);
scrollTopSmooth( wrapper, targetMonth, 800, "ease-in-out" );
scrollTopSmooth(wrapper, targetMonth, 800, "ease-in-out");
},
// scrollToElementOLD(elementId, speed, easing) {
// const wrapper = document.getElementById("date-picker-fieldset");
// const element = document.getElementById(elementId);
// const elementRect = element.getBoundingClientRect();
// const wrapperRect = wrapper.getBoundingClientRect();
// const offset = elementRect.top - (wrapperRect.top + 200);
// const distance = Math.abs(offset);
// const duration = distance / speed;
// const easingFactor = easing || 1;
// const easingFunction = (t) => Math.pow(t, easingFactor);
// // console.log("elementRect: ", elementRect);
// // console.log("wrapperRect: ", wrapperRect);
// // console.log("offset: ", offset);
// // console.log("distance: ", distance);
// // console.log("duration: ", duration);
// let start = null;
// function step(timestamp) {
// if (!start) start = timestamp;
// const progress = timestamp - start;
// const prePercentage = progress / duration;
// // console.log("progress / duration: ", prePercentage);
// const percentage = Math.min(progress / duration, 1);
// const distanceToMove = easingFunction(percentage) * distance;
// // console.log(
// // "progress / percentage / distanceToMove: ",
// // progress,
// // " / ",
// // percentage,
// // " / ",
// // distanceToMove
// // );
// // debugger; // eslint-disable-line no-debugger
// wrapper.scrollTop += offset > 0 ? distanceToMove : -distanceToMove;
// if (percentage < 1) {
// setTimeout(() => {
// window.requestAnimationFrame(step);
// }, 50); // slowing it down a bit, less calculations, less smooth
// // window.requestAnimationFrame(step);
// }
// }
// window.requestAnimationFrame(step);
// const elementRectEnd = element.getBoundingClientRect();
// const wrapperRectEnd = wrapper.getBoundingClientRect();
// // console.log("elementRectEnd: ", elementRectEnd);
// // console.log("wrapperRectEnd: ", wrapperRectEnd);
// },
// scrollToElementOLD2(elementId, speed, easing) {
// const TIMINGFUNC_MAP = {
// "linear": t => t,
// "ease-in": t => t * t,
// "ease-out": t => t * ( 2 - t ),
// "ease-in-out": t => ( t < .5 ? 2 * t * t : -1 + ( 4 - 2 * t ) * t )
// };
// function scrollTopSmooth( el, duration = 300, timingName = "linear" ) {
// const initY = el.scrollTop;
// const timingFunc = TIMINGFUNC_MAP[ timingName ];
// let start = null;
// const step = ( timestamp ) => {
// start = start || timestamp;
// const progress = timestamp - start,
// // Growing from 0 to 1
// time = Math.min( 1, ( ( timestamp - start ) / duration ) );
// console.log(" ", progress.toFixed(2), " - initY: ", initY.toFixed(2))
// console.log(" ", progress.toFixed(2), " - calc1: ", ( timingFunc( time ) ).toFixed(2))
// console.log(" ", progress.toFixed(2), " - calc2: ", ( timingFunc( time ) * initY ).toFixed(2))
// console.log(" ", progress.toFixed(2), " - scrollTo: ", (initY + ( timingFunc( time ) * initY )).toFixed(2))
// console.log(" ")
// el.scrollTo( 0, initY - ( timingFunc( time ) * initY ) );
// if ( progress < duration ) {
// window.requestAnimationFrame( step );
// }
// };
// window.requestAnimationFrame( step );
// }
// // scrollTopSmooth( window.scrollY, 300, "ease-in-out" );
// // const wrapper = document.getElementById("date-picker-fieldset");
// const wrapper = this.$refs.datePickerFieldset;
// console.log("wrapper.scrollTop: ", wrapper.scrollTop)
// scrollTopSmooth( wrapper, 300, "ease-in-out" );
// // go from: 211 to 592
// // function scrollTest() {
// // wrapper.scrollTo( 0, (wrapper.scrollTop + 20) )
// // setTimeout(() => {
// // if (wrapper.scrollTop < 592) {
// // scrollTest();
// // }
// // }, 100);
// // }
// // scrollTest();
// },
goForward() {
const fieldset = document.querySelector("#date-picker-fieldset");
if (this.isInitialView) {
const monthToScrollTo = document.querySelector(".initial-view:not(.current-month):not(.month-hidden)");
const monthToScrollTo = document.querySelector(
".initial-view:not(.current-month):not(.month-hidden)"
);
// console.log(" monthToScrollTo.id ", monthToScrollTo.id)
this.$nextTick(() => {
setTimeout(() => {
// document.querySelector("#April-2023")?.scrollIntoView({ behavior: "smooth" });
// const targ = document.querySelector("#April-2023").getBoundingClientRect();
// const fs = document.querySelector("fieldset");
// // targ.top is number to scroll to
// fs.scrollBy({
// top: 100,
// behavior: "smooth",
// });
// write a javascript function that will get the y value of element firstThing and slowly scroll it in the parent element Wrapper so the top of firstThing is at the top of the Wrapper. Allow a parameter to control speed of the scrolling movement.
this.scrollToElement(monthToScrollTo.id);
// fieldset.scrollTop = 211;
}, 0.01);
});
this.isInitialView = false; // 1st click removes hidden styling
} else {
// ====== GET CURRENT COORDINATES ==========
// fieldset.classList.add("crazy");
// this.savedHeight = fieldset.scrollTop;
// console.log("this.savedHeight is: ", this.savedHeight);
// =================================
this.showAnotherMonth(); // 2nd click adds 1 month data
// ====== RESTORE COORDINATES ==========
// this.$nextTick(() => {
// // console.log("AFTER 1 fieldset.scrollTop: ", fieldset.scrollTop);
// fieldset.scrollTop = this.savedHeight;
// fieldset.classList.remove("crazy");
// console.log(" BEFORE ANIMATION, this.savedHeight is: ", this.savedHeight)
// console.log(" BEFORE ANIMATION, fieldset.scrollTop is: ", fieldset.scrollTop)
// this.scrollToElement(this.newestMonthId, 0.5, 2);
// });
// debugger; // eslint-disable-line no-debugger
// this.$nextTick(() => {
// this.scrollToElement(this.newestMonthId, 0.5, 0.5);
// });
// this.$nextTick(() => {
// setTimeout(() => {
// this.scrollToElement(this.newestMonthId, 0.1, 2);
// }, 500);
// });
// =================================
}
},
async setCalendarData() {
@ -495,14 +307,16 @@ export default {
}
const todayDayIndex = this.todayDate.getDay(); // get day of week index of today (0-6)
currentWeekStartDateNum = todayDayIndex > todayDateNum ? 1 : todayDateNum - todayDayIndex; // FUTURE
currentWeekStartDateNum =
todayDayIndex > todayDateNum ? 1 : todayDateNum - todayDayIndex; // FUTURE
const monthEndDate = new Date(yearNum, monthIndex + 1, 0); // BOTH
let monthEndDateNum = monthEndDate.getDate(); // BOTH
currentWeekEndDateNum = todayDateNum + 6 - todayDayIndex; // PAST, aka Sat. (ok if it's larger than the month end?)
if (offset === 0 && direction === "past" && monthEndDateNum > currentWeekEndDateNum) {
monthEndDateNum = currentWeekEndDateNum; // PAST
}
const monthStartDateNum = (offset === 0 && direction === "future") ? currentWeekStartDateNum : 1; // FUTURE
const monthStartDateNum =
offset === 0 && direction === "future" ? currentWeekStartDateNum : 1; // FUTURE
const monthStartDate = new Date(yearNum, monthIndex, monthStartDateNum); // BOTH
const startDateDayIndex = monthStartDate.getDay(); // FUTURE
const endDateDayIndex = monthEndDate.getDay(); // PAST
@ -555,8 +369,8 @@ export default {
if (Math.abs(offset) > 1) {
monthClass = monthClass + " month-hidden";
}
} else { // TODO REMOVE THIS BLOCK? NO LONGER NEEDED?
} else {
// TODO REMOVE THIS BLOCK? NO LONGER NEEDED?
monthClass = monthClass + " new-month";
}
@ -573,24 +387,29 @@ export default {
};
// get available dates
await this.updateSelectableDates(monthStart, monthEnd); // v v v v v v
// MAKE API CALL, ADDS NEW DATES TO this.selectableDatesData
// MAKE API CALL, ADDS NEW DATES TO this.selectableDatesData
}
function forceTwoDigitString(monthNum) {
let newString = monthNum.toString();
return (newString.length === 1) ? "0" + newString : newString;
return newString.length === 1 ? "0" + newString : newString;
}
// populate datesArray
for (let i = monthStartDateNum; i <= monthEndDateNum; i++) {
let dayClasses = "";
const thisDate = {
// NOTE: uses monthNum (1-based), NOT monthIndex (0-based)
year: yearNum,
month: monthIndex + 1,
date: i,
dateString: yearNum.toString() + "-" + forceTwoDigitString(monthIndex + 1) + "-" + forceTwoDigitString(i),
dateString:
yearNum.toString() +
"-" +
forceTwoDigitString(monthIndex + 1) +
"-" +
forceTwoDigitString(i),
};
let isSelectableDate = this.isSelectableDate(thisDate);
if (offset === 0 && i === todayDateNum) {
@ -612,12 +431,7 @@ export default {
// console.log(" ! ! ! FOUND ONE! A SELECTABLE DATE ! ! ! ! ")
dayClasses += " selectable-day";
}
// // TEMP CHECK
// if (offset === 0 && todayDateNum === 21 || offset === 0 && todayDateNum === 26) {
// console.log("dayClasses are: ", dayClasses)
// }
// =====
const dateObject = {
dateNum: i,
dayClasses: dayClasses,
@ -638,26 +452,27 @@ export default {
// TODO: CHANGE NAME OF MONTH AND DATE's "___String" to "_____Id"; it's better
// debugger; // eslint-disable-line no-debugger
// console.log(" mmm mm m mm m m m MONTH IS READY mm m m m m m m m mmmm m mm")
return monthToAdd;
},
async showAnotherMonth() {
let monthToShow;
if (this.calendarViewDirection === "future") {
monthToShow = this.months.find(month => month.monthClass.includes('month-hidden'));
monthToShow = this.months.find((month) =>
month.monthClass.includes("month-hidden")
);
}
if (this.calendarViewDirection === "past") {
// TODO: UPDATE THIS WITH CORRECT PAST LOOKING LOGIC
monthToShow = this.months.find(month => month.monthClass.includes('month-hidden'));
monthToShow = this.months.find((month) =>
month.monthClass.includes("month-hidden")
);
}
// console.log("monthToShow: ", monthToShow)
// make new API call with this month's start and end dates
await this.updateSelectableDates(monthToShow.dates[0].inputValue.dateString, monthToShow.dates[monthToShow.dates.length - 1].inputValue.dateString);
await this.updateSelectableDates(
monthToShow.dates[0].inputValue.dateString,
monthToShow.dates[monthToShow.dates.length - 1].inputValue.dateString
);
monthToShow.monthClass = monthToShow.monthClass.replace(" month-hidden", "");
@ -669,36 +484,19 @@ export default {
this.scrollToElement(monthToShow.monthString);
}, 0.01);
});
},
isSelectableDate(thisDate) {
const testForDate = (dateInArray) => {
// console.log(" running isSelectableDate/testForDate... thisDate.month: ", thisDate.month, " / thisDate.date: ", thisDate.date)
// console.log(" running isSelectableDate/testForDate... dateInArray.month: ", dateInArray.month, " / dateInArray.date: ", dateInArray.date)
// debugger; // eslint-disable-line no-debugger
return (
dateInArray.dateString === thisDate.dateString
);
return dateInArray.dateString === thisDate.dateString;
};
// function testForDateNEW(dateInArray) {
// console.log(" running isSelectableDate/testForDate... thisDate.month: ", thisDate.month, " / thisDate.date: ", thisDate.date)
// console.log(" running isSelectableDate/testForDate... dateInArray.month: ", dateInArray.month, " / dateInArray.date: ", dateInArray.date)
// // debugger; // eslint-disable-line no-debugger
// return (
// dateInArray.date === thisDate.date &&
// dateInArray.month === thisDate.month &&
// dateInArray.year === thisDate.year
// );
// }
const midTest = this.selectableDatesData.findIndex(testForDate);
// console.log("midTest ", midTest)
const isSelectable = (this.selectableDatesData.findIndex(testForDate)) > -1 ? true : false;
// debugger; // eslint-disable-line no-debugger
// console.log("running isSelectableDate... thisDate: ", thisDate, " / isSelectable: ", isSelectable)
const isSelectable =
this.selectableDatesData.findIndex(testForDate) > -1 ? true : false;
// debugger; // eslint-disable-line no-debugger
// console.log("running isSelectableDate... thisDate: ", thisDate, " / isSelectable: ", isSelectable)
return isSelectable;
},
@ -719,10 +517,7 @@ export default {
</script>
<style lang="scss" scoped>
.hidden-for-real {
visibility: hidden !important;
max-height: 0 !important;
}
#tracker {
position: absolute;
top: 5px;
@ -735,63 +530,18 @@ export default {
text-align: left;
padding: 5px;
// display: none;
display: none;
}
.date-picker {
// == ATTEMPT 3
overflow: hidden;
max-height: 62vh; // max-height: 60vh;
max-height: 60vh; // IS THIS NEEDED EVEN?
position: relative;
// == ATTEMPT 2
// max-height: 60vh; // TBD
// overflow-y: auto;
// == ATTEMPT 1
// position: relative;
// display: flex;
// width: 100%;
// flex-direction: column;
// height: 98vh;
// background: 0% 0%/50% 50% url("https://i.imgur.com/hlMp680.png") repeat;
// == ATTEMPT 2
// IS THIS AFTER EVEN NEEDED?
// &:after {
// content: '';
// display: block;
// width: 100%;
// height: 200px;
// background: rgba(155, 60, 125, 0.5);
// position: absolute;
// bottom: 0;
// // background: linear-gradient(to bottom, rgba(125,185,232,0) 0%,rgba(255,255,255,1) 100%);
// }
fieldset {
// == ATTEMPT 3
//overflow-y: auto;
overflow-y: scroll;
height: 54vh; // height: 54vh;
// height: 9600px; // SB 600px
// outline: 2px solid red;
// overflow: auto;
// position: relative;
// padding-bottom: 1000em;
// background: 0% 0%/50% 50% url("https://i.imgur.com/MRtUeUs.png") repeat;
&.crazy {
overflow-y: hidden;
// outline: 3px dotted orange;
// background: orange !important;
}
height: 54vh;
}
.calendar-grid-container {
margin: 0 auto 2rem auto;
@ -806,8 +556,6 @@ export default {
align-items: center;
padding: 0 0.75rem;
// background: url("https://i.imgur.com/ncwmc2l.png") repeat;
.grid-item {
text-align: center;
margin: 10px 3px;
@ -872,7 +620,6 @@ export default {
height: 2rem;
opacity: 1;
transition: ease all 250ms;
// transition: ease all 1250ms;
input[type="radio"] {
position: absolute; //override bootstrap
@ -1096,24 +843,17 @@ export default {
}
}
.new-month {
// max-height: 550px;
opacity: 1;
// background: lime !important;
}
}
.btn-link {
// == ATTEMPT 3
display: block;
position: relative;
height: 3rem;
// display: flex;
width: 100%;
justify-content: center;
background: transparent;
border: none;
// position: absolute;
// bottom: 2rem;
font-weight: 500;
text-underline-offset: 4px;
z-index: 2;