diff options
| author | Annabel Dunstone <annabel.dunstone@gmail.com> | 2016-05-12 08:23:31 -0500 |
|---|---|---|
| committer | Annabel Dunstone <annabel.dunstone@gmail.com> | 2016-05-25 17:14:28 -0500 |
| commit | 84fee47a763b6f1dda8b58e66c893cd8cf6dda8e (patch) | |
| tree | 0095cf383a8013348b4cfee30016e1c555899ca6 | |
| parent | 09ad0020587b01b614d0a686f9b1a45d492dfbff (diff) | |
| download | gitlab-ce-84fee47a763b6f1dda8b58e66c893cd8cf6dda8e.tar.gz | |
Start scrolling tabs design
| -rw-r--r-- | app/assets/javascripts/layout_nav.js.coffee | 19 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/nav.scss | 29 | ||||
| -rw-r--r-- | app/views/layouts/nav/_group.html.haml | 3 |
3 files changed, 50 insertions, 1 deletions
diff --git a/app/assets/javascripts/layout_nav.js.coffee b/app/assets/javascripts/layout_nav.js.coffee new file mode 100644 index 00000000000..2f2f5aa85c5 --- /dev/null +++ b/app/assets/javascripts/layout_nav.js.coffee @@ -0,0 +1,19 @@ +class @LayoutNav + $(document).ready -> + $('#scrolling-tabs').on 'scroll', -> + cur = $(this).scrollLeft() + if cur == 0 + return + else + max = 289 + console.log "MAX:" + max + console.log "CUR:" + cur + if cur == max + $('.fa-arrow-right').addClass('end-scroll') + $('.nav-links').addClass('end-scroll') + else + $('.fa-arrow-right').removeClass('end-scroll') + $('.nav-links').removeClass('end-scroll') + return + $('#scrolling-tabs').trigger 'scroll' + return diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss index ee4f573f91b..83c27eada3d 100644 --- a/app/assets/stylesheets/framework/nav.scss +++ b/app/assets/stylesheets/framework/nav.scss @@ -256,6 +256,30 @@ display: none; } + .fa-arrow-right { + display: none; + position: absolute; + color: #7e7c7c; + bottom: 11px; + right: 0; + padding: 10px 10px 10px 25px; + background: -webkit-linear-gradient(left, rgba(250, 250, 250, 0.4), $background-color 45%); + + &.end-scroll { + opacity: 0; + transition-duration: .3s; + } + } + + @media (max-width: 790px) { + margin-right: 19px; + + .fa-arrow-right { + display: block; + transition-duration: .3s; + } + } + li { a { @@ -276,6 +300,11 @@ color: $gl-icon-color; } } + + &.end-scroll { + margin-right: 0; + transition-duration: .3s; + } } } diff --git a/app/views/layouts/nav/_group.html.haml b/app/views/layouts/nav/_group.html.haml index 3438005863a..781c0651253 100644 --- a/app/views/layouts/nav/_group.html.haml +++ b/app/views/layouts/nav/_group.html.haml @@ -1,6 +1,6 @@ = render 'layouts/nav/group_settings' -%ul.nav-links +%ul.nav-links#scrolling-tabs = nav_link(path: 'groups#show', html_options: {class: 'home'}) do = link_to group_path(@group), title: 'Home' do = icon('group fw') @@ -35,3 +35,4 @@ = icon('users fw') %span Members + = icon('arrow-right') |