tqt/Ghost
2
1
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2023-12-13 21:00:40 +01:00
Code Issues 1 Releases Wiki Activity

Merge pull request #95 from matthojo/New-Widgets

Browse source 
Initial new Dashboard widgets - see #65
This commit is contained in:
John O'Nolan 2013-05-30 04:15:10 -07:00
commit a89dc1d123
3 changed files with 625 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

448
core/admin/assets/sass/layouts/dashboard.scss
View file

@ -2,6 +2,30 @@
* These are the styles used to control the look and feel of the widgetised
* dashboard of the Ghost admin system. The first screen you see on login.
*
* Table of Contents:
* Widget Base
* Widget Sizes
* Widget Variations
* Individual Widgets
* Clock / Date
* Ghost Image
* Unique Visitors
* Facebook Likes
* Google Plus
* Twitter
* Campaign Monitor
* Upcoming Posts
* Most Popular Posts
* Posts This Week
* Instagram
* RSS
* Klout
* Bounce Rate
* Average time On Site
* Last.Fm
* Post Ideas
* Tweets
* Backups
*/
/* ==========================================================================
@ -9,8 +33,8 @@
========================================================================== */
%widget, .widget {
width: $widget-base-width;
height: $widget-base-height;
width: 340px;
height: 300px;
float:left;
position:relative;
margin:0 15px 15px 0;
@ -29,8 +53,8 @@
width: 100%;
height: 40px;
font-size: 1.2em;
color: #cecbc7;
border-top: 1px solid #EDECE4;
color: $midbrown;
border-top: 1px solid $lightbrown;
.widget-title {
display: inline-block;
@ -48,7 +72,7 @@
width: 46px;
float: right;
padding: 7px 14px;
border-left: 1px solid #EDECE4;
border-left: 1px solid $lightbrown;
cursor: pointer;
@include icon($i-settings, 1em);
}
@ -64,16 +88,16 @@
========================================================================== */
.widget-1x2 {
height: $widget-base-height * 2;
height: 615px;
}
.widget-2x2 {
width: $widget-base-width * 2;
height: $widget-base-height * 2;
width: 695px;
height: 615px;
}
.widget-2x1 {
width: $widget-base-width * 2;
width: 695px;
}
@ -81,6 +105,10 @@
Widget Variations
========================================================================== */
/* ==========================================================================
Number Widgets base styles
========================================================================== */
%widget-number, .widget-number {
@extend %widget;
@ -93,7 +121,7 @@
font-size: 5em;
line-height: 1em;
font-weight: 400;
color: #4a4a4a;
color: $darkgrey;
}
.sub {
@ -102,6 +130,7 @@
mark {
background-color: transparent;
font-weight: bold;
&.up {
color: $green;
@ -109,9 +138,9 @@
&.down {
color: $red;
}
} // mark
} // .sub
} // .info
}
}
}
} // .widget-content
&.widget-2x2 {
@ -126,12 +155,15 @@
.sub {
font-size: 2.5em;
}
} // .info
} // .widget-content
} // .widget-2x2
}
}
}
} // %widget-number, .widget-number
//For the settings panel
/* ==========================================================================
Settings panel base styles
========================================================================== */
.widget-settings {
@extend %widget;
background-color: #2d3032;
@ -140,7 +172,7 @@
height: 40px;
border-top: none;
border-bottom: 1px solid #4a4a4a;
color: #7E878B;
color: $midgrey;
}
.widget-content {
@ -170,7 +202,7 @@
@include box-sizing(border-box);
height: 100%;
padding: 8px;
color: #E3EDF2;
color: $midgrey;
text-transform: none;
background: none;
border: none;
@ -188,13 +220,16 @@
@include icon($i-x, 1em);
}
&.done {
background-color: #A0B95D;
color: #ffffff;
background-color: $green;
color: rgba(255,255,255,0.7);
@include icon($i-check, 1em);
}
}
} // .widget-settings
.none {
margin-right:0;
}
@ -203,20 +238,24 @@
Individual Widgets
========================================================================== */
/* ==========================================================================
Clock / Date
========================================================================== */
.widget-time {
@extend %widget;
.summary {
margin-bottom: 30px;
font-size: 1.4em;
color: #cecbc7;
color: #9b9b9b;
.day {
float: left;
}
.weather {
float: right;
// TODO: icon for weather
@include icon-after($i-weather-sun);
}
}
@ -229,7 +268,7 @@
font-size: 5em;
line-height: 1em;
font-weight: 400;
color: #4a4a4a;
color: $darkgrey;
}
.date {
@ -239,6 +278,10 @@
}
} // .widget-time
/* ==========================================================================
Ghost Image
========================================================================== */
.widget-image {
@extend %widget;
@ -263,10 +306,18 @@
} // .widget-image
/* ==========================================================================
Unique Visitors
========================================================================== */
.widget-stats {
@extend %widget-number;
}
/* ==========================================================================
Facebook Likes
========================================================================== */
.widget-facebook {
@extend %widget-number;
@ -282,18 +333,34 @@
}
}
/* ==========================================================================
Google Plus
========================================================================== */
.widget-gplus {
@extend %widget-number;
}
/* ==========================================================================
Twitter
========================================================================== */
.widget-twitter {
@extend %widget;
}
/* ==========================================================================
Campaign Monitor
========================================================================== */
.widget-campaignmonitor {
@extend %widget-number;
}
/* ==========================================================================
Upcoming Posts
========================================================================== */
.widget-posts {
@extend %widget;
position: relative;
@ -309,6 +376,24 @@
border: #efefef 54px solid;
border-radius: 250px;
.sheen { // Bourbon gradient mixin not appropriate for this use-case.
width: 71px;
height: 142px;
position: absolute;
top: 0;
background-image: -webkit-gradient(linear, left bottom, right top, from(rgba(251, 255, 242, 0.00)), to(rgba(254, 253, 255, 1.00)));
background-image: -webkit-linear-gradient(left bottom, rgba(251, 255, 242, 0.00), rgba(254, 253, 255, 1.00));
background-image: -moz-linear-gradient(left bottom, rgba(251, 255, 242, 0.00), rgba(254, 253, 255, 1.00));
background-image: -o-linear-gradient(left bottom, rgba(251, 255, 242, 0.00), rgba(254, 253, 255, 1.00));
background-image: -ms-linear-gradient(left bottom, rgba(251, 255, 242, 0.00), rgba(254, 253, 255, 1.00));
background-image: linear-gradient(left bottom, rgba(251, 255, 242, 0.00), rgba(254, 253, 255, 1.00));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#fbfff2', EndColorStr='#fefdff');
border-radius: 71px 0 0 71px;
@include transform(rotate(45deg));
@include transform-origin(100% 50%);
opacity: 0.05;
}
#poststats {
position: relative;
top:-54px;
@ -346,8 +431,323 @@
}
}
} // .widget-posts
/* ==========================================================================
Popular Posts
========================================================================== */
.widget-popular {
@extend %widget;
background: none;
.widget-content {
padding: 0;
}
.nav {
list-style: none;
width: 100%;
margin: 0;
padding: 0;
}
.tab {
@include box-sizing(border-box);
display: inline-block;
height: 35px;
margin: 0;
margin-top: 5px;
padding: 5px 15px 0;
float: left;
vertical-align: bottom;
background: #CDCCC5;
border-left: 1px solid $midbrown;
&:first-child {
border: none;
}
&.active {
height: 40px;
margin: 0;
padding-top: 10px;
background: #ffffff;
}
a {
vertical-align: middle;
display: inline-block;
color: #8D8C85;
}
}
.post-list {
max-height: 538px; // For overflow, dont way to make dynamic
background: #ffffff;
overflow: auto;
}
.post-item {
@include box-sizing(border-box);
display: block;
min-height: 80px;
width: 100%;
padding: 20px;
border-bottom: 1px solid $lightbrown;
}
.post-title {
font-size: 1.25em;
font-weight: normal;
}
.post-date {
@include icon($i-calendar);
margin-right: 20px;
color: $brown;
}
.post-count {
@include icon($i-stats);
color: $brown;
}
.widget-footer {
background: #ffffff;
}
} // .widget-popular
/* ==========================================================================
Posts This Week
========================================================================== */
.widget-postsWeek {
@extend %widget;
}
/* ==========================================================================
Instagram
========================================================================== */
.widget-instagram {
@extend %widget;
overflow: hidden;
.widget-content {
padding: 0;
}
.photo {
height: 100%;
width: 100%;
}
.widget-footer {
background: rgba(0,0,0,0.4);
border: none;
.widget-title {
color: #fff;
}
}
.widget-settings-toggle {
border: none;
}
} // .widget-instagram
/* ==========================================================================
RSS
========================================================================== */
.widget-rss {
@extend %widget;
}
/* ==========================================================================
Klout
========================================================================== */
.widget-klout {
@extend %widget-number;
}
/* ==========================================================================
Bounce Rate
========================================================================== */
.widget-bounce {
@extend %widget-number;
}
/* ==========================================================================
Average Time On Site
========================================================================== */
.widget-avgTime {
@extend %widget-number;
}
/* ==========================================================================
Last.Fm
========================================================================== */
.widget-lastfm {
@extend %widget;
overflow: hidden;
.widget-content {
padding: 0;
}
.cover {
height: 100%;
width: 100%;
}
.banner {
@include box-sizing(border-box);
display: block;
width: 100%;
padding: 20px;
position: absolute;
top: 80px;
background: rgba(0,0,0,0.7);
.song-artist, .song-title {
display: block;
color: #ffffff;
}
.song-artist {
font-size: 2em;
font-weight: bold;
line-height: 1em;
}
.song-title {
font-size: 1.2em;
}
}
.widget-footer {
background: #ffffff;
}
} // .widget-lastfm
/* ==========================================================================
Post Ideas
========================================================================== */
.widget-ideas {
@extend %widget;
.widget-content {
padding: 0;
}
.idea-title {
@include box-sizing(border-box);
display: block;
width: 100%;
height: 80px;
margin-bottom: 10px;
padding: 20px;
font-size: 2em;
border: none;
border-bottom: 1px solid $lightbrown;
}
.idea-content {
@include box-sizing(border-box);
width: 100%;
padding: 20px;
font-size: 1.2em;
border: none;
resize: none;
}
.idea-title:focus, .idea-content:focus {
outline: none;
}
} // .widget-ideas
/* ==========================================================================
Tweets
========================================================================== */
.widget-tweets {
@extend %widget;
.twitter-display-image {
width: 30px;
height: 30px;
margin-right: 10px;
display: inline-block;
float: left;
border-radius: 15px;
img {
width: 100%;
height: 100%;
border-radius: 15px;
}
}
.twitter-name {
font-weight: bold;
font-size: 1.5em;
margin-right: 5px;
}
.twitter-handle {
color: $midbrown;
font-size: 1.2em;
}
.latest-tweet {
margin-top: 15px;
margin-bottom: 15px;
font-size: 1.5em;
a {
color: $orange;
font-weight: bold;
}
}
.tweet-time {
color: $midbrown;
}
.twitter-functions {
float: right;
font-size: 1.2em;
a:hover {
text-decoration: none;
}
.reply {
@include icon($i-reply, '', $midbrown);
margin-right: 5px;
}
.retweet {
@include icon($i-repost, '', $midbrown);
margin-right: 5px;
}
.favourite {
@include icon($i-unfeatured, '', $midbrown);
}
}
} // .widget-tweets
/* ==========================================================================
Backups
========================================================================== */
.widget-backups {
@extend %widget;
}
/*

9
core/admin/assets/sass/modules/mixins.scss
View file

@ -182,11 +182,4 @@ $green: #9FBB58;
text-decoration: none;
}
}
}
/* =============================================================================
Widgets
============================================================================= */
$widget-base-height: 300px;
$widget-base-width: 340px;
}

