Browse Source

Swap hamburger menu icon for heart

pm2
Luke Childs 9 years ago
parent
commit
e2c4fd4421
  1. 43
      public/assets/enhancements.js
  2. 20
      public/assets/style.css

43
public/assets/enhancements.js

@ -182,35 +182,34 @@
// Then inject into DOM when it's ready
DOMReady(function() {
var headerHeight = find('.title').offsetHeight;
var headerBoxShadow = 3;
// Heart
var titleEl = find('h2.node-title');
if(titleEl) {
titleEl.insertBefore(heartEl, titleEl.firstChild);
}
});
});
// Inject elems into DOM
DOMReady(function() {
var headerHeight = find('.title').offsetHeight;
var headerBoxShadow = 3;
// Menu button
var menuButton = create('div');
menuButton.classList.add('menu-button');
menuButton.style.height = headerHeight + 'px';
menuButton.addEventListener('click', function() {
// Menu button
var menuButton = create('div');
menuButton.classList.add('menu-button');
menuButton.style.height = headerHeight + 'px';
menuButton.innerHTML = heartEl.outerHTML;
menuButton.addEventListener('click', function() {
favouriteNodes.updateHeartedNodesList();
find('.menu').classList.toggle('active');
});
find('header .wrapper').appendChild(menuButton);
// Menu
var menu = create('div');
menu.classList.add('menu');
menu.style.top = (headerHeight + headerBoxShadow) + 'px';
menu.style.height = 'calc(100% - ' + (headerHeight + headerBoxShadow) + 'px)';
document.body.appendChild(menu);
favouriteNodes.updateHeartedNodesList();
find('.menu').classList.toggle('active');
});
find('header .wrapper').appendChild(menuButton);
// Menu
var menu = create('div');
menu.classList.add('menu');
menu.style.top = (headerHeight + headerBoxShadow) + 'px';
menu.style.height = 'calc(100% - ' + (headerHeight + headerBoxShadow) + 'px)';
document.body.appendChild(menu);
favouriteNodes.updateHeartedNodesList();
});
// If current node is hearted

20
public/assets/style.css

@ -114,22 +114,16 @@ h1 {
position: relative;
width: 4rem;
font-size: 3em;
text-align: center;
border-right: 1px solid #eee;
cursor: pointer;
}
.menu-button:before {
content: "";
position: absolute;
top: 0.3em;
left: 0.25em;
width: 0.8em;
height: 0.125em;
border-top: 0.375em double #b24592;
border-bottom: 0.125em solid #b24592;
transition: border-color 0.2s ease;
}
.menu-button:hover:before {
border-color: #f15f79;
.menu-button .heart {
fill: #b24592;
transition: fill 0.2s ease;
}
.menu-button:hover .heart {
fill: #f15f79;
}
/* Main */

Loading…
Cancel
Save