mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-24 06:35:49 +03:00
Initial Dashboard UI conversion
This commit is contained in:
Matthew Harrison-Jones
Tim Griesser
parent
5c475f9040
commit
2fc0a6a02e
BIN
core/admin/assets/img/dash/Facebook_Images@2x.png
Normal file
BIN
core/admin/assets/img/dash/Facebook_Images@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 89 KiB |
@ -4,141 +4,381 @@
|
||||
*
|
||||
*/
|
||||
|
||||
.widget {
|
||||
width:341px;
|
||||
height:300px;
|
||||
background:#fff;
|
||||
box-shadow: $shadow;
|
||||
float:left;
|
||||
margin:0 15px 15px 0;
|
||||
display:none;
|
||||
/* ==========================================================================
|
||||
Widget Base
|
||||
========================================================================== */
|
||||
|
||||
%widget, .widget {
|
||||
width: $widget-base-width;
|
||||
height: $widget-base-height;
|
||||
float:left;
|
||||
position:relative;
|
||||
margin:0 15px 15px 0;
|
||||
display: none;
|
||||
background-color:#fff;
|
||||
box-shadow: $shadow;
|
||||
|
||||
.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: #cecbc7;
|
||||
border-top: 1px solid #EDECE4;
|
||||
|
||||
.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 #EDECE4;
|
||||
cursor: pointer;
|
||||
@include icon($i-settings, 1em);
|
||||
}
|
||||
|
||||
.widget-footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.none {
|
||||
margin-right:0;
|
||||
/* ==========================================================================
|
||||
Widget Sizes
|
||||
========================================================================== */
|
||||
|
||||
.widget-1x2 {
|
||||
height: $widget-base-height * 2;
|
||||
}
|
||||
|
||||
.time {
|
||||
background-image: url(../img/dash/Time@2x.png);
|
||||
background-size: 341px 300px;
|
||||
.widget-2x2 {
|
||||
width: $widget-base-width * 2;
|
||||
height: $widget-base-height * 2;
|
||||
}
|
||||
|
||||
.image {
|
||||
max-width: 100%;
|
||||
width: 682px + 15px;
|
||||
background-image: url(../img/dash/Image@2x.png);
|
||||
background-size: 697px 300px;
|
||||
.widget-2x1 {
|
||||
width: $widget-base-width * 2;
|
||||
}
|
||||
|
||||
.stats {
|
||||
max-width: 100%;
|
||||
width: 682px + 15px;
|
||||
height: 615px;
|
||||
background-image: url(../img/dash/Stats@2x.png);
|
||||
background-size: 697px 615px;
|
||||
|
||||
/* ==========================================================================
|
||||
Widget Variations
|
||||
========================================================================== */
|
||||
|
||||
%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: #4a4a4a;
|
||||
}
|
||||
|
||||
.sub {
|
||||
font-size: 2em;
|
||||
color: #9b9b9b;
|
||||
|
||||
mark {
|
||||
background-color: transparent;
|
||||
|
||||
&.up {
|
||||
color: $green;
|
||||
}
|
||||
&.down {
|
||||
color: $red;
|
||||
}
|
||||
} // mark
|
||||
} // .sub
|
||||
} // .info
|
||||
} // .widget-content
|
||||
|
||||
&.widget-2x2 {
|
||||
.widget-content {
|
||||
.info {
|
||||
margin-top: 100px;
|
||||
|
||||
.count {
|
||||
font-size: 9em;
|
||||
}
|
||||
|
||||
.sub {
|
||||
font-size: 2.5em;
|
||||
}
|
||||
} // .info
|
||||
} // .widget-content
|
||||
} // .widget-2x2
|
||||
} // %widget-number, .widget-number
|
||||
|
||||
//For the settings panel
|
||||
.widget-settings {
|
||||
@extend %widget;
|
||||
background-color: #2d3032;
|
||||
|
||||
.widget-header {
|
||||
height: 40px;
|
||||
border-top: none;
|
||||
border-bottom: 1px solid #4a4a4a;
|
||||
color: #7E878B;
|
||||
}
|
||||
|
||||
.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: #E3EDF2;
|
||||
text-transform: none;
|
||||
background: none;
|
||||
border: none;
|
||||
border-left: 1px solid #4a4a4a;
|
||||
}
|
||||
|
||||
.widget-footer, .widget-header {
|
||||
border-color: #4a4a4a;
|
||||
}
|
||||
|
||||
.widget-settings-toggle {
|
||||
border-color: #4a4a4a;
|
||||
|
||||
&.close {
|
||||
@include icon($i-x, 1em);
|
||||
}
|
||||
&.done {
|
||||
background-color: #A0B95D;
|
||||
color: #ffffff;
|
||||
@include icon($i-check, 1em);
|
||||
}
|
||||
}
|
||||
} // .widget-settings
|
||||
|
||||
.none {
|
||||
margin-right:0;
|
||||
}
|
||||
|
||||
.facebook {
|
||||
background-image: url(../img/dash/Facebook@2x.png);
|
||||
background-size: 341px 300px;
|
||||
/* ==========================================================================
|
||||
Individual Widgets
|
||||
========================================================================== */
|
||||
|
||||
.widget-time {
|
||||
@extend %widget;
|
||||
|
||||
.summary {
|
||||
margin-bottom: 30px;
|
||||
font-size: 1.4em;
|
||||
color: #cecbc7;
|
||||
|
||||
.day {
|
||||
float: left;
|
||||
}
|
||||
.weather {
|
||||
float: right;
|
||||
// TODO: icon for weather
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
time {
|
||||
margin-top: 30px;
|
||||
|
||||
.clock {
|
||||
display: block;
|
||||
font-size: 5em;
|
||||
line-height: 1em;
|
||||
font-weight: 400;
|
||||
color: #4a4a4a;
|
||||
}
|
||||
|
||||
.date {
|
||||
font-size: 2em;
|
||||
color: #9b9b9b;
|
||||
}
|
||||
}
|
||||
} // .widget-time
|
||||
|
||||
.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-image
|
||||
|
||||
.widget-stats {
|
||||
@extend %widget-number;
|
||||
}
|
||||
|
||||
.gplus {
|
||||
background-image: url(../img/dash/GooglePlus@2x.png);
|
||||
background-size: 341px 300px;
|
||||
.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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.twitter {
|
||||
background-image: url(../img/dash/Twitter@2x.png);
|
||||
background-size: 341px 300px;
|
||||
.widget-gplus {
|
||||
@extend %widget-number;
|
||||
}
|
||||
|
||||
.campaignmonitor {
|
||||
background-image: url(../img/dash/CampaignMonitor@2x.png);
|
||||
background-size: 341px 300px;
|
||||
.widget-twitter {
|
||||
@extend %widget;
|
||||
}
|
||||
|
||||
.posts {
|
||||
background-image: url(../img/dash/PostsStats@2x.png);
|
||||
background-size: 341px 300px;
|
||||
position: relative;
|
||||
.widget-campaignmonitor {
|
||||
@extend %widget-number;
|
||||
}
|
||||
|
||||
.chart {
|
||||
box-sizing: border-box;
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
margin: 25px auto 0 auto;
|
||||
background: #242628;
|
||||
border: #efefef 54px solid;
|
||||
border-radius: 500px;
|
||||
}
|
||||
|
||||
#poststats {
|
||||
.widget-posts {
|
||||
@extend %widget;
|
||||
position: relative;
|
||||
top:-54px;
|
||||
left: -54px;
|
||||
|
||||
.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;
|
||||
|
||||
#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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.data {
|
||||
position: absolute;
|
||||
top: 87px;
|
||||
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;
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
.dashboard-controls {
|
||||
.dashboard-controls {
|
||||
@extend %box;
|
||||
padding:0 15px;
|
||||
|
||||
.text {
|
||||
.text {
|
||||
padding:12px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.controls-nav {
|
||||
.controls-nav {
|
||||
float:left;
|
||||
margin-left:20px;
|
||||
ul {
|
||||
ul {
|
||||
border-left: $lightgrey 1px solid;
|
||||
|
||||
li {
|
||||
li {
|
||||
margin: 0;
|
||||
border-right: 1px solid $lightgrey;
|
||||
|
||||
a {
|
||||
a {
|
||||
padding: 12px 15px;
|
||||
color: $grey;
|
||||
|
||||
span {
|
||||
span {
|
||||
color: $darkgrey;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&:hover {
|
||||
color: $darkgrey;
|
||||
text-decoration: none;
|
||||
}
|
||||
@ -147,18 +387,18 @@
|
||||
}
|
||||
}
|
||||
|
||||
.widget-stats {
|
||||
span {
|
||||
.widget-stats {
|
||||
span {
|
||||
display: block;
|
||||
font-size: 1.6em;
|
||||
line-height: 1.2em;
|
||||
color: $grey;
|
||||
margin-bottom: 15px;
|
||||
strong {
|
||||
strong {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
}
|
||||
span:first-child {
|
||||
span:first-child {
|
||||
font-size: 5.4em;
|
||||
line-height: 1.4em;
|
||||
color: #000;
|
||||
@ -166,16 +406,16 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1200px) {
|
||||
.span4 .vert2 {
|
||||
.widget-stats {
|
||||
span {
|
||||
@media only screen and (min-width: 1200px) {
|
||||
.span4 .vert2 {
|
||||
.widget-stats {
|
||||
span {
|
||||
font-size: 2.6em;
|
||||
strong {
|
||||
strong {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
}
|
||||
span:first-child {
|
||||
span:first-child {
|
||||
font-size: 12.4em;
|
||||
}
|
||||
}
|
||||
@ -183,30 +423,30 @@
|
||||
}
|
||||
|
||||
// Time & Date Box
|
||||
.time-date {
|
||||
.time {
|
||||
.time-date {
|
||||
.time {
|
||||
font-size: 7.4em;
|
||||
line-height: 0.7em;
|
||||
border-bottom: 1px solid $lightgrey;
|
||||
span {
|
||||
span {
|
||||
font-size: 0.2em;
|
||||
color: $grey;
|
||||
text-transform: uppercase;
|
||||
font-style: normal;
|
||||
}
|
||||
@media only screen and (min-width: 1400px) {
|
||||
span {
|
||||
@media only screen and (min-width: 1400px) {
|
||||
span {
|
||||
font-size: 0.3em;
|
||||
}
|
||||
}
|
||||
}
|
||||
.date {
|
||||
.date {
|
||||
font-size: 2.2em;
|
||||
line-height: 1em;
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
padding: 15px 0;
|
||||
span {
|
||||
span {
|
||||
font-size: 0.7em;
|
||||
font-weight: normal;
|
||||
display: block;
|
||||
@ -217,23 +457,23 @@
|
||||
}
|
||||
|
||||
// Post Statuses Box
|
||||
.post-statuses {
|
||||
.status-levels {
|
||||
.post-statuses {
|
||||
.status-levels {
|
||||
width: 30%;
|
||||
div {
|
||||
div {
|
||||
text-indent: -9999px;
|
||||
}
|
||||
}
|
||||
.status-text {
|
||||
.status-text {
|
||||
width: 70%;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.2em;
|
||||
color: $grey;
|
||||
div {
|
||||
div {
|
||||
background: none;
|
||||
padding: 15px 0;
|
||||
}
|
||||
strong {
|
||||
strong {
|
||||
font-size: 1.6em;
|
||||
width: 60px;
|
||||
padding-right: 5px;
|
||||
@ -241,38 +481,38 @@
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
.scheduled {
|
||||
.scheduled {
|
||||
background: $green;
|
||||
strong {
|
||||
strong {
|
||||
color: $green;
|
||||
}
|
||||
}
|
||||
.pending {
|
||||
.pending {
|
||||
background: #fcd039;
|
||||
strong {
|
||||
strong {
|
||||
color: #fcd039;
|
||||
}
|
||||
}
|
||||
.draft {
|
||||
.draft {
|
||||
background: $red;
|
||||
strong {
|
||||
strong {
|
||||
color: $red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.todays-traffic {
|
||||
ul {
|
||||
li {
|
||||
.todays-traffic {
|
||||
ul {
|
||||
li {
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
margin-bottom: 1px;
|
||||
div {
|
||||
div {
|
||||
position: relative;
|
||||
z-index: 99;
|
||||
}
|
||||
}
|
||||
li:before {
|
||||
li:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: 34px;
|
||||
@ -280,84 +520,84 @@
|
||||
left: 0;
|
||||
z-index: 20;
|
||||
}
|
||||
li:nth-child(1):before {
|
||||
li:nth-child(1):before {
|
||||
background: $blue;
|
||||
width: 80%;
|
||||
}
|
||||
li:nth-child(2):before {
|
||||
li:nth-child(2):before {
|
||||
background: lighten($blue, 3%);
|
||||
width: 60%;
|
||||
}
|
||||
li:nth-child(3):before {
|
||||
li:nth-child(3):before {
|
||||
background: lighten($blue, 6%);
|
||||
width: 40%;
|
||||
}
|
||||
li:nth-child(4):before {
|
||||
li:nth-child(4):before {
|
||||
background: lighten($blue, 10%);
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table {
|
||||
.table {
|
||||
width: 100%;
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
thead, tbody, tr {
|
||||
thead, tbody, tr {
|
||||
display: block;
|
||||
}
|
||||
@media only screen and (min-width: 400px) {
|
||||
thead {
|
||||
@media only screen and (min-width: 400px) {
|
||||
thead {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
tbody {
|
||||
tr {
|
||||
tbody {
|
||||
tr {
|
||||
background: $lightbrown;
|
||||
margin-top: 5px;
|
||||
display: block;
|
||||
position: relative;
|
||||
&:first-child {
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 1200px) {
|
||||
tr {
|
||||
@media only screen and (min-width: 1200px) {
|
||||
tr {
|
||||
padding: 0 10px 0 40px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
td {
|
||||
td {
|
||||
padding: 10px;
|
||||
text-align: right;
|
||||
color: $grey;
|
||||
strong {
|
||||
strong {
|
||||
color: #000;
|
||||
}
|
||||
span {
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
@media only screen and (min-width: 500px) {
|
||||
span {
|
||||
@media only screen and (min-width: 500px) {
|
||||
span {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
.callout {
|
||||
.callout {
|
||||
color: $green;
|
||||
}
|
||||
&:first-child {
|
||||
&:first-child {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
.user-img {
|
||||
.user-img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: none;
|
||||
}
|
||||
@media only screen and (min-width: 1200px) {
|
||||
.user-img {
|
||||
@media only screen and (min-width: 1200px) {
|
||||
.user-img {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@ -182,4 +182,11 @@ $green: #9FBB58;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
Widgets
|
||||
============================================================================= */
|
||||
|
||||
$widget-base-height: 300px;
|
||||
$widget-base-width: 340px;
|
||||
@ -4,9 +4,9 @@
|
||||
$(document).ready(function(){
|
||||
|
||||
//$('body').click(function(){
|
||||
$('.time').fadeIn(1000);
|
||||
$('.image').delay(300).fadeIn(1000);
|
||||
$('.posts').delay(600).fadeIn(900, function(){
|
||||
$('.widget-time').fadeIn(1000);
|
||||
$('.widget-image').delay(300).fadeIn(1000);
|
||||
$('.widget-posts').delay(600).fadeIn(900, function(){
|
||||
|
||||
var ctx = $("#poststats").get(0).getContext("2d");
|
||||
var data = [
|
||||
@ -32,32 +32,133 @@
|
||||
|
||||
});
|
||||
|
||||
$('.stats').delay(800).fadeIn(1000);
|
||||
$('.facebook').delay(1000).fadeIn(1000);
|
||||
$('.gplus').delay(1200).fadeIn(1000);
|
||||
$('.twitter').delay(1300).fadeIn(1000);
|
||||
$('.campaignmonitor').delay(1400).fadeIn(1000);
|
||||
$('.widget-stats').delay(800).fadeIn(1000);
|
||||
$('.widget-facebook').delay(1000).fadeIn(1000);
|
||||
$('.widget-gplus').delay(1200).fadeIn(1000);
|
||||
$('.widget-twitter').delay(1300).fadeIn(1000);
|
||||
$('.widget-campaignmonitor').delay(1400).fadeIn(1000);
|
||||
//});
|
||||
|
||||
});
|
||||
</script>
|
||||
{{/contentFor}}
|
||||
|
||||
{{!< default}}
|
||||
<div class="time widget"></div>
|
||||
<div class="image widget"></div>
|
||||
<div class="posts widget none">
|
||||
<div class="chart">
|
||||
<canvas id="poststats" width="250" height="250"></canvas>
|
||||
<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>
|
||||
<article class="widget-time">
|
||||
<section class="widget-content">
|
||||
<header class="summary clearfix">
|
||||
<span class="day">Today</span>
|
||||
<span class="weather">12°</span>
|
||||
</header>
|
||||
<time>
|
||||
<span class="clock">12:42pm</span>
|
||||
<span class="date">Monday / March 5 / 2013</span>
|
||||
</time>
|
||||
</section>
|
||||
<footer class="widget-footer">
|
||||
<span class="widget-title">Linz, Austria</span>
|
||||
<div class="widget-settings-toggle cog"></div>
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
<div class="widget-image widget-2x1">
|
||||
<section class="widget-content">
|
||||
|
||||
</section>
|
||||
<footer class="widget-footer">
|
||||
<span class="widget-title">Ghost</span>
|
||||
<div class="widget-settings-toggle cog"></div>
|
||||
</footer>
|
||||
</div>
|
||||
<div class="stats widget"></div>
|
||||
<div class="facebook widget"></div>
|
||||
<div class="gplus widget none"></div>
|
||||
<div class="twitter widget"></div>
|
||||
<div class="campaignmonitor widget none"></div>
|
||||
|
||||
<div class="widget-posts none">
|
||||
<section class="widget-content">
|
||||
<div class="chart">
|
||||
<canvas id="poststats" width="250" height="250"></canvas>
|
||||
<ul class="data">
|
||||
<li><span class="ready">9</span> Ready</li>
|
||||
<li><span class="pending">4</span> Pending</li>
|
||||
<li><span class="draft">1</span> Draft</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
<footer class="widget-footer">
|
||||
<span class="widget-title">Upcoming Posts</span>
|
||||
<div class="widget-settings-toggle"></div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<div class="widget-stats widget-2x2">
|
||||
<section class="widget-content">
|
||||
<div class="info">
|
||||
<span class="count">293,042</span>
|
||||
<span class="sub"><mark class="up">+35%</mark> in the last 30 days</span>
|
||||
</div>
|
||||
</section>
|
||||
<footer class="widget-footer">
|
||||
<span class="widget-title">Google Analytics Unique Visitors</span>
|
||||
<div class="widget-settings-toggle"></div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<div class="widget-facebook">
|
||||
<section class="widget-content">
|
||||
<div class="info">
|
||||
<span class="count">9,392</span>
|
||||
<span class="sub"><mark class="down">-39</mark> likes today</span>
|
||||
<span class="faces"></span>
|
||||
</div>
|
||||
</section>
|
||||
<footer class="widget-footer">
|
||||
<span class="widget-title">Facebook</span>
|
||||
<div class="widget-settings-toggle"></div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<div class="widget-gplus none">
|
||||
<section class="widget-content">
|
||||
<div class="info">
|
||||
<span class="count">4,103</span>
|
||||
<span class="sub">have you in circles</span>
|
||||
</div>
|
||||
</section>
|
||||
<footer class="widget-footer">
|
||||
<span class="widget-title">Google Plus</span>
|
||||
<div class="widget-settings-toggle"></div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<div class="widget-twitter widget-settings">
|
||||
<header class="widget-header">
|
||||
<span class="widget-title">Twitter Settings</span>
|
||||
<div class="widget-settings-toggle close"></div>
|
||||
</header>
|
||||
<section class="widget-content">
|
||||
<label>
|
||||
<span class="title">Account</span> <input type="text" value="@JohnONolan"/>
|
||||
</label>
|
||||
<label>
|
||||
<span class="title">Display</span> <input type="text" value="Latest Tweets"/>
|
||||
</label>
|
||||
<label>
|
||||
<span class="title">Quantity</span> <input type="text" value="6"/>
|
||||
</label>
|
||||
<label>
|
||||
<span class="title">Account</span> <input type="text" value="Account"/>
|
||||
</label>
|
||||
</section>
|
||||
<footer class="widget-footer">
|
||||
<div class="widget-settings-toggle done"></div>
|
||||
</footer>
|
||||
</div>
|
||||
<div class="widget-campaignmonitor none">
|
||||
<section class="widget-content">
|
||||
<div class="info">
|
||||
<span class="count">3,502</span>
|
||||
<span class="sub"><mark class="up">+35</mark> subscribers this week</span>
|
||||
</div>
|
||||
</section>
|
||||
<footer class="widget-footer">
|
||||
<span class="widget-title">Campaign Monitor</span>
|
||||
<div class="widget-settings-toggle"></div>
|
||||
</footer>
|
||||
</div>
|
||||
Loading…
Reference in New Issue
Block a user