diff options
author | Phil Hughes <me@iamphill.com> | 2017-03-24 10:02:31 +0000 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2017-03-28 14:58:51 +0100 |
commit | 9a5556af47a1bae3e99a25931a4905cd9b524438 (patch) | |
tree | b40a40f092425b0220c3cefd3be9a19d00b22286 | |
parent | 598973c3890de88fe239e3b4b8aa8a2574520751 (diff) | |
download | gitlab-ce-9a5556af47a1bae3e99a25931a4905cd9b524438.tar.gz |
Fixed tabs on desktop being all over the place
4 files changed, 67 insertions, 66 deletions
diff --git a/app/assets/javascripts/vue_pipelines_index/components/navigation_tabs.js b/app/assets/javascripts/vue_pipelines_index/components/navigation_tabs.js index 572ccb81fc7..f965b24467f 100644 --- a/app/assets/javascripts/vue_pipelines_index/components/navigation_tabs.js +++ b/app/assets/javascripts/vue_pipelines_index/components/navigation_tabs.js @@ -17,56 +17,52 @@ export default { }, template: ` - <div class="scrolling-tabs-container"> - <div class="fade-left"><i class="fa fa-angle-left"></i></div> - <div class="fade-right"><i class="fa fa-angle-right"></i></div> - <ul class="nav-links scrolling-tabs"> - <li - class="js-pipelines-tab-all" - :class="{ 'active': scope === 'all'}"> - <a :href="paths.allPath"> - All - <span class="badge js-totalbuilds-count"> - {{count.all}} - </span> - </a> - </li> - <li class="js-pipelines-tab-pending" - :class="{ 'active': scope === 'pending'}"> - <a :href="paths.pendingPath"> - Pending - <span class="badge"> - {{count.pending}} - </span> - </a> - </li> - <li class="js-pipelines-tab-running" - :class="{ 'active': scope === 'running'}"> - <a :href="paths.runningPath"> - Running - <span class="badge"> - {{count.running}} - </span> - </a> - </li> - <li class="js-pipelines-tab-finished" - :class="{ 'active': scope === 'finished'}"> - <a :href="paths.finishedPath"> - Finished - <span class="badge"> - {{count.finished}} - </span> - </a> - </li> - <li class="js-pipelines-tab-branches" - :class="{ 'active': scope === 'branches'}"> - <a :href="paths.branchesPath">Branches</a> - </li> - <li class="js-pipelines-tab-tags" - :class="{ 'active': scope === 'tags'}"> - <a :href="paths.tagsPath">Tags</a> - </li> - </ul> - </div> + <ul class="nav-links scrolling-tabs"> + <li + class="js-pipelines-tab-all" + :class="{ 'active': scope === 'all'}"> + <a :href="paths.allPath"> + All + <span class="badge js-totalbuilds-count"> + {{count.all}} + </span> + </a> + </li> + <li class="js-pipelines-tab-pending" + :class="{ 'active': scope === 'pending'}"> + <a :href="paths.pendingPath"> + Pending + <span class="badge"> + {{count.pending}} + </span> + </a> + </li> + <li class="js-pipelines-tab-running" + :class="{ 'active': scope === 'running'}"> + <a :href="paths.runningPath"> + Running + <span class="badge"> + {{count.running}} + </span> + </a> + </li> + <li class="js-pipelines-tab-finished" + :class="{ 'active': scope === 'finished'}"> + <a :href="paths.finishedPath"> + Finished + <span class="badge"> + {{count.finished}} + </span> + </a> + </li> + <li class="js-pipelines-tab-branches" + :class="{ 'active': scope === 'branches'}"> + <a :href="paths.branchesPath">Branches</a> + </li> + <li class="js-pipelines-tab-tags" + :class="{ 'active': scope === 'tags'}"> + <a :href="paths.tagsPath">Tags</a> + </li> + </ul> `, }; diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js b/app/assets/javascripts/vue_pipelines_index/pipelines.js index 48f0e9036e8..97c4d787412 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipelines.js +++ b/app/assets/javascripts/vue_pipelines_index/pipelines.js @@ -182,7 +182,7 @@ export default { <div :class="cssClass"> <div - class="top-area" + class="top-area scrolling-tabs-container" v-if="!isLoading && !shouldRenderEmptyState"> <navigation-tabs :scope="scope" diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss index e113d559664..70b6eefc7a0 100644 --- a/app/assets/stylesheets/framework/nav.scss +++ b/app/assets/stylesheets/framework/nav.scss @@ -480,6 +480,12 @@ .inner-page-scroll-tabs { position: relative; + .fade-right, + .fade-left { + top: 17px; + bottom: 0; + } + .fade-right { @include fade(left, $white-light); right: 0; diff --git a/app/views/dashboard/_projects_head.html.haml b/app/views/dashboard/_projects_head.html.haml index bf0767191f3..4679b9549d1 100644 --- a/app/views/dashboard/_projects_head.html.haml +++ b/app/views/dashboard/_projects_head.html.haml @@ -1,19 +1,18 @@ = content_for :flash_message do = render 'shared/project_limit' -.top-area.scrolling-tabs-container - .inner-page-scroll-tabs - .fade-left= icon('angle-left') - .fade-right= icon('angle-right') - %ul.nav-links.scrolling-tabs - = nav_link(page: [dashboard_projects_path, root_path]) do - = link_to dashboard_projects_path, title: 'Home', class: 'shortcuts-activity', data: {placement: 'right'} do - Your projects - = nav_link(page: starred_dashboard_projects_path) do - = link_to starred_dashboard_projects_path, title: 'Starred Projects', data: {placement: 'right'} do - Starred projects - = nav_link(page: [explore_root_path, trending_explore_projects_path, starred_explore_projects_path, explore_projects_path]) do - = link_to explore_root_path, title: 'Explore', data: {placement: 'right'} do - Explore projects +.top-area.scrolling-tabs-container.inner-page-scroll-tabs + .fade-left= icon('angle-left') + .fade-right= icon('angle-right') + %ul.nav-links.scrolling-tabs + = nav_link(page: [dashboard_projects_path, root_path]) do + = link_to dashboard_projects_path, title: 'Home', class: 'shortcuts-activity', data: {placement: 'right'} do + Your projects + = nav_link(page: starred_dashboard_projects_path) do + = link_to starred_dashboard_projects_path, title: 'Starred Projects', data: {placement: 'right'} do + Starred projects + = nav_link(page: [explore_root_path, trending_explore_projects_path, starred_explore_projects_path, explore_projects_path]) do + = link_to explore_root_path, title: 'Explore', data: {placement: 'right'} do + Explore projects .nav-controls = render 'shared/projects/search_form' |