Finishing UI styling for edit view
parent
342ab765d8
commit
8191fb8186
|
@ -912,7 +912,7 @@ body.editing header.fixed-save div.inner .cancel, body.editing header.fixed-save
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
}
|
}
|
||||||
body.editing header.fixed-save div.inner .save {
|
body.editing header.fixed-save div.inner .save {
|
||||||
margin-right: 99px;
|
margin-right: 242px;
|
||||||
}
|
}
|
||||||
body.editing section.main div.inner section.snipts article.editing {
|
body.editing section.main div.inner section.snipts article.editing {
|
||||||
margin-top: 50px;
|
margin-top: 50px;
|
||||||
|
@ -955,9 +955,57 @@ body.editing section.main div.inner section.snipts article.editing aside {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
width: 243px;
|
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;
|
padding-left: 10px;
|
||||||
}
|
}
|
||||||
body.editing section.main div.inner section.snipts article.editing aside div.inner label {
|
body.editing section.main div.inner section.snipts article.editing aside div.in label {
|
||||||
margin: 10px 0;
|
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;
|
margin-left: 10px;
|
||||||
}
|
}
|
||||||
.save {
|
.save {
|
||||||
margin-right: 99px;
|
margin-right: 242px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1101,11 +1101,57 @@ body.editing {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
width: 243px;
|
width: 243px;
|
||||||
|
|
||||||
div.inner {
|
div.in {
|
||||||
padding-left: 10px;
|
padding-left: 10px;
|
||||||
|
|
||||||
label {
|
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
|
// Init chosen
|
||||||
$('select#id_lexer', window.site.$main_edit).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();
|
window.site.$main_edit.show();
|
||||||
|
|
||||||
// Ace editor
|
// Ace editor
|
||||||
|
|
|
@ -28,9 +28,9 @@
|
||||||
<div class="ruler bottom-x"></div>
|
<div class="ruler bottom-x"></div>
|
||||||
</div>
|
</div>
|
||||||
<aside>
|
<aside>
|
||||||
<div class="inner">
|
<div class="in">
|
||||||
<label class="lexer">
|
<label class="lexer">
|
||||||
Type
|
<span>Type</span>
|
||||||
<select name="lexer" id="id_lexer">
|
<select name="lexer" id="id_lexer">
|
||||||
{% endverbatim %}
|
{% endverbatim %}
|
||||||
{% for lexer in lexers %}
|
{% for lexer in lexers %}
|
||||||
|
@ -39,12 +39,12 @@
|
||||||
{% verbatim %}
|
{% verbatim %}
|
||||||
</select>
|
</select>
|
||||||
</label>
|
</label>
|
||||||
<label class="public">
|
<label class="public is-private">
|
||||||
Public
|
|
||||||
<input type="checkbox" <% if (snipt.pub) { %>checked="checked"<% } %> name="" value="" />
|
<input type="checkbox" <% if (snipt.pub) { %>checked="checked"<% } %> name="" value="" />
|
||||||
|
<span>Public</span>
|
||||||
</label>
|
</label>
|
||||||
<label class="public">
|
<label class="tags">
|
||||||
Tags
|
<span>Tags</span>
|
||||||
<textarea><%= snipt.tags_list %></textarea>
|
<textarea><%= snipt.tags_list %></textarea>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue