Fixed tabs on desktop being all over the place
This commit is contained in:
parent
598973c389
commit
9a5556af47
|
@ -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>
|
||||
`,
|
||||
};
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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'
|
||||
|
|
Loading…
Reference in New Issue