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") li(id="nav-search")
a(href="" title="{{'PROJECT.SECTION.SEARCH' | translate}}") a(href="" title="{{'PROJECT.SECTION.SEARCH' | translate}}")
span(class="icon icon-search") 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) { %> <% if (project.is_backlog_activated && project.my_permissions.indexOf("view_us") != -1) { %>
li(id="nav-backlog") li(id="nav-backlog")
a(href="" title="{{'PROJECT.SECTION.BACKLOG' | translate}}" tg-nav="project-backlog:project=project.slug") a(href="" title="{{'PROJECT.SECTION.BACKLOG' | translate}}" tg-nav="project-backlog:project=project.slug")
span(class="icon icon-backlog") 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) { %> <% if (project.is_kanban_activated && project.my_permissions.indexOf("view_us") != -1) { %>
li(id="nav-kanban") li(id="nav-kanban")
a(href="" title="{{'PROJECT.SECTION.KANBAN' | translate}}" tg-nav="project-kanban:project=project.slug") a(href="" title="{{'PROJECT.SECTION.KANBAN' | translate}}" tg-nav="project-kanban:project=project.slug")
span(class="icon icon-kanban") 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) { %> <% if (project.is_issues_activated && project.my_permissions.indexOf("view_issues") != -1) { %>
li(id="nav-issues") li(id="nav-issues")
a(href="" title="{{'PROJECT.SECTION.ISSUES' | translate}}" tg-nav="project-issues:project=project.slug") a(href="" title="{{'PROJECT.SECTION.ISSUES' | translate}}" tg-nav="project-issues:project=project.slug")
span(class="icon icon-issues") 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) { %> <% if (project.is_wiki_activated && project.my_permissions.indexOf("view_wiki_pages") != -1) { %>
li(id="nav-wiki") li(id="nav-wiki")
a(href="" title="{{'PROJECT.SECTION.WIKI' | translate}}" tg-nav="project-wiki:project=project.slug") a(href="" title="{{'PROJECT.SECTION.WIKI' | translate}}" tg-nav="project-wiki:project=project.slug")
span(class="icon icon-wiki") span(class="icon icon-wiki")
span(class="item", translate="PROJECT.SECTION.WIKI") span.helper(translate="PROJECT.SECTION.WIKI")
<% } %> <% } %>
li(id="nav-team") li(id="nav-team")
a(href="" title="{{'PROJECT.SECTION.TEAM' | translate}}" tg-nav="project-team:project=project.slug") a(href="" title="{{'PROJECT.SECTION.TEAM' | translate}}" tg-nav="project-team:project=project.slug")
span(class="icon icon-team") span(class="icon icon-team")
span(class="item", translate="PROJECT.SECTION.TEAM") span.helper(translate="PROJECT.SECTION.TEAM")
<% if (project.videoconferences) { %> <% if (project.videoconferences) { %>
li(id="nav-video") li(id="nav-video")
a(href!="<%- project.videoconferenceUrl %>" target="_blank" title="{{'PROJECT.SECTION.MEETUP' | translate}}") a(href!="<%- project.videoconferenceUrl %>" target="_blank" title="{{'PROJECT.SECTION.MEETUP' | translate}}")
span(class="icon icon-video") span(class="icon icon-video")
span(class="item", translate="PROJECT.SECTION.MEETUP") span(translate="PROJECT.SECTION.MEETUP")
<% } %> <% } %>
<% if (project.i_am_owner) { %> <% if (project.i_am_owner) { %>
li(id="nav-admin") li(id="nav-admin")
a(href="" tg-nav="project-admin-home:project=project.slug" title="{{'PROJECT.SECTION.ADMIN' | translate}}") a(href="" tg-nav="project-admin-home:project=project.slug" title="{{'PROJECT.SECTION.ADMIN' | translate}}")
span(class="icon icon-settings") 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 }}")
<% } %> <% } %>

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

@ -1,33 +1,13 @@
$label-arrow-wh: 12px;
.menu { .menu {
@extend %title;
background-image: url('../images/menu.png'); background-image: url('../images/menu.png');
background-position: left bottom; background-position: center center;
height: 100%; height: 100%;
min-height: 100vh; min-height: 100vh;
padding: 0 .3rem; padding: 1rem .3rem;
text-transform: uppercase; text-transform: uppercase;
width: 90px;
}
.logo-container {
cursor: pointer;
padding: 15px 15px 10px;
object,
img,
svg {
height: 50px;
width: 50px; width: 50px;
}
span {
@extend %large;
color: $white;
display: block;
margin-top: -5px;
text-align: center;
}
sup {
display: block;
line-height: 1rem;
}
} }
.main-nav { .main-nav {
@ -36,71 +16,67 @@
position: relative; position: relative;
text-align: center; text-align: center;
li { li {
margin-bottom: 1rem; margin-bottom: .75rem;
} }
a { a {
color: $white; color: $white;
display: block; display: block;
position: relative;
text-align: center; text-align: center;
&:hover { }
a:hover {
color: $fresh-taiga; color: $fresh-taiga;
transition: color .3s linear; 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;
}
}
} }
span { span {
display: block; display: block;
} }
.helper {
display: none;
}
.icon { .icon {
@extend %xlarge; font-size: 1.5rem;
line-height: 2.2rem; line-height: 2.2rem;
} }
.item { .item {
@extend %large; @extend %large;
} }
}
.active { .active {
color: $fresh-taiga; color: $fresh-taiga;
transition: color .3s linear; transition: color .3s linear;
} }
} }
.user { @keyframes slideLeft {
bottom: 1rem; 0% {
padding: 0 10px; opacity: 0;
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;
}
}
}
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 { a {
color: $gray-light; color: $gray-light;
display: inline-block; display: inline-block;
padding: .5rem .75rem; padding: .5rem 2rem;
&:hover { &:hover {
background: rgba($gray, .3); background: rgba($gray, .3);
color: $fresh-taiga; color: $fresh-taiga;
@ -36,7 +36,7 @@
} }
&.user-avatar { &.user-avatar {
padding: 0; padding: 0;
padding-left: .75rem; padding-left: 2rem;
} }
} }