Finishing UI styling for edit view
Nick Sergeant
parent
342ab765d8
commit
8191fb8186
|
|
@ -912,7 +912,7 @@ body.editing header.fixed-save div.inner .cancel, body.editing header.fixed-save
|
|||
margin-left: 10px;
|
||||
}
|
||||
body.editing header.fixed-save div.inner .save {
|
||||
margin-right: 99px;
|
||||
margin-right: 242px;
|
||||
}
|
||||
body.editing section.main div.inner section.snipts article.editing {
|
||||
margin-top: 50px;
|
||||
|
|
@ -955,9 +955,57 @@ body.editing section.main div.inner section.snipts article.editing aside {
|
|||
margin-top: 0;
|
||||
width: 243px;
|
||||
}
|
||||
body.editing section.main div.inner section.snipts article.editing aside div.inner {
|
||||
body.editing section.main div.inner section.snipts article.editing aside div.in {
|
||||
padding-left: 10px;
|
||||
}
|
||||
body.editing section.main div.inner section.snipts article.editing aside div.inner label {
|
||||
margin: 10px 0;
|
||||
body.editing section.main div.inner section.snipts article.editing aside div.in label {
|
||||
margin: 20px 0;
|
||||
}
|
||||
body.editing section.main div.inner section.snipts article.editing aside div.in label > span {
|
||||
color: #32A8F6;
|
||||
display: block;
|
||||
font: bold 12px "Helvetica Neue", Helvetica, Arial, "Liberation Sans", FreeSans, sans-serif;
|
||||
margin-bottom: 5px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
body.editing section.main div.inner section.snipts article.editing aside div.in > label {
|
||||
margin-top: 6px;
|
||||
}
|
||||
body.editing section.main div.inner section.snipts article.editing aside div.in textarea {
|
||||
height: 100px;
|
||||
padding: 7px 9px;
|
||||
width: 202px;
|
||||
}
|
||||
body.editing section.main div.inner section.snipts article.editing aside div.in label.public {
|
||||
background: #EFEEEF;
|
||||
border: 1px solid #DDDDDD;
|
||||
cursor: pointer;
|
||||
margin-right: 11px;
|
||||
padding: 3px 5px;
|
||||
-webkit-background-clip: padding-box;
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-background-clip: padding-box;
|
||||
-moz-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
body.editing section.main div.inner section.snipts article.editing aside div.in label.public input {
|
||||
display: inline-block;
|
||||
margin: 4px 4px 0 4px;
|
||||
}
|
||||
body.editing section.main div.inner section.snipts article.editing aside div.in label.public span {
|
||||
color: #7B7B79;
|
||||
display: inline-block;
|
||||
text-transform: none;
|
||||
vertical-align: -3px;
|
||||
}
|
||||
body.editing section.main div.inner section.snipts article.editing aside div.in label.public.is-private {
|
||||
background: #efeeef url("/static/images/private-icon-edit.png") 199px center no-repeat;
|
||||
}
|
||||
body.editing section.main div.inner section.snipts article.editing aside div.in label.public.is-public {
|
||||
background: #F2DEDE;
|
||||
border: 1px solid #EED3D7;
|
||||
}
|
||||
body.editing section.main div.inner section.snipts article.editing aside div.in label.public.is-public span {
|
||||
color: #B94A48;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1047,7 +1047,7 @@ body.editing {
|
|||
margin-left: 10px;
|
||||
}
|
||||
.save {
|
||||
margin-right: 99px;
|
||||
margin-right: 242px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1101,11 +1101,57 @@ body.editing {
|
|||
margin-top: 0;
|
||||
width: 243px;
|
||||
|
||||
div.inner {
|
||||
div.in {
|
||||
padding-left: 10px;
|
||||
|
||||
label {
|
||||
margin: 10px 0;
|
||||
margin: 20px 0;
|
||||
|
||||
& > span {
|
||||
color: #32A8F6;
|
||||
display: block;
|
||||
font: bold 12px $Helvetica;
|
||||
margin-bottom: 5px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
& > label {
|
||||
margin-top: 6px;
|
||||
}
|
||||
textarea {
|
||||
height: 100px;
|
||||
padding: 7px 9px;
|
||||
width: 202px;
|
||||
}
|
||||
label.public {
|
||||
background: #EFEEEF;
|
||||
border: 1px solid #DDDDDD;
|
||||
cursor: pointer;
|
||||
margin-right: 11px;
|
||||
padding: 3px 5px;
|
||||
@include border-radius;
|
||||
|
||||
input {
|
||||
display: inline-block;
|
||||
margin: 4px 4px 0 4px;
|
||||
}
|
||||
span {
|
||||
color: #7B7B79;
|
||||
display: inline-block;
|
||||
text-transform: none;
|
||||
vertical-align: -3px;
|
||||
}
|
||||
&.is-private {
|
||||
background: #EFEEEF url('/static/images/private-icon-edit.png') 199px center no-repeat;
|
||||
}
|
||||
&.is-public {
|
||||
background: #F2DEDE;
|
||||
border: 1px solid #EED3D7;
|
||||
|
||||
span {
|
||||
color: #B94A48;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
|
|
@ -80,6 +80,19 @@
|
|||
// Init chosen
|
||||
$('select#id_lexer', window.site.$main_edit).chosen();
|
||||
|
||||
// Public / private
|
||||
$('label.public input', window.site.$main_edit).on('change', function() {
|
||||
var $checkbox = $(this);
|
||||
var $label = $checkbox.parent();
|
||||
|
||||
if ($checkbox.attr('checked')) {
|
||||
$label.removeClass('is-private').addClass('is-public');
|
||||
} else {
|
||||
$label.addClass('is-private').removeClass('is-public');
|
||||
}
|
||||
return false;
|
||||
}).trigger('change');
|
||||
|
||||
window.site.$main_edit.show();
|
||||
|
||||
// Ace editor
|
||||
|
|
|
|||
|
|
@ -28,9 +28,9 @@
|
|||
<div class="ruler bottom-x"></div>
|
||||
</div>
|
||||
<aside>
|
||||
<div class="inner">
|
||||
<div class="in">
|
||||
<label class="lexer">
|
||||
Type
|
||||
<span>Type</span>
|
||||
<select name="lexer" id="id_lexer">
|
||||
{% endverbatim %}
|
||||
{% for lexer in lexers %}
|
||||
|
|
@ -39,12 +39,12 @@
|
|||
{% verbatim %}
|
||||
</select>
|
||||
</label>
|
||||
<label class="public">
|
||||
Public
|
||||
<label class="public is-private">
|
||||
<input type="checkbox" <% if (snipt.pub) { %>checked="checked"<% } %> name="" value="" />
|
||||
<span>Public</span>
|
||||
</label>
|
||||
<label class="public">
|
||||
Tags
|
||||
<label class="tags">
|
||||
<span>Tags</span>
|
||||
<textarea><%= snipt.tags_list %></textarea>
|
||||
</label>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue