taiga
/
taiga-front
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Vertical Navigation Bar Styles

stable
Xavier Julián 2015-04-15 13:44:43 +02:00 committed by Juanfran
parent 66f67f9f7e
commit e958137f56
3 changed files with 62 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
app/partials/project/project-menu.jade
View File

@ -3,63 +3,44 @@ div(class="menu-container")
li(id="nav-search")
a(href="" title="{{'PROJECT.SECTION.SEARCH' | translate}}")
span(class="icon icon-search")
span(class="item", translate="PROJECT.SECTION.SEARCH")
span.helper(translate="PROJECT.SECTION.SEARCH")
<% if (project.is_backlog_activated && project.my_permissions.indexOf("view_us") != -1) { %>
li(id="nav-backlog")
a(href="" title="{{'PROJECT.SECTION.BACKLOG' | translate}}" tg-nav="project-backlog:project=project.slug")
span(class="icon icon-backlog")
span(class="item", translate="PROJECT.SECTION.BACKLOG")
span.helper(translate="PROJECT.SECTION.BACKLOG")
<% } %>
<% if (project.is_kanban_activated && project.my_permissions.indexOf("view_us") != -1) { %>
li(id="nav-kanban")
a(href="" title="{{'PROJECT.SECTION.KANBAN' | translate}}" tg-nav="project-kanban:project=project.slug")
span(class="icon icon-kanban")
span(class="item", translate="PROJECT.SECTION.KANBAN")
span.helper(translate="PROJECT.SECTION.KANBAN")
<% } %>
<% if (project.is_issues_activated && project.my_permissions.indexOf("view_issues") != -1) { %>
li(id="nav-issues")
a(href="" title="{{'PROJECT.SECTION.ISSUES' | translate}}" tg-nav="project-issues:project=project.slug")
span(class="icon icon-issues")
span(class="item", translate="PROJECT.SECTION.ISSUES")
span.helper(translate="PROJECT.SECTION.ISSUES")
<% } %>
<% if (project.is_wiki_activated && project.my_permissions.indexOf("view_wiki_pages") != -1) { %>
li(id="nav-wiki")
a(href="" title="{{'PROJECT.SECTION.WIKI' | translate}}" tg-nav="project-wiki:project=project.slug")
span(class="icon icon-wiki")
span(class="item", translate="PROJECT.SECTION.WIKI")
span.helper(translate="PROJECT.SECTION.WIKI")
<% } %>
li(id="nav-team")
a(href="" title="{{'PROJECT.SECTION.TEAM' | translate}}" tg-nav="project-team:project=project.slug")
span(class="icon icon-team")
span(class="item", translate="PROJECT.SECTION.TEAM")
span.helper(translate="PROJECT.SECTION.TEAM")
<% if (project.videoconferences) { %>
li(id="nav-video")
a(href!="<%- project.videoconferenceUrl %>" target="_blank" title="{{'PROJECT.SECTION.MEETUP' | translate}}")
span(class="icon icon-video")
span(class="item", translate="PROJECT.SECTION.MEETUP")
span(translate="PROJECT.SECTION.MEETUP")
<% } %>
<% if (project.i_am_owner) { %>
li(id="nav-admin")
a(href="" tg-nav="project-admin-home:project=project.slug" title="{{'PROJECT.SECTION.ADMIN' | translate}}")
span(class="icon icon-settings")
span(class="item", translate="PROJECT.SECTION.ADMIN")
span.helper(translate="PROJECT.SECTION.ADMIN")
<% } %>
<% if (user) { %>
div(class="user")
div(class="user-settings")
ul(class="popover")
li
a(href="" title="{{'USER_SETTINGS.POPOVER.USER_PROFILE' | translate}}", tg-nav="user-settings-user-profile:project=project.slug", translate="USER_SETTINGS.POPOVER.USER_PROFILE")
li
a(href="" title="{{'USER_SETTINGS.POPOVER.CHANGE_PASSWORD' | translate}}", tg-nav="user-settings-user-change-password:project=project.slug", translate="USER_SETTINGS.POPOVER.CHANGE_PASSWORD")
li
a(href="" title="{{'USER_SETTINGS.POPOVER.NOTIFICATIONS' | translate}}", tg-nav="user-settings-mail-notifications:project=project.slug", translate="USER_SETTINGS.POPOVER.NOTIFICATIONS")
<% if (feedbackEnabled) { %>
li
a(href="" class="feedback" title="{{'USER_SETTINGS.POPOVER.FEEDBACK' | translate}}", translate="USER_SETTINGS.POPOVER.FEEDBACK")
<% } %>
li
a(href="" title="{{'COMMON.LOGOUT' | translate}}" class="logout", translate="COMMON.LOGOUT")
a(href="" title="{{'USER_SETTINGS.POPOVER.TITLE_AVATAR' | translate}}" class="avatar" id="nav-user-settings")
img(src="{{ user.photo }}" alt="{{ user.full_name_display }}")
<% } %>

128
app/styles/modules/common/nav.scss
View File

@ -1,33 +1,13 @@
$label-arrow-wh: 12px;
.menu {
@extend %title;
background-image: url('../images/menu.png');
background-position: left bottom;
background-position: center center;
height: 100%;
min-height: 100vh;
padding: 0 .3rem;
padding: 1rem .3rem;
text-transform: uppercase;
width: 90px;
}
.logo-container {
cursor: pointer;
padding: 15px 15px 10px;
object,
img,
svg {
height: 50px;
width: 50px;
}
span {
@extend %large;
color: $white;
display: block;
margin-top: -5px;
text-align: center;
}
sup {
display: block;
line-height: 1rem;
}
width: 50px;
}
.main-nav {
@ -36,26 +16,55 @@
position: relative;
text-align: center;
li {
margin-bottom: 1rem;
margin-bottom: .75rem;
}
a {
color: $white;
display: block;
position: relative;
text-align: center;
&:hover {
color: $fresh-taiga;
transition: color .3s linear;
}
span {
}
a:hover {
color: $fresh-taiga;
transition: color .3s linear;
.helper {
@extend %small;
animation: slideLeft 200ms ease-in-out both;
background: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .8) 100%);
color: $white;
display: block;
left: 45px;
opacity: 1;
padding: .4rem 1rem;
position: absolute;
top: 0;
transition: all .2s;
z-index: 99;
&:after {
background: rgba($blackish, 1);
content: '';
height: $label-arrow-wh;
left: calc(-#{$label-arrow-wh}/2);
position: absolute;
top: calc(50% - #{$label-arrow-wh}/2);
transform: rotate(45deg);
width: $label-arrow-wh;
z-index: 98;
}
}
.icon {
@extend %xlarge;
line-height: 2.2rem;
}
.item {
@extend %large;
}
}
span {
display: block;
}
.helper {
display: none;
}
.icon {
font-size: 1.5rem;
line-height: 2.2rem;
}
.item {
@extend %large;
}
.active {
color: $fresh-taiga;
@ -63,44 +72,11 @@
}
}
.user {
bottom: 1rem;
padding: 0 10px;
position: absolute;
width: 80px;
.popover {
@include popover(150px, '', 60px, 0, '', 15px, '', -6px, 25px);
a {
@extend %small;
color: $white;
text-align: left;
text-transform: none;
&:hover {
color: $fresh-taiga;
transition: color .2s linear;
}
}
@keyframes slideLeft {
0% {
opacity: 0;
}
img {
margin: 0 5px 10px;
width: 80%;
&:hover {
border-color: $fresh-taiga;
transition: border-color .3s linear;
}
}
.user-settings {
position: relative;
}
.settings {
text-align: center;
a {
color: $whitish;
margin-right: .5rem;
&:hover {
color: $fresh-taiga;
transition: color .3s linear;
}
}
100% {
opacity: 1;
}
}

4
app/styles/modules/common/navbar.scss
View File

@ -26,7 +26,7 @@
a {
color: $gray-light;
display: inline-block;
padding: .5rem .75rem;
padding: .5rem 2rem;
&:hover {
background: rgba($gray, .3);
color: $fresh-taiga;
@ -36,7 +36,7 @@
}
&.user-avatar {
padding: 0;
padding-left: .75rem;
padding-left: 2rem;
}
}