From 8191fb818602a14a11ce27616bc01fd4bf35b49d Mon Sep 17 00:00:00 2001 From: Nick Sergeant Date: Mon, 12 Mar 2012 23:48:01 -0400 Subject: [PATCH] Finishing UI styling for edit view --- media/css/style.css | 56 ++++++++++++++++-- media/css/style.scss | 52 +++++++++++++++- media/images/private-icon-edit.png | Bin 0 -> 1532 bytes media/js/src/modules/snipt.js | 13 ++++ .../snipts/snipt-edit-js-template.html | 12 ++-- 5 files changed, 120 insertions(+), 13 deletions(-) create mode 100644 media/images/private-icon-edit.png diff --git a/media/css/style.css b/media/css/style.css index 4ee898e..3ce132d 100644 --- a/media/css/style.css +++ b/media/css/style.css @@ -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; } diff --git a/media/css/style.scss b/media/css/style.scss index b5211ce..b8bfd8d 100644 --- a/media/css/style.scss +++ b/media/css/style.scss @@ -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; + } + } } } } diff --git a/media/images/private-icon-edit.png b/media/images/private-icon-edit.png new file mode 100644 index 0000000000000000000000000000000000000000..efa1cfcf800e2d2ee452d76a1d2a4f9b50d2f483 GIT binary patch literal 1532 zcmeAS@N?(olHy`uVBq!ia0vp^d_XM9!2~3KT6^3BQj#UE5hcO-X(i=}MX3yqDfvmM z3ZA)%>8U}fi7AzZCsS=07?_nZLn2Bde0{8v^Ko2Tt~skz|cV7z)0WFNY~KZ%Gk)tz(4^Clz_GsrKDK}xwt{?0`hE?GD=Dctn~HE z%ggo3jrH=2()A53EiFN27#ZmTRp=I1=9MH?=;jqG!%T2VElw`VEGWs$&r<-In3$Ab zT4JjNbScCOxdm`z^NOLt1Pn0!io^naLp=kKmtYEgeeo;J&4sHjE(uCSxEHIz#UYgi zsro^w#rdU0$-sz9QwCX8VC7ttnpl!w6q28x0}I7~jQo=P;*9(P1?ON>1>eNv%sdbu ztlrnx$}_LHBrz{J)zigR321^|W@d_&nTfNRnX#pjnTe~Rp`ojxlaYywrL&Wfo28|> zv!j6pOs`9Ra%paAUI|QZ3PP_jPQ9R{kXrz>*(J3ovn(~mttdZN0qkX~Ox$iUz-b;- zZwhX=7~<5c4|I$^C}NQ!8YToxJs>7L*#bH6grAxROzlO$Wc^=o(iR2=rUFkF$B>F! zA;G@>B8~!YU%h*I^JZijC%2b~ua7}TLQh6gQipi2`s0Jr|Gf52TyU&^w~T@sTeA{N zkJ>q=(`WqZLn1eC?%v2}Ja<+2)%9_q&fnC9ot15he=ZNGd&+zwGs)IUAR_IS!m6Knp@VwhrZ-2xnJ{7jNxA> zZ<+m#*p-jco=?oY%dhw%Bk({<<(|H$>vCjS4Xsyoy$c9fdDdr&UiJIA#XVxb*j8vR zVRWB)nZxS|14qbYkI)6T942LOxCpIl3uAF`_^Wzu(dWLSAAAhnx%dBd$hdnmZKk~7 zH^*&D<_SJ&Y50Hik(wjx|J&cq1Z=xoQ#MXHe4ujeEN!vH-Hkp**LQ6YJ6f#J8ZyaN zM%MA--!Dha4s2*+;90JBzi?al#5FdTo<+at(^{dwjicH|W!{VijV!&_73Y?0cW|59 zzVypX{q3t2*|zJ4E((cm=(@dHZD%e!`>H}?FL{m&3vL~_^0qO^E65@=aJ%K^Ws_ZH z^k`4phAoM!ap*16kCHF);#uJQ#j=eyMNDW xx5|IpR#j?5zGN3Ie%Ji-qu-~irC-)FFf-Ij1!Yz#7Q6