211
core/admin/views/dashboard.hbs
View file

@ -37,6 +37,17 @@
$('.widget-gplus').delay(1200).fadeIn(1000);
$('.widget-twitter').delay(1300).fadeIn(1000);
$('.widget-campaignmonitor').delay(1400).fadeIn(1000);
$('.widget-popular').delay(1600).fadeIn(1000);
$('.widget-postsWeek').delay(1800).fadeIn(1000);
$('.widget-instagram').delay(2000).fadeIn(1000);
$('.widget-rss').delay(2200).fadeIn(1000);
$('.widget-klout').delay(2400).fadeIn(1000);
$('.widget-bounce').delay(2600).fadeIn(1000);
$('.widget-avgTime').delay(2800).fadeIn(1000);
$('.widget-lastfm').delay(3000).fadeIn(1000);
$('.widget-ideas').delay(3200).fadeIn(1000);
$('.widget-tweets').delay(3400).fadeIn(1000);
$('.widget-backups').delay(3600).fadeIn(1000);
//});
});
</script>
@ -74,6 +85,7 @@
<section class="widget-content">
<div class="chart">
<canvas id="poststats" width="250" height="250"></canvas>
<div class="sheen"></div>
<ul class="data">
<li><span class="ready">9</span> Ready</li>
<li><span class="pending">4</span> Pending</li>
@ -90,12 +102,12 @@
<div class="widget-stats widget-2x2">
<section class="widget-content">
<div class="info">
<span class="count">293,042</span>
<span class="sub"><mark class="up">+35%</mark> in the last 30 days</span>
<span class="count">293,051</span>
<span class="sub"><mark class="up">+14%</mark> in the last 7 days</span>
</div>
</section>
<footer class="widget-footer">
<span class="widget-title">Google Analytics Unique Visitors</span>
<span class="widget-title">Unique Visitors (7 days)</span>
<div class="widget-settings-toggle"></div>
</footer>
</div>
@ -103,13 +115,13 @@
<div class="widget-facebook">
<section class="widget-content">
<div class="info">
<span class="count">9,392</span>
<span class="sub"><mark class="down">-39</mark> likes today</span>
<span class="count">12,329</span>
<span class="sub"><mark class="down">-3</mark> likes today</span>
<span class="faces"></span>
</div>
</section>
<footer class="widget-footer">
<span class="widget-title">Facebook</span>
<span class="widget-title">Facebook Likes</span>
<div class="widget-settings-toggle"></div>
</footer>
</div>
@ -142,23 +154,200 @@
<label>
<span class="title">Quantity</span> <input type="text" value="6"/>
</label>
<label>
<span class="title">Account</span> <input type="text" value="Account"/>
</label>
</section>
<footer class="widget-footer">
<div class="widget-settings-toggle done"></div>
</footer>
</div>
<div class="widget-campaignmonitor none">
<section class="widget-content">
<div class="info">
<span class="count">3,502</span>
<span class="sub"><mark class="up">+35</mark> subscribers this week</span>
<span class="count">5,693</span>
<span class="sub"><mark class="up">+63</mark> subscribers this week</span>
</div>
</section>
<footer class="widget-footer">
<span class="widget-title">Campaign Monitor</span>
<div class="widget-settings-toggle"></div>
</footer>
</div>
<div class="widget-popular widget-1x2">
<section class="widget-content">
<ul class="nav clearfix">
<li class="tab active"><a href="#">This Week</a></li>
<li class="tab"><a href="#">Month</a></li>
<li class="tab"><a href="#">Year</a></li>
<li class="tab"><a href="#">Ever</a></li>
</ul>
<ul class="post-list nav">
<li class="post-item">
<h1 class="post-title">The Night of The Headless Horseman Part II</h1>
<span class="post-date"> Yesterday</span>
<span class="post-count"> 3,128</span>
</li>
<li class="post-item">
<h4 class="post-title">Latin Script & Why it's Particularly Boring to Read</h4>
<span class="post-date"> Wednesday</span>
<span class="post-count"> 1,345</span>
</li>
<li class="post-item">
<h4 class="post-title">59 Signs Your Cat and/or Dog Might be Planning To Kill You</h4>
<span class="post-date"> Tuesday</span>
<span class="post-count"> 824</span>
</li>
<li class="post-item">
<h4 class="post-title">A Love Letter to Emma Stone</h4>
<span class="post-date"> Today</span>
<span class="post-count"> 293</span>
</li>
<li class="post-item">
<h4 class="post-title">Lorem Ipsum Dolor Sit Amet & Other Funny Moments</h4>
<span class="post-date"> Yesterday</span>
<span class="post-count"> 124</span>
</li>
<li class="post-item">
<h4 class="post-title">Matt Does Git</h4>
<span class="post-date"> Thursday</span>
<span class="post-count"> 100</span>
</li>
</ul>
</section>
<footer class="widget-footer">
<span class="widget-title">Most Popular Posts</span>
<div class="widget-settings-toggle"></div>
</footer>
</div>
<div class="widget-postsWeek">
<section class="widget-content">
</section>
<footer class="widget-footer">
<span class="widget-title">Posts This Week (Out Of 20)</span>
<div class="widget-settings-toggle"></div>
</footer>
</div>
<div class="widget-rss widget-2x2 none">
<section class="widget-content">
</section>
<footer class="widget-footer">
<span class="widget-title">Your RSS News Feed</span>
<div class="widget-settings-toggle"></div>
</footer>
</div>
<div class="widget-instagram">
<section class="widget-content">
<img class="photo" src="http://f.cl.ly/items/303f3y1n3I2L1F10343E/instagram.jpg" />
</section>
<footer class="widget-footer">
<span class="widget-title">Instagram</span>
<div class="widget-settings-toggle"></div>
</footer>
</div>
<div class="widget-klout">
<section class="widget-content">
<div class="info">
<span class="count">64.23</span>
<span class="sub"><mark class="down">-0.42</mark> in the last 30 days</span>
</div>
</section>
<footer class="widget-footer">
<span class="widget-title">Klout</span>
<div class="widget-settings-toggle"></div>
</footer>
</div>
<div class="widget-bounce">
<section class="widget-content">
<div class="info">
<span class="count">40.21%</span>
<span class="sub"><mark class="up">-2.53%</mark> in the last month</span>
</div>
</section>
<footer class="widget-footer">
<span class="widget-title">Bounce Rate</span>
<div class="widget-settings-toggle"></div>
</footer>
</div>
<div class="widget-avgTime">
<section class="widget-content">
<div class="info">
<span class="count">2m 16s</span>
<span class="sub"><mark class="up">+31.4%</mark> in the last month</span>
</div>
</section>
<footer class="widget-footer">
<span class="widget-title">Average Time On Site</span>
<div class="widget-settings-toggle"></div>
</footer>
</div>
<div class="widget-lastfm">
<section class="widget-content">
<img class="cover" src="http://f.cl.ly/items/0p0r3T3v3M0R0H1k1p0S/imagine_dragons.png" />
<section class="banner">
<span class="song-artist">Imagine Dragons</span>
<span class="song-title">On Top of The World</span>
</section>
</section>
<footer class="widget-footer">
<span class="widget-title">Last.fm</span>
<div class="widget-settings-toggle"></div>
</footer>
</div>
<div class="widget-ideas widget-2x1">
<section class="widget-content">
<input type="text" class="idea-title" placeholder="Enter the title of your post idea...." />
<textarea class="idea-content" placeholder="This is a brief synopsis of the idea here with your key points. Paste in any relevant links to your reference material. Markdown is fully supported. Hit enter when your done."></textarea>
</section>
<footer class="widget-footer">
<span class="widget-title">Post Ideas</span>
<div class="widget-settings-toggle"></div>
</footer>
</div>
<div class="widget-tweets">
<section class="widget-content">
<header>
<div class="twitter-display-image">
<img src="http://f.cl.ly/items/1A1S0D3T3p1g1B2Z3J0u/ghost_twitter.jpeg" />
</div>
<span class="twitter-name">Ghost</span>
<span class="twitter-handle">@tryghost</span>
</header>
<article class="latest-tweet">
If you're exploring the <a href="#">@twitterapi</a>, be sure and bring the new field guide along. <a href="#">dev.twitter.com/blog/...</a>
</article>
<footer>
<time class="tweet-time">3 May 12</time>
<div class="twitter-functions">
<a href="#"><i class="reply"></i></a>
<a href="#"><i class="retweet"></i></a>
<a href="#"><i class="favourite"></i></a>
</div>
</footer>
</section>
<footer class="widget-footer">
<span class="widget-title">Twitter</span>
<div class="widget-settings-toggle"></div>
</footer>
</div>
<div class="widget-backups none">
<section class="widget-content">
</section>
<footer class="widget-footer">
<span class="widget-title">Backups</span>
<div class="widget-settings-toggle"></div>
</footer>
</div>