Rooba
/
nightTab
mirror of https://github.com/zombieFox/nightTab.git
1
1
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[feature] add menu close button

This commit is contained in:
Kombie 2019-01-14 18:22:39 +00:00 committed by GitHub
parent 5a2e14f8f9
commit 285b1d88bc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 48 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
css/menu.css
View File

@ -22,10 +22,19 @@
} }
.menu-nav { .menu-nav {
display: flex;
flex-direction: column-reverse;
}
.menu-nav-area {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.menu-nav-area-grow {
flex-grow: 1;
}
.menu-nav:not(:last-child) { .menu-nav:not(:last-child) {
margin: 0; margin: 0;
} }
@ -59,6 +68,13 @@
border-bottom: 0; border-bottom: 0;
} }
.menu-close {
margin: 0;
padding-top: 1.25em;
padding-bottom: 1.25em;
border-radius: 0;
}
.menu-nav-button { .menu-nav-button {
margin: 0; margin: 0;
padding-top: 1.5em; padding-top: 1.5em;
@ -66,6 +82,13 @@
border-radius: 0; border-radius: 0;
} }
.menu-nav-button [class^="icon-"],
.menu-nav-button [class*=" icon-"] {
line-height: 1;
padding-top: 1.5em;
padding-bottom: 1.5em;
}
.menu-nav-button.active { .menu-nav-button.active {
background-color: var(--gray-04); background-color: var(--gray-04);
color: var(--white); color: var(--white);
@ -80,6 +103,10 @@
flex-direction: row; flex-direction: row;
} }
.menu-nav-area {
flex-direction: row;
}
.menu-content-area { .menu-content-area {
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
} }

27
index.html
View File

@ -88,17 +88,22 @@
<section class="menu"> <section class="menu">
<div class="menu-area"> <div class="menu-area">
<ul class="menu-nav u-list-unstyled"> <div class="menu-nav">
<li class="menu-nav-item"> <ul class="menu-nav-area menu-nav-area-grow mb-0 u-list-unstyled">
<button class="menu-nav-button button button-block button-large active" data-target=".menu-content-area-header" tabindex="1">Header</button> <li class="menu-nav-item">
</li> <button class="menu-nav-button button button-block button-large active" data-target=".menu-content-area-header" tabindex="1">Header</button>
<li class="menu-nav-item"> </li>
<button class="menu-nav-button button button-block button-large" data-target=".menu-content-area-bookmarks" tabindex="1">Bookmarks</button> <li class="menu-nav-item">
</li> <button class="menu-nav-button button button-block button-large" data-target=".menu-content-area-bookmarks" tabindex="1">Bookmarks</button>
<li class="menu-nav-item"> </li>
<button class="menu-nav-button button button-block button-large" data-target=".menu-content-area-layout" tabindex="1">Layout</button> <li class="menu-nav-item">
</li> <button class="menu-nav-button button button-block button-large" data-target=".menu-content-area-layout" tabindex="1">Layout</button>
</ul> </li>
</ul>
<div class="menu-nav-area">
<button class="menu-close button button-block button-large mb-0" tabindex="1"><span class="icon-close"></span></button>
</div>
</div>
<div class="menu-content"> <div class="menu-content">
<div class="menu-content-area menu-content-area-header"> <div class="menu-content-area menu-content-area-header">
<div class="menu-item"> <div class="menu-item">

5
js/menu.js
View File

@ -2,11 +2,16 @@ var menu = (function() {
var _bind = function() { var _bind = function() {
var allMenuNavButton = helper.eA(".menu-nav-button"); var allMenuNavButton = helper.eA(".menu-nav-button");
var menuClose = helper.e(".menu-close");
allMenuNavButton.forEach(function(arrayItem, index) { allMenuNavButton.forEach(function(arrayItem, index) {
arrayItem.addEventListener("click", function() { arrayItem.addEventListener("click", function() {
_tab(this); _tab(this);
}, false); }, false);
}); });
menuClose.addEventListener("click", function() {
close();
shade.destroy();
}, false);
}; };
var _tab = function(button) { var _tab = function(button) {