Merge pull request #95 from matthojo/New-Widgets
Initial new Dashboard widgets - see #65
This commit is contained in:
John O'Nolan
commit
a89dc1d123
@ -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;
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
|
||||
@ -182,11 +182,4 @@ $green: #9FBB58;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
Widgets
|
||||
============================================================================= */
|
||||
|
||||
$widget-base-height: 300px;
|
||||
$widget-base-width: 340px;
|
||||
}
|
||||
@ -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>
|
||||
Loading…
Reference in New Issue
Block a user