OpenSourceArk/Ghost
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #30 from matthojo/master

Browse Source 
Some prototype settings page UI changes.
This commit is contained in:
Hannah Wolfe 2013-05-13 13:53:04 -07:00
commit 33c03b36dc
8 changed files with 207 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
core/admin/assets/js/settings.js
View File

@ -1,4 +1,4 @@
/*globals document, jQuery */
/*globals document, location, jQuery */
(function ($) {
"use strict";
@ -7,6 +7,7 @@
e.preventDefault();
$('.settings-menu .active').removeClass('active');
location.hash = $(this).attr('class'); // Placed here so never gets given the active attribute.
$(this).addClass('active');
$('.settings-content').fadeOut().delay(250);
@ -14,8 +15,21 @@
};
$(document).ready(function() {
$(document).ready(function () {
if (location.hash) {
var page = $(".settings-menu li." + location.hash.replace('#', '')),
newPage = page.children('a').attr('href');
$('.settings-menu .active').removeClass('active');
page.addClass('active');
$('.settings-content').hide().delay(250);
$(newPage).show();
}
$('.settings-menu li').on('click', changePage);
$('input').iCheck({
checkboxClass: 'icheckbox_square-grey'
});
});
}(jQuery));

BIN
core/admin/assets/lib/icheck/css/grey.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
core/admin/assets/lib/icheck/css/grey@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

62
core/admin/assets/lib/icheck/css/icheck.css Normal file
View File

@ -0,0 +1,62 @@
/* iCheck plugin Square skin, grey
----------------------------------- */
.icheckbox_square-grey,
.iradio_square-grey {
display: block;
margin: 0;
padding: 0;
width: 22px;
height: 22px;
background: url(grey.png) no-repeat;
border: none;
cursor: pointer;
float: left;
margin-right: 6px;
}
.icheckbox_square-grey {
background-position: 0 0;
}
.icheckbox_square-grey.hover {
background-position: -24px 0;
}
.icheckbox_square-grey.checked {
background-position: -48px 0;
}
.icheckbox_square-grey.disabled {
background-position: -72px 0;
cursor: default;
}
.icheckbox_square-grey.checked.disabled {
background-position: -96px 0;
}
.iradio_square-grey {
background-position: -120px 0;
}
.iradio_square-grey.hover {
background-position: -144px 0;
}
.iradio_square-grey.checked {
background-position: -168px 0;
}
.iradio_square-grey.disabled {
background-position: -192px 0;
cursor: default;
}
.iradio_square-grey.checked.disabled {
background-position: -216px 0;
}
/* Retina support */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
.icheckbox_square-grey,
.iradio_square-grey {
background-image: url(grey@2x.png);
-webkit-background-size: 240px 24px;
background-size: 240px 24px;
}
}

11
core/admin/assets/lib/icheck/jquery.icheck.min.js vendored Normal file
View File

@ -0,0 +1,11 @@
/*!
* iCheck v0.8.5 jQuery plugin, http://git.io/uhUPMA
*/
(function(f,m,z,u,k,r,l,n,D,t,v,s){function A(a,c,j){var d=a[0],b=/ble/.test(j)?r:k;active="update"==j?{checked:d[k],disabled:d[r]}:d[b];if(/^ch|di/.test(j)&&!active)w(a,b);else if(/^un|en/.test(j)&&active)x(a,b);else if("update"==j)for(var b in active)active[b]?w(a,b,!0):x(a,b,!0);else if(!c||"toggle"==j)c||a.trigger("ifClicked"),active?d[l]!==u&&x(a,b):w(a,b)}function w(a,c,j){var d=a[0],b=a.parent(),E=c==r?"enabled":"un"+k,n=e(a,E+g(d[l])),h=e(a,c+g(d[l]));if(!0!==d[c]&&!j&&(d[c]=!0,a.trigger("ifChanged").trigger("if"+
g(c)),c==k&&d[l]==u&&d.name)){j=a.closest("form");var p='input[name="'+d.name+'"]',p=j.length?j.find(p):f(p);p.each(function(){this!==d&&f(this).data(m)&&x(f(this),c)})}d[r]&&e(a,s,!0)&&b.find("."+m+"-helper").css(s,"default");b[t](h||e(a,c));b[v](n||e(a,E)||"")}function x(a,c,j){var d=a[0],b=a.parent(),f=c==r?"enabled":"un"+k,n=e(a,f+g(d[l])),h=e(a,c+g(d[l]));!1!==d[c]&&!j&&(d[c]=!1,a.trigger("ifChanged").trigger("if"+g(f)));!d[r]&&e(a,s,!0)&&b.find("."+m+"-helper").css(s,"pointer");b[v](h||e(a,
c)||"");b[t](n||e(a,f))}function F(a,c){a.data(m)&&(a.parent().html(a.attr("style",a.data(m).s||"").trigger(c||"")),a.off(".i").unwrap(),f('label[for="'+a[0].id+'"]').add(a.closest("label")).off(".i"))}function e(a,c,f){if(a.data(m))return a.data(m).o[c+(f?"":"Class")]}function g(a){return a.charAt(0).toUpperCase()+a.slice(1)}f.fn[m]=function(a,c){var j=navigator.userAgent,d=/ipad|iphone|ipod/i.test(j),b=":"+z+", :"+u,e=f(),g=function(a){a.each(function(){var a=f(this);e=a.is(b)?e.add(a):e.add(a.find(b))})};
if(/^(check|uncheck|toggle|disable|enable|update|destroy)$/.test(a))return g(this),e.each(function(){var d=f(this);"destroy"==a?F(d,"ifDestroyed"):A(d,!0,a);f.isFunction(c)&&c()});if("object"==typeof a||!a){var h=f.extend({checkedClass:k,disabledClass:r,labelHover:!0},a),p=h.handle,s=h.hoverClass||"hover",I=h.focusClass||"focus",G=h.activeClass||"active",H=!!h.labelHover,C=h.labelHoverClass||"hover",y=(""+h.increaseArea).replace("%","")|0;if(p==z||p==u)b=":"+p;-50>y&&(y=-50);g(this);return e.each(function(){var a=
f(this);F(a);var c=this,b=c.id,e=-y+"%",g=100+2*y+"%",g={position:"absolute",top:e,left:e,display:"block",width:g,height:g,margin:0,padding:0,background:"#fff",border:0,opacity:0},e=d||/android|blackberry|windows phone|opera mini/i.test(j)?{position:"absolute",visibility:"hidden"}:y?g:{position:"absolute",opacity:0},p=c[l]==z?h.checkboxClass||"i"+z:h.radioClass||"i"+u,B=f('label[for="'+b+'"]').add(a.closest("label")),q=a.wrap('<div class="'+p+'"/>').trigger("ifCreated").parent().append(h.insert),
g=f('<ins class="'+m+'-helper"/>').css(g).appendTo(q);a.data(m,{o:h,s:a.attr("style")}).css(e);h.inheritClass&&q[t](c.className);h.inheritID&&b&&q.attr("id",m+"-"+b);"static"==q.css("position")&&q.css("position","relative");A(a,!0,"update");if(B.length)B.on(n+".i mouseenter.i mouseleave.i "+D,function(b){var e=b[l],g=f(this);if(!c[r])if(e==n?A(a,!1,!0):H&&(/ve|nd/.test(e)?(q[v](s),g[v](C)):(q[t](s),g[t](C))),d)b.stopPropagation();else return!1});a.on(n+".i focus.i blur.i keyup.i keydown.i keypress.i",
function(b){var d=b[l];b=b.keyCode;if(d==n)return!1;if("keydown"==d&&32==b)return c[l]==u&&c[k]||(c[k]?x(a,k):w(a,k)),!1;if("keyup"==d&&c[l]==u)!c[k]&&w(a,k);else if(/us|ur/.test(d))q["blur"==d?v:t](I)});g.on(n+" mousedown mouseup mouseover mouseout "+D,function(b){var e=b[l],f=/wn|up/.test(e)?G:s;if(!c[r]){if(e==n)A(a,!1,!0);else{if(/wn|er|in/.test(e))q[t](f);else q[v](f+" "+G);if(B.length&&H&&f==s)B[/ut|nd/.test(e)?v:t](C)}if(d)b.stopPropagation();else return!1}})})}return this}})(jQuery,"iCheck",
"checkbox","radio","checked","disabled","type","click","touchbegin.i touchend.i","addClass","removeClass","cursor");

