Dashboard widget functionality
Intial widget layout, with packery for drag and drop support. Adds ability to save the order of widgets in localstorage
This commit is contained in:
Matthew Harrison-Jones
ErisDS
parent
12496918de
commit
c4f19af62f
72
core/admin/assets/js/views/dashboard.js
Normal file
72
core/admin/assets/js/views/dashboard.js
Normal file
@ -0,0 +1,72 @@
|
||||
/*global window, document, localStorage, Ghost, Backbone, $, _ */
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
var $widgetContainer = $('.js-widget-container'), $itemElems, widgetPositions;
|
||||
|
||||
widgetPositions = {
|
||||
mobile: {},
|
||||
tablet: {},
|
||||
netbook: {},
|
||||
desktop: {}
|
||||
};
|
||||
|
||||
$widgetContainer.packery({
|
||||
itemSelector: '.js-widget',
|
||||
gutter: 10,
|
||||
columnWidth: 340,
|
||||
rowHeight: 300
|
||||
});
|
||||
|
||||
$itemElems = $($widgetContainer.packery('getItemElements'));
|
||||
// make item elements draggable
|
||||
$itemElems.draggable();
|
||||
// bind Draggable events to Packery
|
||||
$widgetContainer.packery('bindUIDraggableEvents', $itemElems);
|
||||
|
||||
// show item order after layout
|
||||
function orderItems() {
|
||||
// items are in order within the layout
|
||||
var $itemElems = $($widgetContainer.packery('getItemElements')), order = {};
|
||||
|
||||
$.each($itemElems, function (index, key) {
|
||||
order[key.getAttribute("data-widget-id")] = index;
|
||||
});
|
||||
return order;
|
||||
}
|
||||
|
||||
// On resize button click
|
||||
$(".js-widget-resizer").on("click", function () {
|
||||
var $parent = $(this).closest('.js-widget'), data = $(this).data('size');
|
||||
|
||||
$parent.removeClass("widget-1x2 widget-2x1 widget-2x2");
|
||||
|
||||
if (data !== "1x1") {
|
||||
$parent.addClass('widget-' + data);
|
||||
$widgetContainer.packery('fit', $parent.get(0));
|
||||
} else {
|
||||
$widgetContainer.packery();
|
||||
}
|
||||
|
||||
$(this).siblings('.active').removeClass('active');
|
||||
$(this).addClass('active');
|
||||
|
||||
});
|
||||
|
||||
$widgetContainer.packery('on', 'dragItemPositioned', function () {
|
||||
var viewportSize = $(window).width();
|
||||
if (viewportSize <= 400) { // Mobile
|
||||
widgetPositions.mobile = orderItems();
|
||||
} else if (viewportSize > 400 && viewportSize <= 800) { // Tablet
|
||||
widgetPositions.tablet = orderItems();
|
||||
} else if (viewportSize > 800 && viewportSize <= 1000) { // Netbook
|
||||
widgetPositions.netbook = orderItems();
|
||||
} else if (viewportSize > 1000) {
|
||||
widgetPositions.desktop = orderItems();
|
||||
}
|
||||
localStorage.setItem('widgetPositions', JSON.stringify(widgetPositions));
|
||||
|
||||
// Retrieve the object from storage with `JSON.parse(localStorage.getItem('widgetPositions'));`
|
||||
});
|
||||
|
||||
}());
|
||||
6
core/admin/assets/lib/jquery/jquery-ui-1.10.3.custom.min.js
vendored
Normal file
6
core/admin/assets/lib/jquery/jquery-ui-1.10.3.custom.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
14
core/admin/assets/lib/packery.pkgd.min.js
vendored
Normal file
14
core/admin/assets/lib/packery.pkgd.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -37,8 +37,6 @@
|
||||
height: 300px;
|
||||
float:left;
|
||||
position:relative;
|
||||
margin:0 15px 15px 0;
|
||||
display: none;
|
||||
background-color:#fff;
|
||||
box-shadow: $shadow;
|
||||
|
||||
@ -88,16 +86,16 @@
|
||||
========================================================================== */
|
||||
|
||||
.widget-1x2 {
|
||||
height: 615px;
|
||||
height: 610px;
|
||||
}
|
||||
|
||||
.widget-2x2 {
|
||||
width: 695px;
|
||||
height: 615px;
|
||||
width: 690px;
|
||||
height: 610px;
|
||||
}
|
||||
|
||||
.widget-2x1 {
|
||||
width: 695px;
|
||||
width: 690px;
|
||||
}
|
||||
|
||||
|
||||
@ -213,6 +211,54 @@
|
||||
border-color: #4a4a4a;
|
||||
}
|
||||
|
||||
.widget-size-options {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
padding-top: 10px;
|
||||
padding-left: 10px;
|
||||
|
||||
.size-options-container {
|
||||
@include box-sizing(border-box);
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
padding: 3px;
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
.mini-widget {
|
||||
background: $midgrey;
|
||||
margin: 1px;
|
||||
float: left;
|
||||
|
||||
&.active {
|
||||
background: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.size-1x1 {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
}
|
||||
.size-2x1 {
|
||||
width: 12px;
|
||||
height: 5px;
|
||||
}
|
||||
.size-1x2 {
|
||||
width: 5px;
|
||||
height: 12px;
|
||||
}
|
||||
.size-2x2 {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.active {
|
||||
background: #171819;
|
||||
}
|
||||
} // .widget-size-options
|
||||
|
||||
.widget-settings-toggle {
|
||||
border-color: #4a4a4a;
|
||||
|
||||
@ -229,11 +275,6 @@
|
||||
|
||||
} // .widget-settings
|
||||
|
||||
|
||||
.none {
|
||||
margin-right:0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Individual Widgets
|
||||
========================================================================== */
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
{{#contentFor 'bodyScripts'}}
|
||||
<script src="/core/admin/assets/lib/jquery/jquery-ui-1.10.3.custom.min.js"></script>
|
||||
<script src="/core/admin/assets/lib/packery.pkgd.min.js"></script>
|
||||
<script src="/core/admin/assets/lib/chart.min.js"></script>
|
||||
<script src="/core/admin/assets/js/views/dashboard.js"></script>
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
$('.widget-time').fadeIn(1000);
|
||||
$('.widget-image').delay(300).fadeIn(1000);
|
||||
$('.widget-posts').delay(600).fadeIn(900, function(){
|
||||
$('.widget-posts').fadeIn(900, function(){
|
||||
|
||||
var ctx = $("#poststats").get(0).getContext("2d");
|
||||
var data = [
|
||||
@ -29,322 +30,328 @@
|
||||
var poststats = new Chart(ctx).Doughnut(data, options);
|
||||
|
||||
});
|
||||
|
||||
$('.widget-stats').delay(800).fadeIn(1000);
|
||||
$('.widget-facebook').delay(1000).fadeIn(1000);
|
||||
$('.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>
|
||||
{{/contentFor}}
|
||||
|
||||
{{!< default}}
|
||||
<article class="widget-time">
|
||||
<section class="widget-content">
|
||||
<header class="summary clearfix">
|
||||
<span class="day">Today</span>
|
||||
<span class="weather">12°</span>
|
||||
</header>
|
||||
<time>
|
||||
<span class="clock">12:42pm</span>
|
||||
<span class="date">Monday / March 5 / 2013</span>
|
||||
</time>
|
||||
</section>
|
||||
<footer class="widget-footer">
|
||||
<span class="widget-title">Linz, Austria</span>
|
||||
<div class="widget-settings-toggle cog"></div>
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
<div class="widget-image widget-2x1">
|
||||
<section class="widget-content">
|
||||
|
||||
</section>
|
||||
<footer class="widget-footer">
|
||||
<span class="widget-title">Ghost</span>
|
||||
<div class="widget-settings-toggle cog"></div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<div class="widget-posts none">
|
||||
<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>
|
||||
<li><span class="draft">1</span> Draft</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
<footer class="widget-footer">
|
||||
<span class="widget-title">Upcoming Posts</span>
|
||||
<div class="widget-settings-toggle"></div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<div class="widget-stats widget-2x2">
|
||||
<section class="widget-content">
|
||||
<div class="info">
|
||||
<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">Unique Visitors (7 days)</span>
|
||||
<div class="widget-settings-toggle"></div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<div class="widget-facebook">
|
||||
<section class="widget-content">
|
||||
<div class="info">
|
||||
<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 Likes</span>
|
||||
<div class="widget-settings-toggle"></div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<div class="widget-gplus none">
|
||||
<section class="widget-content">
|
||||
<div class="info">
|
||||
<span class="count">4,103</span>
|
||||
<span class="sub">have you in circles</span>
|
||||
</div>
|
||||
</section>
|
||||
<footer class="widget-footer">
|
||||
<span class="widget-title">Google Plus</span>
|
||||
<div class="widget-settings-toggle"></div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<div class="widget-twitter widget-settings">
|
||||
<header class="widget-header">
|
||||
<span class="widget-title">Twitter Settings</span>
|
||||
<div class="widget-settings-toggle close"></div>
|
||||
</header>
|
||||
<section class="widget-content">
|
||||
<label>
|
||||
<span class="title">Account</span> <input type="text" value="@JohnONolan"/>
|
||||
</label>
|
||||
<label>
|
||||
<span class="title">Display</span> <input type="text" value="Latest Tweets"/>
|
||||
</label>
|
||||
<label>
|
||||
<span class="title">Quantity</span> <input type="text" value="6"/>
|
||||
</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">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 class="js-widget-container">
|
||||
<article class="widget-time js-widget" data-widget-id="com.ghost.time">
|
||||
<section class="widget-content">
|
||||
<header class="summary clearfix">
|
||||
<span class="day">Today</span>
|
||||
<span class="weather">12°</span>
|
||||
</header>
|
||||
<time>
|
||||
<span class="clock">12:42pm</span>
|
||||
<span class="date">Monday / March 5 / 2013</span>
|
||||
</time>
|
||||
</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 class="widget-footer">
|
||||
<span class="widget-title">Linz, Austria</span>
|
||||
<div class="widget-settings-toggle cog"></div>
|
||||
</footer>
|
||||
</section>
|
||||
<footer class="widget-footer">
|
||||
<span class="widget-title">Twitter</span>
|
||||
<div class="widget-settings-toggle"></div>
|
||||
</footer>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<div class="widget-backups none">
|
||||
<section class="widget-content">
|
||||
<div class="widget-image widget-2x1 js-widget" data-widget-id="com.ghost.image">
|
||||
<section class="widget-content">
|
||||
|
||||
</section>
|
||||
<footer class="widget-footer">
|
||||
<span class="widget-title">Backups</span>
|
||||
<div class="widget-settings-toggle"></div>
|
||||
</footer>
|
||||
</div>
|
||||
</section>
|
||||
<footer class="widget-footer">
|
||||
<span class="widget-title">Ghost</span>
|
||||
<div class="widget-settings-toggle cog"></div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<div class="widget-posts js-widget" data-widget-id="com.ghost.posts">
|
||||
<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>
|
||||
<li><span class="draft">1</span> Draft</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
<footer class="widget-footer">
|
||||
<span class="widget-title">Upcoming Posts</span>
|
||||
<div class="widget-settings-toggle"></div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<div class="widget-stats widget-2x2 js-widget" data-widget-id="com.ghost.stats">
|
||||
<section class="widget-content">
|
||||
<div class="info">
|
||||
<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">Unique Visitors (7 days)</span>
|
||||
<div class="widget-settings-toggle"></div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<div class="widget-facebook js-widget" data-widget-id="com.ghost.facebook">
|
||||
<section class="widget-content">
|
||||
<div class="info">
|
||||
<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 Likes</span>
|
||||
<div class="widget-settings-toggle"></div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<div class="widget-gplus js-widget" data-widget-id="com.ghost.gplus">
|
||||
<section class="widget-content">
|
||||
<div class="info">
|
||||
<span class="count">4,103</span>
|
||||
<span class="sub">have you in circles</span>
|
||||
</div>
|
||||
</section>
|
||||
<footer class="widget-footer">
|
||||
<span class="widget-title">Google Plus</span>
|
||||
<div class="widget-settings-toggle"></div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<div class="widget-twitter widget-settings js-widget" data-widget-id="com.ghost.twitter">
|
||||
<header class="widget-header">
|
||||
<span class="widget-title">Twitter Settings</span>
|
||||
<div class="widget-settings-toggle close"></div>
|
||||
</header>
|
||||
<section class="widget-content">
|
||||
<label>
|
||||
<span class="title">Account</span> <input type="text" value="@JohnONolan"/>
|
||||
</label>
|
||||
<label>
|
||||
<span class="title">Display</span> <input type="text" value="Latest Tweets"/>
|
||||
</label>
|
||||
<label>
|
||||
<span class="title">Quantity</span> <input type="text" value="6"/>
|
||||
</label>
|
||||
</section>
|
||||
<footer class="widget-footer">
|
||||
<div class="widget-size-options">
|
||||
<div class="size-options-container active js-widget-resizer" data-size="1x1">
|
||||
<span class="mini-widget size-1x1 active"></span>
|
||||
<span class="mini-widget size-1x1"></span>
|
||||
<span class="mini-widget size-1x1"></span>
|
||||
<span class="mini-widget size-1x1"></span>
|
||||
</div>
|
||||
<div class="size-options-container js-widget-resizer" data-size="2x1">
|
||||
<span class="mini-widget size-2x1 active"></span>
|
||||
<span class="mini-widget size-1x1"></span>
|
||||
<span class="mini-widget size-1x1"></span>
|
||||
</div>
|
||||
<div class="size-options-container js-widget-resizer" data-size="1x2">
|
||||
<span class="mini-widget size-1x2 active"></span>
|
||||
<span class="mini-widget size-1x1"></span>
|
||||
<span class="mini-widget size-1x1"></span>
|
||||
</div>
|
||||
<div class="size-options-container js-widget-resizer" data-size="2x2">
|
||||
<span class="mini-widget size-2x2 active"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="widget-settings-toggle done"></div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<div class="widget-campaignmonitor js-widget" data-widget-id="com.ghost.campaignmonitor">
|
||||
<section class="widget-content">
|
||||
<div class="info">
|
||||
<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 js-widget" data-widget-id="com.ghost.popular">
|
||||
<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 js-widget" data-widget-id="com.ghost.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 js-widget" data-widget-id="com.ghost.rss">
|
||||
<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 js-widget" data-widget-id="com.ghost.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 js-widget" data-widget-id="com.ghost.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 js-widget" data-widget-id="com.ghost.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 js-widget" data-widget-id="com.ghost.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 js-widget" data-widget-id="com.ghost.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 js-widget" data-widget-id="com.ghost.ideas">
|
||||
<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 js-widget" data-widget-id="com.ghost.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 js-widget" data-widget-id="com.ghost.backups">
|
||||
<section class="widget-content">
|
||||
|
||||
</section>
|
||||
<footer class="widget-footer">
|
||||
<span class="widget-title">Backups</span>
|
||||
<div class="widget-settings-toggle"></div>
|
||||
</footer>
|
||||
</div>
|
||||
</section>
|
||||
Loading…
Reference in New Issue
Block a user