IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-01-23 23:13:52 -06:00
Code Issues Packages Projects Releases Wiki Activity

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.

Browse Source
This commit is contained in:
Matt 2016-10-27 11:36:46 +02:00
parent 4633da47ef
commit b58c38a5db
2 changed files with 46 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
public/app/plugins/panel/dashlist/module.html
View File

@ -2,46 +2,47 @@
<div class="dashlist-section">
<h6 class="dashlist-section-header">
Getting Started with Grafana
<button class="dashlist-CTA-close-btn"><i class="fa fa-remove"></i></button>
</h6>
<div class="dashlist-flex-container">
<div class="dashlist-panel-CTA-flex-container--left">
<h4><em>Next up:</em></h4>
<h5>Create your first data source</h5>
<h5 class="dashlist-next-up">Next up:</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>
<button class="btn btn-success">Add Data Source</button>
</div>
<div class="dashlist-panel-CTA-flex-container--right">
<div class="dashlist-panel-CTA-items">
<ul class="dashlist-panel-CTA-flex-container--right">
<li class="dashlist-panel-CTA-items">
<div class="dashlist-icons-container">
<i class="icon-gf icon-gf-check dashlist-icon-success"></i>
</div>
<span class="dashlist-blurb dashlist-blurb-success">Install Grafana like a boss.</span>
</div>
<div class="dashlist-panel-CTA-items">
<div class="dashlist-icons-container dashlist-icons-container--active">
</li>
<li class="dashlist-panel-CTA-items dashlist-icons-container--active">
<div class="dashlist-icons-container">
<i class="icon-gf icon-gf-datasources dashlist-icon-active"></i>
</div>
<a href="#" class="dashlist-blurb">Add your first data source.</a>
</div>
<div class="dashlist-panel-CTA-items">
</li>
<li class="dashlist-panel-CTA-items">
<div class="dashlist-icons-container">
<i class="icon-gf icon-gf-dashboard dashlist-icon-upcoming"></i>
</div>
<a href="#" class="dashlist-blurb dashlist-blurb-upcoming">Create your first dashboard.</a>
</div>
<div class="dashlist-panel-CTA-items">
</li>
<li class="dashlist-panel-CTA-items">
<div class="dashlist-icons-container">
<i class="icon-gf icon-gf-users dashlist-icon-upcoming"></i>
</div>
<a href="#" class="dashlist-blurb dashlist-blurb-upcoming">Invite your team.</a>
</div>
<div class="dashlist-panel-CTA-items">
</li>
<li class="dashlist-panel-CTA-items">
<div class="dashlist-icons-container">
<i class="icon-gf icon-gf-grafana-icon dashlist-icon-upcoming"></i>
</div>
<a href="#" class="dashlist-blurb dashlist-blurb-upcoming">Extend on Grafana.net.</a>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>

36
public/sass/components/_panel_dashlist.scss
View File

@ -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;
}
}