diff --git a/index.html b/index.html index ee3e8e6..f51acab 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,8 @@ - + + @@ -75,29 +76,119 @@

PTO CALENDAR

- -
-

Settings

-
-
ADD
+ +
+ +

Settings

+
+
ACCRUE
-
-
SUB
+
+
TIME OFF
-
-
MAX PTO
+
+
MAX PTO
+
+
MAX CARRY
+ +
+ + +
+
PAYROLL
+
+ +
+ Weekly + Bi-Weekly + Bi-Monthly + Monthly +
+
+
+ + +
+
ON
+
+ +
+ + +
+
+
+ + +
+
START DAY
+ - + - + +
+ + +
+ +
+ + +

Info

+
+
MAX PTO DAY
+
???
+
+ + \ No newline at end of file diff --git a/src/actions.js b/src/actions.js index 73c67b6..1c4108f 100644 --- a/src/actions.js +++ b/src/actions.js @@ -4,7 +4,8 @@ // Right clicking on a day // - access specifics (timeoff, time) -function lastMonth(animate = true) { +// Switching months +function lastMonth(user = true) { if (currentMonth.lastMonth === null) { let nextMonth = (currentMonth.month - 1 + 12) % 12; let nextYear = currentMonth.year; @@ -13,11 +14,14 @@ function lastMonth(animate = true) { currentMonth.lastMonth.nextMonth = currentMonth; } setMonth(currentMonth.lastMonth); - if (animate) fadeMonth(); + if (user) { + currentMonth.updateAccruals(); + fadeMonth(); + } updatePTO(); } -function nextMonth(animate = true) { +function nextMonth(user = true) { if (currentMonth.nextMonth === null) { let nextMonth = (currentMonth.month + 1 + 12) % 12; let nextYear = currentMonth.year; @@ -26,29 +30,39 @@ function nextMonth(animate = true) { currentMonth.nextMonth.lastMonth = currentMonth; } setMonth(currentMonth.nextMonth); - if (animate) fadeMonth(); + if (user) { + currentMonth.updateAccruals(); + fadeMonth(); + } updatePTO(); } +function setMonth(month) { + // Set month elem + const monthElem = document.getElementById("month"); + const monthName = monthElem.children[1]; + monthName.innerText = month.name + " " + month.year + ` — ${month.month + 1} / ${month.year}`; + currentMonth = month; + + // Todays month + if (currentMonth.isToday) + monthName.classList.add("current-month"); + else + monthName.classList.remove("current-month"); + + // Set day elems + for (let i = 0; i < 42; ++i) + updateDayElem(i); +} + +// Modifying days function dayClicked(e, day, i) { const button = ["left", "middle", "right"][e.which - 1]; const dayObject = currentMonth.getDay(i); if (dayObject === undefined) return; - // console.log(day, i); - + if (button == "left") { - if (dayObject.mode == "none") { - dayObject.mode = "sub"; - dayObject.time = -Settings.sub; - } else - if (dayObject.mode == "sub") { - dayObject.mode = "add"; - dayObject.time = Settings.add; - } else - if (dayObject.mode == "add") { - dayObject.mode = "none"; - dayObject.time = 0; - } + dayObject.toggleSub(); updatePTO(); } @@ -58,7 +72,7 @@ function dayClicked(e, day, i) { function hideDay(day) { day.children[0].setAttribute("style", "visibility: hidden;"); day.children[1].setAttribute("style", "visibility: hidden;"); - day.classList.remove("add", "sub"); + day.classList.remove("add", "sub", "starting-day"); day.classList.add("blank"); day.setAttribute("style", "--pto-ratio: 0.0;"); } @@ -84,39 +98,28 @@ function updateDayElem(i) { dayElem.children[0].innerText = i - currentMonth.firstDay + 1; // Set time off - dayElem.children[1].innerText = rnd(monthDay.timeOff, Settings.round); - let timeOffRatio = monthDay.timeOff / Settings.max; + dayElem.children[1].innerText = rnd(monthDay.getTimeOff(), Settings.getSetting("round")); + let timeOffRatio = monthDay.getTimeOff() / Settings.getSetting("max"); timeOffRatio = Math.max(Math.min(timeOffRatio, 1), 0); dayElem.setAttribute("style", `--pto-ratio: ${timeOffRatio};`); // Set mode dayElem.classList.remove("add", "sub"); - if (monthDay.mode != "none") - dayElem.classList.add(monthDay.mode); + if (monthDay.getMode() != "none") + dayElem.classList.add(monthDay.getMode()); // Current day if (monthDay.isToday) dayElem.children[0].classList.add("current-day"); else dayElem.children[0].classList.remove("current-day"); -} - -function setMonth(month) { - // Set month elem - const monthElem = document.getElementById("month"); - const monthName = monthElem.children[1]; - monthName.innerText = month.name + " " + month.year; - currentMonth = month; - // Todays month - if (currentMonth.isToday) - monthName.classList.add("current-month"); + // Starting day + if (monthDay.isStartingDay()) + dayElem.classList.add("starting-day"); else - monthName.classList.remove("current-month"); + dayElem.classList.remove("starting-day"); - // Set day elems - for (let i = 0; i < 42; ++i) - updateDayElem(i); } function updatePTOElems() { @@ -127,18 +130,78 @@ function updatePTOElems() { function updatePTO() { // Previous months end time off const lastMonth = currentMonth.lastMonth; - const lastMonthPTO = lastMonth ? lastMonth.days[lastMonth.days.length - 1].timeOff : 0; + const lastMonthPTO = lastMonth ? lastMonth.days[lastMonth.days.length - 1].getTimeOff() : 0; currentMonth.updatePTO(lastMonthPTO); updatePTOElems(); } +function updateAllPTO() { + Settings.maxPTO = null; + const initMonth = currentMonth; + while (true) { + if (!currentMonth.lastMonth) break; + currentMonth = currentMonth.lastMonth; + } + currentMonth.updatePTO(0); + while (currentMonth.nextMonth) { + currentMonth = currentMonth.nextMonth; + updatePTO(); + } + setMonth(initMonth); +} + +function calculateAccruals(calcPTO = false) { + // Starting day of accruals + const startMonth = Settings.startDay.month; + const startYear = Settings.startDay.year; + + // Calculate all past accruals + currentMonth.updateAccruals(); + const initMonth = currentMonth; + const monthOffset = (currentMonth.month + currentMonth.year * 12) - (startMonth + startYear * 12); + for (let i = monthOffset; i > 0; --i) { + lastMonth(false); + currentMonth.updateAccruals(); + } + for (let i = monthOffset; i < 0; ++i) + nextMonth(false); + + // Reset months before + while (true) { + if (!currentMonth.lastMonth) break; + currentMonth = currentMonth.lastMonth; + currentMonth.clearAccruals(); + } + + // Recalculating PTO + if (calcPTO) { + currentMonth.updatePTO(0); + while (currentMonth != initMonth) { + currentMonth = currentMonth.nextMonth; + updatePTO(); + } + } + + // Return to initial month + setMonth(initMonth); +} + +// Saving and Loading function saveData() { const settings = { - add: Settings.add, - sub: Settings.sub, - max: Settings.max + add: Settings.getSetting("add"), + sub: Settings.getSetting("sub"), + max: Settings.getSetting("max"), + carry: Settings.getSetting("carry") + }; + const payroll = { + payroll: Settings.getSetting("payroll"), + payrollWeek: Settings.getSetting("payrollWeek"), + payrollDay: Settings.getSetting("payrollDay"), }; + const startDay = { ...Settings.startDay }; const months = []; + const version = "1"; // Get first month let month = currentMonth; @@ -157,11 +220,10 @@ function saveData() { // Add modified days for (let i = 0; i < month.days.length; ++i) { const day = month.days[i]; - if (day.time != 0) { + if (day.isChanged()) { modifiedDays.push({ i, - time: day.time, - mode: day.mode + data: day.data }); } } @@ -169,7 +231,7 @@ function saveData() { month = month.nextMonth; } while (month); - return JSON.stringify({ settings, months }); + return JSON.stringify({ settings, months, payroll, startDay, version }); } function loadData(string) { @@ -177,31 +239,59 @@ function loadData(string) { if (!data) return; // Copy settings + if (data.settings) for (let k in data.settings) { Settings.setSetting(k, data.settings[k]); } - // Go to first month - const initMonth = currentMonth; - const monthOffset = (currentMonth.month + currentMonth.year * 12) - (data.months[0].month + data.months[0].year * 12) - for (let i = monthOffset; i > 0; --i) - lastMonth(false); - for (let i = monthOffset; i < 0; ++i) - nextMonth(false); - const firstMonth = currentMonth; - - // Copy data for each month - for (let i = 0; i < data.months.length; ++i) { - const monthData = data.months[i]; - for (let modifiedDay of monthData.modifiedDays) { - currentMonth.days[modifiedDay.i].mode = modifiedDay.mode; - currentMonth.days[modifiedDay.i].time = modifiedDay.time; + // Copy payroll + if (data.payroll) { + Settings.payrollWeek = data.payroll.payrollWeek; + Settings.payrollDay = data.payroll.payrollDay; + Settings.setPayroll(data.payroll.payroll); + } + + // Copy start day + if (data.startDay) { + Settings.setStartDate(data.startDay.month, data.startDay.day, data.startDay.year); + } + + // Set accruals + calculateAccruals(); + + // Copy months + if (data.months) { + // Go to first month + const initMonth = currentMonth; + const monthOffset = (currentMonth.month + currentMonth.year * 12) - (data.months[0].month + data.months[0].year * 12) + for (let i = monthOffset; i > 0; --i) + lastMonth(false); + for (let i = monthOffset; i < 0; ++i) + nextMonth(false); + + // Copy data for each month + for (let i = 0; i < data.months.length; ++i) { + const monthData = data.months[i]; + for (let modifiedDay of monthData.modifiedDays) { + const day = currentMonth.days[modifiedDay.i]; + for (let k in modifiedDay.data) + day.data[k] = modifiedDay.data[k]; + } + updatePTO(); + nextMonth(false); } - updatePTO(); - nextMonth(false); + + // Return to initial month + setMonth(initMonth); } - setMonth(initMonth); +} + +function clearData(msg) { + if (confirm(msg ?? "Are you sure you want to clear saved data?")) { + storeItem("pto-calendar-data", null); + location.reload(); + } } function saveChanges() { diff --git a/src/dropdowns.js b/src/dropdowns.js new file mode 100644 index 0000000..47cd53e --- /dev/null +++ b/src/dropdowns.js @@ -0,0 +1,65 @@ + +class DropDowns { + static init() { + const dropdowns = document.getElementsByClassName("dropdown"); + Array.from(dropdowns).forEach(e => DropDowns.setupDropDown(e)); + + // Initially hide drop downs on click + document.addEventListener("mouseup", e => { + if (e.button !== 0) return; + DropDowns.hideAllDropDowns(); + }); + } + + static hideAllDropDowns() { + const dropdowns = document.getElementsByClassName("dropdown"); + Array.from(dropdowns).forEach(e => DropDowns.hideDropDown(e)); + } + + static hideDropDown(dropdown) { + dropdown.children[1].setAttribute("style", "visibility:hidden;"); + } + + static setupDropDown(dropdown) { + // Initially hide drop down + DropDowns.hideDropDown(dropdown); + dropdown.children[0].onclick = () => { + dropdown.children[1].setAttribute("style", "visibility:visible;"); + }; + + // Hide drop down when an option is selected + dropdown.children[1].onclick = () => { + dropdown.children[1].setAttribute("style", "visibility:hidden;"); + saveChanges(); + } + } +} + +function setDaySelectionByPayroll(payroll) { + switch (payroll) { + case "Weekly": setDaySelectionToWeek(); break; + case "Bi-Weekly": setDaySelectionToWeek(); break; + case "Bi-Monthly": setDaySelectionToDay(); break; + case "Monthly": setDaySelectionToDay(); break; + } +} + +function setDaySelectionToWeek() { + const weekOpts = document.getElementById("week-selection"); + const dayOpts = document.getElementById("day-selection"); + dayOpts.setAttribute("style", "display: none;"); + weekOpts.setAttribute("style", "display: block;"); + + // Automatically select last selected week + Settings.setPayrollWeek(Settings.payrollWeek, true); +} + +function setDaySelectionToDay() { + const weekOpts = document.getElementById("week-selection"); + const dayOpts = document.getElementById("day-selection"); + weekOpts.setAttribute("style", "display: none;"); + dayOpts.setAttribute("style", "display: block;"); + + // Automatically select last selected day + Settings.setPayrollDay(Settings.payrollDay, true); +} diff --git a/src/main.js b/src/main.js index bc91219..f96ca20 100644 --- a/src/main.js +++ b/src/main.js @@ -1,21 +1,59 @@ const MONTHS = ["January", "Febuary", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; const WEEKS = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"]; +const FULL_WEEKS = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; function initListeners() { // Settings const addSettingElem = document.getElementById("setting-add"); const subSettingElem = document.getElementById("setting-sub"); const maxSettingElem = document.getElementById("setting-max"); + const carrySettingElem = document.getElementById("setting-carry"); + const startMonthElem = document.getElementById("pto-start-month"); + const startDayElem = document.getElementById("pto-start-day"); + const startYearElem = document.getElementById("pto-start-year"); addSettingElem.addEventListener("change", ()=>{ - Settings.setSetting("add", addSettingElem.value); - }) + Settings.setSetting("add", parseFloat(addSettingElem.value)); + Settings.unknownMaxDate(); + updateAllPTO(); + saveChanges(); + }); subSettingElem.addEventListener("change", ()=>{ - Settings.setSetting("sub", subSettingElem.value); - }) + Settings.setSetting("sub", parseFloat(subSettingElem.value)); + Settings.unknownMaxDate(); + updateAllPTO(); + saveChanges(); + }); maxSettingElem.addEventListener("change", ()=>{ - Settings.setSetting("max", maxSettingElem.value); - }) + Settings.setSetting("max", parseFloat(maxSettingElem.value)); + Settings.unknownMaxDate(); + updateAllPTO(); + saveChanges(); + }); + carrySettingElem.addEventListener("change", ()=>{ + Settings.setSetting("carry", parseFloat(carrySettingElem.value)); + Settings.unknownMaxDate(); + updateAllPTO(); + saveChanges(); + }); + startMonthElem.addEventListener("change", ()=>{ + Settings.startDay.month = parseFloat(startMonthElem.value) - 1; + Settings.unknownMaxDate(); + calculateAccruals(true); + saveChanges(); + }); + startDayElem.addEventListener("change", ()=>{ + Settings.startDay.day = parseFloat(startDayElem.value); + Settings.unknownMaxDate(); + calculateAccruals(true); + saveChanges(); + }); + startYearElem.addEventListener("change", ()=>{ + Settings.startDay.year = parseFloat(startYearElem.value); + Settings.unknownMaxDate(); + calculateAccruals(true); + saveChanges(); + }); // Days const days = document.getElementsByClassName("day"); @@ -56,44 +94,142 @@ class Month { init() { this.days = []; for (let i = this.firstDay; i < this.lastDay; ++i) { - const obj = { - day: i % 7, - date: this.days.length, - timeOff: 0, - time: 0, - mode: "none" - }; - this.days.push(obj); + const day = new Day(this, i % 7, this.days.length); + this.days.push(day); } } updatePTO(startingPTO) { + // Max carry over + if (this.month == 0) + startingPTO = Math.min(startingPTO, Settings.getSetting("carry")); + let cumulativePTO = startingPTO; + const maxPTO = Settings.getSetting("max"); + let hitMax = startingPTO >= maxPTO; for (const day of this.days) { - cumulativePTO += day.time; - day.timeOff = cumulativePTO; + cumulativePTO += day.getLocalTimeOff(); + day.setTimeOff(cumulativePTO); + + // Max PTO date + if (!hitMax && cumulativePTO >= maxPTO) { + hitMax = true; + Settings.setMaxDate(day); + } + } + } + + clearAccruals() { + for (const day of this.days) + day.data.add = false; + } + + updateAccruals() { + // Clear current accruals + this.clearAccruals(); + + // Starting day of accruals + const startMonth = Settings.startDay.month; // [0] + const startDay = Settings.startDay.day; // [1] + const startYear = Settings.startDay.year; + if (startMonth + startYear * 12 > this.month + this.year * 12) + return; + + // Payroll settings + const payroll = Settings.payroll; + const payrollWeek = FULL_WEEKS.indexOf(Settings.payrollWeek); + const payrollDay = Settings.payrollDay; + + switch (Settings.payroll) { + case "Weekly": + // Once a week + for (const day of this.days) + if (day.dayOfWeek == payrollWeek) + day.data.add = true; + break; + case "Bi-Weekly": + // Every other week (1st and 3rd) + let payweek = false; + for (const day of this.days) + if (day.dayOfWeek == payrollWeek && (payweek = !payweek)) + day.data.add = true; + break; + case "Bi-Monthly": + // This day and the last day + this.days[payrollDay - 1].data.add = true; + this.days[this.days.length - 1].data.add = true; + break; + case "Monthly": + // This day only + this.days[payrollDay - 1].data.add = true; + break; } + + // Days before accrual starts are 0 + if (this.month == startMonth) + for (let i = startDay - 2; i >= 0; --i) + this.days[i].data.add = false; } } -class Settings { - static add = 0; - static sub = 0; - static max = 0; - static round = 1; - - static init() { - Settings.setSetting("add", 12); - Settings.setSetting("sub", 8); - Settings.setSetting("max", 120); +class Day { + constructor(month, dayOfWeek, dayOfMonth) { + this.month = month; + this.dayOfWeek = dayOfWeek; + this.dayOfMonth = dayOfMonth; + this.data = { + timeOff: 0, + time: 0, + add: false, + sub: false + }; + this.initData = { ...this.data }; + } + + getTimeOff() { + return this.data.timeOff; } - static setSetting(setting, value) { - if (typeof value == "string") - value = parseFloat(value); - Settings[setting] = value; - const settingElem = document.getElementById("setting-" + setting); - settingElem.value = value; + getMode() { + let mode = "none"; + if (this.data.sub) mode = "sub"; + else if (this.data.add) mode = "add"; + return mode; + } + + setTimeOff(time) { + this.data.timeOff = time; + } + + toggleSub() { + this.data.sub = !this.data.sub; + } + + getLocalTimeOff() { + let time = this.data.time; + if (this.data.add) time += Settings.getSetting("add"); + if (this.data.sub) time -= Settings.getSetting("sub"); + return time; + } + + isChanged() { + if (this.data.sub) return true; + if (this.data.time != 0) return true; + return false; + } + + isStartingDay() { + // Starting day of accruals + const startMonth = Settings.startDay.month; // [0] + const startDay = Settings.startDay.day; // [1] + const startYear = Settings.startDay.year; + + // Starting month? + if (startMonth + startYear * 12 != this.month.month + this.month.year * 12) + return false; + + // Starting day? + return (startDay - 1 == this.dayOfMonth); } } @@ -101,25 +237,38 @@ class Settings { // Disable right click drop down document.addEventListener('contextmenu', event => event.preventDefault()); + // Drop downs + DropDowns.init(); + // Current Date const date = new Date(); + // Current month + setMonth(new Month(date.getMonth(), date.getFullYear())); + currentMonth.isToday = true; + // Settings Settings.init(); // Elements initListeners(); - // Current month - setMonth(new Month(date.getMonth(), date.getFullYear())); - currentMonth.isToday = true; - // Set current day const todaysDate = new Date(); - const firstDayIndex = currentMonth.firstDay + todaysDate.getDate() - 1; + const firstDayIndex = todaysDate.getDate() - 1; currentMonth.days[firstDayIndex].isToday = true; // Load data - loadData(getItem("pto-calendar-data")); + try { + loadData(getItem("pto-calendar-data")); + + // Save if no errors + saveChanges(); + } catch (e) { + clearData("Error parsing stored changes.\nReset to default?"); + } + + updatePTOElems(); + calculateAccruals(true); })(); diff --git a/src/settings.js b/src/settings.js new file mode 100644 index 0000000..862f5bc --- /dev/null +++ b/src/settings.js @@ -0,0 +1,90 @@ + +class Settings { + static add = 0; + static sub = 0; + static max = 0; + static carry = 0; + static round = 1; + static payroll = "Weekly"; + static payrollWeek = "Sunday"; + static payrollDay = 1; + static startDay = { month: 0, day: 0, year: 0 }; + + static init() { + Settings.setSetting("add", 4); + Settings.setSetting("sub", 8); + Settings.setSetting("max", 120); + Settings.setSetting("carry", 120); + + // Current day + const currentDay = new Date(); + Settings.setStartDate(currentDay.getMonth(), currentDay.getDate(), currentDay.getFullYear()); + + } + + static setSetting(setting, value) { + Settings[setting] = value; + const settingElem = document.getElementById("setting-" + setting); + settingElem.value = value; + } + + static getSetting(setting) { + return Settings[setting]; + } + + static setPayroll(payroll, accrue = false) { + Settings.payroll = payroll; + + // Set elements + setDaySelectionByPayroll(payroll); + const payrollElem = document.getElementById("payroll"); + payrollElem.innerHTML = payroll; + if (accrue) calculateAccruals(true); + } + + static setPayrollWeek(week, accrue = false) { + Settings.payrollWeek = week; + + // Set elements + const dayElem = document.getElementById("day"); + dayElem.innerHTML = week; + if (accrue) calculateAccruals(true); + } + + static setStartDate(month, day, year) { + Settings.startDay.month = month; + Settings.startDay.day = day; + Settings.startDay.year = year; + + // Set elements + const startMonthElem = document.getElementById("pto-start-month"); + const startDayElem = document.getElementById("pto-start-day"); + const startYearElem = document.getElementById("pto-start-year"); + startMonthElem.value = month + 1; + startDayElem.value = day; + startYearElem.value = year; + } + + static setPayrollDay(day, accrue = false) { + Settings.payrollDay = day; + + // Set elements + const dayElem = document.getElementById("day"); + dayElem.innerHTML = day; + if (accrue) calculateAccruals(true); + } + + static setMaxDate(dayObj) { + const elem = document.getElementById("max-date"); + const month = dayObj.month.month + 1; + const day = dayObj.dayOfMonth + 1; + const year = dayObj.month.year; + elem.innerText = `${month}/${day}/${year}`; + Settings.maxPTOFound = true; + } + + static unknownMaxDate() { + const elem = document.getElementById("max-date"); + elem.innerText = `???`; + } +} diff --git a/style/calandar.css b/style/calandar.css index 393f473..fd119a7 100644 --- a/style/calandar.css +++ b/style/calandar.css @@ -1,4 +1,5 @@ +/* Calendar */ .calendar { display: grid; grid-template-columns: repeat(7, 1fr); @@ -24,8 +25,8 @@ } .month-name.current-month { - color: #33b9eeee; - text-shadow: 0px 0px 6px #44aad3aa; + color: #92afee; /* #33b9eeee */ + /* text-shadow: 0px 0px 6px #92afeeaa; */ /* #44aad3aa */ } .week { @@ -40,6 +41,7 @@ font-size: 20px; } +/* Days */ .day { --pto-ratio: 0.0; background: linear-gradient( @@ -53,8 +55,12 @@ border-top: 1px solid var(--c2); /* Border color and width */ border-left: 1px solid var(--c2); /* Border color and width */ box-sizing: border-box; /* Include border in the element's total width and height */ - cursor: pointer; + transition: box-shadow 0.1s; +} + +.day.starting-day { + box-shadow: inset 0px 0px 20px #88ffb680; } .day.add { @@ -62,7 +68,7 @@ } .day.sub { - box-shadow: inset 0px 0px 20px #ff888880; + box-shadow: inset 0px 0px 20px rgba(238, 90, 151, 0.502) /* #ff888880 */ } .day.first { @@ -82,9 +88,10 @@ } .day-num.current-day { - color: #66bbdd; + color: #92afee; /* #66bbdd */ font-weight: bold; - text-shadow: 0px 0px 5px #66bbddee; + text-shadow: 0px 0px 5px #92afee; /* #66bbddee */ + text-overflow: clip; } .pto-num { @@ -99,6 +106,10 @@ color: var(--c4); } +/* Day View */ + + +/* Arrows */ .arrow { padding: 0px 12px; color: var(--c1); diff --git a/style/dropdown.css b/style/dropdown.css new file mode 100644 index 0000000..6c6ed3b --- /dev/null +++ b/style/dropdown.css @@ -0,0 +1,77 @@ +/* Dropdown Button */ +.dropbtn { + flex: 1; + margin: 0; + padding: 0; + /* margin: 0; */ + /* padding: 0px 4px; */ + font-size: 14px; + font-family: "Trebuchet MS"; + color: var(--c1); + background: #ffffff15; + border: solid 1px var(--c2); + border-radius: 2px; + cursor: pointer; +} + +/* The container
- needed to position the dropdown content */ +.dropdown { + flex: 1; + display: flex; + position: relative; + margin-right: 6px; + padding: 0; +} + +/* Dropdown Content (Hidden by Default) */ +.dropdown-content { + visibility: hidden; + position: absolute; + min-width: 160px; + max-height: 200px; + top: 19px; + background: #111; + box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); + border: solid 1px var(--c2); + z-index: 1; + overflow: auto; +} + +/* Links inside the dropdown */ +.dropdown-content a { + display: block; + padding: 4px 6px; + color: var(--c1); + font-size: 16px; + text-decoration: none; +} + +/* Change color of dropdown links on hover */ +.dropdown-content a:hover { + background-color: #222; +} + +/* Show the dropdown menu on hover */ +/* .dropdown:hover .dropdown-content { + display: block; +} */ + +/* Change the background color of the dropdown button when the dropdown content is shown */ +.dropbtn:hover { + background-color: #ffffff20; +} + +.dropbtn:active { + background: #ffffff15; +} + +/* Scroll bars */ +/* For WebKit browsers (Chrome, Safari) */ +::-webkit-scrollbar { + width: 5px; /* Set the width of the scrollbar */ +} + +::-webkit-scrollbar-thumb { + background-color: #888; /* Set the color of the scrollbar thumb */ +} + diff --git a/style/main.css b/style/main.css index 759bc54..cd06564 100644 --- a/style/main.css +++ b/style/main.css @@ -75,6 +75,10 @@ div { font-family: "Trebuchet MS"; } +a { + cursor: pointer; +} + main { display: flex; flex-direction: row; @@ -89,7 +93,8 @@ main { border: solid 1px var(--c2); } -.prevent-select, .arrow, .day, .week, .month, h1 { +.prevent-select, .arrow, .day, .week, .month, h1, +.sidebar .info, .sidebar h2, .sidebar .label { -webkit-user-select: none; /* Safari */ -ms-user-select: none; /* IE 10 and IE 11 */ user-select: none; /* Standard syntax */ diff --git a/style/settings.css b/style/settings.css deleted file mode 100644 index d0114e7..0000000 --- a/style/settings.css +++ /dev/null @@ -1,40 +0,0 @@ - -.settings { - width: 200px; - background-color: #ffffff10; - border-left: solid 1px var(--c2); - backdrop-filter: brightness(1.2) blur(5px); -} - -.settings-header { - background-color: #ffffff15; - border-bottom: solid 1px var(--c2); -} - -.setting { - display: flex; - align-items: center; - margin-top: 8px; - margin-left: 2px; - margin-right: 2px; -} - -.setting-name { - color: var(--c1); - margin-left: 4px; - font-weight: bold; -} - -input { - flex: 1; - min-width: 20px; - height: 16px; - margin: 0px 6px; - padding-left: 2px; - background: #ffffff15; - color: var(--c1); - font-size: 14px; - font-family: "Trebuchet MS"; - border: solid 1px var(--c2); - border-radius: 2px; -} diff --git a/style/sidebar.css b/style/sidebar.css new file mode 100644 index 0000000..c0d8395 --- /dev/null +++ b/style/sidebar.css @@ -0,0 +1,89 @@ + +.sidebar { + width: 220px; + background-color: #ffffff10; + border-left: solid 1px var(--c2); + backdrop-filter: brightness(1.2) blur(5px); +} + +.sidebar h2 { + margin-top: 8px; + border-top: solid 1px var(--c2); + border-bottom: solid 1px var(--c2); + background-color: #ffffff15; +} + +.sidebar .header { + margin-top: 0px; + border-top: none; +} + +.sidebar .line { + display: flex; + align-items: center; + margin-top: 8px; + margin-left: 6px; + margin-right: 2px; + font-family: "Trebuchet MS"; + color: var(--c1); +} + +.sidebar .label { + color: var(--c1); + min-width: 106px; + font-weight: bold; +} + +.sidebar input, +.sidebar .info, +.sidebar .button { + display: flex; + align-items: center; + flex: 1; + min-width: 20px; + height: 20px; /* 16 */ + margin-right: 6px; + padding: 0px 3px; + background: #ffffff15; + color: var(--c1); + font-size: 14px; + font-family: "Trebuchet MS"; + border: solid 1px var(--c2); + border-radius: 2px; +} + +.sidebar .button { + flex: 1; + display: flex; + width: auto; + align-items: center; + justify-content: center; + cursor: pointer; +} + +.sidebar .button:hover { + background: #ffffff20; +} + +.sidebar .button:active { + background: #ffffff15; +} + +/* .sidebar .info { + border: none; + height: 20px; + font-size: 16px; + padding-left: 4px; +} */ + +.sidebar .setting-w2 { + flex: 0; + width: 16px; + min-width: auto; + margin: 0; +} + +.sidebar .dropbtn { + height: 22px; + font-size: 14px; +}