Commit f986ee62 authored by gijs's avatar gijs

Hide inline date when day is active

parent e2ea59cc
...@@ -788,7 +788,7 @@ p, h4 { ...@@ -788,7 +788,7 @@ p, h4 {
} }
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {
.loop-wrapper[data-lootp="0"] { .loop-wrapper[data-loop="0"] {
--highlight-color: black; --highlight-color: black;
} }
...@@ -979,7 +979,7 @@ p, h4 { ...@@ -979,7 +979,7 @@ p, h4 {
cursor: pointer; cursor: pointer;
} }
.loop-header .loop-day-date:hover, .loop-header .loop-day-date[data-active="true"] { .loop-header .loop-day-date:hover, .loop-header .loop-day-date[data-active] {
background-color: var(--higlight-color); background-color: var(--higlight-color);
color: white; color: white;
/* transition: background-color 250ms; */ /* transition: background-color 250ms; */
...@@ -1010,7 +1010,7 @@ p, h4 { ...@@ -1010,7 +1010,7 @@ p, h4 {
} }
.loop-title { .loop-title {
flex: 0 0 100%; flex: 0 0 calc(100% - 1em);
border-bottom: 2px solid black; border-bottom: 2px solid black;
padding: 0.5em; padding: 0.5em;
margin: 0; margin: 0;
...@@ -1022,6 +1022,10 @@ p, h4 { ...@@ -1022,6 +1022,10 @@ p, h4 {
border-bottom: 0; border-bottom: 0;
} }
.day[data-active] .loop-day-date--inline {
visibility: hidden;
}
header { header {
padding-bottom: 0; padding-bottom: 0;
} }
...@@ -1102,7 +1106,6 @@ p, h4 { ...@@ -1102,7 +1106,6 @@ p, h4 {
text-align: left; text-align: left;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
max-width: 100%;
white-space: nowrap; white-space: nowrap;
} }
......
...@@ -196,7 +196,8 @@ ...@@ -196,7 +196,8 @@
(function () { (function () {
var loops = document.querySelectorAll('section[data-type="loop"]'), var loops = document.querySelectorAll('section[data-type="loop"]'),
loopDays = document.querySelectorAll('.loop-days .day'), loopDays = document.querySelectorAll('.loop-days .day'),
viewport = document.querySelector('main'); viewport = document.querySelector('main'),
activeDayId = null;
if (window.innerWidth < 600) { if (window.innerWidth < 600) {
viewport.addEventListener('scroll', debounce(function () { viewport.addEventListener('scroll', debounce(function () {
...@@ -221,15 +222,15 @@ ...@@ -221,15 +222,15 @@
}, 1000/25, false)); }, 1000/25, false));
function activateDay (dayId) { function activateDay (dayId) {
console.log(dayId); if (dayId != activeDayId) {
var activeLink = document.querySelector('.loop-day-date[data-active="true"]'), if (activeDayId) {
newLink = document.querySelector('.loop-day-date[data-target="' + dayId + '"]'); delete document.getElementById(activeDayId).dataset.active;
delete document.querySelector('.loop-day-date[data-target="' + activeDayId + '"]').dataset.active;
if (! newLink.isSameNode(activeLink)) {
newLink.dataset.active = "true";
if (activeLink) {
activeLink.dataset.active = false;
} }
document.getElementById(dayId).dataset.active = true;
document.querySelector('.loop-day-date[data-target="' + dayId + '"]').dataset.active = true;
activeDayId = dayId;
} }
} }
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment