mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-09-21 09:59:27 +03:00
Merge pull request #30 from matthojo/master
Some prototype settings page UI changes.
This commit is contained in:
Hannah Wolfe
commit
33c03b36dc
@ -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
BIN
core/admin/assets/lib/icheck/css/grey.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
core/admin/assets/lib/icheck/css/grey@2x.png
Normal file
BIN
core/admin/assets/lib/icheck/css/grey@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
62
core/admin/assets/lib/icheck/css/icheck.css
Normal file
62
core/admin/assets/lib/icheck/css/icheck.css
Normal 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
11
core/admin/assets/lib/icheck/jquery.icheck.min.js
vendored
Normal 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");
|
||||
@ -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
|
||||
|
||||
@ -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}}
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user