mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-29 15:12:58 +03:00
Temporarily removed the Dashboard and all references
This also updates the CasperJS to match the new changes.
This commit is contained in:
Matthew Harrison-Jones
parent
0632fdd017
commit
3e0fbdf184
@ -1,821 +0,0 @@
|
||||
/*
|
||||
* 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
|
||||
*/
|
||||
|
||||
/* ==========================================================================
|
||||
Widget Base
|
||||
========================================================================== */
|
||||
|
||||
.js-widget-container {
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
%widget, .widget {
|
||||
width: 340px;
|
||||
height: 300px;
|
||||
float:left;
|
||||
position:relative;
|
||||
background-color:#fff;
|
||||
box-shadow: $shadow;
|
||||
|
||||
@include breakpoint($mobile) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.widget-content {
|
||||
@include box-sizing(border-box);
|
||||
margin-bottom: 40px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.widget-footer, .widget-header {
|
||||
@include box-sizing(border-box);
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
font-size: 1.2em;
|
||||
color: $midbrown;
|
||||
border-top: 1px solid $lightbrown;
|
||||
|
||||
.widget-title {
|
||||
display: inline-block;
|
||||
padding-top: 7px;
|
||||
padding-left: 15px;
|
||||
vertical-align: middle;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
.widget-settings-toggle {
|
||||
@include box-sizing(border-box);
|
||||
display: block;
|
||||
height: 39px;
|
||||
width: 46px;
|
||||
float: right;
|
||||
padding: 7px 14px;
|
||||
border-left: 1px solid $lightbrown;
|
||||
cursor: pointer;
|
||||
@include icon($i-settings, 1em);
|
||||
}
|
||||
|
||||
.widget-footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
} //%widget, .widget
|
||||
|
||||
.ui-draggable-dragging {
|
||||
z-index: 9999; // Keep dragged widget on top
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Widget Sizes
|
||||
========================================================================== */
|
||||
|
||||
.widget-1x2 {
|
||||
height: 610px;
|
||||
}
|
||||
|
||||
.widget-2x2 {
|
||||
width: 690px;
|
||||
height: 610px;
|
||||
}
|
||||
|
||||
.widget-2x1 {
|
||||
width: 690px;
|
||||
}
|
||||
|
||||
|
||||
/* ==========================================================================
|
||||
Widget Variations
|
||||
========================================================================== */
|
||||
|
||||
/* ==========================================================================
|
||||
Number Widgets base styles
|
||||
========================================================================== */
|
||||
|
||||
%widget-number, .widget-number {
|
||||
@extend %widget;
|
||||
|
||||
.widget-content {
|
||||
.info {
|
||||
margin-top: 30px;
|
||||
|
||||
.count {
|
||||
display: block;
|
||||
font-size: 5em;
|
||||
line-height: 1em;
|
||||
font-weight: 400;
|
||||
color: $darkgrey;
|
||||
}
|
||||
|
||||
.sub {
|
||||
font-size: 2em;
|
||||
color: #9b9b9b;
|
||||
|
||||
mark {
|
||||
background-color: transparent;
|
||||
font-weight: bold;
|
||||
|
||||
&.up {
|
||||
color: $green;
|
||||
}
|
||||
&.down {
|
||||
color: $red;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
} // .widget-content
|
||||
|
||||
&.widget-2x2 {
|
||||
.widget-content {
|
||||
.info {
|
||||
margin-top: 100px;
|
||||
|
||||
.count {
|
||||
font-size: 9em;
|
||||
}
|
||||
|
||||
.sub {
|
||||
font-size: 2.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
} // %widget-number, .widget-number
|
||||
|
||||
/* ==========================================================================
|
||||
Settings panel base styles
|
||||
========================================================================== */
|
||||
|
||||
.widget-settings {
|
||||
@extend %widget;
|
||||
background-color: #2d3032;
|
||||
|
||||
.widget-header {
|
||||
height: 40px;
|
||||
border-top: none;
|
||||
border-bottom: 1px solid #4a4a4a;
|
||||
color: $midgrey;
|
||||
}
|
||||
|
||||
.widget-content {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
label {
|
||||
width:100%;
|
||||
height: 40px;
|
||||
display: block;
|
||||
border-bottom: 1px solid #4a4a4a;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.title {
|
||||
@include box-sizing(border-box);
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
height: 100%;
|
||||
padding: 8px;
|
||||
color: #E3EDF2;
|
||||
text-transform: uppercase;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
@include box-sizing(border-box);
|
||||
height: 100%;
|
||||
padding: 8px;
|
||||
color: $midgrey;
|
||||
text-transform: none;
|
||||
background: none;
|
||||
border: none;
|
||||
border-left: 1px solid #4a4a4a;
|
||||
}
|
||||
|
||||
.widget-footer, .widget-header {
|
||||
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;
|
||||
|
||||
&.close {
|
||||
@include icon($i-x, 1em);
|
||||
}
|
||||
&.done {
|
||||
background-color: $green;
|
||||
color: rgba(255,255,255,0.7);
|
||||
@include icon($i-check, 1em);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
} // .widget-settings
|
||||
|
||||
/* ==========================================================================
|
||||
Individual Widgets
|
||||
========================================================================== */
|
||||
|
||||
/* ==========================================================================
|
||||
Clock / Date
|
||||
========================================================================== */
|
||||
|
||||
.widget-time {
|
||||
@extend %widget;
|
||||
|
||||
.summary {
|
||||
margin-bottom: 30px;
|
||||
font-size: 1.4em;
|
||||
color: #9b9b9b;
|
||||
|
||||
.day {
|
||||
float: left;
|
||||
}
|
||||
.weather {
|
||||
float: right;
|
||||
@include icon-after($i-weather-sun);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
time {
|
||||
margin-top: 30px;
|
||||
|
||||
.clock {
|
||||
display: block;
|
||||
font-size: 5em;
|
||||
line-height: 1em;
|
||||
font-weight: 400;
|
||||
color: $darkgrey;
|
||||
}
|
||||
|
||||
.date {
|
||||
font-size: 2em;
|
||||
color: #9b9b9b;
|
||||
}
|
||||
}
|
||||
|
||||
} // .widget-time
|
||||
|
||||
/* ==========================================================================
|
||||
Ghost Image
|
||||
========================================================================== */
|
||||
|
||||
.widget-image {
|
||||
@extend %widget;
|
||||
|
||||
.widget-content {
|
||||
height: 100%;
|
||||
background-image: url(../img/dash/Image@2x.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.widget-footer {
|
||||
margin-top: -40px;
|
||||
opacity: 0;
|
||||
background: #ffffff;
|
||||
@include transition(opacity 200ms linear);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.widget-footer {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.widget-settings {
|
||||
.widget-content {
|
||||
background-image: none;
|
||||
}
|
||||
.widget-footer {
|
||||
background: inherit;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
} // .widget-image
|
||||
|
||||
/* ==========================================================================
|
||||
Unique Visitors
|
||||
========================================================================== */
|
||||
|
||||
.widget-stats {
|
||||
@extend %widget-number;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Facebook Likes
|
||||
========================================================================== */
|
||||
|
||||
.widget-facebook {
|
||||
@extend %widget-number;
|
||||
|
||||
.info {
|
||||
.faces {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
margin-top: 25px;
|
||||
background-image: url("../img/dash/Facebook_Images@2x.png");
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
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;
|
||||
|
||||
.chart {
|
||||
@include box-sizing(border-box);
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin: 0 auto;
|
||||
background: #242628;
|
||||
border: #efefef 54px solid;
|
||||
border-radius: 250px;
|
||||
|
||||
.sheen {
|
||||
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;
|
||||
left: -54px;
|
||||
}
|
||||
|
||||
.data {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
color: $midgrey;
|
||||
font-size: 13px;
|
||||
list-style: none;
|
||||
|
||||
.ready {
|
||||
font-size: 18px;
|
||||
vertical-align: -5%;
|
||||
margin-right: 5px;
|
||||
color: $green;
|
||||
}
|
||||
|
||||
.pending {
|
||||
font-size: 18px;
|
||||
vertical-align: -5%;
|
||||
margin-right: 5px;
|
||||
color: #f9e15d;
|
||||
}
|
||||
|
||||
.draft {
|
||||
font-size: 18px;
|
||||
vertical-align: -5%;
|
||||
margin-right: 5px;
|
||||
color: $red;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
} // .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; // TODO: What the fuck is this? : 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;
|
||||
}
|
||||
@ -31,9 +31,6 @@
|
||||
Layouts - Styles for specific admin screen layouts, grouped by screen.
|
||||
========================================================================== */
|
||||
|
||||
@import "layouts/dashboard";
|
||||
/* The default admin page, the dashboard. */
|
||||
|
||||
@import "layouts/manage";
|
||||
/* The manage posts screen. */
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
Ghost.Router = Backbone.Router.extend({
|
||||
|
||||
routes: {
|
||||
'' : 'dashboard',
|
||||
'' : 'blog',
|
||||
'content/' : 'blog',
|
||||
'settings/' : 'settings',
|
||||
'settings(/:pane)' : 'settings',
|
||||
@ -68,417 +68,6 @@
|
||||
|
||||
debug: function () {
|
||||
Ghost.currentView = new Ghost.Views.Debug({ el: "#main" });
|
||||
},
|
||||
|
||||
dashboard: function () {
|
||||
var widgets = new Ghost.Collections.Widgets();
|
||||
|
||||
widgets.add({
|
||||
title: "LINZ, AUSTRIA",
|
||||
name: "time",
|
||||
author: "Matthew Harrison-Jones",
|
||||
applicationID: "com.ghost.time",
|
||||
content: {
|
||||
template: 'custom/time',
|
||||
data: {
|
||||
day: "Today",
|
||||
weather: "12",
|
||||
time: "12:42PM",
|
||||
date: "Monday / March 5 / 2013"
|
||||
}
|
||||
},
|
||||
settings: {
|
||||
settingsPane: true,
|
||||
options: [{
|
||||
title: "Timezone",
|
||||
value: "GMT"
|
||||
}]
|
||||
}
|
||||
});
|
||||
|
||||
widgets.add({
|
||||
title: "Ghost",
|
||||
name: "image",
|
||||
author: "Matthew Harrison-Jones",
|
||||
applicationID: "com.ghost.image",
|
||||
size: "2x1",
|
||||
content: {
|
||||
template: 'default/blank'
|
||||
},
|
||||
settings: {
|
||||
settingsPane: true
|
||||
}
|
||||
});
|
||||
|
||||
widgets.add({
|
||||
title: "Upcoming Posts",
|
||||
name: "posts",
|
||||
author: "Matthew Harrison-Jones",
|
||||
applicationID: "com.ghost.posts",
|
||||
content: {
|
||||
template: 'custom/upcoming-posts',
|
||||
data: {
|
||||
ready: 9,
|
||||
pending: 4,
|
||||
draft: 1
|
||||
}
|
||||
},
|
||||
settings: {
|
||||
settingsPane: true
|
||||
}
|
||||
});
|
||||
|
||||
widgets.add({
|
||||
title: "Unique Visitors (7 days)",
|
||||
name: "stats",
|
||||
author: "Matthew Harrison-Jones",
|
||||
applicationID: "com.ghost.stats",
|
||||
size: "2x2",
|
||||
content: {
|
||||
template: 'default/number',
|
||||
data: {
|
||||
number: {
|
||||
count: "293,051",
|
||||
sub: {
|
||||
value: "+14%",
|
||||
dir: "up",
|
||||
item: "",
|
||||
period: "in the last 7 days"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
settings: {
|
||||
settingsPane: true
|
||||
}
|
||||
});
|
||||
|
||||
widgets.add({
|
||||
title: "Facebook Likes",
|
||||
name: "facebook",
|
||||
author: "Matthew Harrison-Jones",
|
||||
applicationID: "com.ghost.facebook",
|
||||
content: {
|
||||
template: 'default/number',
|
||||
data: {
|
||||
number: {
|
||||
count: "12,329",
|
||||
sub: {
|
||||
value: "-3",
|
||||
dir: "down",
|
||||
item: "likes",
|
||||
period: "today"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
settings: {
|
||||
settingsPane: true
|
||||
}
|
||||
});
|
||||
|
||||
widgets.add({
|
||||
title: "Google Plus",
|
||||
name: "gplus",
|
||||
author: "Matthew Harrison-Jones",
|
||||
applicationID: "com.ghost.gplus",
|
||||
content: {
|
||||
template: 'default/number',
|
||||
data: {
|
||||
number: {
|
||||
count: "4,103",
|
||||
sub: {
|
||||
item: "have you in circles"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
settings: {
|
||||
settingsPane: true
|
||||
}
|
||||
});
|
||||
|
||||
widgets.add({
|
||||
title: "Twitter",
|
||||
name: "twitter",
|
||||
author: "Matthew Harrison-Jones",
|
||||
applicationID: "com.ghost.twitter",
|
||||
content: {
|
||||
template: 'default/blank'
|
||||
},
|
||||
settings: {
|
||||
settingsPane: true,
|
||||
enabled: true,
|
||||
options: [
|
||||
{
|
||||
title: "Account",
|
||||
value: "@JohnONolan"
|
||||
},
|
||||
{
|
||||
title: "Display",
|
||||
value: "Last Tweets"
|
||||
},
|
||||
{
|
||||
title: "Quantity",
|
||||
value: 6
|
||||
}
|
||||
]
|
||||
}
|
||||
});
|
||||
|
||||
widgets.add({
|
||||
title: "Campaign Monitor",
|
||||
name: "campaignmonitor",
|
||||
author: "Matthew Harrison-Jones",
|
||||
applicationID: "com.ghost.campaignmonitor",
|
||||
content: {
|
||||
template: 'default/number',
|
||||
data: {
|
||||
number: {
|
||||
count: "5,693",
|
||||
sub: {
|
||||
value: "+63",
|
||||
dir: "up",
|
||||
item: "subscribers",
|
||||
period: "this week"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
settings: {
|
||||
settingsPane: true
|
||||
}
|
||||
});
|
||||
|
||||
widgets.add({
|
||||
title: "Most Popular Posts",
|
||||
name: "popular",
|
||||
author: "Matthew Harrison-Jones",
|
||||
applicationID: "com.ghost.popular",
|
||||
size: "1x2",
|
||||
content: {
|
||||
template: 'custom/popular-posts',
|
||||
data: {
|
||||
posts: [
|
||||
{
|
||||
title: "The Night of The Headless Horseman Part II",
|
||||
time: "Yesterday",
|
||||
count: "3,128"
|
||||
},
|
||||
{
|
||||
title: "Latin Script & Why it's Particularly Boring to Read",
|
||||
time: "Wednesday",
|
||||
count: "1,345"
|
||||
},
|
||||
{
|
||||
title: "59 Signs Your Cat and/or Dog Might be Planning To Kill You",
|
||||
time: "Tuesday",
|
||||
count: "824"
|
||||
},
|
||||
{
|
||||
title: "A Love Letter to Emma Stone",
|
||||
time: "Today",
|
||||
count: "293"
|
||||
},
|
||||
{
|
||||
title: "Lorem Ipsum Dolor Sit Amet & Other Funny Moments",
|
||||
time: "Yesterday",
|
||||
count: "124"
|
||||
},
|
||||
{
|
||||
title: "Matt Does Git",
|
||||
time: "Thursday",
|
||||
count: "100"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
widgets.add({
|
||||
title: "Posts This Week (Out Of 20)",
|
||||
name: "postsWeek",
|
||||
author: "Matthew Harrison-Jones",
|
||||
applicationID: "com.ghost.postsWeek",
|
||||
content: {
|
||||
template: 'default/blank'
|
||||
}
|
||||
});
|
||||
|
||||
widgets.add({
|
||||
title: "Your RSS News Feed",
|
||||
name: "rss",
|
||||
author: "Matthew Harrison-Jones",
|
||||
applicationID: "com.ghost.rss",
|
||||
size: "2x2",
|
||||
content: {
|
||||
template: 'default/blank'
|
||||
},
|
||||
settings: {
|
||||
settingsPane: true
|
||||
}
|
||||
});
|
||||
|
||||
widgets.add({
|
||||
title: "Instagram",
|
||||
name: "instagram",
|
||||
author: "Matthew Harrison-Jones",
|
||||
applicationID: "com.ghost.instagram",
|
||||
content: {
|
||||
template: 'custom/instagram',
|
||||
data: {
|
||||
image: "http://f.cl.ly/items/303f3y1n3I2L1F10343E/instagram.jpg"
|
||||
}
|
||||
},
|
||||
settings: {
|
||||
settingsPane: true,
|
||||
options: [{
|
||||
title: "Account",
|
||||
value: "@JohnONolan"
|
||||
}]
|
||||
}
|
||||
});
|
||||
|
||||
widgets.add({
|
||||
title: "Klout",
|
||||
name: "klout",
|
||||
author: "Matthew Harrison-Jones",
|
||||
applicationID: "com.ghost.klout",
|
||||
content: {
|
||||
template: 'default/number',
|
||||
data: {
|
||||
number: {
|
||||
count: "64.23",
|
||||
sub: {
|
||||
value: "-0.42",
|
||||
dir: "down",
|
||||
item: "",
|
||||
period: "in the last 30 days"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
settings: {
|
||||
settingsPane: true
|
||||
}
|
||||
});
|
||||
|
||||
widgets.add({
|
||||
title: "Bounce Rate",
|
||||
name: "bounce",
|
||||
author: "Matthew Harrison-Jones",
|
||||
applicationID: "com.ghost.bounce",
|
||||
content: {
|
||||
template: 'default/number',
|
||||
data: {
|
||||
number: {
|
||||
count: "40.21%",
|
||||
sub: {
|
||||
value: "-2.53%",
|
||||
dir: "up",
|
||||
item: "",
|
||||
period: "in the last month"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
settings: {
|
||||
settingsPane: true
|
||||
}
|
||||
});
|
||||
|
||||
widgets.add({
|
||||
title: "Average Time On Site",
|
||||
name: "avgTime",
|
||||
author: "Matthew Harrison-Jones",
|
||||
applicationID: "com.ghost.avgTime",
|
||||
content: {
|
||||
template: 'default/number',
|
||||
data: {
|
||||
number: {
|
||||
count: "2m 16s",
|
||||
sub: {
|
||||
value: "+31.4%",
|
||||
dir: "up",
|
||||
item: "",
|
||||
period: "in the last month"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
settings: {
|
||||
settingsPane: true
|
||||
}
|
||||
});
|
||||
|
||||
widgets.add({
|
||||
title: "Last.fm",
|
||||
name: "lastfm",
|
||||
author: "Matthew Harrison-Jones",
|
||||
applicationID: "com.ghost.lastfm",
|
||||
content: {
|
||||
template: 'custom/lastfm',
|
||||
data: {
|
||||
cover: "http://f.cl.ly/items/0p0r3T3v3M0R0H1k1p0S/imagine_dragons.png",
|
||||
artist: "Imagine Dragons",
|
||||
title: "On Top of The World"
|
||||
}
|
||||
},
|
||||
settings: {
|
||||
settingsPane: true
|
||||
}
|
||||
});
|
||||
|
||||
widgets.add({
|
||||
title: "Post Ideas",
|
||||
name: "ideas",
|
||||
author: "Matthew Harrison-Jones",
|
||||
applicationID: "com.ghost.ideas",
|
||||
size: "2x1",
|
||||
content: {
|
||||
template: 'custom/post-ideas'
|
||||
},
|
||||
settings: {
|
||||
settingsPane: true
|
||||
}
|
||||
});
|
||||
|
||||
widgets.add({
|
||||
title: "Twitter",
|
||||
name: "tweets",
|
||||
author: "Matthew Harrison-Jones",
|
||||
applicationID: "com.ghost.tweets",
|
||||
content: {
|
||||
template: 'custom/tweets',
|
||||
data: {
|
||||
avatar: "http://f.cl.ly/items/1A1S0D3T3p1g1B2Z3J0u/ghost_twitter.jpeg",
|
||||
name: "Ghost",
|
||||
handle: "@TryGhost",
|
||||
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>",
|
||||
time: "3 May 12"
|
||||
}
|
||||
},
|
||||
settings: {
|
||||
settingsPane: true
|
||||
}
|
||||
});
|
||||
|
||||
widgets.add({
|
||||
title: "Backups",
|
||||
name: "backups",
|
||||
author: "Matthew Harrison-Jones",
|
||||
applicationID: "com.ghost.backups",
|
||||
content: {
|
||||
template: 'default/blank'
|
||||
},
|
||||
settings: {
|
||||
settingsPane: true
|
||||
}
|
||||
});
|
||||
|
||||
//widgets.fetch().then(function () {
|
||||
Ghost.currentView = new Ghost.Views.Dashboard({ el: '#main', collection: widgets });
|
||||
//});
|
||||
}
|
||||
});
|
||||
}());
|
||||
|
||||
@ -1,44 +0,0 @@
|
||||
{{#if settings.enabled}}
|
||||
<header class="widget-header">
|
||||
<span class="widget-title">{{Title}} Settings</span>
|
||||
<div class="widget-settings-toggle close js-view-widget"></div>
|
||||
</header>
|
||||
<section class="widget-content">
|
||||
{{#each settings.options}}
|
||||
<label>
|
||||
<span class="title">{{this.title}}</span> <input type="text" value="{{this.value}}"/>
|
||||
</label>
|
||||
{{/each}}
|
||||
</section>
|
||||
<footer class="widget-footer">
|
||||
<div class="widget-size-options">
|
||||
<div class="size-options-container 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 js-submit-changes"></div>
|
||||
</footer>
|
||||
{{else}}
|
||||
<section class="widget-content">
|
||||
</section>
|
||||
<footer class="widget-footer">
|
||||
<span class="widget-title">{{title}}</span>
|
||||
{{#if settings.settingsPane}}<div class="widget-settings-toggle js-view-settings"></div>{{/if}}
|
||||
</footer>
|
||||
{{/if}}
|
||||
@ -1 +0,0 @@
|
||||
<img class="photo" src="{{content.data.image}}" />
|
||||
@ -1,5 +0,0 @@
|
||||
<img class="cover" src="{{content.data.cover}}" />
|
||||
<section class="banner">
|
||||
<span class="song-artist">{{content.data.artist}}</span>
|
||||
<span class="song-title">{{oontent.data.title}}</span>
|
||||
</section>
|
||||
@ -1,15 +0,0 @@
|
||||
<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">
|
||||
{{#each content.data.posts}}
|
||||
<li class="post-item">
|
||||
<h1 class="post-title">{{this.title}}</h1>
|
||||
<span class="post-date"> {{this.time}}</span>
|
||||
<span class="post-count"> {{this.count}}</span>
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
@ -1,2 +0,0 @@
|
||||
<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>
|
||||
@ -1,8 +0,0 @@
|
||||
<header class="summary clearfix">
|
||||
<span class="day">{{content.data.day}}</span>
|
||||
<span class="weather">{{content.data.weather}}°</span>
|
||||
</header>
|
||||
<time>
|
||||
<span class="clock">{{content.data.time}}</span>
|
||||
<span class="date">{{content.data.date}}</span>
|
||||
</time>
|
||||
@ -1,18 +0,0 @@
|
||||
<header>
|
||||
<div class="twitter-display-image">
|
||||
<img src="{{content.data.avatar}}" />
|
||||
</div>
|
||||
<span class="twitter-name">{{content.data.name}}</span>
|
||||
<span class="twitter-handle">{{contnet.data.handle}}</span>
|
||||
</header>
|
||||
<article class="latest-tweet">
|
||||
{{{content.data.tweet}}}
|
||||
</article>
|
||||
<footer>
|
||||
<time class="tweet-time">{{content.data.time}}</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>
|
||||
@ -1,9 +0,0 @@
|
||||
<div class="chart">
|
||||
<canvas id="poststats" width="250" height="250"></canvas>
|
||||
<div class="sheen"></div>
|
||||
<ul class="data">
|
||||
<li><span class="ready">{{content.data.ready}}</span> Ready</li>
|
||||
<li><span class="pending">{{content.data.pending}}</span> Pending</li>
|
||||
<li><span class="draft">{{content.data.draft}}</span> Draft</li>
|
||||
</ul>
|
||||
</div>
|
||||
@ -1,4 +0,0 @@
|
||||
<div class="info">
|
||||
<span class="count">{{content.data.number.count}}</span>
|
||||
<span class="sub"><mark class="{{content.data.number.sub.dir}}">{{content.data.number.sub.value}}</mark> {{content.data.number.sub.item}} {{content.data.number.sub.period}}</span>
|
||||
</div>
|
||||
@ -1,162 +0,0 @@
|
||||
/*global window, document, localStorage, Ghost, $, _, Backbone, JST */
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
var Widgets,
|
||||
Widget,
|
||||
WidgetContent,
|
||||
$widgetContainer,
|
||||
$itemElems,
|
||||
widgetPositions;
|
||||
|
||||
widgetPositions = {
|
||||
mobile: {},
|
||||
tablet: {},
|
||||
netbook: {},
|
||||
desktop: {}
|
||||
};
|
||||
|
||||
// Base view
|
||||
// ----------
|
||||
Ghost.Views.Dashboard = Ghost.View.extend({
|
||||
initialize: function (options) {
|
||||
this.addSubview(new Widgets({ el: '.js-widget-container', collection: this.collection })).render();
|
||||
}
|
||||
});
|
||||
|
||||
// Widgets
|
||||
// ----------
|
||||
Widgets = Ghost.View.extend({
|
||||
initialize: function () {
|
||||
$widgetContainer = this.$el;
|
||||
},
|
||||
|
||||
packeryInit: function () {
|
||||
var self = this;
|
||||
$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);
|
||||
|
||||
$widgetContainer.packery('on', 'dragItemPositioned', function () {
|
||||
var viewportSize = $(window).width();
|
||||
if (viewportSize <= 400) { // Mobile
|
||||
widgetPositions.mobile = self.getWidgetOrder($itemElems);
|
||||
} else if (viewportSize > 400 && viewportSize <= 800) { // Tablet
|
||||
widgetPositions.tablet = self.getWidgetOrder($itemElems);
|
||||
} else if (viewportSize > 800 && viewportSize <= 1000) { // Netbook
|
||||
widgetPositions.netbook = self.getWidgetOrder($itemElems);
|
||||
} else if (viewportSize > 1000) {
|
||||
widgetPositions.desktop = self.getWidgetOrder($itemElems);
|
||||
}
|
||||
localStorage.setItem('widgetPositions', JSON.stringify(widgetPositions));
|
||||
|
||||
// Retrieve the object from storage with `JSON.parse(localStorage.getItem('widgetPositions'));`
|
||||
});
|
||||
},
|
||||
|
||||
getWidgetOrder: function (itemElems) {
|
||||
// items are in order within the layout
|
||||
var order = {};
|
||||
|
||||
_.each(itemElems, function (widget, index) {
|
||||
order[widget.getAttribute("data-widget-id")] = index;
|
||||
});
|
||||
return order;
|
||||
},
|
||||
|
||||
render: function () {
|
||||
this.collection.each(function (model) {
|
||||
this.$el.append(this.addSubview(new Widget({model: model})).render().el);
|
||||
}, this);
|
||||
this.packeryInit();
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
// Widget
|
||||
// ----------
|
||||
Widget = Ghost.View.extend({
|
||||
|
||||
tagName: 'article',
|
||||
attributes: function () {
|
||||
var size = (this.model.get('size')) ? " widget-" + this.model.get('size') : "",
|
||||
settings = (this.model.attributes.settings.enabled) ? " widget-settings" : "";
|
||||
|
||||
return {
|
||||
'class': 'widget-' + this.model.get('name') + size + settings + ' js-widget',
|
||||
'data-widget-id': this.model.get('applicationID')
|
||||
};
|
||||
},
|
||||
|
||||
events: {
|
||||
'click .js-widget-resizer': 'resizeWidget',
|
||||
'click .js-view-settings': 'showSettings',
|
||||
'click .js-view-widget': 'showWidget'
|
||||
},
|
||||
|
||||
resizeWidget: function (e) {
|
||||
e.preventDefault();
|
||||
var data = $(e.currentTarget).data('size');
|
||||
|
||||
this.$el.removeClass("widget-1x2 widget-2x1 widget-2x2");
|
||||
|
||||
if (data !== "1x1") {
|
||||
this.$el.addClass('widget-' + data);
|
||||
$widgetContainer.packery('fit', this.el);
|
||||
} else {
|
||||
$widgetContainer.packery();
|
||||
}
|
||||
|
||||
$(e.currentTarget).siblings('.active').removeClass('active');
|
||||
$(e.currentTarget).addClass('active');
|
||||
},
|
||||
|
||||
showSettings: function (e) {
|
||||
e.preventDefault();
|
||||
this.model.attributes.settings.enabled = true;
|
||||
this.$el.addClass("widget-settings");
|
||||
this.render();
|
||||
},
|
||||
|
||||
showWidget: function (e) {
|
||||
e.preventDefault();
|
||||
this.model.attributes.settings.enabled = false;
|
||||
this.$el.removeClass("widget-settings");
|
||||
this.render();
|
||||
},
|
||||
|
||||
templateName: "widget",
|
||||
|
||||
afterRender: function () {
|
||||
if (!this.model.attributes.settings.enabled) {
|
||||
this.$(".widget-content").html(this.addSubview(new WidgetContent({model: this.model})).render().el);
|
||||
} else {
|
||||
var size = !this.model.get('size') ? "1x1" : this.model.get('size');
|
||||
this.$el.find("[data-size='" + size + "']").addClass('active');
|
||||
}
|
||||
return this;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
// Widget Content
|
||||
// ----------
|
||||
WidgetContent = Ghost.View.extend({
|
||||
|
||||
template: function (data) {
|
||||
return JST['widgets/' + this.model.attributes.content.template](data);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
}());
|
||||
Loading…
Reference in New Issue
Block a user