hiro/Vulcan
1
0
Fork 0
mirror of https://github.com/vale981/Vulcan synced 2025-03-06 01:51:40 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

working on dropdown open/close

Browse source
This commit is contained in:
Sacha Greif 2015-03-21 18:43:35 +09:00
parent 70147b5bc3
commit 631092d78f
7 changed files with 107 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
client/views/nav/dropdown_component.html
View file

@ -32,7 +32,10 @@ dropdownLabel (String) [optional]
{{/each}}
</ul>
{{#if showMore}}
<a class="show-more" href="#">{{_ "Show More"}}</a>
<a class="show-more" href="#">
<img class="show-more-plus" src="/img/plus.svg" alt="{{_ "Show More"}}" />
<img class="show-more-minus" src="/img/minus.svg" alt="{{_ "Show Less"}}" />
</a>
{{/if}}
{{/with}}
</div>

5
client/views/nav/dropdown_component.js
View file

@ -40,6 +40,11 @@ Template[getTemplate('dropdownComponent')].helpers({
}
});
Template[getTemplate('dropdownComponent')].onRendered(function () {
var $dropdown = this.$('.dropdown');
var height = $dropdown.height();
});
Template[getTemplate('dropdownComponent')].events({
'click .show-more': function (e, t) {
e.preventDefault();

6
packages/telescope-base/lib/base.js
View file

@ -34,12 +34,8 @@ STATUS_REJECTED=3;
// ------------------------------------- Navigation -------------------------------- //
// array containing nav items; initialize with views menu and admin menu
// array containing nav items;
primaryNav = [
{
template: 'viewsMenu',
order: 10
}
];
secondaryNav = [

31
packages/telescope-theme-base/lib/client/scss/specific/_dropdown.scss
View file

@ -72,4 +72,35 @@
}
.dropdown-top-label{
cursor: pointer;
}
.show-more{
border-top: 1px solid #ccc;
padding: 8px 0;
display: block;
text-align: center;
img{
display: block;
height: 20px;
width: 20px;
opacity: 0.2;
margin: 0 auto;
}
&:hover{
background: white(0.3);
img{
opacity: 0.5;
}
}
.show-more-minus{
display: none;
}
.dropdown-open &{
.show-more-minus{
display: block;
}
.show-more-plus{
display: none;
}
}
}

59
packages/telescope-theme-hubble/lib/client/scss/modules/_nav.scss
View file

@ -116,40 +116,57 @@ $nav-width: 250px;
background: #e1e4e5;
overflow-y: auto;
padding-bottom: 30px;
.dropdown-top-level{
display: block;
border-bottom: 1px solid #ccc;
padding-bottom: 5px;
margin-bottom: 5px;
}
.menu-label{
display: block;
}
.menu-description{
// display: block;
display: none;
font-weight: normal;
}
.account-link{
display: block;
font-weight: bold;
}
}
.logo{
margin-bottom: 30px;
}
.header-submodule{
margin-bottom: $grid-margin*3;
margin-bottom: 30px;
}
.primary-nav{
display: flex;
flex-direction: column;
}
.search{
order: 1;
}
.view{
order: 2;
}
.categories{
order: 3;
}
.dropdown-top-level{
cursor: default;
display: block;
border-bottom: 1px solid #ccc;
padding-bottom: 5px;
margin-bottom: 5px;
}
.menu-label{
display: block;
}
.menu-description{
// display: block;
display: none;
font-weight: normal;
}
.account-link{
display: block;
font-weight: bold;
}
.dropdown-contents{
max-height: 90px;
overflow: hidden;
margin-bottom: $grid-margin;
@include animate(max-height);
}
.dropdown-open .dropdown-contents{
max-height: none;
max-height: 999px;
}
.notifications-menu{
display: none;
}
.tagline{
margin-top: 0px;
}
}

13
public/img/minus.svg Normal file
View file

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="400px" height="400px" viewBox="0 0 400 400" enable-background="new 0 0 400 400" xml:space="preserve">
<path fill="#010101" d="M81.561,81.561C113.196,49.924,155.26,32.5,200,32.5c44.74,0,86.803,17.424,118.44,49.06
c31.635,31.636,49.059,73.699,49.059,118.438c0,44.741-17.424,86.805-49.059,118.441c-31.637,31.635-73.7,49.059-118.441,49.059
c-44.739,0-86.803-17.424-118.438-49.059C49.924,286.804,32.5,244.74,32.5,200S49.924,113.196,81.561,81.561 M64.64,64.64
c-74.757,74.757-74.757,195.962,0,270.719c74.757,74.758,195.962,74.758,270.719,0c74.758-74.757,74.758-195.962,0-270.719
C260.603-10.117,139.397-10.117,64.64,64.64L64.64,64.64z M220.753,179.244h-41.509l-67.299,0.002
c-11.463,0-20.754,9.291-20.754,20.755c0,11.461,9.293,20.751,20.754,20.751h67.299h41.509h67.299
c5.732,0,10.922-2.322,14.678-6.078c3.755-3.757,6.079-8.945,6.079-14.675c0-11.462-9.293-20.753-20.757-20.753L220.753,179.244z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

15
public/img/plus.svg Normal file
View file

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="400px" height="400px" viewBox="0 0 400 400" enable-background="new 0 0 400 400" xml:space="preserve">
<path fill="#010101" d="M81.561,81.561C113.196,49.924,155.26,32.5,200,32.5c44.74,0,86.803,17.424,118.44,49.06
c31.635,31.636,49.059,73.699,49.059,118.438c0,44.741-17.424,86.805-49.059,118.441c-31.637,31.635-73.7,49.059-118.441,49.059
c-44.739,0-86.803-17.424-118.438-49.059C49.924,286.804,32.5,244.74,32.5,200S49.924,113.196,81.561,81.561 M64.64,64.64
c-74.757,74.757-74.757,195.962,0,270.719c74.757,74.758,195.962,74.758,270.719,0c74.758-74.757,74.758-195.962,0-270.719
C260.603-10.117,139.397-10.117,64.64,64.64L64.64,64.64z M220.753,179.244v-67.298c0-11.461-9.291-20.754-20.753-20.754
c-11.463,0-20.756,9.291-20.756,20.755v67.296l-67.299,0.002c-11.463,0-20.754,9.291-20.754,20.755
c0,11.461,9.293,20.751,20.754,20.751h67.299v67.301c0,11.462,9.292,20.755,20.755,20.755c5.73,0,10.919-2.324,14.676-6.079
c3.756-3.756,6.078-8.945,6.078-14.678v-67.299h67.299c5.732,0,10.922-2.322,14.678-6.078c3.755-3.757,6.079-8.945,6.079-14.675
c0-11.462-9.293-20.753-20.757-20.753L220.753,179.244z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.5 KiB