83
core/admin/assets/sass/layouts/settings.scss
View File

@ -219,6 +219,89 @@
padding:40px;
@include breakpoint($netbook) { padding-left:15px; }
@include breakpoint($letterbox) { top: 0; }
.sub{
color: rgb(158, 157, 149);
padding-bottom: 20px;
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: -moz-use-text-color -moz-use-text-color #EDECE4;
border-image: none;
border-right: 0 none;
border-style: none none solid;
border-width: 0 0 1px;
margin-bottom: 0px;
}
ul.users{
list-style: none;
padding: 0px;
margin-top: 0px;
width: 75%;
clear: both;
li{
display: block;
width: 100%;
padding: 20px;
@include box-sizing(border-box);
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: -moz-use-text-color -moz-use-text-color #EDECE4;
border-image: none;
border-right: 0 none;
border-style: none none solid;
border-width: 0 0 1px;
&:last-child{
border: none;
}
.user_image{
float: left;
width: 40px;
height: 40px;
margin-right: 17px;
background-color: #ccc;
@include border-radius(20px);
img{
width: 40px;
height: 40px;
@include border-radius(20px);
}
}
.user_info{
float: left;
span{
display: block;
line-height: 1em;
&.name{
margin-top: 0.4em;
font-weight: bold;
font-size: 1.2em;
}
}
}
label{
float: right;
color: #fff;
padding: 4px 8px;
margin-right: 20px;
&.admin{
background-color: #DE523A;
}
&.editor{
background-color: #4A8CBD;
}
}
}
}
}
}//.settings-content

2
core/admin/views/default.hbs
View File

@ -24,11 +24,13 @@
<!-- need per file scripts and styles :/ -->
<link rel="stylesheet" type="text/css" href="/core/admin/assets/lib/codemirror/codemirror.css"> <!-- TODO: Kill this - #29 -->
<link rel="stylesheet" type="text/css" href="/core/admin/assets/lib/icheck/css/icheck.css"> <!-- TODO: Kill this - #29 -->
<!-- jQuery is for all so here for now -->
<script type="text/javascript" src="/core/admin/assets/lib/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/core/admin/assets/js/toggle.js"></script>
<script type="text/javascript" src="/core/admin/assets/js/admin-ui-temp.js"></script>
<script type="text/javascript" src="/core/admin/assets/lib/icheck/jquery.icheck.min.js"></script> <!-- The right place for this? -->
</head>
<body class="{{bodyClass}}">
{{> navbar}}

34
core/admin/views/settings.hbs
View File

@ -162,7 +162,39 @@
</section>
</header>
<section class="content">
<img src="/core/admin/assets/img/users.png" alt="users" style="width:900px;height:auto" />
<h6 class="sub">Invited Users</h6>
<ul class="users">
<li class="clearfix">
<div class="user_image"></div>
<div class="user_info">
<span class="name">Some Name</span>
<span class"timestamp">Invitation Sent: 7 hours ago</span>
</div>
</li>
</ul>
<h6 class="sub">Active Users</h6>
<ul class="users">
<li class="clearfix">
<div class="user_image">
<img src="/core/admin/assets/img/user.jpg" alt="user"/>
</div>
<div class="user_info">
<span class="name">Some Name</span>
<span class"timestamp">Last Seen: 7 hours ago</span>
</div>
<label class="admin">Admin</label>
</li>
<li class="clearfix">
<div class="user_image">
<img src="/core/admin/assets/img/user.jpg" alt="user"/>
</div>
<div class="user_info">
<span class="name">Some Name</span>
<span class"timestamp">Last Seen: 2 days ago</span>
</div>
<label class="editor">Editor</label>
</li>
</ul>
</section>
</section>
</div>