Skip to content

Commit

Permalink
Merge changes from PR kubeflow#2651
Browse files Browse the repository at this point in the history
  • Loading branch information
@prodonjs
prodonjs committed Mar 8, 2019
1 parent e3b1c89 commit 7b3fad3
Show file tree
Hide file tree
Showing 6 changed files with 161 additions and 115 deletions.
30 changes: 27 additions & 3 deletions components/centraldashboard/public/components/dashboard-view.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,12 @@
}

article {
background: #f1f3f4;
padding: 1em;
grid-gap: 1em;
display: grid;
min-height: 0;
min-width: 0;
--primary-background-color: white;
}

Expand All @@ -20,15 +24,18 @@ article:after {

article>paper-card {
border-radius: 5px;
margin: 1em;
grid-column: 1 / span 2;
max-width: 100%;
overflow: hidden;
min-width: 0;
--paper-card-header: {
font-family: "Google Sans"
}
}

article>paper-card.thin {
grid-column: 3
grid-column: 3;
min-width: 19em;
}

#Getting-Started paper-icon-item:not(:last-of-type) {
Expand All @@ -39,6 +46,13 @@ article>paper-card.thin {
color: var(--accent-color)
}

#Getting-Started [secondary] {
word-break: break-word;
width: 100%;
white-space: normal;
font-size: .8em;
}

#Quick-Links {
grid-column: 3
}
Expand All @@ -62,4 +76,14 @@ article>paper-card.thin {
color: var(--accent-color);
background: rgba(0, 125, 252, 0.25);
border-radius: 50%
}
}

a {
text-decoration: none;
color: initial;
}

.header:hover {
color: var(--paper-blue-700);
text-decoration: underline;
}
46 changes: 37 additions & 9 deletions components/centraldashboard/public/components/dashboard-view.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import {PolymerElement, html} from '@polymer/polymer';
import {html, PolymerElement} from '@polymer/polymer';

import css from './dashboard-view.css';

import template from './dashboard-view.pug';

export class DashboardView extends PolymerElement {
Expand All @@ -9,26 +10,53 @@ export class DashboardView extends PolymerElement {
}

/**
* Object describing property-related metadata used by Polymer features
*/
* Object describing property-related metadata used by Polymer features
*/
static get properties() {
const kubeflowDocs = 'https://www.kubeflow.org/docs/started';

return {
gettingStartedItems: {
type: Array,
value: [
{text: 'Build a model in a notebook', icon: 'donut-large'},
{text: 'Launch a pipeline', icon: 'donut-large'},
{text: 'Deploy a solution', icon: 'donut-large'},
{text: 'Compare run output', icon: 'donut-large'},
{text: 'Share solution on AI Hub', icon: 'donut-large'},
{
text: 'Getting started with Kubeflow',
desc: 'Quickly get running with your ML workflow on ' +
'an existing Kubernetes installation',
link: `${kubeflowDocs}/getting-started/`,
},
{
text: 'Microk8s for Kubeflow',
desc: 'Quickly get Kubeflow running locally on ' +
'native hypervisors',
link: `${kubeflowDocs}/getting-started-multipass/`,
},
{
text: 'Minikube for Kubeflow',
desc: 'Quickly get Kubeflow running locally',
link: `${kubeflowDocs}/getting-started-minikube/`,
},
{
text: 'Kubernetes Engine for Kubeflow',
desc: 'Get Kubeflow running on Google Cloud ' +
'Platform. This guide is a quickstart to deploying Kubeflow ' +
'on Google Kubernetes Engine',
link: `${kubeflowDocs}/getting-started-gke/`,
},
{
text: 'Requirements for Kubeflow',
desc: 'Get more detailed information about using ' +
'Kubeflow and its components',
link: `${kubeflowDocs}/requirements/`,
},
],
},
quickLinks: {
type: Array,
value: [
{
text: 'Open docs',
link: 'https://www.kubeflow.org/docs/started/getting-started/',
link: `${kubeflowDocs}/getting-started/`,
},
{
text: 'Open Github',
Expand Down
18 changes: 10 additions & 8 deletions components/centraldashboard/public/components/dashboard-view.pug
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,19 @@
article
paper-card#Getting-Started(heading='Getting Started', hidden$='[[!_devMode]]')
paper-card#Getting-Started(heading='Getting Started')
template(is='dom-repeat', items='[[gettingStartedItems]]')
paper-icon-item
iron-icon(icon='[[item.icon]]', slot='item-icon')
paper-item-body(two-line)
div [[item.text]]
aside(secondary) Lorem ipsum...
paper-card#Quick-Links(heading='Quick Links')
a.heading(href$='[[item.link]]', tabindex='-1',
target='_blank')
paper-icon-item
iron-icon(icon='launch', slot='item-icon')
paper-item-body(two-line)
.header [[item.text]]
aside(secondary) [[item.desc]]
paper-card.thin#Quick-Links(heading='Quick Links')
template(is='dom-repeat', items='[[quickLinks]]')
article.link
paper-item-body [[item.text]]
a(href$='[[item.link]]', tabindex='-1', target='_blank')
paper-icon-button.button(icon='arrow-forward', alt='[[item.text]]')
article.link.more-coming
paper-item-body More coming soon
paper-icon-button.button(icon='arrow-forward', disabled)
paper-icon-button.button(icon='arrow-forward', disabled)
90 changes: 62 additions & 28 deletions components/centraldashboard/public/components/main-page.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ app-drawer .menu-item:hover {
background: #ffffff1b
}

app-drawer .iron-selected > .menu-item {
app-drawer .iron-selected>.menu-item {
background: #ffffff3b;
color: white;
font-weight: 100
Expand Down Expand Up @@ -99,7 +99,7 @@ paper-tab[link] a {
@apply --layout-center-center;
color: var(--paper-tabs-selection-bar);
text-decoration: none;
}
}

app-header-layout {
@apply --layout-vertical
Expand All @@ -108,10 +108,12 @@ app-header-layout {
neon-animated-pages {
height: 100%;
}

neon-animatable {
@apply --layout-vertical;
height: 100%;
}

neon-animatable#iframe-page {
top: -64px;
}
Expand Down Expand Up @@ -146,6 +148,7 @@ neon-animatable#iframe-page {
font-size: 1.3em;
font-family: Google Sans;
}

#Dashboard {
background: #f1f3f4;
padding: 1em;
Expand All @@ -155,7 +158,8 @@ neon-animatable#iframe-page {
min-width: 0;
--primary-background-color: white;
}
#Dashboard > paper-card {

#Dashboard>paper-card {
border-radius: 5px;
grid-column: 1 / span 2;
max-width: 100%;
Expand All @@ -165,52 +169,82 @@ neon-animatable#iframe-page {
font-family: "Google Sans"
}
}
#Dashboard > paper-card.thin {grid-column: 3;min-width: 19em}
#Dashboard > .Getting-Started paper-icon-item {

#Dashboard>paper-card.thin {
grid-column: 3;
min-width: 19em
}

#Dashboard>.Getting-Started paper-icon-item {
cursor: pointer;
}
#Dashboard > .Getting-Started paper-icon-item:not(:last-of-type) {

#Dashboard>.Getting-Started paper-icon-item:not(:last-of-type) {
border-bottom: 1px solid var(--border-color);
}
#Dashboard > .Getting-Started paper-icon-item iron-icon {

#Dashboard>.Getting-Started paper-icon-item iron-icon {
color: var(--accent-color)
}
#Dashboard > .Getting-Started paper-icon-item:hover .heading {

#Dashboard>.Getting-Started paper-icon-item:hover .heading {
color: var(--paper-blue-700);
text-decoration: underline;
}
#Dashboard > .Getting-Started [secondary] {
word-break: break-word;

#Dashboard>.Getting-Started [secondary] {
word-break: break-word;
width: 100%;
white-space: normal;
font-size: .8em;
}
#Dashboard > .Quick-Links .link {

#Dashboard>.Quick-Links .link {
width: 80%;
margin: .5em auto;
border: 1px solid #eeeeef;
padding: .5em 1em;
border-radius: 5px;
@apply --layout-horizontal;
}
#Dashboard > .Quick-Links .link.more-coming {opacity: .4;font-style: italic;pointer-events: none}
#Dashboard > .Quick-Links .link .button {color: var(--accent-color);background: rgba(0, 125, 252, 0.25);border-radius: 50%}
#Dashboard:after {content: '';grid-column: 1 span 3}
#Activity {@apply --layout-vertical;@apply --layout-center-center}
#Activity:before, #Activity:after {font-size: 3em;opacity: .3;font-family: Google Sans}
#Activity:before {content: ":(";font-size: 6em;transform: rotateZ(90deg)}
#Activity:after {content: "No content here yet..."}

[hides] {transition: opacity .25s}
[hidden] {opacity: 0;pointer-events: none}
[hidden]:not([hides]) {display: none}
a[href] {
text-decoration: none;
color: initial;

#Dashboard>.Quick-Links .link.more-coming {
opacity: .4;
font-style: italic;
pointer-events: none
}

#Dashboard>.Quick-Links .link .button {
color: var(--accent-color);
background: rgba(0, 125, 252, 0.25);
border-radius: 50%
}

#Dashboard:after {
content: '';
grid-column: 1 span 3
}

#Activity {
@apply --layout-vertical;
@apply --layout-center-center
}

#Activity:before, #Activity:after {
font-size: 3em;
opacity: .3;
font-family: Google Sans
}

#Activity:before {
content: ":(";
font-size: 6em;
transform: rotateZ(90deg)
}

#Activity:after {
content: "No content here yet..."
}
a[href]:hover {
color: var(--paper-blue-700);
text-decoration: underline;

[hides] {
transition: opacity .25s;
Expand Down
Loading

0 comments on commit 7b3fad3

Please sign in to comment.