From e7f5b76570669e7605b6f19c448a560826eeb4ab Mon Sep 17 00:00:00 2001 From: Matt Date: Wed, 26 Oct 2016 17:52:37 +0200 Subject: [PATCH 1/2] Added styles and new markup for dashlist panel --- public/app/plugins/panel/dashlist/module.html | 47 +++++++++ public/sass/components/_panel_dashlist.scss | 98 +++++++++++++++++++ 2 files changed, 145 insertions(+) diff --git a/public/app/plugins/panel/dashlist/module.html b/public/app/plugins/panel/dashlist/module.html index b5c59862e5d..938ab7eb7b6 100644 --- a/public/app/plugins/panel/dashlist/module.html +++ b/public/app/plugins/panel/dashlist/module.html @@ -1,3 +1,50 @@ +
+
+
+ Getting Started with Grafana +
+
+
+

Next up:

+
Create your first data source
+

If Grafana dashboards are like the eyes, man, datasources are the heart. Cosmic.

+ +
+
+
+
+ +
+ Install Grafana like a boss. +
+
+
+ +
+ Add your first data source. +
+
+
+ +
+ Create your first dashboard. +
+
+
+ +
+ Invite your team. +
+
+
+ +
+ Extend on Grafana.net. +
+
+
+
+
diff --git a/public/sass/components/_panel_dashlist.scss b/public/sass/components/_panel_dashlist.scss index dfb11dfb848..1943833f0d5 100644 --- a/public/sass/components/_panel_dashlist.scss +++ b/public/sass/components/_panel_dashlist.scss @@ -24,3 +24,101 @@ background-color: $tight-form-func-bg; } } + +.dashlist-flex-container { + display: flex; + justify-content: space-between; + flex-direction: row; + background-color: $tight-form-bg; + padding: 20px; +} + +.dashlist-panel-CTA-flex-container--left { + flex-grow: 2; + align-items: center; +} + +.dashlist-panel-CTA-flex-container--right { + padding-left: 1rem; + border-left: solid 1px black; +} + +.dashlist-panel-CTA-items { + text-align: left; + margin: 10px 0; +} + +p.dashlist-blurb{ + font-size:14px; + color: $text-color; + margin: 0; +} + +a.dashlist-blurb{ + font-size:14px; + color: $text-color; + margin: 0; +} + +a.dashlist-blurb:hover{ + text-decoration: underline; +} + +.dashlist-blurb-success { + color: $text-color-weak; + text-decoration: line-through; +} + +a.dashlist-blurb-upcoming { + color: $text-color-weak; +} + +.dashlist-icon-active { + color: $brand-primary; + -webkit-text-fill-color: transparent; + background: $brand-gradient; + -webkit-background-clip: text; + text-decoration:none; + font-size: 20px; + vertical-align: sub; +} + +.dashlist-icon-upcoming { + color: $text-color-weak; + text-decoration:none; + font-size: 20px; + vertical-align: sub; +} + +.rt-dashboard-icon-warning { + color: $text-color-strong; + text-decoration:none; + font-size: 20px; + vertical-align: sub; +} + +.dashlist-icon-success { + color: $online; + font-size: 24px; + text-decoration:none; + vertical-align: sub; +} + +.dashlist-icons-container { + width: 30px; + display: inline-block; + margin-right: 5px; + text-align: center; + vertical-align: top; +} + +.dashlist-icons-container--active:before { + border-top: 1px solid black; + margin-left: -1em; + padding-left: 2em; +} + +p.dashlist-next-up-blurb { + color: $text-color-weak; + max-width: 375px; +} From b58c38a5db34809966fefd907b66f97a75c5191e Mon Sep 17 00:00:00 2001 From: Matt Date: Thu, 27 Oct 2016 11:36:46 +0200 Subject: [PATCH 2/2] Refactored to be a proper list, added x button in upper right. Before cleaning up the CSS, want trent to set some eyes on it and make it look better. --- public/app/plugins/panel/dashlist/module.html | 31 ++++++++-------- public/sass/components/_panel_dashlist.scss | 36 +++++++++++++++---- 2 files changed, 46 insertions(+), 21 deletions(-) diff --git a/public/app/plugins/panel/dashlist/module.html b/public/app/plugins/panel/dashlist/module.html index 938ab7eb7b6..549ca31b442 100644 --- a/public/app/plugins/panel/dashlist/module.html +++ b/public/app/plugins/panel/dashlist/module.html @@ -2,46 +2,47 @@
Getting Started with Grafana +
-

Next up:

-
Create your first data source
+
Next up:
+ Create your first data source

If Grafana dashboards are like the eyes, man, datasources are the heart. Cosmic.

-
-
+
    +
  • Install Grafana like a boss. -
-
-
+ +
  • +
    Add your first data source. -
    • -
    + +
  • Create your first dashboard. -
    • -
    + +
  • Invite your team. -
    • -
    + +
  • Extend on Grafana.net. -
    • -
    + +
    diff --git a/public/sass/components/_panel_dashlist.scss b/public/sass/components/_panel_dashlist.scss index 1943833f0d5..656513aa8c9 100644 --- a/public/sass/components/_panel_dashlist.scss +++ b/public/sass/components/_panel_dashlist.scss @@ -38,16 +38,26 @@ align-items: center; } -.dashlist-panel-CTA-flex-container--right { +ul.dashlist-panel-CTA-flex-container--right { padding-left: 1rem; border-left: solid 1px black; + list-style-type: none; } -.dashlist-panel-CTA-items { +li.dashlist-panel-CTA-items { text-align: left; margin: 10px 0; } +li.dashlist-icons-container--active::before { + content: ' '; + border-top: 1px solid black; + width: 13px; + position: absolute; + margin-left: -14px; + margin-top: 9px; +} + p.dashlist-blurb{ font-size:14px; color: $text-color; @@ -112,13 +122,27 @@ a.dashlist-blurb-upcoming { vertical-align: top; } -.dashlist-icons-container--active:before { - border-top: 1px solid black; - margin-left: -1em; - padding-left: 2em; +h5.dashlist-next-up { + color: $text-color-weak; + font-style: italic; } p.dashlist-next-up-blurb { color: $text-color-weak; max-width: 375px; } + +.dashlist-CTA-close-btn { + float: right; + padding: 0; + margin: 0 2px 0 0; + background-color: transparent; + border: none; + i { + font-size: 80%; + } + color: $text-color-weak; + &:hover { + color: $white; + } +}