Skip to content

N
nexpie-grafana-theme
Commit b58c38a5 by Matt
Options

Refactored to be a proper list, added x button in upper right. Before cleaning… 

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.
parent 4633da47
Showing with 46 additions and 21 deletions
public/app/plugins/panel/dashlist/module.html
...@@ -2,46 +2,47 @@ ...@@ -2,46 +2,47 @@
<div class="dashlist-section"> <div class="dashlist-section">
<h6 class="dashlist-section-header"> <h6 class="dashlist-section-header">
Getting Started with Grafana Getting Started with Grafana
<button class="dashlist-CTA-close-btn"><i class="fa fa-remove"></i></button>
</h6> </h6>
<div class="dashlist-flex-container"> <div class="dashlist-flex-container">
<div class="dashlist-panel-CTA-flex-container--left"> <div class="dashlist-panel-CTA-flex-container--left">
<h4><em>Next up:</em></h4> <h5 class="dashlist-next-up">Next up:</h5>
<h5>Create your first data source</h5> <span class="dashlist-title">Create your first data source</span>
<p class="dashlist-next-up-blurb">If Grafana dashboards are like the eyes, man, datasources are the heart. Cosmic.</p> <p class="dashlist-next-up-blurb">If Grafana dashboards are like the eyes, man, datasources are the heart. Cosmic.</p>
<button class="btn btn-success">Add Data Source</button> <button class="btn btn-success">Add Data Source</button>
</div> </div>
<div class="dashlist-panel-CTA-flex-container--right"> <ul class="dashlist-panel-CTA-flex-container--right">
<div class="dashlist-panel-CTA-items"> <li class="dashlist-panel-CTA-items">
<div class="dashlist-icons-container"> <div class="dashlist-icons-container">
<i class="icon-gf icon-gf-check dashlist-icon-success"></i> <i class="icon-gf icon-gf-check dashlist-icon-success"></i>
</div> </div>
<span class="dashlist-blurb dashlist-blurb-success">Install Grafana like a boss.</span> <span class="dashlist-blurb dashlist-blurb-success">Install Grafana like a boss.</span>
</div> </li>
<div class="dashlist-panel-CTA-items"> <li class="dashlist-panel-CTA-items dashlist-icons-container--active">
<div class="dashlist-icons-container dashlist-icons-container--active"> <div class="dashlist-icons-container">
<i class="icon-gf icon-gf-datasources dashlist-icon-active"></i> <i class="icon-gf icon-gf-datasources dashlist-icon-active"></i>
</div> </div>
<a href="#" class="dashlist-blurb">Add your first data source.</a> <a href="#" class="dashlist-blurb">Add your first data source.</a>
</div> </li>
<div class="dashlist-panel-CTA-items"> <li class="dashlist-panel-CTA-items">
<div class="dashlist-icons-container"> <div class="dashlist-icons-container">
<i class="icon-gf icon-gf-dashboard dashlist-icon-upcoming"></i> <i class="icon-gf icon-gf-dashboard dashlist-icon-upcoming"></i>
</div> </div>
<a href="#" class="dashlist-blurb dashlist-blurb-upcoming">Create your first dashboard.</a> <a href="#" class="dashlist-blurb dashlist-blurb-upcoming">Create your first dashboard.</a>
</div> </li>
<div class="dashlist-panel-CTA-items"> <li class="dashlist-panel-CTA-items">
<div class="dashlist-icons-container"> <div class="dashlist-icons-container">
<i class="icon-gf icon-gf-users dashlist-icon-upcoming"></i> <i class="icon-gf icon-gf-users dashlist-icon-upcoming"></i>
</div> </div>
<a href="#" class="dashlist-blurb dashlist-blurb-upcoming">Invite your team.</a> <a href="#" class="dashlist-blurb dashlist-blurb-upcoming">Invite your team.</a>
</div> </li>
<div class="dashlist-panel-CTA-items"> <li class="dashlist-panel-CTA-items">
<div class="dashlist-icons-container"> <div class="dashlist-icons-container">
<i class="icon-gf icon-gf-grafana-icon dashlist-icon-upcoming"></i> <i class="icon-gf icon-gf-grafana-icon dashlist-icon-upcoming"></i>
</div> </div>
<a href="#" class="dashlist-blurb dashlist-blurb-upcoming">Extend on Grafana.net.</a> <a href="#" class="dashlist-blurb dashlist-blurb-upcoming">Extend on Grafana.net.</a>
</div> </li>
</div> </ul>
</div> </div>
</div> </div>
</div> </div>
......
public/sass/components/_panel_dashlist.scss
...@@ -38,16 +38,26 @@ ...@@ -38,16 +38,26 @@
align-items: center; align-items: center;
} }
.dashlist-panel-CTA-flex-container--right { ul.dashlist-panel-CTA-flex-container--right {
padding-left: 1rem; padding-left: 1rem;
border-left: solid 1px black; border-left: solid 1px black;
list-style-type: none;
} }
.dashlist-panel-CTA-items { li.dashlist-panel-CTA-items {
text-align: left; text-align: left;
margin: 10px 0; 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{ p.dashlist-blurb{
font-size:14px; font-size:14px;
color: $text-color; color: $text-color;
...@@ -112,13 +122,27 @@ a.dashlist-blurb-upcoming { ...@@ -112,13 +122,27 @@ a.dashlist-blurb-upcoming {
vertical-align: top; vertical-align: top;
} }
.dashlist-icons-container--active:before { h5.dashlist-next-up {
border-top: 1px solid black; color: $text-color-weak;
margin-left: -1em; font-style: italic;
padding-left: 2em;
} }
p.dashlist-next-up-blurb { p.dashlist-next-up-blurb {
color: $text-color-weak; color: $text-color-weak;
max-width: 375px; 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;
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment