jprdonnelly/redash
1
0
Fork 0
mirror of https://github.com/getredash/redash.git synced 2025-12-25 01:03:20 -05:00
Code Issues Projects Releases Wiki Activity

Add empty states for home, dashboards, queries and alerts

Browse Source
This commit is contained in:
Zsolt Kocsmarszky
2018-01-22 22:03:06 +01:00
parent 1ac9e6ee4c
commit 5c5c08ae39
5 changed files with 105 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
client/app/assets/less/redash/redash-newstyle.less
View File

@@ -561,6 +561,45 @@ page-header, .page-header--new {
line-height: 31px;
}
// Empty states
.empty-state {
width: 70%;
margin: 50px auto;
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 35px;
font-size: 14px;
line-height: 21px;
del {
opacity: 0.5;
}
.empty-state__summary, .empty-state__steps {
width: 48%;
}
.empty-state__summary {
align-self: flex-start;
}
ol {
margin-bottom: 15px;
padding: 17px;
}
h4 {
margin-top: 0;
color: #767676;
margin-bottom: 15px;
}
p {
margin-bottom: 0;
}
}
// Forms
.form-control {
border-radius: 2px;

19
client/app/pages/alerts-list/alerts-list.html
View File

@@ -1,6 +1,21 @@
<div class="container">
<page-header title="Alerts">
</page-header>
<page-header title="Alerts"></page-header>
<div class="empty-state bg-white tiled">
<div class="empty-state__summary">
<h4>Alerts</h4>
<p>Get notified on certain events</p>
</div>
<div class="empty-state__steps">
<h4>Let's get started</h4>
<ol>
<li><del><a href="/data_sources">Connect</a> a Data Source</del></li>
<li><del><a href="/queries/new/">Create</a> your first Query</del></li>
<li><a href="/alerts/new/">Create</a> your first Alert</li>
</ol>
<p>Need more support? <a href="http://help.redash.io/category/23-alerts" target="_blank">See our Help <i class="fa fa-external-link" aria-hidden="true"></i></a></p>
</div>
</div>
<div class="bg-white tiled">
<table class="table table-condensed table-hover">

16
client/app/pages/dashboards/dashboard-list.html
View File

@@ -1,6 +1,22 @@
<div class='container'>
<page-header title="Dashboards"></page-header>
<div class="empty-state bg-white tiled">
<div class="empty-state__summary">
<h4>Dashboards </h4>
<p>See the big picture</p>
</div>
<div class="empty-state__steps">
<h4>Let's get started</h4>
<ol>
<li><del><a href="/data_sources">Connect</a> a Data Source</del></li>
<li><a href="/queries/new/">Create</a> your first Query</li>
<li><a href="">Create</a> your first Dashboard</li>
</ol>
<p>Need more support? <a href="http://help.redash.io/category/22-dashboards" target="_blank">See our Help <i class="fa fa-external-link" aria-hidden="true"></i></a></p>
</div>
</div>
<div class="row">
<div class="col-lg-3">
<input type='text' class='form-control' placeholder="Search Dashboards..."

17
client/app/pages/home/home.html
View File

@@ -1,5 +1,22 @@
<div class="container">
<div class="empty-state bg-white tiled">
<div class="empty-state__summary">
<h4>Welcome to Redash</h4>
<p>Connect to any data source, easily visualize and share your data</p>
</div>
<div class="empty-state__steps">
<h4>Let's get started</h4>
<ol>
<li><del><a href="/data_sources">Connect</a> a Data Source</del></li>
<li><a href="/queries/new">Create</a> your first Query</li>
<li><a href="">Create</a> your first Dashboard</li>
<li><a href="/users/new">Invite</a> your team members</li>
</ol>
<p>Need more support? <a href="http://help.redash.io/article/32-getting-started" target="_blank">See our Help <i class="fa fa-external-link" aria-hidden="true"></i></a></p>
</div>
</div>
<div class="tile">
<div class="t-body tb-padding">
<div class="row">

16
client/app/pages/queries-list/queries-list.html
View File

@@ -1,5 +1,21 @@
<div class="container">
<page-header title="Queries"></page-header>
<div class="empty-state bg-white tiled">
<div class="empty-state__summary">
<h4>Queries</h4>
<p>Getting the data out of your database</p>
</div>
<div class="empty-state__steps">
<h4>Let's get started</h4>
<ol>
<li><del><a href="/data_sources">Connect</a> a Data Source</del></li>
<li><a href="/queries/new/">Create</a> your first Query</li>
</ol>
<p>Need more support? <a href="http://help.redash.io/category/21-querying" target="_blank">See our Help <i class="fa fa-external-link" aria-hidden="true"></i></a></p>
</div>
</div>
<tab-nav tabs="$ctrl.tabs"></tab-nav>
<div class="bg-white tiled">