Replace custom breadcrumbs CSS with new Bulma provided CSS
This commit is contained in:
Michael Lange
parent
99ead2e390
commit
e4ddfafe9d
|
|
@ -1,6 +1,5 @@
|
|||
@import "./components/badge";
|
||||
@import "./components/boxed-section";
|
||||
@import "./components/breadcrumbs";
|
||||
@import "./components/cli-window";
|
||||
@import "./components/ember-power-select";
|
||||
@import "./components/empty-message";
|
||||
|
|
|
|||
|
|
@ -1,26 +0,0 @@
|
|||
.breadcrumbs {
|
||||
.breadcrumb {
|
||||
color: $white;
|
||||
opacity: 0.7;
|
||||
text-decoration: none;
|
||||
|
||||
+ .breadcrumb {
|
||||
margin-left: 15px;
|
||||
&::before {
|
||||
content: "/";
|
||||
color: $primary;
|
||||
position: relative;
|
||||
left: -7px;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
a.breadcrumb:hover {
|
||||
color: $primary-invert;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
@ -15,6 +15,7 @@
|
|||
|
||||
// Override Bulma details where appropriate
|
||||
@import "./core/buttons";
|
||||
@import "./core/breadcrumb";
|
||||
@import "./core/columns";
|
||||
@import "./core/forms";
|
||||
@import "./core/icon";
|
||||
|
|
|
|||
15
ui/app/styles/core/breadcrumb.scss
Normal file
15
ui/app/styles/core/breadcrumb.scss
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
.breadcrumb {
|
||||
a {
|
||||
text-decoration: none;
|
||||
opacity: 0.7;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
li.is-active a {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
@ -33,3 +33,8 @@ $icon-dimensions: 1.25rem;
|
|||
$icon-dimensions-small: 1rem;
|
||||
$icon-dimensions-medium: 1.5rem;
|
||||
$icon-dimensions-large: 2.5rem;
|
||||
|
||||
$breadcrumb-item-color: $white;
|
||||
$breadcrumb-item-hover-color: $white;
|
||||
$breadcrumb-item-active-color: $white;
|
||||
$breadcrumb-item-separator-color: $primary;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
{{#global-header class="page-header"}}
|
||||
<span class="breadcrumb">Allocations</span>
|
||||
{{#link-to "allocations.allocation" model class="breadcrumb"}}
|
||||
{{model.shortId}}
|
||||
{{/link-to}}
|
||||
<li><a href="#">Allocations</a></li>
|
||||
<li class="is-active">
|
||||
{{#link-to "allocations.allocation" model}}{{model.shortId}}{{/link-to}}
|
||||
</li>
|
||||
{{/global-header}}
|
||||
{{#gutter-menu class="page-body"}}
|
||||
<section class="section">
|
||||
|
|
|
|||
|
|
@ -1,11 +1,15 @@
|
|||
{{#global-header class="page-header"}}
|
||||
<span class="breadcrumb">Allocations</span>
|
||||
{{#link-to "allocations.allocation" model.allocation class="breadcrumb"}}
|
||||
<li><a href="#">Allocations</a></li>
|
||||
<li>
|
||||
{{#link-to "allocations.allocation" model.allocation}}
|
||||
{{model.allocation.shortId}}
|
||||
{{/link-to}}
|
||||
{{#link-to "allocations.allocation.task" model.allocation model class="breadcrumb"}}
|
||||
</li>
|
||||
<li class="is-active">
|
||||
{{#link-to "allocations.allocation.task" model.allocation model}}
|
||||
{{model.name}}
|
||||
{{/link-to}}
|
||||
</li>
|
||||
{{/global-header}}
|
||||
{{#gutter-menu class="page-body"}}
|
||||
{{partial "allocations/allocation/task/subnav"}}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,15 @@
|
|||
{{#global-header class="page-header"}}
|
||||
<span class="breadcrumb">Allocations</span>
|
||||
{{#link-to "allocations.allocation" model.allocation class="breadcrumb"}}
|
||||
<li><a href="#">Allocations</a></li>
|
||||
<li>
|
||||
{{#link-to "allocations.allocation" model.allocation}}
|
||||
{{model.allocation.shortId}}
|
||||
{{/link-to}}
|
||||
{{#link-to "allocations.allocation.task" model.allocation model class="breadcrumb"}}
|
||||
</li>
|
||||
<li class="is-active">
|
||||
{{#link-to "allocations.allocation.task" model.allocation model}}
|
||||
{{model.name}}
|
||||
{{/link-to}}
|
||||
</li>
|
||||
{{/global-header}}
|
||||
{{#gutter-menu class="page-body"}}
|
||||
{{partial "allocations/allocation/task/subnav"}}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
{{#global-header class="page-header"}}
|
||||
{{#link-to "clients" class="breadcrumb"}}Clients{{/link-to}}
|
||||
<span class="breadcrumb">{{model.shortId}}</span>
|
||||
<li>{{#link-to "clients.index"}}Clients{{/link-to}}</li>
|
||||
<li class="is-active">
|
||||
{{#link-to "clients.client" model.id}}{{model.shortId}}{{/link-to}}
|
||||
</li>
|
||||
{{/global-header}}
|
||||
{{#gutter-menu class="page-body"}}
|
||||
<section class="section">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
{{#global-header class="page-header"}}
|
||||
Clients
|
||||
<li class="is-active">
|
||||
{{#link-to "clients.index"}}Clients{{/link-to}}
|
||||
</li>
|
||||
{{/global-header}}
|
||||
{{#gutter-menu class="page-body"}}
|
||||
<section class="section">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
{{#global-header class="page-header"}}
|
||||
Clients
|
||||
<li class="is-active">
|
||||
{{#link-to "clients.index"}}Clients{{/link-to}}
|
||||
</li>
|
||||
{{/global-header}}
|
||||
{{#gutter-menu class="page-body"}}
|
||||
<section class="section has-text-centered">{{partial "partials/loading-spinner"}}</section>
|
||||
|
|
|
|||
|
|
@ -12,11 +12,11 @@
|
|||
{{#link-to "settings.tokens" class="nav-item"}}ACL Tokens{{/link-to}}
|
||||
</div>
|
||||
</nav>
|
||||
<nav class="nav is-secondary">
|
||||
<div class="nav-left breadcrumbs">
|
||||
<div class="nav is-secondary">
|
||||
<div class="nav-item is-gutter"></div>
|
||||
<div class="nav-item">
|
||||
<nav class="breadcrumb is-large">
|
||||
<ul>
|
||||
{{yield}}
|
||||
</div>
|
||||
</div>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
{{#global-header class="page-header"}}
|
||||
Jobs
|
||||
<li class="is-active">
|
||||
{{#link-to "jobs.index"}}Jobs{{/link-to}}
|
||||
</li>
|
||||
{{/global-header}}
|
||||
{{#gutter-menu class="page-body" onNamespaceChange=(action "refresh")}}
|
||||
<section class="section">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
{{#global-header class="page-header"}}
|
||||
{{#each breadcrumbs as |breadcrumb|}}
|
||||
{{#link-to params=breadcrumb.args class="breadcrumb"}}{{breadcrumb.label}}{{/link-to}}
|
||||
{{#each breadcrumbs as |breadcrumb index|}}
|
||||
<li class="{{if (eq (inc index) breadcrumbs.length) "is-active"}}">
|
||||
{{#link-to params=breadcrumb.args}}{{breadcrumb.label}}{{/link-to}}
|
||||
</li>
|
||||
{{/each}}
|
||||
{{/global-header}}
|
||||
{{#gutter-menu class="page-body" onNamespaceChange=(action "gotoJobs")}}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
{{#global-header class="page-header"}}
|
||||
{{#each breadcrumbs as |breadcrumb|}}
|
||||
{{#link-to params=breadcrumb.args class="breadcrumb"}}{{breadcrumb.label}}{{/link-to}}
|
||||
{{#each breadcrumbs as |breadcrumb index|}}
|
||||
<li class="{{if (eq (inc index) breadcrumbs.length) "is-active"}}">
|
||||
{{#link-to params=breadcrumb.args}}{{breadcrumb.label}}{{/link-to}}
|
||||
</li>
|
||||
{{/each}}
|
||||
{{/global-header}}
|
||||
{{#gutter-menu class="page-body" onNamespaceChange=(action "gotoJobs")}}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
{{#global-header class="page-header"}}
|
||||
{{#each breadcrumbs as |breadcrumb|}}
|
||||
{{#link-to params=breadcrumb.args class="breadcrumb"}}{{breadcrumb.label}}{{/link-to}}
|
||||
{{#each breadcrumbs as |breadcrumb index|}}
|
||||
<li class="{{if (eq (inc index) breadcrumbs.length) "is-active"}}">
|
||||
{{#link-to params=breadcrumb.args}}{{breadcrumb.label}}{{/link-to}}
|
||||
</li>
|
||||
{{/each}}
|
||||
{{/global-header}}
|
||||
{{#gutter-menu class="page-body" onNamespaceChange=(action "gotoJobs")}}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
{{#global-header class="page-header"}}
|
||||
{{#each breadcrumbs as |breadcrumb|}}
|
||||
{{#link-to params=breadcrumb.args class="breadcrumb"}}{{breadcrumb.label}}{{/link-to}}
|
||||
{{#each breadcrumbs as |breadcrumb index|}}
|
||||
<li class="{{if (eq (inc index) breadcrumbs.length) "is-active"}}">
|
||||
{{#link-to params=breadcrumb.args}}{{breadcrumb.label}}{{/link-to}}
|
||||
</li>
|
||||
{{/each}}
|
||||
{{/global-header}}
|
||||
{{#gutter-menu class="page-body"}}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,14 @@
|
|||
{{#global-header class="page-header"}}
|
||||
{{#each breadcrumbs as |breadcrumb|}}
|
||||
{{#each breadcrumbs as |breadcrumb index|}}
|
||||
<li class="{{if (eq (inc index) breadcrumbs.length) "is-active"}}">
|
||||
{{#link-to
|
||||
params=(append
|
||||
breadcrumb.args
|
||||
(query-params jobNamespace=(or model.namespace.id "default"))
|
||||
)
|
||||
class="breadcrumb"}}
|
||||
)}}
|
||||
{{breadcrumb.label}}
|
||||
{{/link-to}}
|
||||
</li>
|
||||
{{/each}}
|
||||
{{/global-header}}
|
||||
{{#gutter-menu class="page-body" onNamespaceChange=(action "gotoJobs")}}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
{{#global-header class="page-header"}}
|
||||
{{#each breadcrumbs as |breadcrumb|}}
|
||||
{{#link-to params=breadcrumb.args class="breadcrumb"}}{{breadcrumb.label}}{{/link-to}}
|
||||
{{#each breadcrumbs as |breadcrumb index|}}
|
||||
<li class="{{if (eq (inc index) breadcrumbs.length) "is-active"}}">
|
||||
{{#link-to params=breadcrumb.args}}{{breadcrumb.label}}{{/link-to}}
|
||||
</li>
|
||||
{{/each}}
|
||||
{{/global-header}}
|
||||
{{#gutter-menu class="page-body" onNamespaceChange=(action "gotoJobs")}}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
{{#global-header class="page-header"}}
|
||||
Jobs
|
||||
<li class="is-active">
|
||||
{{#link-to "jobs.index"}}Jobs{{/link-to}}
|
||||
</li>
|
||||
{{/global-header}}
|
||||
{{#gutter-menu class="page-body"}}
|
||||
<section class="section has-text-centered">{{partial "partials/loading-spinner"}}</section>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
<div class="page-layout">
|
||||
{{#global-header class="page-header"}}
|
||||
Servers
|
||||
<li class="is-active">
|
||||
{{#link-to "servers.index"}}Servers{{/link-to}}
|
||||
</li>
|
||||
{{/global-header}}
|
||||
{{#gutter-menu class="page-body"}}
|
||||
<section class="section">
|
||||
|
|
|
|||
|
|
@ -23,16 +23,20 @@ test('/clients/:id should have a breadrcumb trail linking back to clients', func
|
|||
visit(`/clients/${node.id}`);
|
||||
|
||||
andThen(() => {
|
||||
assert.equal(findAll('.breadcrumb')[0].textContent, 'Clients', 'First breadcrumb says clients');
|
||||
assert.equal(
|
||||
findAll('.breadcrumb')[1].textContent,
|
||||
findAll('.breadcrumb a')[0].textContent,
|
||||
'Clients',
|
||||
'First breadcrumb says clients'
|
||||
);
|
||||
assert.equal(
|
||||
findAll('.breadcrumb a')[1].textContent,
|
||||
node.id.split('-')[0],
|
||||
'Second breadcrumb says the node short id'
|
||||
);
|
||||
});
|
||||
|
||||
andThen(() => {
|
||||
click(findAll('.breadcrumb')[0]);
|
||||
click(findAll('.breadcrumb a')[0]);
|
||||
});
|
||||
|
||||
andThen(() => {
|
||||
|
|
|
|||
|
|
@ -22,14 +22,14 @@ test('visiting /jobs/:job_id', function(assert) {
|
|||
});
|
||||
|
||||
test('breadcrumbs includes job name and link back to the jobs list', function(assert) {
|
||||
assert.equal(findAll('.breadcrumb')[0].textContent, 'Jobs', 'First breadcrumb says jobs');
|
||||
assert.equal(findAll('.breadcrumb a')[0].textContent, 'Jobs', 'First breadcrumb says jobs');
|
||||
assert.equal(
|
||||
findAll('.breadcrumb')[1].textContent,
|
||||
findAll('.breadcrumb a')[1].textContent,
|
||||
job.name,
|
||||
'Second breadcrumb says the job name'
|
||||
);
|
||||
|
||||
click(findAll('.breadcrumb')[0]);
|
||||
click(findAll('.breadcrumb a')[0]);
|
||||
andThen(() => {
|
||||
assert.equal(currentURL(), '/jobs', 'First breadcrumb links back to jobs');
|
||||
});
|
||||
|
|
|
|||
|
|
@ -36,16 +36,16 @@ test('/allocation/:id/:task_name should name the task and list high-level task i
|
|||
});
|
||||
|
||||
test('breadcrumbs includes allocations and link to the allocation detail page', function(assert) {
|
||||
const breadcrumbs = findAll('.breadcrumb');
|
||||
const breadcrumbs = findAll('.breadcrumb a');
|
||||
assert.equal(
|
||||
breadcrumbs[0].textContent.trim(),
|
||||
'Allocations',
|
||||
'Allocations is the first breadcrumb'
|
||||
);
|
||||
assert.notEqual(
|
||||
breadcrumbs[0].tagName.toLowerCase(),
|
||||
'a',
|
||||
'Allocations breadcrumb is not a link'
|
||||
assert.equal(
|
||||
breadcrumbs[0].getAttribute('href'),
|
||||
'#',
|
||||
"Allocations breadcrumb doesn't link anywhere"
|
||||
);
|
||||
assert.equal(
|
||||
breadcrumbs[1].textContent.trim(),
|
||||
|
|
|
|||
|
|
@ -78,21 +78,25 @@ test('/jobs/:id/:task-group should list high-level metrics for the allocation',
|
|||
});
|
||||
|
||||
test('/jobs/:id/:task-group should have breadcrumbs for job and jobs', function(assert) {
|
||||
assert.equal(findAll('.breadcrumb')[0].textContent.trim(), 'Jobs', 'First breadcrumb says jobs');
|
||||
assert.equal(
|
||||
findAll('.breadcrumb')[1].textContent.trim(),
|
||||
findAll('.breadcrumb a')[0].textContent.trim(),
|
||||
'Jobs',
|
||||
'First breadcrumb says jobs'
|
||||
);
|
||||
assert.equal(
|
||||
findAll('.breadcrumb a')[1].textContent.trim(),
|
||||
job.name,
|
||||
'Second breadcrumb says the job name'
|
||||
);
|
||||
assert.equal(
|
||||
findAll('.breadcrumb')[2].textContent.trim(),
|
||||
findAll('.breadcrumb a')[2].textContent.trim(),
|
||||
taskGroup.name,
|
||||
'Third breadcrumb says the job name'
|
||||
);
|
||||
});
|
||||
|
||||
test('/jobs/:id/:task-group first breadcrumb should link to jobs', function(assert) {
|
||||
click(findAll('.breadcrumb')[0]);
|
||||
click(findAll('.breadcrumb a')[0]);
|
||||
andThen(() => {
|
||||
assert.equal(currentURL(), '/jobs', 'First breadcrumb links back to jobs');
|
||||
});
|
||||
|
|
@ -101,7 +105,7 @@ test('/jobs/:id/:task-group first breadcrumb should link to jobs', function(asse
|
|||
test('/jobs/:id/:task-group second breadcrumb should link to the job for the task group', function(
|
||||
assert
|
||||
) {
|
||||
click(findAll('.breadcrumb')[1]);
|
||||
click(findAll('.breadcrumb a')[1]);
|
||||
andThen(() => {
|
||||
assert.equal(
|
||||
currentURL(),
|
||||
|
|
|
|||
Loading…
Reference in a new issue