From dbdbde4f9aadd2f820170fc3f75fea18bdfa2937 Mon Sep 17 00:00:00 2001 From: Michael Lange Date: Tue, 19 Dec 2017 17:25:35 -0800 Subject: [PATCH] Replace custom breadcrumbs CSS with new Bulma provided CSS --- ui/app/styles/components.scss | 1 - ui/app/styles/components/breadcrumbs.scss | 26 ------------------- ui/app/styles/core.scss | 1 + ui/app/styles/core/breadcrumb.scss | 15 +++++++++++ ui/app/styles/core/variables.scss | 5 ++++ .../allocations/allocation/index.hbs | 8 +++--- .../allocations/allocation/task/index.hbs | 18 ++++++++----- .../allocations/allocation/task/logs.hbs | 18 ++++++++----- ui/app/templates/clients/client.hbs | 6 +++-- ui/app/templates/clients/index.hbs | 4 ++- ui/app/templates/clients/loading.hbs | 4 ++- ui/app/templates/components/global-header.hbs | 14 +++++----- ui/app/templates/jobs/index.hbs | 4 ++- ui/app/templates/jobs/job/definition.hbs | 6 +++-- ui/app/templates/jobs/job/deployments.hbs | 6 +++-- ui/app/templates/jobs/job/index.hbs | 6 +++-- ui/app/templates/jobs/job/loading.hbs | 6 +++-- ui/app/templates/jobs/job/task-group.hbs | 19 +++++++------- ui/app/templates/jobs/job/versions.hbs | 6 +++-- ui/app/templates/jobs/loading.hbs | 4 ++- ui/app/templates/servers.hbs | 4 ++- ui/tests/acceptance/client-detail-test.js | 10 ++++--- ui/tests/acceptance/job-detail-test.js | 6 ++--- ui/tests/acceptance/task-detail-test.js | 10 +++---- ui/tests/acceptance/task-group-detail-test.js | 14 ++++++---- 25 files changed, 127 insertions(+), 94 deletions(-) delete mode 100644 ui/app/styles/components/breadcrumbs.scss create mode 100644 ui/app/styles/core/breadcrumb.scss diff --git a/ui/app/styles/components.scss b/ui/app/styles/components.scss index f3e2a30cd..afd92f4e0 100644 --- a/ui/app/styles/components.scss +++ b/ui/app/styles/components.scss @@ -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"; diff --git a/ui/app/styles/components/breadcrumbs.scss b/ui/app/styles/components/breadcrumbs.scss deleted file mode 100644 index c3ec634a6..000000000 --- a/ui/app/styles/components/breadcrumbs.scss +++ /dev/null @@ -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; - } -} diff --git a/ui/app/styles/core.scss b/ui/app/styles/core.scss index 78e76677c..e7c657bac 100644 --- a/ui/app/styles/core.scss +++ b/ui/app/styles/core.scss @@ -15,6 +15,7 @@ // Override Bulma details where appropriate @import "./core/buttons"; +@import "./core/breadcrumb"; @import "./core/columns"; @import "./core/forms"; @import "./core/icon"; diff --git a/ui/app/styles/core/breadcrumb.scss b/ui/app/styles/core/breadcrumb.scss new file mode 100644 index 000000000..182decee3 --- /dev/null +++ b/ui/app/styles/core/breadcrumb.scss @@ -0,0 +1,15 @@ +.breadcrumb { + a { + text-decoration: none; + opacity: 0.7; + + &:hover { + text-decoration: none; + opacity: 1; + } + } + + li.is-active a { + opacity: 1; + } +} diff --git a/ui/app/styles/core/variables.scss b/ui/app/styles/core/variables.scss index 6e957033e..b81a50b4e 100644 --- a/ui/app/styles/core/variables.scss +++ b/ui/app/styles/core/variables.scss @@ -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; diff --git a/ui/app/templates/allocations/allocation/index.hbs b/ui/app/templates/allocations/allocation/index.hbs index 96cb194b5..8c12406d4 100644 --- a/ui/app/templates/allocations/allocation/index.hbs +++ b/ui/app/templates/allocations/allocation/index.hbs @@ -1,8 +1,8 @@ {{#global-header class="page-header"}} - Allocations - {{#link-to "allocations.allocation" model class="breadcrumb"}} - {{model.shortId}} - {{/link-to}} +
  • Allocations
    • +
  • + {{#link-to "allocations.allocation" model}}{{model.shortId}}{{/link-to}} +
    • {{/global-header}} {{#gutter-menu class="page-body"}}
    diff --git a/ui/app/templates/allocations/allocation/task/index.hbs b/ui/app/templates/allocations/allocation/task/index.hbs index 20dcf01ac..f7d646a54 100644 --- a/ui/app/templates/allocations/allocation/task/index.hbs +++ b/ui/app/templates/allocations/allocation/task/index.hbs @@ -1,11 +1,15 @@ {{#global-header class="page-header"}} - Allocations - {{#link-to "allocations.allocation" model.allocation class="breadcrumb"}} - {{model.allocation.shortId}} - {{/link-to}} - {{#link-to "allocations.allocation.task" model.allocation model class="breadcrumb"}} - {{model.name}} - {{/link-to}} +
  • Allocations
    • +
  • + {{#link-to "allocations.allocation" model.allocation}} + {{model.allocation.shortId}} + {{/link-to}} +
    • +
  • + {{#link-to "allocations.allocation.task" model.allocation model}} + {{model.name}} + {{/link-to}} +
    • {{/global-header}} {{#gutter-menu class="page-body"}} {{partial "allocations/allocation/task/subnav"}} diff --git a/ui/app/templates/allocations/allocation/task/logs.hbs b/ui/app/templates/allocations/allocation/task/logs.hbs index 887d2a7d1..5628e69fc 100644 --- a/ui/app/templates/allocations/allocation/task/logs.hbs +++ b/ui/app/templates/allocations/allocation/task/logs.hbs @@ -1,11 +1,15 @@ {{#global-header class="page-header"}} - Allocations - {{#link-to "allocations.allocation" model.allocation class="breadcrumb"}} - {{model.allocation.shortId}} - {{/link-to}} - {{#link-to "allocations.allocation.task" model.allocation model class="breadcrumb"}} - {{model.name}} - {{/link-to}} +
  • Allocations
    • +
  • + {{#link-to "allocations.allocation" model.allocation}} + {{model.allocation.shortId}} + {{/link-to}} +
    • +
  • + {{#link-to "allocations.allocation.task" model.allocation model}} + {{model.name}} + {{/link-to}} +
    • {{/global-header}} {{#gutter-menu class="page-body"}} {{partial "allocations/allocation/task/subnav"}} diff --git a/ui/app/templates/clients/client.hbs b/ui/app/templates/clients/client.hbs index a4f10bd3a..228f30100 100644 --- a/ui/app/templates/clients/client.hbs +++ b/ui/app/templates/clients/client.hbs @@ -1,6 +1,8 @@ {{#global-header class="page-header"}} - {{#link-to "clients" class="breadcrumb"}}Clients{{/link-to}} - {{model.shortId}} +
  • {{#link-to "clients.index"}}Clients{{/link-to}}
    • +
  • + {{#link-to "clients.client" model.id}}{{model.shortId}}{{/link-to}} +
    • {{/global-header}} {{#gutter-menu class="page-body"}}
    diff --git a/ui/app/templates/clients/index.hbs b/ui/app/templates/clients/index.hbs index b6f0c7275..503341e44 100644 --- a/ui/app/templates/clients/index.hbs +++ b/ui/app/templates/clients/index.hbs @@ -1,5 +1,7 @@ {{#global-header class="page-header"}} - Clients +
  • + {{#link-to "clients.index"}}Clients{{/link-to}} +
    • {{/global-header}} {{#gutter-menu class="page-body"}}
    diff --git a/ui/app/templates/clients/loading.hbs b/ui/app/templates/clients/loading.hbs index 7014a5a9d..4bfa29cb2 100644 --- a/ui/app/templates/clients/loading.hbs +++ b/ui/app/templates/clients/loading.hbs @@ -1,5 +1,7 @@ {{#global-header class="page-header"}} - Clients +
  • + {{#link-to "clients.index"}}Clients{{/link-to}} +
    • {{/global-header}} {{#gutter-menu class="page-body"}}
    {{partial "partials/loading-spinner"}}
    diff --git a/ui/app/templates/components/global-header.hbs b/ui/app/templates/components/global-header.hbs index 41eeba082..4d51652f0 100644 --- a/ui/app/templates/components/global-header.hbs +++ b/ui/app/templates/components/global-header.hbs @@ -12,11 +12,11 @@ {{#link-to "settings.tokens" class="nav-item"}}ACL Tokens{{/link-to}} - + + + diff --git a/ui/app/templates/jobs/index.hbs b/ui/app/templates/jobs/index.hbs index 71f976903..76d63662e 100644 --- a/ui/app/templates/jobs/index.hbs +++ b/ui/app/templates/jobs/index.hbs @@ -1,5 +1,7 @@ {{#global-header class="page-header"}} - Jobs +
  • + {{#link-to "jobs.index"}}Jobs{{/link-to}} +
    • {{/global-header}} {{#gutter-menu class="page-body" onNamespaceChange=(action "refresh")}}
    diff --git a/ui/app/templates/jobs/job/definition.hbs b/ui/app/templates/jobs/job/definition.hbs index f984fcbe7..51cf8345f 100644 --- a/ui/app/templates/jobs/job/definition.hbs +++ b/ui/app/templates/jobs/job/definition.hbs @@ -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|}} +
  • + {{#link-to params=breadcrumb.args}}{{breadcrumb.label}}{{/link-to}} +
    • {{/each}} {{/global-header}} {{#gutter-menu class="page-body" onNamespaceChange=(action "gotoJobs")}} diff --git a/ui/app/templates/jobs/job/deployments.hbs b/ui/app/templates/jobs/job/deployments.hbs index 35afe908c..c293bfaef 100644 --- a/ui/app/templates/jobs/job/deployments.hbs +++ b/ui/app/templates/jobs/job/deployments.hbs @@ -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|}} +
  • + {{#link-to params=breadcrumb.args}}{{breadcrumb.label}}{{/link-to}} +
    • {{/each}} {{/global-header}} {{#gutter-menu class="page-body" onNamespaceChange=(action "gotoJobs")}} diff --git a/ui/app/templates/jobs/job/index.hbs b/ui/app/templates/jobs/job/index.hbs index 07a83d98f..3366d4ab8 100644 --- a/ui/app/templates/jobs/job/index.hbs +++ b/ui/app/templates/jobs/job/index.hbs @@ -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|}} +
  • + {{#link-to params=breadcrumb.args}}{{breadcrumb.label}}{{/link-to}} +
    • {{/each}} {{/global-header}} {{#gutter-menu class="page-body" onNamespaceChange=(action "gotoJobs")}} diff --git a/ui/app/templates/jobs/job/loading.hbs b/ui/app/templates/jobs/job/loading.hbs index 503faa81f..666de358d 100644 --- a/ui/app/templates/jobs/job/loading.hbs +++ b/ui/app/templates/jobs/job/loading.hbs @@ -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|}} +
  • + {{#link-to params=breadcrumb.args}}{{breadcrumb.label}}{{/link-to}} +
    • {{/each}} {{/global-header}} {{#gutter-menu class="page-body"}} diff --git a/ui/app/templates/jobs/job/task-group.hbs b/ui/app/templates/jobs/job/task-group.hbs index 3d94ee812..679600a1a 100644 --- a/ui/app/templates/jobs/job/task-group.hbs +++ b/ui/app/templates/jobs/job/task-group.hbs @@ -1,13 +1,14 @@ {{#global-header class="page-header"}} - {{#each breadcrumbs as |breadcrumb|}} - {{#link-to - params=(append - breadcrumb.args - (query-params jobNamespace=(or model.namespace.id "default")) - ) - class="breadcrumb"}} - {{breadcrumb.label}} - {{/link-to}} + {{#each breadcrumbs as |breadcrumb index|}} +
  • + {{#link-to + params=(append + breadcrumb.args + (query-params jobNamespace=(or model.namespace.id "default")) + )}} + {{breadcrumb.label}} + {{/link-to}} +
    • {{/each}} {{/global-header}} {{#gutter-menu class="page-body" onNamespaceChange=(action "gotoJobs")}} diff --git a/ui/app/templates/jobs/job/versions.hbs b/ui/app/templates/jobs/job/versions.hbs index fac0992db..6aadbe617 100644 --- a/ui/app/templates/jobs/job/versions.hbs +++ b/ui/app/templates/jobs/job/versions.hbs @@ -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|}} +
  • + {{#link-to params=breadcrumb.args}}{{breadcrumb.label}}{{/link-to}} +
    • {{/each}} {{/global-header}} {{#gutter-menu class="page-body" onNamespaceChange=(action "gotoJobs")}} diff --git a/ui/app/templates/jobs/loading.hbs b/ui/app/templates/jobs/loading.hbs index f754d94ff..58bc6ef5b 100644 --- a/ui/app/templates/jobs/loading.hbs +++ b/ui/app/templates/jobs/loading.hbs @@ -1,5 +1,7 @@ {{#global-header class="page-header"}} - Jobs +
  • + {{#link-to "jobs.index"}}Jobs{{/link-to}} +
    • {{/global-header}} {{#gutter-menu class="page-body"}}
    {{partial "partials/loading-spinner"}}
    diff --git a/ui/app/templates/servers.hbs b/ui/app/templates/servers.hbs index 133422482..5b97959ed 100644 --- a/ui/app/templates/servers.hbs +++ b/ui/app/templates/servers.hbs @@ -1,6 +1,8 @@
    {{#global-header class="page-header"}} - Servers +
  • + {{#link-to "servers.index"}}Servers{{/link-to}} +
    • {{/global-header}} {{#gutter-menu class="page-body"}}
    diff --git a/ui/tests/acceptance/client-detail-test.js b/ui/tests/acceptance/client-detail-test.js index 19da35151..03e28ed6a 100644 --- a/ui/tests/acceptance/client-detail-test.js +++ b/ui/tests/acceptance/client-detail-test.js @@ -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(() => { diff --git a/ui/tests/acceptance/job-detail-test.js b/ui/tests/acceptance/job-detail-test.js index efe84c465..758e40c91 100644 --- a/ui/tests/acceptance/job-detail-test.js +++ b/ui/tests/acceptance/job-detail-test.js @@ -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'); }); diff --git a/ui/tests/acceptance/task-detail-test.js b/ui/tests/acceptance/task-detail-test.js index 76beef6c8..84dd97708 100644 --- a/ui/tests/acceptance/task-detail-test.js +++ b/ui/tests/acceptance/task-detail-test.js @@ -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(), diff --git a/ui/tests/acceptance/task-group-detail-test.js b/ui/tests/acceptance/task-group-detail-test.js index 75404ae1e..1757f42a9 100644 --- a/ui/tests/acceptance/task-group-detail-test.js +++ b/ui/tests/acceptance/task-group-detail-test.js @@ -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(),