mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-01 22:02:11 +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.
|
Layouts - Styles for specific admin screen layouts, grouped by screen.
|
||||||
========================================================================== */
|
========================================================================== */
|
||||||
|
|
||||||
@import "layouts/dashboard";
|
|
||||||
/* The default admin page, the dashboard. */
|
|
||||||
|
|
||||||
@import "layouts/manage";
|
@import "layouts/manage";
|
||||||
/* The manage posts screen. */
|
/* The manage posts screen. */
|
||||||
|
|
||||||
|
|||||||
@ -5,7 +5,7 @@
|
|||||||
Ghost.Router = Backbone.Router.extend({
|
Ghost.Router = Backbone.Router.extend({
|
||||||
|
|
||||||
routes: {
|
routes: {
|
||||||
'' : 'dashboard',
|
'' : 'blog',
|
||||||
'content/' : 'blog',
|
'content/' : 'blog',
|
||||||
'settings/' : 'settings',
|
'settings/' : 'settings',
|
||||||
'settings(/:pane)' : 'settings',
|
'settings(/:pane)' : 'settings',
|
||||||
@ -68,417 +68,6 @@
|
|||||||
|
|
||||||
debug: function () {
|
debug: function () {
|
||||||
Ghost.currentView = new Ghost.Views.Debug({ el: "#main" });
|
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