updates application interface to match design specs

This commit is contained in:
Seyi Adebajo 2018-07-12 10:44:16 -07:00
parent 39aef95f60
commit 68abf58ef0
10 changed files with 93 additions and 65 deletions

View File

@ -82,7 +82,7 @@
/// Proxy for AD container styles
@mixin nacho-container {
border: 1px solid set-color(grey, light);
border: 1px solid get-color(black, 0.05);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
padding: item-spacing(4);
background-color: get-color(white);

View File

@ -13,7 +13,7 @@ html {
* Apply padding to top and bottom to account for navigation and footer
*/
body {
background-color: set-color(white, base);
background-color: get-color(slate0);
overflow-y: scroll;
overflow-x: hidden;
}

View File

@ -22,6 +22,7 @@
@import 'upstream-owners/all';
@import 'dataset-schema/all';
@import 'tooltips/all';
@import 'entity-header/all';
@import 'nacho/nacho-button';
@import 'nacho/nacho-global-search';

View File

@ -0,0 +1 @@
@import 'entity-header';

View File

@ -0,0 +1,13 @@
.dataset-entity-header {
background-color: white;
padding-top: item-spacing(5);
}
.dataset-entity-tabs {
background-color: white;
///overrides library styles to match design spec
.ivy-tabs-tablist {
margin-bottom: 0;
}
}

View File

@ -1,7 +1,7 @@
@import 'restyle';
$primary-border-color: get-color(gray3, 0.8);
$secondary-border-color: set-color(white, base);
$secondary-border-color: get-color(slate0);
/// Defines styles for the breadcrumb container
@include restyle-define(
@ -67,6 +67,16 @@ $secondary-border-color: set-color(white, base);
.nacho-breadcrumbs {
@include restyle(breadcrumbs);
&--white-surface {
$secondary-border-color: get-color(white);
.nacho-breadcrumbs__crumb__grain {
&::after {
border-left: 30px solid $secondary-border-color;
}
}
}
&__crumb {
float: left;

View File

@ -3,6 +3,7 @@
}
/// Styles that apply to the layout for a page with two columns sidebar and content style
.wh-sidebar, .wh-main-content {
margin: 30px 0;
.wh-sidebar,
.wh-main-content {
margin-top: item-spacing(5);
}

View File

@ -1,37 +1,35 @@
{{#if shouldShowBrowserRevamp}}
<div class="row">
<div class="container">
<div class="row">
{{#browser/containers/data-systems params=model as |dataSystemsContainer|}}
{{#if dataSystemsContainer.getDataSystemsNodesTask.isRunning}}
{{pendulum-ellipsis-animation}}
{{else}}
{{#if dataSystemsContainer.requestParams.platform}}
<section class="data-systems-container">
{{datasets/urn-breadcrumbs urn=dataSystemsContainer.urn}}
{{#browser/containers/data-systems params=model as |dataSystemsContainer|}}
{{#if dataSystemsContainer.getDataSystemsNodesTask.isRunning}}
{{pendulum-ellipsis-animation}}
{{else}}
{{#if dataSystemsContainer.requestParams.platform}}
<section class="data-systems-container">
{{datasets/urn-breadcrumbs urn=dataSystemsContainer.urn}}
{{browser/data-systems nodes=dataSystemsContainer.nodes}}
</section>
{{else}}
{{#each dataSystemsContainer.nodes as |node|}}
<div class="col-md-3">
<div class="data-platform-container">
<div class="data-platform">
{{#browser/containers/data-platform platformParams=node as |platformContainer|}}
{{browser/data-platform
platform=platformContainer.platformProps
node=node
platformTask=platformContainer.getDataPlatformTask
}}
{{/browser/containers/data-platform}}
</div>
{{browser/data-systems nodes=dataSystemsContainer.nodes}}
</section>
{{else}}
{{#each dataSystemsContainer.nodes as |node|}}
<div class="col-md-3">
<div class="data-platform-container">
<div class="data-platform">
{{#browser/containers/data-platform platformParams=node as |platformContainer|}}
{{browser/data-platform
platform=platformContainer.platformProps
node=node
platformTask=platformContainer.getDataPlatformTask
}}
{{/browser/containers/data-platform}}
</div>
</div>
{{/each}}
{{/if}}
</div>
{{/each}}
{{/if}}
{{/browser/containers/data-systems}}
</div>
{{/if}}
{{/browser/containers/data-systems}}
</div>
</div>
{{else}}

View File

@ -1,6 +1,6 @@
<div class="container data-systems-container">
<div id="dataset">
{{datasets/urn-breadcrumbs urn=model.uri}}
<div id="dataset" class="dataset-entity-header">
<div class="container">
{{datasets/urn-breadcrumbs class="nacho-breadcrumbs nacho-breadcrumbs--white-surface" urn=model.uri}}
<div class="row">
<div class="container">
@ -49,44 +49,49 @@
</div>
{{datasets/containers/dataset-owner-list urn=encodedUrn}}
</div>
</div>
{{#ivy-tabs selection=tabSelected as |tabs|}}
{{#ivy-tabs selection=tabSelected as |tabs|}}
<div class="dataset-entity-tabs">
<div class="container">
{{#tabs.tablist as |tablist|}}
{{#tabs.tablist as |tablist|}}
{{#unless isPinot}}
{{#tablist.tab tabIds.Properties on-select=(action "tabSelectionChanged")}}
Properties
{{/tablist.tab}}
{{/unless}}
{{#unless isPinot}}
{{#tablist.tab tabIds.Properties on-select=(action "tabSelectionChanged")}}
Properties
{{/tablist.tab}}
{{/unless}}
{{#if isJitAclAccessEnabled}}
{{#tablist.tab tabIds.Access on-select=(action "tabSelectionChanged")}}ACL Access{{/tablist.tab}}
{{/if}}
{{#tablist.tab tabIds.Schema on-select=(action "tabSelectionChanged")}}Schema{{/tablist.tab}}
{{#tablist.tab tabIds.Ownership on-select=(action "tabSelectionChanged")}}
Ownership
{{#if requiredMinNotConfirmed}}
<span class="notification-dot notification-dot--on-tab" aria-hidden="true"></span>
{{#if isJitAclAccessEnabled}}
{{#tablist.tab tabIds.Access on-select=(action "tabSelectionChanged")}}ACL Access{{/tablist.tab}}
{{/if}}
{{/tablist.tab}}
{{#if isInternal}}
{{#tablist.tab tabIds.Compliance on-select=(action "tabSelectionChanged")}}
Compliance
{{#tablist.tab tabIds.Schema on-select=(action "tabSelectionChanged")}}Schema{{/tablist.tab}}
{{#if requiresUserAction}}
{{#tablist.tab tabIds.Ownership on-select=(action "tabSelectionChanged")}}
Ownership
{{#if requiredMinNotConfirmed}}
<span class="notification-dot notification-dot--on-tab" aria-hidden="true"></span>
{{/if}}
{{/tablist.tab}}
{{/if}}
{{/tabs.tablist}}
{{#if isInternal}}
{{#tablist.tab tabIds.Compliance on-select=(action "tabSelectionChanged")}}
Compliance
{{#if requiresUserAction}}
<span class="notification-dot notification-dot--on-tab" aria-hidden="true"></span>
{{/if}}
{{/tablist.tab}}
{{/if}}
{{/tabs.tablist}}
</div>
</div>
<div class="container">
{{#tabs.tabpanel tabIds.Properties}}
{{datasets/containers/dataset-properties
urn=encodedUrn
@ -123,6 +128,5 @@
{{datasets/containers/dataset-acl-access urn=encodedUrn}}
{{/tabs.tabpanel}}
{{/if}}
{{/ivy-tabs}}
</div>
</div>
{{/ivy-tabs}}

View File

@ -19,7 +19,7 @@
<section class="search-results page-section-container">
{{#if model.count}}
<div class="search-pagination">
<ul class="pager">
<ul class="pager" style="margin-top: 0">
{{#unless first}}
<li class="previous">
{{#link-to 'search'