diff --git a/.github/workflows/unit.yml b/.github/workflows/unit.yml
index ac93c2e..58f669e 100644
--- a/.github/workflows/unit.yml
+++ b/.github/workflows/unit.yml
@@ -14,4 +14,4 @@ jobs:
run: npm install
- name: Unit Test
- run: npm test ./testing/sum_tests.test.js
+ run: npm run test-unit
diff --git a/jsdom.config.json b/jsdom.config.json
new file mode 100644
index 0000000..73c307e
--- /dev/null
+++ b/jsdom.config.json
@@ -0,0 +1,5 @@
+{
+ "transform": {},
+ "testEnvironment": "jsdom",
+ "verbose": true
+}
diff --git a/package.json b/package.json
index 39b5faa..d1b66d9 100644
--- a/package.json
+++ b/package.json
@@ -7,10 +7,12 @@
"globals": "^15.2.0",
"jest": "^29.7.0",
"jest-puppeteer": "^10.0.1",
- "puppeteer": "^22.10.0"
+ "puppeteer": "^22.10.0",
+ "jest-environment-jsdom": "^29.7.0"
},
"scripts": {
- "test": "jest --maxWorkers=1"
+ "test": "jest --maxWorkers=1 testing/puppeteer.test.js",
+ "test-unit": "node --experimental-vm-modules node_modules/jest/bin/jest.js --config=jsdom.config.json testing/unit.test.js"
},
"type": "module",
"jest": {
@@ -21,11 +23,11 @@
"jest-puppeteer": {
"launch": {
"headless": true,
- "slowMo": 25,
+ "slowMo": 1,
"defaultViewport": null
}
},
"dependencies": {
"jsdoc": "^4.0.3"
}
-}
\ No newline at end of file
+}
diff --git a/source/calendar/calendar.css b/source/calendar/calendar.css
index a4e83f5..9710d94 100644
--- a/source/calendar/calendar.css
+++ b/source/calendar/calendar.css
@@ -1,3 +1,5 @@
+/* ********** Start of Universal Styling ********** */
+
* {
margin: 0;
box-sizing: border-box;
@@ -24,35 +26,44 @@ main {
overflow: hidden;
height: 100%;
position: relative;
-
}
-/* Remove background for all buttons */
+/* Universal background color for buttons to clear */
button {
background-color: rgba(0,0,0,0);
border: rgba(0,0,0,1);
}
+/* Remove outline around focused button */
+button:focus {
+ outline: none;
+}
+
+/* Change mouse cursor when hovering over button */
+button:hover {
+ cursor: pointer;
+}
+
/* Remove background for all select boxes */
select {
background-color: rgba(0,0,0,0);
border: rgba(0,0,0,1);
appearance: none;
}
-
-/* TASK LIST */
-/* Start of task list */
+
+/* ********** End of Universal Styling **** */
+
+/* ********** Start of Task List ********** */
+
.task-list {
flex: 0 0 18%;
- max-width: 17rem; /* Prevents task list expanding with long task names */
+ max-width: 17rem;
height:100%;
margin: 5px;
padding: 1%;
border-radius: 15px;
background-color: white;
box-shadow: 3px 3px 3px lightgrey;
-
- /* Set size of task area to be relative to list */
position: relative;
}
@@ -63,20 +74,8 @@ select {
bottom: 0;
width: 88%;
overflow: auto;
-
- /* Hide scroll-bars for Firefox, Edge */
- -ms-overflow-style: none; /* IE and Edge */
- scrollbar-width: none; /* Firefox */
-}
-
-/* Hides task list when page reaches certain size */
-@media (max-width: 800px) {
- .task-list {
- display: none;
- }
- .journal-past-wrap .task-list {
- display: block;
- }
+ -ms-overflow-style: none;
+ scrollbar-width: none;
}
/* Formatting for the task list header */
@@ -96,21 +95,14 @@ select {
cursor: pointer;
}
-/* Wrap for task name and checkbox */
-/* .task-list .input-wrap {
- display: flex;
- justify-content: flex-start;
-} */
-
/* Styling for task name */
.task-list .task-name {
width: max(10em, 12vw);
- resize: none; /* Prevents user from resizing */
- overflow: hidden; /* Hides scrollbar */
+ resize: none;
+ overflow: hidden;
margin-top: -4px;
height: 24px;
max-height: 108px;
- /* Hide background and border */
background-color: rgba(0, 0, 0, 0);
border: rgba(0, 0, 0, 0);
}
@@ -137,8 +129,7 @@ select {
overflow: hidden;
word-wrap: break-word;
text-align: left;
- list-style-type: none; /* Get rid of li bullet points */
- /* Set max height */
+ list-style-type: none;
transition: max-height 0.5s ease-in;
max-height: 4em;
}
@@ -178,15 +169,14 @@ select {
content: attr(placeholder);
pointer-events: none;
display: block;
-
color: rgb(97, 97, 97)
}
/* Positioning for trash icon */
-.fas.fa-trash-alt {
- position: absolute; /* Positioning relative to the nearest positioned ancestor */
- top: 2px; /* Distance from the top edge of the li */
- right: 2px; /* Distance from the right edge of the li */
+.trash-icon {
+ position: absolute;
+ top: 2px;
+ right: 2px;
width: 18px;
height: 18px;
cursor: pointer;
@@ -194,7 +184,7 @@ select {
/* Display buttons when hovering or actively editing */
.task:hover .color-buttons {
- opacity: 1; /* Brings the buttons back into view */
+ opacity: 1;
}
/* Checkbox appearance */
@@ -224,20 +214,19 @@ select {
/* Default set up for color buttons */
.color-buttons {
- opacity: 0; /* Hide buttons */
- transition: opacity 0.3s ease; /* Transition for buttons reappearing */
- max-height: 5em; /* Enough max-height to show the content */
- display: flex; /* Lays out the buttons in a row */
- justify-content: space-around; /* Spaces buttons evenly */
- margin-top: 5px; /* Space from the description */
+ opacity: 0;
+ transition: opacity 0.3s ease;
+ max-height: 5em;
+ display: flex;
+ justify-content: space-around;
+ margin-top: 5px;
}
/* Size of each color button */
.color-button {
- width: 15px; /* Uniform button size */
- height: 15px; /* Uniform button size */
- border-radius: 100%; /* Makes the buttons circular */
-
+ width: 15px;
+ height: 15px;
+ border-radius: 100%;
border: solid grey 1px;
&#purple {
@@ -261,13 +250,14 @@ select {
}
}
-/* ********** End of task list ********** */
+/* ********** End of Task List ********** */
-/* ********** Start of top bar ********** */
+/* ********** Start of Top Bar ********** */
+
+/* Container of prev/next buttons, current date, and homepage-calendar buttons */
.top-bar {
position: relative;
height: 65px;
-
}
.date-header-wrap {
@@ -276,20 +266,17 @@ select {
height: 100%;
width: min(70em, 100%);
width: 100%;
-
display: grid;
grid-template-columns: 1fr 1fr;
}
-/* Next, Prev, and Header organization */
+/* Container of prev/next buttons, current date */
.date-header {
display: grid;
grid-template-columns: 1fr 8fr;
margin-left: 1.1em;
-
position: absolute;
bottom: 0;
-
width: 50%;
max-width: 40em;
}
@@ -299,7 +286,7 @@ select {
background-color: var(--secondary-color);
}
-/* Calendar date header */
+/* Container of the previous and next day buttons*/
.date-header-text {
width: 100%;
margin-top: auto;
@@ -340,11 +327,6 @@ select {
padding-right: 0em;
}
-/* Add cursor when hovering over buttons */
-button:hover {
- cursor: pointer;
-}
-
/* Jump header that contains the month and year */
.jump-header {
display: flex;
@@ -439,7 +421,6 @@ button:hover {
.date-header-buttons {
display: grid;
grid-template-columns: 1.2em 1fr;
-
margin-top: auto;
margin-bottom: min(0.6em, 14%);
margin-left: 0.4em;
@@ -450,10 +431,7 @@ button:hover {
.prev-date-btn {
width: 2em;
height: 2em;
-
border-radius: 4em;
-
- /* Add button image */
background-image: url('../icons/left-icon.png');
background-size: 14px 14px;
background-repeat: no-repeat;
@@ -464,15 +442,10 @@ button:hover {
/* Goto next month button */
.next-date-btn {
float: left;
-
width: 2em;
height: 2em;
-
margin-left: 0.4em;
-
border-radius: 4em;
-
- /* Add button image */
background-image: url('../icons/right-icon.png');
background-size: 14px 14px;
background-repeat: no-repeat;
@@ -549,7 +522,6 @@ tbody td {
padding-top: 1px;
}
-/* Calendar date */
td .cell-date {
position: absolute;
left: 5px;
@@ -624,6 +596,12 @@ td .productivity-icon {
left: 0;
}
+/* Highlight boxes when hovering over specific calendar cell */
+.a-link:hover {
+ background-color: skyblue;
+ opacity: 0.3;
+}
+
/* Media query to handle window resizing */
@media (max-height: 500px) {
.task-ul {
@@ -637,5 +615,42 @@ td .productivity-icon {
}
}
-/* ********** End of Calendar ********** */
+/* ********** End of Calendar Table ********** */
+
+/* ********** Start of Responsiveness ********** */
+
+@media (max-width: 740px) {
+ main {
+ overflow-x: scroll;
+ }
+
+ .task-list {
+ flex: 0 0 25%;
+ z-index: 100000;
+ transition: transform 0.3s ease;
+ transform: translateX(-88%);
+ }
+
+ .task-list.active {
+ transform: translateX(0%);
+ }
+
+ .task-wrapper {
+ display: none;
+ }
+
+ .task-wrapper.active {
+ display: block;
+ }
+
+ .full-calendar {
+ position: absolute;
+ left: 5%;
+ bottom: 0;
+ top: 0;
+ right: 0;
+ }
+}
+
+/* ********** End of Responsiveness ********** */
diff --git a/source/calendar/calendar.js b/source/calendar/calendar.js
index 7c7c5a5..3538864 100644
--- a/source/calendar/calendar.js
+++ b/source/calendar/calendar.js
@@ -24,6 +24,7 @@ function updateDateGlobals() {
function init() {
// Initiaze the jump buttons
displayJump(year - 6, year + 5);
+ taskListViewHandler();
// Initially display the calendar, calendar header, and task colors
calendarHeader();
@@ -35,8 +36,6 @@ function init() {
loadTasks();
}
-
-// FUNCTIONS
/**
* Initializes the buttons for adding tasks, navigating months, and other functionalities.
*/
@@ -47,16 +46,16 @@ function initButtons() {
addTask();
});
- // PREVIOUS MONTH BUTTON
+ // Previous month button
let prevBtn = document.querySelector(".prev-date-btn");
prevBtn.addEventListener('click', prev);
- // NEXT MONTH BUTTON
+ // Next month button
let nextBtn = document.querySelector(".next-date-btn");
nextBtn.addEventListener('click', next);
- // JUMP HEADER BUTTONS
- // LIST OF MONTHS
+ // Jump header buttons
+ // List of months
let monthJumpBtn = document.querySelectorAll(".month-btn");
monthJumpBtn.forEach(btn => {
btn.addEventListener("click", () => {
@@ -64,7 +63,7 @@ function initButtons() {
jump(monthValue, year);
});
});
- // LIST OF YEARS
+ // List of years
let yearJumpBtn = document.querySelectorAll(".year-btn");
yearJumpBtn.forEach(btn => {
btn.addEventListener("click", () => {
@@ -73,10 +72,10 @@ function initButtons() {
});
});
- // RESIZE WINDOW FOR RESPONSIVENESS
+ // Resize window for responsiveness
window.addEventListener('resize', windowWidth);
- // ADD LEFT/RIGHT ARROWS TO GOTO PREV/NEXT MONTHS
+ // Add left/right arrows to goto prev/next months
window.addEventListener('keydown', function(event) {
if (event.key === "ArrowLeft") {
prev();
@@ -87,7 +86,7 @@ function initButtons() {
}
/**
- * Updates the global currDate to the next date and displays the next month
+ * Updates the global currDate to the next date and displays the next month.
*/
function next(){
// Increment the month
@@ -108,15 +107,17 @@ function prev() {
/**
* Adds a task to the task list upon "Add Task" button click.
+ *
* @param {boolean} [loadTask=false] - Indicates whether the task is being loaded from storage.
* @returns {HTMLElement} - The newly created task element.
*/
function addTask(loadTask = false) {
- // add a task to an element of task container
+ // Add a task to an element of task container
const taskList = document.querySelector(".task-container");
const task = document.createElement("li");
- task.setAttribute("class", "task");
- // add it at the first row
+ task.className = "task";
+
+ // Add it at the first row
task.insertAdjacentHTML("beforeend", `
@@ -129,23 +130,25 @@ function addTask(loadTask = false) {
- 
+
`);
task.querySelector(".task-input").addEventListener("input", saveTasks);
taskList.append(task);
- // listener to stop editing when user presses enter
+ // Listener to stop editing when user presses enter
const task_name = task.querySelector(".task-input");
task_name.addEventListener('keydown', function (event) {
+ // Shift + Enter pressed, insert a line break
if (event.key == 'Enter') {
+ // Enter pressed, end editing
if (!event.shiftKey) {
- // Shift+Enter pressed, insert a line break
- // Enter pressed, end editing
- event.preventDefault(); // Prevent default behavior of Enter key
- task_name.blur(); // Remove focus from the element
- //li.classList.remove('active');
+ // Prevent default behavior of Enter key
+ event.preventDefault();
+
+ // Remove focus from the element
+ task_name.blur();
}
}
});
@@ -161,7 +164,7 @@ function addTask(loadTask = false) {
}, 0);
}
- // add functionality to task buttons
+ // Add functionality to task buttons
taskButtonsFunctionality(task);
return task;
@@ -169,13 +172,12 @@ function addTask(loadTask = false) {
/**
* Adds button functionality to a task upon creation.
+ *
* @param {HTMLElement} task - The task element to add functionality to.
*/
function taskButtonsFunctionality(task) {
-
- /* Implement color changing functionality */
+ // Implement color changing functionality
const colorBtns = task.querySelectorAll(".color-button");
- console.log(colorBtns);
colorBtns.forEach(btn => {
btn.addEventListener('click', function () {
let color;
@@ -200,19 +202,18 @@ function taskButtonsFunctionality(task) {
});
});
- /* Trash icon delete functionality */
- const deleteIcon = task.querySelector(".fas");
+ // Trash icon delete functionality
+ const deleteIcon = task.querySelector(".trash-icon");
deleteIcon.addEventListener("click", () => {
task.remove();
saveTasks();
});
- /* Checkbox move to Completed Tasks functionality */
+ // Checkbox move to completed tasks functionality
const checkbox = task.querySelector(".task-checkbox");
checkbox.addEventListener('click', function () {
- // Add or remove completed from class name
- // Find closest li item (task)
+ // Add or remove completed from class name
if (task.className.includes('complete')) {
task.classList.remove('complete');
const taskContainer = document.querySelector('.task-container');
@@ -229,8 +230,32 @@ function taskButtonsFunctionality(task) {
});
}
+/**
+ * Expands task list from collapsed state.
+ */
+function taskListViewHandler() {
+ const taskList = document.querySelector('.task-list');
+ const taskWrap = document.querySelector('.task-wrapper');
+ const outSide = document.querySelector('.full-calendar');
+ taskList.addEventListener('click', function(event) {
+ if (event.target === taskList) {
+ if (window.innerWidth <= 800) {
+ taskList.classList.toggle('active');
+ taskWrap.classList.toggle('active');
+ }
+ }
+ });
+ outSide.addEventListener('click', function(){
+ if (window.innerWidth <= 800) {
+ taskList.classList.remove('active');
+ taskWrap.classList.remove('active');
+ }
+ });
+}
+
/**
* Saves the completed tasks for a specific day.
+ *
* @param {HTMLElement} completedTaskElement - The task element that was completed.
*/
function saveCompleted(completedTaskElement) {
@@ -273,9 +298,9 @@ function displayCalendar() {
monthHeader.textContent = allMonths[parseInt(month, 10)];
yearHeader.textContent = year;
- let currDay;
- // BUILD CALENDAR
+ // Build Calendar
// Loop through number of rows
+ let currDay;
for (let i = 0; i < 6; i++) {
// Create rows
let row = document.createElement("tr");
@@ -330,7 +355,6 @@ function displayCalendar() {
if (cellDate <= today) {
loadCellDataTest(cellData, currCalendarMonth);
- // loadCellData(cellData, currCalendarMonth);
}
// Append new cell to row
row.appendChild(cellData);
@@ -348,6 +372,7 @@ function displayCalendar() {
/**
* Loads cell data such as rating, productivity, and tasks for a specific date in the calendar.
+ *
* @param {HTMLElement} cellData - The table cell element to populate with data.
* @param {Date} currCalendarMonth - The current month being displayed in the calendar.
*/
@@ -365,6 +390,7 @@ function loadCellDataTest(cellData, currCalendarMonth) {
sentimentIcon.src = `../icons/${RATING_FILES_NAMES[rating - 1]}`;
sentimentIcon.alt = "sentiment icon";
sentimentIcon.className = "sentiment-icon";
+
// Append sentiment icon to new cell
cellData.appendChild(sentimentIcon);
}
@@ -375,6 +401,7 @@ function loadCellDataTest(cellData, currCalendarMonth) {
productivityIcon.src = `../icons/${PRODUCTIVITY_FILES_NAMES[productivity - 1 - 5]}`;
productivityIcon.alt = "productivity icon";
productivityIcon.className = "productivity-icon";
+
// Append sentiment icon to new cell
cellData.appendChild(productivityIcon);
}
@@ -383,6 +410,7 @@ function loadCellDataTest(cellData, currCalendarMonth) {
// Create tasklist div
let taskDiv = document.createElement("div");
taskDiv.className = "task-div";
+
// Create unordered list
let taskList = document.createElement("ul");
taskList.className = "task-ul";
@@ -397,7 +425,7 @@ function loadCellDataTest(cellData, currCalendarMonth) {
}
if (tasks.length > DISPLAY_TASK_COUNT) {
- // extra tasks
+ // Handle extra tasks in calendar view
let taskExtra = document.createElement("li");
taskExtra.textContent = `${tasks.length - DISPLAY_TASK_COUNT} more tasks`;
taskExtra.className = "task-indicator";
@@ -407,10 +435,10 @@ function loadCellDataTest(cellData, currCalendarMonth) {
// Append taskList to task div;
taskDiv.appendChild(taskList);
+
// Append tasklist div to new cell
cellData.appendChild(taskDiv);
-
// Create buttons that link to speciic homepage and extract selected date
let aLink = document.createElement("a");
let dayLink = currCalendarMonth.getDate();
@@ -425,11 +453,12 @@ function loadCellDataTest(cellData, currCalendarMonth) {
/**
* Generates a dropdown for year and month selection.
+ *
* @param {number} startYear - The start year for the dropdown range.
* @param {number} endYear - The end year for the dropdown range.
*/
function displayJump(startYear, endYear) {
- // YEARS
+ // Years
let yearDropdown = document.getElementById("year-dropdown")
// Loop through year range and append to list
@@ -442,13 +471,14 @@ function displayJump(startYear, endYear) {
}
- // MONTHS
+ // Months
let allMonths = [
"January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"
];
- let monthDropdown = document.getElementById("month-dropdown")
+
// Loop through months and append to list
+ let monthDropdown = document.getElementById("month-dropdown")
for (let mnth = 0; mnth < 12; mnth++) {
let monthJump = document.createElement("button");
monthJump.value = mnth;
@@ -459,7 +489,8 @@ function displayJump(startYear, endYear) {
}
/**
- * Function to jump to a specific month and year
+ * Function to jump to a specific month and year.
+ *
* @param {number} mnth - month to jump to
* @param {number} yr - year to jump to
*/
@@ -470,7 +501,7 @@ function jump(mnth, yr) {
}
/**
- * Creates header of the calendar
+ * Creates header of the calendar.
*/
function calendarHeader(){
// Initialize list of days of the week
@@ -518,30 +549,23 @@ function windowWidth() {
document.getElementById('year-dropdown').style.left = monthWidth + 5 + 'px';
}
-//------------------------------------------
-// Save journal entry
+/* ********** Storage and Population ********** */
// Get the all relevent elements from page
const tasks = document.querySelector(".task-container");
-// Load journal entry and tasks from local storage on page load
-window.onload = function () {
- // loadTasks();
-}
-
// Save journal entry and tasks to local storage on page unload
window.onbeforeunload = function () {
saveTasks()
}
/**
- * Save journal entry to local storage
- *
- * @param {string} data - journal entry text in parsed json format
- * @param {string} dateText - date of the journal entry in locale date string format
- * @param {string} key - key to store the value under
- * @param {string} value - value to store
+ * Save journal entry to local storage.
*
+ * @param {string} data - Journal entry text in parsed json format.
+ * @param {string} dateText - Date of the journal entry in locale date string format.
+ * @param {string} key - Key to store the value under.
+ * @param {string} value - Value to store.
*/
function saveToStorage(data, dateText, key, value) {
if (!(dateText in data)) {
@@ -566,9 +590,9 @@ function loadFromStorage(data, dateText, key) {
}
/**
- * Get journal entry from local storage
+ * Get journal entry from local storage.
*
- * @returns {Object} journal entry text in parsed json format
+ * @returns {Object} - Journal entry text in parsed json format.
*/
function getJournal() {
let data = JSON.parse(localStorage.getItem("journals"))
@@ -579,12 +603,11 @@ function getJournal() {
}
/**
- * Save tasks to local storage
+ * Save tasks to local storage.
*/
function saveTasks() {
let tasks = [];
document.querySelectorAll('.task-container li').forEach(task => {
- //let checkbox = task.querySelector('input[type="task-checkbox"]');
let taskName = task.querySelector('.task-input').textContent;
let taskColor = task.style['background-color']
tasks.push({
@@ -596,9 +619,9 @@ function saveTasks() {
}
/**
- * Get tasks from local storage
+ * Get tasks from local storage.
*
- * @returns {string} tasks in parsed json format or empty array if no tasks
+ * @returns {string} - Tasks in parsed json format or empty array if no tasks.
*/
function getTasks() {
let storedTasks = localStorage.getItem("tasks");
@@ -606,7 +629,7 @@ function getTasks() {
}
/**
- * Load tasks from local storage
+ * Load tasks from local storage.
*/
function loadTasks() {
let tasks = getTasks();
@@ -615,12 +638,11 @@ function loadTasks() {
let curLi = addTask(true);
curLi.querySelector(".task-input").textContent = task['text']
curLi.style['background-color'] = task['color']
- //curLi.querySelector('input[type="checkbox"]').checked = task['checked']
});
}
}
-// Save journal entry and tasks to local storage on events
+// Save journal entry and tasks to local storage on events.
tasks.addEventListener("blur", saveTasks)
tasks.addEventListener("change", saveTasks)
\ No newline at end of file
diff --git a/source/homepage/homepage.css b/source/homepage/homepage.css
index 7570cf4..6ac7978 100644
--- a/source/homepage/homepage.css
+++ b/source/homepage/homepage.css
@@ -1,23 +1,26 @@
+/* ********** Start of Universal Styling ********** */
+
* {
margin: 0;
box-sizing: border-box;
-
font-family: "Poppins", sans-serif;
--main-color: #f2f2f2;
--secondary-color: #d1d8e3;
--accent-color: #a8ceec;
-
}
+
html {
height: 100%;
background-color: yellow;
overflow: hidden;
}
+
body {
height: 100%;
background-color: var(--main-color);
}
+
main {
display: flex;
overflow: hidden;
@@ -31,18 +34,29 @@ button {
border: rgba(0,0,0,1);
}
-/* ********** Start of task list ********** */
+/* Remove outline around focused button */
+button:focus {
+ outline: none;
+}
+
+/* Change mouse cursor when hovering over button */
+button:hover {
+ cursor: pointer;
+}
+
+/* ********** End of Universal Styling **** */
+
+/* ********** Start of Task List ********** */
+
.task-list {
flex: 0 0 18%;
- max-width: 17rem; /* Prevents task list expanding with long task names */
+ max-width: 17rem;
height:100%;
margin: 5px;
padding: 1%;
border-radius: 15px;
background-color: white;
box-shadow: 3px 3px 3px lightgrey;
-
- /* Set size of task area to be relative to list */
position: relative;
}
@@ -64,10 +78,8 @@ button {
bottom: 0;
width: 88%;
overflow: auto;
-
- /* Hide scroll-bars for Firefox, Edge */
- -ms-overflow-style: none; /* IE and Edge */
- scrollbar-width: none; /* Firefox */
+ -ms-overflow-style: none;
+ scrollbar-width: none;
}
/* Wrapper for overflow of completed tasks */
@@ -77,10 +89,8 @@ button {
height: 82%;
width: 96%;
overflow: auto;
-
- /* Hide scroll-bars for Firefox, Edge */
- -ms-overflow-style: none; /* IE and Edge */
- scrollbar-width: none; /* Firefox */
+ -ms-overflow-style: none;
+ scrollbar-width: none;
}
/* Aligns add button to right */
@@ -98,11 +108,10 @@ button {
/* Styling for task name */
.task-list .task-name {
width: max(10em, 12vw);
- resize: none; /* Prevents user from resizing */
+ resize: none;
margin-top: -4px;
height: 24px;
max-height: 108px;
- /* Hide background and border */
background-color: rgba(0, 0, 0, 0);
border: rgba(0, 0, 0, 0);
}
@@ -128,12 +137,12 @@ button {
position: relative;
word-wrap: break-word;
text-align: left;
- list-style-type: none; /* Get rid of li bullet points */
- /* Set max height */
+ list-style-type: none;
transition: max-height 0.5s ease-in;
max-height: 4em;
}
+/* Expands individual taskbox when hovered over */
.task:hover {
max-height: fit-content;
}
@@ -174,10 +183,10 @@ button {
}
/* Positioning for trash icon */
-.fas.fa-trash-alt {
- position: absolute; /* Positioning relative to the nearest positioned ancestor */
- top: 2px; /* Distance from the top edge of the li */
- right: 2px; /* Distance from the right edge of the li */
+.trash-icon {
+ position: absolute;
+ top: 2px;
+ right: 2px;
width: 18px;
height: 18px;
cursor: pointer;
@@ -185,7 +194,7 @@ button {
/* Display buttons when hovering or actively editing */
.task:hover .color-buttons {
- opacity: 1; /* Brings the buttons back into view */
+ opacity: 1;
}
/* Checkbox appearance */
@@ -215,20 +224,19 @@ button {
/* Default set up for color buttons */
.color-buttons {
- opacity: 0; /* Hide buttons */
- transition: opacity 0.3s ease; /* Transition for buttons reappearing */
- max-height: 5em; /* Enough max-height to show the content */
- display: flex; /* Lays out the buttons in a row */
- justify-content: space-around; /* Spaces buttons evenly */
- margin-top: 5px; /* Space from the description */
+ opacity: 0;
+ transition: opacity 0.3s ease;
+ max-height: 5em;
+ display: flex;
+ justify-content: space-around;
+ margin-top: 5px;
}
-/* Size of each color button */
+/* Size, shape, and color of each color button */
.color-button {
- width: 15px; /* Uniform button size */
- height: 15px; /* Uniform button size */
- border-radius: 100%; /* Makes the buttons circular */
-
+ width: 15px;
+ height: 15px;
+ border-radius: 100%;
border: solid grey 1px;
&#purple {
@@ -252,19 +260,21 @@ button {
}
}
+/* ********** End of Task List ********** */
+/* ********** Start of Main Wrap ******** */
-/* ********** End of task list ********** */
-
+/* Container of top bar, journal, feeling widgets, completed tasks, and past week */
.main-wrap {
flex: 1;
position: relative;
float: left;
-
height: 100%;
}
-/* ********** Start of top bar ********** */
+/* ========== Start of top bar ========== */
+
+/* Container of prev/next buttons, current date, and homepage-calendar buttons */
.top-bar {
position: relative;
height: 10%;
@@ -277,41 +287,34 @@ button {
height: 100%;
width: min(70em, 100%);
width: 100%;
-
display: grid;
grid-template-columns: 1fr 1fr;
}
+/* Container of prev/next buttons, current date */
.date-header {
display: grid;
grid-template-columns: 1fr 8fr;
margin-left: 1.1em;
-
position: absolute;
bottom: 0;
-
width: 50%;
max-width: 40em;
}
-/* Wrap the previous and next day buttons*/
+/* Container of the previous and next day buttons*/
.date-header-buttons {
display: grid;
grid-template-columns: 1.2em 1fr;
-
margin-top: auto;
margin-bottom: min(0.6em, 14%);
margin-left: 0.4em;
-
}
.prev-date-btn {
width: 2em;
height: 2em;
-
border-radius: 4em;
-
- /* Add button image */
background-image: url('../icons/left-icon.png');
background-size: 14px 14px;
background-repeat: no-repeat;
@@ -320,16 +323,10 @@ button {
}
.next-date-btn {
- float: left;
-
width: 2em;
height: 2em;
-
margin-left: 0.4em;
-
border-radius: 4em;
-
- /* Add button image */
background-image: url('../icons/right-icon.png');
background-size: 14px 14px;
background-repeat: no-repeat;
@@ -338,6 +335,7 @@ button {
}
+/* Change button background color when hovering over prev/next buttons */
.date-header-buttons button:hover {
background-color: var(--secondary-color);
}
@@ -351,11 +349,6 @@ button {
font-size: calc(1.4em + .7vw);
}
-.date-header button img {
- height: 18px;
- padding: 4px;
-}
-
.nav-buttons {
position: absolute;
top: 0.6em;
@@ -366,11 +359,6 @@ button {
gap: 1em;
}
-.nav-buttons button {
- background-color: transparent;
- border: none;
-}
-
.nav-buttons button img {
width: min(3.4em, 4vw);
min-width: 2.6em;
@@ -378,13 +366,12 @@ button {
padding-right: 0em;
}
-button:hover {
- cursor: pointer;
-}
-/* ********** End of top bar ********** */
+/* ============== End of Top Bar =========== */
-/* ********** Begin Entry Content ********** */
+/* ============ Begin Entry Content ========= */
+
+/* Container of journal, feeling widgets, completed tasks, and past week */
.journal-past-wrap {
width: 100%;
min-width: 40rem;
@@ -392,6 +379,7 @@ button:hover {
max-width: 94.4rem;
}
+/* Container of journal, feeling widgets, completed tasks, and past week */
.today-entry {
width: min(66rem, 100%);
height: 78%;
@@ -399,7 +387,8 @@ button:hover {
padding-left: min(2.1rem, 3%);
}
-/* ********** Start of journal ********** */
+/* ============== Start of Journal ========== */
+
.journal {
height: 60%;
}
@@ -409,11 +398,8 @@ button:hover {
margin-top: 0.4%;
margin-right: 2em;
margin-bottom: 1rem;
-
padding: 0.4em 1em 0.4em 1em;
-
background-color: var(--secondary-color);
-
border-radius: 1em;
}
@@ -421,30 +407,31 @@ button:hover {
width: 100%;
height: 90%;
margin-bottom: 1em;
-
padding-top: 0.2em;
padding-left: 0.4em;
-
background: var(--secondary-color);
-
border: none;
border-radius: 1em;
-
resize: none;
}
+/* Highlight journal when clicked on */
.journal-entry #textarea:focus {
outline: none !important;
border:1px solid var(--accent-color);
box-shadow: 0 0 10px #719ECE;
}
-/* ********** End of journal ********** */
-/* ********** Start of rating ********** */
+/* =========== End of Journal ========= */
+
+/* === Start of Rating and Completed Task ===== */
+
+/* Container of rating and completed tasks */
.rating-completed-wrap {
position: relative;
height: 40%;
}
+
.rating-completed-wrap h4 {
text-align: center;
font-size: max(calc(0.7em + 0.4vw), 15px);
@@ -468,17 +455,6 @@ button:hover {
padding-top: min(1em, 5%);
}
-.feelings {
- display: flex;
- justify-content: center;
- gap: 0em;
- padding-top: calc(0.4em - 1.2vw);
- padding-bottom: min(calc(2.2em - 1.8vw), 1.3em);
- padding-bottom: calc(0.4em - 1.2vw);
-
- padding: 0;
-}
-
.rating-widget button img {
height: max(min(3em, 6vw), 50px);
height: min(50px, 8vw);
@@ -486,15 +462,27 @@ button:hover {
border-radius: 50%;
}
+/* Highlight current hovered feelings button */
.rating-widget button img:hover {
- height: max(min(1em, 1vw), 60px);
+ transform: scale(1.2);
background: radial-gradient(circle, rgb(3, 128, 237) 0%, rgba(0, 0, 0, 0) 100%);
- transition: 0.3s ease-in-out;
+ transition: 0.1s ease-in-out;
}
+/* Highlight current selected feelings button */
.rating-widget img.active, .rating-widget img.active:hover {
background-color: #008FC6;
- transition: 0.5s ease;
+ transition: 0.1s ease;
+}
+
+.feelings {
+ display: flex;
+ justify-content: center;
+ gap: 0em;
+ padding-top: calc(0.4em - 1.2vw);
+ padding-bottom: min(calc(2.2em - 1.8vw), 1.3em);
+ padding-bottom: calc(0.4em - 1.2vw);
+ padding: 0;
}
.productiveness {
@@ -504,29 +492,26 @@ button:hover {
padding-top: calc(1em - 1vw);
}
-/* ********** End of rating ********** */
-
-
-
/* Completed List */
.journal-past-wrap .task-list {
position: absolute;
right: 2em;
width: min(44%, 30rem);
height: 100%;
- margin: 0; /* Overwrite inherited margin from task-list */
+ margin: 0;
max-width: none;
background-color: var(--secondary-color);
-
border-radius: 1em;
-
transform: none;
-
}
-/* ********** End Entry Content ********** */
+/* === End of Rating and Completed Task ===== */
+
+/* ========== End Entry Content ========= */
+
+/* ======== Start of Past Week ========== */
-/* ********** Start of past week ********** */
+/* Container for past week */
.past-week-wrap {
margin-top: 2%;
margin-right: 5%;
@@ -550,7 +535,6 @@ button:hover {
border: black solid 2px;
}
-
/* Calendar Table Styling */
.table-week {
width: 100%;
@@ -558,9 +542,7 @@ button:hover {
table-layout: fixed;
margin: 0;
height: 100%;
-
min-width: 40rem;
-
font-size: min(16px, 1vw);
}
@@ -645,18 +627,32 @@ td .task-div {
left: 0;
z-index: 10;
}
-/* End of past week */
+/* Highlight boxes when hovering over specific calendar cell */
+.a-link:hover {
+ background-color: skyblue;
+ opacity: 0.3;
+}
+
+/* ======== End of Past Week ========== */
+
+/* ******** End of Main Wrap ********** */
+
+/* ****** Start of Responsiveness ****** */
+
+/* Add scroll bar to rating wiget when screen height is small */
@media (max-height: 740px) {
.rating-widget {
overflow: auto;
}
}
+/* Slide task bar offscreen when screen width is small */
@media (max-width: 740px) {
main {
overflow-x: scroll;
}
+
.task-list {
flex: 0 0 25%;
z-index: 100000;
@@ -673,9 +669,11 @@ td .task-div {
}
.main-wrap {
- transform: translateX(-160px);
-
- padding-left: max(2%, 0.5em);
+ position: absolute;
+ left: 3%;
+ bottom: 0;
+ top: 0;
+ right: 0;
}
.task-list.active {
@@ -697,4 +695,6 @@ td .task-div {
.table-week {
font-size: 10px;
}
-}
\ No newline at end of file
+}
+
+/* ****** End of Responsiveness ****** */
\ No newline at end of file
diff --git a/source/homepage/homepage.html b/source/homepage/homepage.html
index 8ee40c0..879592d 100644
--- a/source/homepage/homepage.html
+++ b/source/homepage/homepage.html
@@ -156,7 +156,7 @@ Tasks Completed Today
-
+