Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
N
nexpie-grafana-theme
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Registry
Registry
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Kornkitt Poolsup
nexpie-grafana-theme
Commits
e7f5b765
Commit
e7f5b765
authored
Oct 26, 2016
by
Matt
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Added styles and new markup for dashlist panel
parent
f1f923ab
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
145 additions
and
0 deletions
+145
-0
public/app/plugins/panel/dashlist/module.html
+47
-0
public/sass/components/_panel_dashlist.scss
+98
-0
No files found.
public/app/plugins/panel/dashlist/module.html
View file @
e7f5b765
<div
class=
"dashlist"
>
<div
class=
"dashlist-section"
>
<h6
class=
"dashlist-section-header"
>
Getting Started with Grafana
</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>
<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"
>
<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"
>
<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"
>
<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"
>
<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"
>
<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>
</div>
</div>
</div>
<div
class=
"dashlist"
ng-repeat=
"group in ctrl.groups"
>
<div
class=
"dashlist-section"
ng-if=
"group.show"
>
<h6
class=
"dashlist-section-header"
ng-show=
"ctrl.panel.headings"
>
...
...
public/sass/components/_panel_dashlist.scss
View file @
e7f5b765
...
...
@@ -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
;
}
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment