Ghost/core/admin/views/dashboard.hbs
Matthew Harrison-Jones c4f19af62f Dashboard widget functionality
Intial widget layout, with packery for drag and drop support.
Adds ability to save the order of widgets in localstorage
2013-06-06 07:26:25 +01:00

357 lines
14 KiB
Handlebars

{{#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-posts').fadeIn(900, function(){
var ctx = $("#poststats").get(0).getContext("2d");
var data = [
{
value: 9,
color:"#9ec14a"
},
{
value : 4,
color : "#f9e15d"
},
{
value : 2,
color : "#EB5700"
}
];
var options = {
animationEasing: 'easeOutQuart',
percentageInnerCutout: 60,
segmentStrokeColor : "#efefef"
};
var poststats = new Chart(ctx).Doughnut(data, options);
});
});
</script>
{{/contentFor}}
{{!< default}}
<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>
<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 js-widget" data-widget-id="com.ghost.image">
<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 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>