From bd5eb37e19c679a61bce44572bd216649da03a2d Mon Sep 17 00:00:00 2001 From: v6ctor Date: Sun, 22 Oct 2023 18:43:01 -0400 Subject: [PATCH] Fixed some visual issues with dropdown menu --- css/main.css | 183 ++++++++++++++++----------------------------------- index.html | 14 ++-- js/main.js | 167 ++++++++++++++++++++++------------------------ 3 files changed, 143 insertions(+), 221 deletions(-) diff --git a/css/main.css b/css/main.css index 92a24e5..ccb4989 100755 --- a/css/main.css +++ b/css/main.css @@ -467,8 +467,8 @@ body { border-radius: 4px; border-width: 1.5px; width: 15%; - height: 22.9px; - margin-top: 14.8px; + height: 24px; + margin-top: 13px; margin-right: 30px; background-color: #ffffff; min-width: 60px; @@ -505,153 +505,86 @@ body { background-color: rgb(1, 112, 1); } -details { - position: relative; - width: 20%; - height: 60px; - filter: drop-shadow(2px 4px 6px #00000044); - min-width: 100px; -} - -details[open] { - z-index: 1; -} - -summary { - height: 20px; - padding: .7rem; - cursor: pointer; - border-radius: 5px; - margin-top: 14.5px; - background-color: #f1f1f1; - list-style: none; +/* Dropdown Selector */ +li a { + text-decoration: none; + color: #2d2f31; } -summary::-webkit-details-marker { - display: none; +.change-height { + width: 250px; + height: 100%; + background: #d9d9d9; + margin-top: 14px; + margin-left: 5px; + border-radius: 4px; + margin-bottom: 0px; } -details[open] summary:before { - content: ''; +#ss-span { + padding : 11px; + border-radius: 4px; + background : #F46523; + color : white; + font-size : 100%; + cursor : pointer; display: block; - width: 100vw; - height: 100vh; - background: transparent; - position: fixed; - top: 0; - left: 0; + filter: drop-shadow(4px 6px 10px #00000044); } -summary:after { - content: ''; - display: inline-block; - margin-right: 2px; - margin-top: 3px; +#ss-span::after { float: right; - width: .5rem; - height: .5rem; - border-bottom: 1px solid currentColor; - border-left: 1px solid currentColor; - border-bottom-left-radius: 2px; - transform: rotate(45deg) translate(50%, 0%); - transform-origin: center center; - transition: transform ease-in-out 100ms; - cursor: pointer; + right: 10%; + content: "+"; } -summary:focus { - outline: none; -} - -details[open] summary:after { - transform: rotate(-45deg) translate(0%, 0%); -} - -ul { +.slide { + clear: both; width: 100%; - background: #ddd; - position: absolute; - top: calc(100% + .5rem); - left: 0; - padding: 1rem; - margin: 0; - box-sizing: border-box; - border-radius: 5px; - max-height: 200px; - overflow-y: auto; -} - -li { - list-style: none; + height: 0; + overflow: hidden; + text-align: center; + transition: height .4s ease; + padding: 0; margin: 0; - padding-top: 0rem; - padding: 1rem 0; - border-bottom: 1px solid #ccc; -} - -li:first-child { - padding-top: 0; -} - -li:last-child { - padding-bottom: 0; - border-bottom: none; } -summary.radios { - counter-reset: radios; -} - -summary.radios:before { - content: var(--selection); -} - -input[type=radio] { - counter-increment: radios; - appearance: none; - display: none; - -} +.slide li { + list-style-type: none; + padding : 14px; + cursor: pointer; + color: #2d2f31; -input[type=radio]:checked { - border: none; - display: inline; - --display: block; } -input[type=radio]:after { - content: attr(title); - text-overflow: ellipsis; - display: inline; - font-size: 1rem; - height: 50px; - font-family: 'Raleway', sans-serif; - cursor: pointer; +.slide li:hover { + background-color: #aaaaaa36; + border-radius: 4px; } -ul.list { - counter-reset: labels; - height: 48px; - background-color: #f1f1f1; +.slide a { + color: #2d2f31; } -.label-plan { +#touch { + position: absolute; + opacity: 0; + height: 0; width: 100%; - display: flex; - cursor: pointer; - justify-content: center; +} -} +#touch:checked + .slide { + height: 0; + width: 100%; + max-height: 0; + overflow: scroll; + transition: max-height .4s, height .4s ease, display .4s ease-out; +} - -.label-plan span { - --display: none; - display: var(--display); - width: 1rem; - height: 1rem; - border: 1px solid #727272; - border-radius: 3px; -} +#touch:not(:checked) + .slide { + display: none; + transition: max-height .4s, height .4s ease, display .4s ease-out; +} .delete-plan { margin-left: 10px; diff --git a/index.html b/index.html index 7c8634b..0712306 100755 --- a/index.html +++ b/index.html @@ -58,15 +58,11 @@

-
- - - - -
    - -
-
+

diff --git a/js/main.js b/js/main.js index 8dff3a1..47da3fc 100755 --- a/js/main.js +++ b/js/main.js @@ -24,7 +24,7 @@ let hackerList let fullCalendar let clickEventId -let plansCount = 1 +let plansCount = 0 const normalEventColor = '#31425F' const highlightEventColor = '#F46523' @@ -278,46 +278,40 @@ function registerSW() { function loadPlanFromCookies() { - var counter = 1 - for (let cookieName in Cookies.get()) { if (cookieName != "undefined" && cookieName != "parent-option-2"){ - var parent = document.getElementById('parent-option') - var parentElement = document.createElement('input') - - parentElement.setAttribute('type', 'radio'); - parentElement.setAttribute('name', 'items'); - parentElement.setAttribute('id', cookieName); - parentElement.setAttribute('title', cookieName); - - parent.appendChild(parentElement) - - var parent_two = document.getElementById('parent-option-2') - var newElement = document.createElement('li') - var secondElement = document.createElement('label') - - secondElement.setAttribute('class', 'label-plan') - secondElement.setAttribute('id', cookieName) - secondElement.setAttribute('for', cookieName) - secondElement.setAttribute('name', 'items') - - var text = document.createTextNode(cookieName) - secondElement.appendChild(text) - - if (counter == 1) { - var thirdElement = document.createElement('span') - secondElement.appendChild(thirdElement) - } - - newElement.appendChild(secondElement) - parent_two.appendChild(newElement) - - plansCount = plansCount + 1 - counter = counter + 1 + // Creates and styles the dropdown menu + var parent = document.querySelector('.slide'); + + var child = document.createElement('li'); + var grandchild = document.createElement('a'); + var text = document.createTextNode(cookieName); + + grandchild.setAttribute('href', '#') + grandchild.setAttribute('id', cookieName) + grandchild.appendChild(text); + child.setAttribute('id', cookieName); + child.appendChild(grandchild); + parent.appendChild(child); + + plansCount = plansCount + 1 } } + + var parent = document.querySelector('.slide'); + + if (plansCount == 1) { + parent.style.height = '50px'; + parent.style.maxHeight = '50px'; + } else if (plansCount > 1) { + parent.style.height = '100px'; + parent.style.maxHeight = '100px'; + } else { + parent.style.height = '0px'; + parent.style.maxHeight = '0px'; + } } function createPlan(plan) { @@ -384,8 +378,9 @@ function changePlan(plan) { } function removeCookie(cookieName) { - + if (Cookies.get(cookieName)) { + cookieName = cookieName.replaceAll(' ', '%20'); document.cookie = cookieName +'=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;'; console.log(`Cookie "${cookieName}" removed successfully`) } else { @@ -396,21 +391,32 @@ function removeCookie(cookieName) { function deletePlan() { - // Must go first or cookie will be reassigned - if (Cookies.get(plan)) { - clearAll() - removeCookie(plan) + var cookie = Cookies.get(plan); - var childElement = document.getElementById(plan) - childElement.remove() - - var childElementS = document.getElementById(plan) - var parentElement = childElementS.parentNode + // Must go first or cookie will be reassigned + if (cookie) { + if (cookie.split(',') > 0){ + window.alert('in if'); + clearAll(); + } + removeCookie(plan); - parentElement.removeChild(childElementS) + var child = document.getElementById(plan); + var parent = document.querySelector('.slide'); + child.remove(); + plansCount--; - parentElement.parentNode.removeChild(parentElement) - } + if (plansCount == 1) { + parent.style.height = '50px'; + parent.style.maxHeight = '50px'; + } else if (plansCount > 1) { + parent.style.height = '100px'; + parent.style.maxHeight = '100px'; + } else { + parent.style.height = '0px'; + parent.style.maxHeight = '0px'; + } + } } @@ -418,6 +424,7 @@ function savePlan() { // Get user input plan name plan = document.getElementById('plan-name').value; + var parent = document.querySelector('.slide'); clearAll() // Avoids duplicate plans with same name @@ -430,59 +437,45 @@ function savePlan() { createPlan(plan) // Creates and styles the dropdown menu - var parent = document.getElementById('parent-option'); + var child = document.createElement('li'); + var grandchild = document.createElement('a'); + var text = document.createTextNode(plan); - var parentElement = document.createElement('input'); + grandchild.setAttribute('href', '#'); + grandchild.setAttribute('id', plan); + grandchild.appendChild(text); - parentElement.setAttribute('type', 'radio'); - parentElement.setAttribute('name', 'items'); - parentElement.setAttribute('id', plan); - parentElement.setAttribute('title', plan); - - parent.appendChild(parentElement) - - var parent_two = document.getElementById('parent-option-2'); - var newElement = document.createElement('li'); - var secondElement = document.createElement('label') - - secondElement.setAttribute('class', 'label-plan') - secondElement.setAttribute('id', plan) - secondElement.setAttribute('for', plan) - secondElement.setAttribute('name', 'items') - - var text = document.createTextNode(plan) - secondElement.appendChild(text) - - if (plansCount == 1) { - var thirdElement = document.createElement('span') - secondElement.appendChild(thirdElement) - } - - newElement.appendChild(secondElement) - parent_two.appendChild(newElement) - -} + child.setAttribute('id', plan); + child.appendChild(grandchild); + parent.appendChild(child); + } plansCount = plansCount + 1; + if (plansCount == 1) { + parent.style.height = '50px'; + parent.style.maxHeight = '50px'; + } else if (plansCount > 1) { + parent.style.height = '100px'; + parent.style.maxHeight = '100px'; + } else { + parent.style.height = '0px'; + parent.style.maxHeight = '0px'; + } + } function setupEventListeners() { document.getElementById('toggleCal').addEventListener('click', toggleCal) document.getElementById('exportBtn').addEventListener('click', exportBtn) document.getElementById('save-button').addEventListener('click', savePlan) document.getElementById('cc-button').addEventListener('click', deletePlan) - - // var toggle = document.getElementById('isToggled') - // toggle.addEventListener('click', function(){ - // this.classList.toggle('expanded') - // }) // Listens to plan dropdown changes and changes plans accordingly - - var parentId = document.getElementById('parent-option-2'); + var parentId = document.querySelector('.slide'); parentId.addEventListener('click', function(event){ - if (event.target.id) { - plan = event.target.id; + if (event) { + event.preventDefault(); + plan = event.target.getAttribute('id'); changePlan(plan); } });