5:57 a.m.
Howdy!
Here's the initial patchset to clean up the look of the navigation. The purpose was to
get rid of various misalignments, missing separators for the tabs and generally stop
relying on fixed size definitions.
Second patch implements a more fitting styling we iterated on within the UX team for the
2nd and 3rd level navigation. It nicely separates the content from the navigation, keeps
the two levels in relation to each other visually.
3rd and 4th patch are minor fixes.
[PATCH 1/4] Refactor navigation.
[PATCH 2/4] More fitting subnav.
[PATCH 3/4] Fix misdefined local lookup.
[PATCH 4/4] avoid name clash with the breadcrumb widget in the
applies cleanly on 50d7549a38da3c9a3859c8fad29da2325d2469db
5:57 a.m.
New subject: [PATCH 1/4] Refactor navigation.
- lots of outdated style definitions form deltacloud removed
- do not rely on pixel perfect/fixed height layout.
One exception is the #content background that can still cause some issues
in certain cases.
- limit the use of images with CSS3, graceful fallback.
---
src/app/stylesheets/_base.scss | 2 +-
src/app/stylesheets/kalpana.scss | 183 +++++++++----------------------
src/app/stylesheets/screen.scss | 8 +-
src/app/views/layouts/kalpana.haml | 3 +-
src/public/images/center-background.png | Bin 5912 -> 2121 bytes
src/public/images/shadow.png | Bin 0 -> 180 bytes
6 files changed, 60 insertions(+), 136 deletions(-)
create mode 100644 src/public/images/shadow.png
diff --git a/src/app/stylesheets/_base.scss b/src/app/stylesheets/_base.scss
index 20e3318..ff7d179 100644
--- a/src/app/stylesheets/_base.scss
+++ b/src/app/stylesheets/_base.scss
@@ -12,7 +12,7 @@ $formheadbg: #eee;
$formheadfg: #333;
$footerbg: #f3f3f3;
-$strokecl: #ddd;
+$strokecl: #aaa;
$errorcl: #cb292b;
$warningcl: #f6a20a;
diff --git a/src/app/stylesheets/kalpana.scss b/src/app/stylesheets/kalpana.scss
index 9a2d94c..0ae4e72 100644
--- a/src/app/stylesheets/kalpana.scss
+++ b/src/app/stylesheets/kalpana.scss
@@ -197,11 +197,12 @@ table {
margin: 10px 0 40px; width: 100%;
font-size: 95%;
thead {
- background-color: lighten($strokecl,8%);
+ background-color: lighten($strokecl,25%);
th {
font-size: 95%;
padding: 2px 6px;
font-family: $headlinefont;
+ font-weight: bold;
color: lighten($headercl,20%);
text-transform: uppercase;
border-right: 1px dotted darken($strokecl,20%);
@@ -597,159 +598,78 @@ ul.block {
margin-right: 10px;
}
}
- hr { /* stroke on the bottom to be overdrawn by tabs */
- position: absolute;
- display: block;
- margin: 0;
- left: 0; right: 0; bottom: 0;
- height: 1px;
- color: #9F9F9F;
- background-color: #9F9F9F;
- z-index: 1;
- border-style: none;
- }
-}
-
-nav.tab_nav{
- display: block;
- font-weight: bold;
- font-family: $headlinefont;
- font-size: 14px;
- &>ul {
- bottom: -1px;
- display: block;
- margin: 0;
- overflow: hidden;
- position: absolute;
- z-index: 2;
- &.selected {
- /*color: rgba(0, 0, 0, 1);*/
- }
- &>li {
- padding: 8px 14px;
- bottom: -1px;
- border-left:1px solid #9F9F9F;
- border-right:1px solid #9F9F9F;
- background: #ddd url(/images/navtab_off.png) repeat-x 0 0;
- display: block;
- float: left;
- margin: 0 5px 0 0;
- @include text-shadow(1px, 1px, 0, #FFF);
- &>a{
- display: block;
- text-decoration: none;
- color: $taboff;
- &:hover, &:active {
- }
- &.selected {
- color: $tabon;
- }
- }
- &.selected {
- position: relative;
- bottom: -1px;
- background: #ddd url(/images/navtab_on.png) repeat-x 0 0;
- color: $tabon;
- }
- }
- }
}
-
nav {
- display: block;
- &>ul {
+ &.tab_nav { /* main tabs navigation */
display: block;
- &>li {
+ font-weight: bold;
+ font-family: $headlinefont;
+ font-size: 125%;
+ &>ul {
display: block;
- float: left;
- margin: 0 5px 0 5px;
- &>a {
- display: block;
- &:hover, &:active {
- color: rgba(13, 168, 250, 1);
- text-decoration: none;
- }
- &.selected {
- color: rgba(0, 0, 0, 1);
- }
- }
- &.selected>ul { /* generic selected tabs */
- background-color: #fff;
- border-bottom: 1px solid #fff;
- }
- &>ul { /* generic background tabs */
- display: block;
- margin: 0;
+ position: absolute;
+ bottom: 0;
+ &>li {
+ display: inline-block;
+ margin: 0 4px 0 0;
+ padding: 0;
+ color: #888;
background-color: #ddd;
- overflow: hidden;
- border-left: 1px solid #9F9F9F;
- border-right: 1px solid #9F9F9F;
- border-bottom: 1px solid #9F9F9F;
- li { /* tab items */
- font-size: 80%;
- margin: 0; padding: 0px 8px;
- text-align: center;
- font-family: $headlinefont;
- display: block;
- float: left;
- max-width: 110px;
- a {
- display: table-cell;
- vertical-align: middle;
- height: 38px; /* easy click targets */
- padding: 2px 6px; margin: 0;
- }
- &.selected {
- a {
- color: #000;
- }
+ background: -moz-linear-gradient(top, #fff, #ddd 1px, #ddd 70%,
lighten($strokecl, 10%));
+ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eee),
to(lighten($strokecl,10%)), color-stop(.01, #ddd), color-stop(.7,#ddd));
+ border: 1px solid $strokecl;
+ &.selected {
+ background: #fff;
+ padding-bottom: 1px;
+ border-bottom: none;
+ &>a {
+ color: $tabon;
}
- &.disabled {
- a {
- color: rgba(0,0,0,0.1);
- cursor: default;
- &:hover {
- text-decoration: none;
- }
- }
+ }
+ &>a {
+ display: block;
+ padding: 9px 18px;
+ text-decoration: none;
+ color: $taboff;
+ &:hover {
+ color: lighten($kprimary,30%);
}
}
}
}
}
&.subnav { /* subnavigation */
- background: url(/images/subnav-bar.png) no-repeat center;
position: relative;
- overflow: visible;
- min-height: 6px;
+ background: #fff url(/images/shadow.png) repeat-x 0 bottom;
+ font-family: $screenfont;
+ border-left: 1px solid $strokecl;
+ border-right: 1px solid $strokecl;
+ width: 958px; /* due to border */
+ margin-bottom: 10px;
&>ul {
- width: 960px;
- margin: 0 auto;
- padding: 4px;
- overflow: visible;
- height: 22px;
+ display: block;
+ margin: 0;
li {
+ display: inline-block;
+ margin: 4px 4px 0 4px;
+ padding: 0 6px 12px 0;
a {
- height: 15px;
cursor: pointer;
- font-family: $screenfont;
text-transform: none;
- display: inline-block;
- margin: 6px;
+ display: block;
+ margin: 0;
+ padding: 4px 12px;
+ color: #333;
&.selected {
- @include text-shadow(0,1px,1px, #FFF);
- @include border-radius(2em);
background-color: #EEEEEE;
- margin: 0.3em;
- padding: 0.2em 0.7em;
- width: auto;
-
+ @include border-radius(2em);
+ color: $tabon;
+ @include text-shadow(0,1px,0,#fff);
}
}
&.selected {
- background: url(/images/selected-subnav.png) no-repeat bottom center;
- height: 35px;
+ background: url(/images/selected-subnav.png) no-repeat center bottom;
}
}
}
@@ -761,6 +681,7 @@ nav {
left: inherit;
right: inherit;
margin-bottom: 2em;
+ border: none;
&>ul {
display: inline-block;
height: 3.5em;
@@ -814,7 +735,7 @@ nav {
}
#content {
- background: url(/images/center-background.png) no-repeat center 30px;
+ background: transparent url(/images/center-background.png) no-repeat center top;
overflow: hidden;
min-height: 200px;
.inner {
diff --git a/src/app/stylesheets/screen.scss b/src/app/stylesheets/screen.scss
index 87d8477..7c4a947 100644
--- a/src/app/stylesheets/screen.scss
+++ b/src/app/stylesheets/screen.scss
@@ -303,13 +303,17 @@ fieldset {
font-weight: bold;
}
.subnav {
- background: none #FFF;
+ border: 0;
+ background: transparent;
width: 96%;
height: 2.7em;
@include border-radius(16px);
&>ul {
li {
- background: none;
+ background: none;
+ &.selected {
+ background: none;
+ }
a {
&.selected {
@include no-text-shadow;
diff --git a/src/app/views/layouts/kalpana.haml b/src/app/views/layouts/kalpana.haml
index c80c0c7..2dbf53e 100644
--- a/src/app/views/layouts/kalpana.haml
+++ b/src/app/views/layouts/kalpana.haml
@@ -32,9 +32,8 @@
#subheader
%nav.container_16.tab_nav
= render_navigation(:expand_all => true, :level => 1)
- %hr
#content
- %nav.subnav
+ %nav.subnav.container_16
= render_navigation(:expand_all => true, :level => 2)
.inner.container_16
= yield
diff --git a/src/public/images/center-background.png
b/src/public/images/center-background.png
index a5bcc24ceacf532aa794bfd031fad985e6a4a120..a507e9b8e696d1e6e9c726fc98f018d57c0c3d20
100644
GIT binary patch
literal 2121
zcmchYe@xVM7{@>Ni@SqB=x88F{ICpkv*lqC2%NXO4l)qQ+)NlL8AnaKKz<AizY%3R
zLz->~VV)bC(*l8*Vu+FrJ;`x5q-C&ED`Ho4Ktv%rj-KcF-uJjw|MX8|eA)N&{d_*p
z`*}U@=ixwBrorDg%$G6dpPr`6W=zt{nCLl$7*<wZ*&YRdM8(+#Eo&WE_A|Wr?ATz?
zu?74w_nbNcD@s$^)?&u|RQM}mjZLAjDBqKwp_h-yf*uYJ=+hbXuyQ?Jw|;Z^u+zS2
zw`yCUe$$!01ogRBoBQP1!LsUs=u4qry_~m1y5)Asj$O}xWB+}6dU|GNM)s&};*x9j
z#zj|AS;3h7&8oqX`unaQMkfbaGE?T}Pq?n9&h48Izf*GdPWxq-<ox|Amn-q|?CYtn
z7VF-ZPV6gQI8(L|d9N_}w}!btM;_S6E6d8WtX6B@aq;1C`~Jxht3wrOOBtUm$%*V4
z%DY#4(e<_ST)`hVC!MJaB~>$P_l|v9VSZ*db*`{yZsUX@a%jr7+5ia_Cg;_2K8zch
z@HH|PtAIyZgGRzM27KgLSI0;h*Lu?aQ4nKVb-vi2F_{P+;xNXf@r>btKpSIGW)To}
ze+ZCuJ`p5lnjl*(gurc0N{77!s#E9FxtuXB#+<8DFs9ceL4EMJsZzZhZZP9D8i?F0
z>Ru(hNBtC|Wz11t2j}BOJ>8iQX^?yR9Z(%(j(`_$4Rkow^6qBF%x&GMGF$y)3Pi}7
zdJJwciif4Jc91KTGSZCuIRs$vHHM&O%Mk_WxSL)BM~*FBk}YCfb%Z-fQ>?kg#Du)G
zyYuCYMI^!HHYuf5CqE5ezYK75NysmwG-WE`Jcl<qP%jA4V+iTYM4}9sOGuZNaMyw!
z56g*28!g&ybbT1XSaa#Om_Rlk8-ZtNwtY`X1r%L94eeI|%W3;sWOQ`o7BIzfQl63=
zBp<<_MEr^ievrl<tWvyamz?O_&OL?R(0q(0u%J*Z%-vA_)W{<Gn%Az9obET!8F6K(
zr1p^j$`2d^4p;$r0y`w|m14#r3&$<IVFeYhW?g?cV~Mz}ZVfKiDg}JOwk-(|d360s
zARL4n8XLyHh=<S3Luz>Zit5OxDjV^LK0J*VxZ|U+!HQA}7&gqS!3)g_BRW6&d^;dn
zV?GWHMqhyRqISL~0VT9WX~biS3m*i+3h$!g-1_$sX9YeyjyObg`^hx<c)pQ$X6Gko
zH=w+mUM*l;wG3Dkg(pFyNrvM9&j7)rhz}VN`Lh@nyn$*h9v@xxg$gyJMzhzpw5=Z6
ze9JDiVQUl-$_{h@PaF-(mk;CD6$M2@xj!>OgnkT9?dkXL(T|Fp!Em^Mii@YSd^%r*
z5;tLuctJE0;;415{dbv*6>lbA?$jhfH&~QF!JQuVCgG;GN&5~h;#D+$ShxuyJPS=P
z)jxbk3cU$=g(k8zf0TTUyy$Jj0Z5+o$`>6G&_;+cCQUF7ZRa?KMJKLgY2wZ`pn0>}
zun96~<SF>lQEm_L#5JK3I2*d2q?z&*q)KC8zjzqQ)~q`qxKWtA?wxOiEOwj)w^BC?
zW6`w0mEwk2x2<xq2QXV=cakebLj;SQ3UCBy>2)p+1mOxwV|$mU8-)0n_*9lCS<TPn
zzYkT<5OY<2PGeh(-o(p<vFq6({15rRKJ?n(mUR4baBM!r`Z)9*OV?-WTD7lK{{_8^
BDZT&z
literal 5912
zcmb_gcU+Qt`+m%mO<QhDt+Y%nO|x7GR+?FYnJH$D!pvD_;70LuGPhRdOtCDb#F3`C
zN5{c27fF^mA|v-e6vEB#d9XU?yr19u-^)Kdd_VWNuIs+OHy?;NhcXu4D7_H?0AZ8U
zhUWo5unqtO&aYnso)m@d$phb{a7NZR3(spf-z&GAfa6y^F;2Tpu3vF>I`4Gls=rsW
z6AS>vD@+WJU-0Xh=r>Pfye<T&vVji{b(8-xKK3n7XXo26i2*x>$ez}L`jcXjYhNU=
zTKg6UXv7;P3a8hEp18lTG+t1<GSi~QTN*|X7AH%=mstk9+UZ7VFA32{&|cxL(B*>X
z2I#yM?$|zpEagLN`}NqJa=fzHUPe%pZ{_lyW$L=uJeQ?F_Y6<(T~U>b=4HH=Wi(eV
zwidSa49snqN8EWtmRcrHxg?XJQPW&zG3?GLX!p^EbN%Z5hITP;2D8i57<Z97byhs_
z&1G#~>pBR#N)>K2b=wZ}WHXLdJHJ~`=4PNsqy0@yI&=aom*#*{LpU6*{?<2$mB7fy
z@ifxw9Q7RRx3Jne2(S+FXlAlaphqz)j?qkzO&y&>@!*py<x&)#lwjM5uh|U0*FHfF
z6uI`8IJ*YF4@gCWz8SXWPQ6I%CQ8Sc9G&$?q&?fCdvq=vO<}FDx*L~eI#Rm#G&Ehb
z+q8`3^ewYHtRz}KEu&<ZW&SjH)26FE?U^FUHo<ty9v6#Cc@;D)o%DgI%Nt#0h)EcC
zvsz7ib@bf|PoCCt?0djcmR*;Qk~du*)1LMgdRtiDNxb6G#Zrdb%XWO89c0Mm>b8z9
zrR8VO4$_;aDCTA1x$Q@syD~`IztC5{m)7!@nY=j)0#4@*bLj-${BQ<gVU)zqM4GV}
zVTB2#SjUpBTPY8{xprh;QEc)f0xaErbXZ)j*zLLI?W!e;B~z~S%2-6_OYJRaGOcv|
zzVW{%ZoP8!(2Sup>QQ3hLI%TflrjY$VVWoH^mA<!Vu~@+yj{@qyw-coRtaN74APN?
zTppd>nL^w^#+L9_)F)I?Gr`QNv9oF&V=byGD8v}5c9z^PgFg=oZ@jqNJs(f(^g36&
z>vgBaLUW8Q(hmMC$|V>RP;KU)_+qp@TzQL%dS>3vu_83#u?cOxMm4*W>mbvIJJR`K
z3g^3QMz}_0R!u+ZTkgm}n7whUs$e2a<L~VK5Hovck-)q%yXf4{8!jL$yQeXl-~m0=
z>S63U$?2;NOQx{pJrM&f;qx<S&b8dH4^XLCQ#9#Gon}4`ldeR7-5{6-lVnCjqnpOB
zi<Lc-cMrN9qXv6DO_3u^7@9ji?K(tQIgFg5y^cu<VWC|=<4QsfS9c^UMMsdkE-Y$@
zS_?n-dS)v4u-Kn+<cN#|dU<hB)ai_MY<Wyscad9WSH%5mY&0QbzbI+EP&UiTe8SH^
zThMHQOXeMuACeqL921Cok=wGzXQ2%9eiwE&$u(!MG@LioOm-C0Lw)p26Eh<jw+>_}
z@kZHEqs3i1_!ZWeJjPd(bJ-i`-JtHcP=2J#b}(<eahg?^b(~lHP<QC~_`AvGcUX^N
zZR{nxD({UNb^@nGnjAMRjXUrbf_)Ie{)|g8<7lI=^2oI-T!q@&ndn2=Qdex1WF2&b
zJqS6Qap{kH7Oq!IjqbqPyt}{hMwy7h9--YCg)LG132ZCI*_D~3+V_rK#Sh@8jy38I
zJycTKc&IZ<IsZVOP;`J*di%D>ga%xKvfXARY42!kLumUPk+!gyvw#`1uyQX*;_Mmi
z3Yhx1tdMd$LN`S}-OuRU`G;;3;sHqiH>1c%d#9ZI2<IW46VI~XMmMV#9*u6y5vixK
zkV$ZKQk|rCV@?jvbze*)+DK{CeOx8q|C9LerR|ue5Wj@HD%-R}XY?Xnf)m!B)~hd@
z!ZQOYvHFvWay6ZlPew2*_Z{B5(3BOFDx{hp<uzg={|rZU@NRSs>56#esF3u1c=X%L
z1L(?wUs8l9FMM2l=W*T#vsG?Xd`6puS+{8?n(RXKnME_Na+&pg$|BnlgMA^^*n}E<
zAAPZdY5vixgd$z0X&^<)V<4JlUiiT}&v_@5ATL$rI|er9V5-HJx^LSZA#Z=RNWR*7
z^Ci6<5jSua)|-8QQF}Ic?xbl<nj%%R3}uu;HZ=%fi8h+n+xNwWkMKzJDZ)*anM&G~
z>W*3x?Cphhu=c-5sXbmv=vTd#ZC<*4HNr;m<k+Ww1;nOsu&JV?7B7RytQ6<dG8XT>
zq*Q!D8QD#T$6HV2wNJX<Lv8)4ZFKNKlzOw4Q6%|Hbg{wf(}Hoe`im9Xo@pn#B<mVQ
zPp3s^1u@jOH8J#%cWKmVmsWYlqSRT_N-0kT$<n<1ysFk3iKA`CyOW6<XlaC_-X^m(
zwDQ!UF^u`5-vhI!!9fEgi_{lz?L%&6#=m2Cwi}H-^^KHiajRCHENYL^tbUlC%5iP>
znt0o!UoBU&S9FsIlQ-TPCSJ+xDbfhW&oXEo<C)go5i0QvF-_G$N@xuOh<S6-rU%|;
zkX`S!g*qyluX^-i7K+r|S*GuZ;YhmIg!P*##;{IhGtkb?$xT~XgETrG-p*m!rUg9r
z>y-O=$~45RQr|KWw^1Z&nmw?Y?X<10<0|(EwZr)ht*fc{`vIgDs#GBFL#*RhZ0<NB
zxF*bHRL|70zME8_(N`#vreVrbSYf0StV7q(4ksoa%&2db9LRF*>2`7S>nT_t+2*};
zc#ATngVLT|DkpY7z-A&LaSDfN@X8dU-yEB0s@Z#EOq(7~!B|RP!1sL`s7go}cSQ}F
z8a*pjL2hsMZzm00&}B-K2(E9x%`K`|tM_Y)AY1~%v}wutHKmQ|1!NA_GUHhGBx%hb
zt^xi_E&hg`dfzZTLw~&!ogK40dOZju>RB?j4I^E0AmQR5lR0c@8y?la_<mDk$pj0{
z$lX8b8pRp!E^G+*w+woxlt4s9SYJ36+T+SB1+&Dl8~^N#k)kV9#~(!A&(^Xe=}&5}
zAqp&L2HFl<(N3g~+IJ-Ht~{urnqO30gGp^RJF8Bgo+6R=GWrA5XHXgU?$_Y+Ep!9x
zF;57}swN#AHFxe6>4M;l{?ap>9;4@9m2$4PxIVdl&^wZAXhx%|kHB;X_u3q?y2B_k
zx5Z0-ETctVsMx$?6S4D&rck!?og}N4m`lmut6Uqz<Jn%P!^b~5sv)kqF*sfR$#t$d
z-&LnhA{Otz!tM&IyEo&I7>=Ydb(6MHK57P4=A1g<CY1f@L~cOFZBmOVL0Vpx#J09X
zRNu@EzZ7%8wb{06>a%#<(F3R+`QXS7or_2bN{C~0efF1Y((;|3(D-%}+j?a09;8#=
z)LVzaa@xEl%P*}ZUPpX6j>g2UvF$TlteY;hF^;Wo@Dgeo-v^gJV0SvY#FTtZM~|18
zU`75+-nY`N-9{w9jA(D)dtH@!G&m!~*36a*OV&1&mAST=i;feK+T<De=`w7d_5_i5
z2RW(3X&p@$q<@<#sCcV=?!!9|nH@Z>5ZTICmM>_<VdUQR*(F5Reo{(NbuJ-DJNWuF
zf`h0TiQGX(z@rka)D3mr)!P4H(Mi_VrC-vvOhxaf!7!%8yrxFW%;y&s@7+C<M0!))
zP_B%x!oNqGZw^xRu(K~rcg_)YG|^8uv{9ATIcdG)93sdmVVX>iXM7TSg|q0%Rn>_p
zt<B9|*Ep*==8hj5Zx_@;Rb$edE`2}nJTsP%mXSNvucUjgtEjcG&CAH8<hfm+!Rwsk
zk>jsv=0w#}oFgWMx}Dsm6^%+@d8efkgT3d6oJ_dI&#?O$q?VlIe9=ONW`~-%byK$!
zKFo5m!SBo0Y734`uLULHvy3cbaiwjmmrYl0zW?R$i1;PU<kwrO#T8gB8GID5`@`Xe
z#ig;XXKbl(miSZV6)xiequZPk%F<q^Vh;~u4{HY72p@92qkr8{W;fg-cPUd*<$CA@
z`E^BfUa7LK6?xu!Ju!df<0JFFrTf8s%F(h<3vr?QWDZ$1rnV_wvxOJx_2&e<7MHkz
zxm6k*eKPt_G{uP%$B_v%Q=MbSW7D-F9A|qgic8DV{S$C$@R4v1Z6Pc`NV2}c`rHLI
zOfK<HJ))ggqrbN%ZT6-&`Ak}Nw$?~m{D9^0D}{G0B)UxfM|2JFm*^EW8$+YA!(G3;
zc&Vr#k0#Nb1}Ii16i#KRRlxLUwVKHXW)_lU(9-?HsKaEXPdM}FEco)uv+nm@8|%mZ
z`oI*?x_l6G@Kmp#^G(GKemWL*-UnUx=EfE@NwPKkxiOO~%H=*a1J)vv^*vpx&q&L|
zy8h)hB^TQ+qWufj71egkJ@-6ZUNy0(j<XwF!ow@!_H73PodN5{k;cL)+d9wj-ePpE
zU4nqe<P7^_QvAL4r_}5x&+~70r&hv!G$hK$^0>BL&KWu+CE3W97p|uU3Z)tcFK-iR
zwwSKg#ady9+B2;-a~blY8Tf`_&7Bu5AK2!1z4xWo9=efl-FE(~Lz8i+?J@6)C27y~
zO8I4ei^$w3rbkTD1y(eOBWiL8>YJKL*ap?M%sijGsf}Zc4<4PZA+MBws{VK+rtGCf
zEw=x)I;tX?qeqypv#jMjz-^y9I5WS+x7NPsY%Sf{w~?tY*uOy_>YUPY&!ew-D_U!5
za>?Y+b{8gpdsy)K&Co|vm|P@BkDBQ`G121Y?)cmWar6Z}hx7K!;D|N%VtPTd-<)5U
zR<}O(*whxI#%mHK2S#ggiJbAtgQ)2C3Z&wtjJrAHuDBsd?7Z#EWMMb^wQbn4*b}<T
z{;53^u*gbcFXhi??OE^3uTM3PW5g;rC&$(WgyijhF+x?9!>)WwJ{m+FtC$iU%`$5Y
zzEvFL(KB0UHqjqo0{cXC4fAy6j+^iPEYK<S)RBP?-YvH9?eLPfzxnqCvr2~o$;(7S
ze9Qf(v$+ZVk)hVH7yC4peixp>Pg?L~#-6hanR*_HJH$$j#C@-l{BwtdeauiYG`R(D
z!=xAowKG2ZBUuqSTk*o*j_BNOK~%!7(nP{k%_2&_XHM5ss#U-BzZKyQ*TrQS5nDyF
zUVIIf!747+R6JSo7HkNMLtZjoA{>i#5Z|tkoeHw6<kk6JK*0JJmV_Mg+N-sb=oYlJ
zSi*(<L+&YZ_MhMPPP`||&00Aa(zlv8Xbl%IkK-?IxW(z6i}6iY!FcZ;Q!H^fb*oZK
zfn8ryv1U4D4{v~B-^ZOfdd+7nQLScOWvzar1h&S>!T9p-#k$#nMUM`(qD7`zF>Z*}
z)<7uOlFa5f<dn<WAD%xSxICa#yj5-waf1rt*d~scOds=`+w!!EZ|OaunvDn-@R#<;
zsSZMWqY?njVFPNBr&R#JAOnyFfQqY+1%S(O&|}ZLSC7_%AJp!CH#`LZE*0xKG^haZ
z@;D$20Bc+TV4Hy;5CTR11|IJY5&HWfL}D$qCSn@^99!dp1b@#%(SArEsItEp?2QxT
zAMO+==GT`G`S9Cnen=d5l%^=42>>3yYTJMDsoVfz`hyRz&u~2e1mf?5e;-WzMlJ0{
zLddm35`Py0LSg_L5#T=%LB;TY@Z&wo`for$Mglqv0=IzY?D_pC0HAxrV<)Ko-!K3u
zX+3!M#eL)BeyAaGmCPJJewz6EcOzv0ppt}saG%ZuY&NU|QU69w1=*&;nzjJI_va9%
zbUr47c(wBaK!~s#SkwTLuYhI$=Kxe~Bp!_7H>?Vg2Eld9gF1p)J;*zt)Y}c{H?*KX
zMEU_6s9EYN{a<?X+0Cy8Q`x~HPbl4B1Dd`cUk}x|LU2I(5ND8N!c73EI|bxz00n~}
z$T64qpV+qx<iTE%)PtHJWgS5hfj_H<NZb_J1IoM|9CICtpZK`hLL2yD51%zIM<F}>
z{}}lbmxAztV}fY^(3i@#7d#{gwnu`qgD6$NLIpvw4h(>kTNMigxf;Pw<6H5EEBOL#
zczjd<05s>7Jt4KAQg(b>8vo}sH0Sq<{S-8xyP2JS7i_Wr-4W1$FQC!<6h<GKRw_P0
z3&d*vCs<ogpm;L~9QV|DD->5P3E2vg?hc6bhoe`udL&S61r~)%LAE*%<pw^4WJdj9
zaAWUpKl(tXqq~Aua@nCT2pA+mR3MMnwfIHLfW20&_!Q~@3d^r|s>7E*y6`6uVZI-a
z3KZ`E!Me;y>VeEQKQ37Vy0{rEV~_-$|MTSM#7u;Ln%N10W{?C?^AMuifHfDO%l`N*
zWZhNft4c~4xUc=;%n((`Auo*~!`S_DuNog`#i|+quF8k#{SQe%*YRh?m%9zH;cpqf
zv`Pb@Z2vleSk%e#iQnSejz5b33JAiC<L6uh^1v}aHshOVb$jt!l=JtGpbO;eApX5y
z9S~%1Y8Djz9RmFLEF{oB1>xTgwa5Hn3$Bg=x}=ahp{&&Re58=IasTQ8xsbXKGGySY
zuD^O*Rt&L%%z-@f>-JRO`6TZ{g;gQet5)V;8-Z2Lp>zoB^qSQ)KC8cF;=5;4Rnkot
zXjm3dU(mSwA&>uKX2f53__Uz<b49BRpsxHPQEOcId*B;?9rG{TuN|PqmuG?{3fb$&
zIQhfl-=1Gvx&{wSDnU-!Zr~1j(q)Dp5ACwm-F6_v2jcr<LGoF#Rxds@gJ012aM1Pq
z-N*MFg!k_zIluyqWCl66g3t8VqW*UQUnXtRhX#H_P!%Bd|Elqm*x%n-KbQTl8owTX
iHU1wa;k|g<F9Ql&?M&Wg#-9YO378n64D(N1zWsli?n~GJ
diff --git a/src/public/images/shadow.png b/src/public/images/shadow.png
new file mode 100644
index 0000000000000000000000000000000000000000..6b6f7af0a9dbf19d47748c00e587be04c9a3df82
GIT binary patch
literal 180
zcmeAS@N?(olHy`uVBq!ia0vp^tU%1k!3HFMt$j8RNU;<<d4_NRK@CSr2S~EOBeEE%
z{yGRVI%&+V018T$xJHx&=ckpFCl;kLl$V$5W#(lUCnpx9>g5-u&wghk1yp3{>Eal|
zF*Etj*7Do+Y$gXz95|rRtaswjfde0ApK9vi;o&(W(e(d+@{W#1PUn`!Mn;Ai$GE)t
TmnUxrYG&|s^>bP0l+XkK#KSo%
literal 0
HcmV?d00001
--
1.7.4.4
5:58 a.m.
New subject: [PATCH 2/4] More fitting subnav.
From: Jakub Steiner <jimmac(a)gmail.com>
- + small tweaks to panel and selected block arrow.
- nicer separation of the 3rd level navigation.
Unify all the shades of blue. Derived from the product color - #b4d8dd
- selected blocks
- breadcrumbs
- notifications
- outline borders
- also toned down labels, as they get more attention than the value (or everything else
for that matter).
---
src/app/stylesheets/_base.scss | 13 ++++--
src/app/stylesheets/kalpana.scss | 61 +++++++++++++++-------------
src/app/stylesheets/screen.scss | 70 ++++++++++++--------------------
src/public/images/3rd-level-bg.png | Bin 0 -> 572 bytes
src/public/images/selected-subnav.png | Bin 428 -> 0 bytes
src/public/images/shadow.png | Bin 180 -> 0 bytes
src/public/images/subnav-bar.png | Bin 347 -> 0 bytes
src/public/images/subnav-shadow.png | Bin 0 -> 217 bytes
8 files changed, 67 insertions(+), 77 deletions(-)
create mode 100644 src/public/images/3rd-level-bg.png
delete mode 100644 src/public/images/selected-subnav.png
delete mode 100644 src/public/images/shadow.png
delete mode 100644 src/public/images/subnav-bar.png
create mode 100644 src/public/images/subnav-shadow.png
diff --git a/src/app/stylesheets/_base.scss b/src/app/stylesheets/_base.scss
index ff7d179..b4a7f96 100644
--- a/src/app/stylesheets/_base.scss
+++ b/src/app/stylesheets/_base.scss
@@ -2,14 +2,19 @@
@import "grid";
/* colors */
-$kprimary: #18273C;
-$tabon: #1A293E;
-$taboff: #747474;
+$kprimary: #b4d8dd; /* Primary Katello ID */
+$kselected: darken($kprimary,45%); /* all selected items */
+$linkfg: darken($kprimary,35%); /* default links */
+$tabon: darken($kselected, 10%);
+$taboff: #747474; /* unfocused tabs */
$lightkprimary: #F2FAFA;
-$listhover: #729FCF;
+$listhover: lighten($kselected, 10%); /* list items prelight state */
$headerbg: $kprimary;
$formheadbg: #eee;
$formheadfg: #333;
+$labelfg: #888;
+
+$breadcrumbbg: #e9e9e9;
$footerbg: #f3f3f3;
$strokecl: #aaa;
diff --git a/src/app/stylesheets/kalpana.scss b/src/app/stylesheets/kalpana.scss
index 0ae4e72..9a40e8c 100644
--- a/src/app/stylesheets/kalpana.scss
+++ b/src/app/stylesheets/kalpana.scss
@@ -10,14 +10,14 @@ body {
}
a {
- color: $kprimary;
+ color: $linkfg;
text-decoration: none;
&:hover, &:focus {
- color: lighten($kprimary, 20%);
+ color: lighten($linkfg, 10%);
text-decoration: underline;
}
&:active {
- color: darken($kprimary, 20%);
+ color: darken($linkfg, 20%);
}
}
@@ -182,7 +182,7 @@ input[type='submit'],button,.button {
}
.placeholder { margin-bottom: 2em; }
-.disabled { opacity: 0.4; }
+.disabled { opacity: 0.4; cursor: default; }
.nomargin { margin: 0; }
div,section,fieldset {
@@ -317,7 +317,7 @@ table {
&.selected {
background: url("/images/actionsidebar-bullet.png") no-repeat left
center;
font-weight: bold;
- color: $kprimary;
+ color: $kselected;
}
}
h5 {
@@ -346,7 +346,7 @@ table {
padding: 0;
&:hover {
@include no-box-shadow;
- color: $kprimary;
+ color: $kselected;
&[disabled] {
color: #000;
}
@@ -509,7 +509,7 @@ ul.block {
}
}
- /* BUTTONS */
+ /* HEADER BUTTONS */
input[type='submit'],button,.button {
font-family: $screenfont;
font-weight: bold;
@@ -616,7 +616,7 @@ nav {
padding: 0;
color: #888;
background-color: #ddd;
- background: -moz-linear-gradient(top, #fff, #ddd 1px, #ddd 70%,
lighten($strokecl, 10%));
+ background: -moz-linear-gradient(top, #fff, #ddd 2px, #ddd 70%,
lighten($strokecl, 10%));
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eee),
to(lighten($strokecl,10%)), color-stop(.01, #ddd), color-stop(.7,#ddd));
border: 1px solid $strokecl;
&.selected {
@@ -625,15 +625,17 @@ nav {
border-bottom: none;
&>a {
color: $tabon;
+ @include no-text-shadow();
}
}
&>a {
display: block;
- padding: 9px 18px;
+ padding: 9px 18px;
text-decoration: none;
color: $taboff;
+ @include text-shadow(0,1px,0,#fff);
&:hover {
- color: lighten($kprimary,30%);
+ color: lighten($kselected,10%);
}
}
}
@@ -641,35 +643,35 @@ nav {
}
&.subnav { /* subnavigation */
position: relative;
- background: #fff url(/images/shadow.png) repeat-x 0 bottom;
- font-family: $screenfont;
- border-left: 1px solid $strokecl;
- border-right: 1px solid $strokecl;
- width: 958px; /* due to border */
- margin-bottom: 10px;
+ background: transparent url(/images/subnav-shadow.png) repeat-x 0 bottom;
+ font-family: $headlinefont;
+ font-size: 115%;
+ padding-bottom: 9px;
&>ul {
display: block;
margin: 0;
li {
display: inline-block;
- margin: 4px 4px 0 4px;
- padding: 0 6px 12px 0;
+ margin: 0;
+ padding: 0;
a {
cursor: pointer;
text-transform: none;
+ text-decoration: none;
+ @include text-shadow(0,1px,0,#fff);
display: block;
margin: 0;
- padding: 4px 12px;
- color: #333;
+ padding: 8px 16px 6px;
+ color: $taboff;
&.selected {
- background-color: #EEEEEE;
- @include border-radius(2em);
color: $tabon;
- @include text-shadow(0,1px,0,#fff);
+ font-weight: bold;
+ border-bottom: 3px solid $kselected;
+ padding-bottom: 3px;
+ }
+ &:hover {
+ color: lighten($kselected,10%);
}
- }
- &.selected {
- background: url(/images/selected-subnav.png) no-repeat center bottom;
}
}
}
@@ -685,7 +687,7 @@ nav {
&>ul {
display: inline-block;
height: 3.5em;
- background-color: lighten($kprimary, 65%);
+ background-color: lighten($kselected, 65%);
@include border-radius(5px);
li {
display: block;
@@ -700,7 +702,7 @@ nav {
display: block;
padding: 6px 12px; margin-right: 10px;
&.selected {
- background-color: $kprimary;
+ background-color: $kselected;
@include border-radius(5px);
color: #FFF;
}
@@ -755,6 +757,7 @@ nav {
label {
text-align: right;
font-weight: bold;
+ color: $labelfg;
&.header {
text-align: left;
font-weight: normal;
@@ -994,7 +997,7 @@ a.iconbutton {
}
.outlined {
- outline: 2px solid #3465A4;
+ outline: 2px solid $kselected;
}
.remove_item {
diff --git a/src/app/stylesheets/screen.scss b/src/app/stylesheets/screen.scss
index 7c4a947..cd2f95c 100644
--- a/src/app/stylesheets/screen.scss
+++ b/src/app/stylesheets/screen.scss
@@ -8,12 +8,11 @@ body {
}
#main {
- ul {
+ ul {
margin: 0;
padding: 0;
li {
list-style-type: none;
- padding: 2px;
}
}
.actions {
@@ -94,9 +93,6 @@ body {
}
fieldset {
- label {
- font-weight: bold;
- }
div {
padding: 4px 0;
}
@@ -112,9 +108,9 @@ fieldset {
font-weight: bold;
font-size: 115%;
color: #FFF;
- background-color: #3465A4;
+ background-color: $kselected;
word-wrap: break-word;
- outline: 2px solid #3465A4;
+ outline: 2px solid $kselected;
padding: 5px;
}
}
@@ -228,11 +224,11 @@ fieldset {
height: 17px;
font-size: 90%;
&.active {
- background-color: $listhover;
+ background-color: $kselected;
color: #FFF;
.arrow-right {
border-bottom: 15px solid transparent;
- border-left: 15px solid $listhover;
+ border-left: 15px solid $kselected;
border-top: 15px solid transparent;
float: right;
height: 0;
@@ -248,10 +244,10 @@ fieldset {
color: #FFF;
}
&:hover {
- background-color:lighten($listhover, 10%);
+ background-color: $listhover;
color: #FFF;
.arrow-right {
- @include opacity(.3)
+ border-left: 15px solid $listhover;
}
}
@@ -286,7 +282,6 @@ fieldset {
margin-top:0;
position:relative;
left:0;
- @include box-shadow(3px, 4px, 5px, rgba(0, 0, 0, 0.2));
@include opacity(0);
overflow-x: hidden;
overflow-y: auto;
@@ -296,34 +291,19 @@ fieldset {
border-top: 1px solid #D1D1D2;
z-index: 0;
top: 0;
- table {
- width: 96%;
- }
- label {
- font-weight: bold;
- }
+
.subnav {
border: 0;
- background: transparent;
- width: 96%;
- height: 2.7em;
- @include border-radius(16px);
+ width: inherit;
+ background: transparent url(/images/3rd-level-bg.png) no-repeat bottom center;
+ background-size: 100% 29px;
+ margin-bottom: 10px;
&>ul {
li {
background: none;
&.selected {
background: none;
}
- a {
- &.selected {
- @include no-text-shadow;
- background: none $listhover;
- color: #FFF;
- }
- }
- &.selected {
- background: none transparent;
- }
}
}
}
@@ -501,8 +481,7 @@ $errata_color: #700;
color: #000;
text-decoration: none;
padding: 8px 0 8px 55px;
- background: #E9E9E6; /* fallback color */
- background: #E9E9E6;
+ background: $breadcrumbbg; /* fallback color */
position: relative;
display: block;
float: left;
@@ -513,7 +492,7 @@ $errata_color: #700;
height: 0;
border-top: 50px solid transparent; /* Go big on the size, and let
overflow hide */
border-bottom: 50px solid transparent;
- border-left: 30px solid #E9E9E6;
+ border-left: 30px solid $breadcrumbbg;
position: absolute;
top: 50%;
margin-top: -50px;
@@ -543,33 +522,36 @@ $errata_color: #700;
@include border-left-radius(5px);
}
.breadcrumb li:nth-child(2) a {
- background: #E9E9E6;
- &:after { border-left-color: #E9E9E6; }
+ background: $breadcrumbbg;
+ &:after { border-left-color: $breadcrumbbg; }
}
.breadcrumb li:last-child a {
padding-right: 30px;
@include border-right-radius(5px);
&:hover {
color: #FFF;
- background: #7DA6D3 !important;
+ background: $listhover !important;
}
&:after {
border: 0;
&:hover {
- border-left-color: #7DA6D3 !important;
+ border-left-color: $listhover !important;
}
}
}
.breadcrumb li a:hover {
- background: #7DA6D3; color: #FFF; @include text-shadow(2px ,2px,2px,rgba(0,0,0,0.6));
+ background: $listhover !important; color: #FFF; @include text-shadow(2px
,2px,2px,rgba(0,0,0,0.6));
&:after {
- border-left-color: #7DA6D3 !important;
+ border-left-color: $listhover !important;
}
}
.breadcrumb li a.active {
- background: #7DA6D3; color: white;
+ background: $kselected; color: white;
+ &:hover:after {
+ border-left-color: $listhover !important;
+ }
&:after {
- border-left-color: #7DA6D3 !important;
+ border-left-color: $kselected !important;
}
}
/* end content locker custom css */
@@ -719,7 +701,7 @@ $errata_color: #700;
#unread_notices {
@include text-shadow(0,1px,1px, #000);
@include border-radius(3em);
- background-color: lighten($kprimary, 35%);
+ background-color: darken($kprimary,50%);
margin: 0.3em;
padding: 0.2em 0.7em;
width: auto;
diff --git a/src/public/images/3rd-level-bg.png b/src/public/images/3rd-level-bg.png
new file mode 100644
index 0000000000000000000000000000000000000000..c024df4f3ad862eb80fbfc45534883df19fe54cc
GIT binary patch
literal 572
zcmV-C0>k}@P)<h;3K|Lk000e1NJLTq006B30012b1^@s6*k$ZC00004b3#c}2nYxW
zd<bNS00009a7bBm000fw000fw0YWI7cmMzZ8FWQhbW?9;ba!ELWdL_~cP?peYja~^
zaAhuUa%Y?FJQ@H10l7&;K~#90?VM3+!!Qs;M~<QW=%Ib9eiV9=<{D{A-Krms!I4+e
zN|7D5nFqr1?kFTM46+j9y!Rl)65YMu03oH&w8R`VEing8OU&W!yq-KZRi^+s)3q=q
zjs4iv9#2KraeF|_A*EnRGH#_Mw$Y}mMz_+0M!I#opfM)R`@cyUu}RNG<{`0O>ovqS
zG2@lgvs&(Hi8*pfTauP7w8S==<kY5Xv^JYZYb?zkxON?}PtKrC?qjCC^}couu}jKu
zCFacbxThuNkdn3}AzNyRZDMJuO;z>0ABMqUGEg`Wsn_;Wbz&R8(*OW387G#GTkD8z
zN>Z~nZKtI5-oF5N0`R;TrT1a2q|be|ea-+rgE7}mLhl6NE71#I<Eq!cy}$1Cxd>@P
ze>{Gi0eoX}@<BN|0KHH<T<TrWlWOzeHo-nW0LIHznvX$U(vE^&>i?!5mSXePI%1!z
z2PFs(Ps+Ng)-Q^{WFqN^!Y!_|E<7$vU2_^@oA3ckGMqFo)dE<jUFzJnbuF9|+el`V
zt|eM=4Zp@Et=R2rT<s5DVr-=)wvm3JRjXTR9RC)HSc3=q#2kOTtKU(6?k+n30000<
KMNUMnLSTZN5d4_{
literal 0
HcmV?d00001
diff --git a/src/public/images/selected-subnav.png
b/src/public/images/selected-subnav.png
deleted file mode 100644
index fef95cb6e4e9cd16cd8326c68ed1a9b9f012cfa6..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001
literal 428
zcmV;d0aN~oP)<h;3K|Lk000e1NJLTq000>P000UI1^@s6L96vv0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBUzPDw;TRCwBA{Qv(y0}yBdu?++D!FM2D
z$pT_6T)2?I!NI{zPEO9Bk&%&w8m9mJ`Sbb7lP4$Lzki>B5$Y3=MWw>R!mYNpwyga8
z{1jPm<Hik!vuDp<|MTZh2#|XXZVA*PV^&ty<z{APswyff<hY*U=+UDLj~_pt0_2uK
zgNp&h5~xKyKx(prf<l6&r6mI!8yis;Jb(TiWWk58U%$o!xtoyXFf2i`ES#5@cQ!Ei
zctu4;aT@;b-#><n7cVkgx^!tDkQ)cYPtn!jv;=CAA}}E=)7RIx(9_dn0J2f!zkK<^
zaPZ*4-*4W$X#{dxahZeH5~xMYK&nn$T)f84&W?$Tiwi7%_wHQ=VCs4J`}glKAomnL
zGYDFOWSKoMewLe?n@c`>_6%gnVxVvq$U}tm5^V|8B2e0%2E;q!<Kq{@@)#ii5MTf}
WBaa4;tV}-u0000<MNUMnLSTYY+`dKt
diff --git a/src/public/images/shadow.png b/src/public/images/shadow.png
deleted file mode 100644
index 6b6f7af0a9dbf19d47748c00e587be04c9a3df82..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001
literal 180
zcmeAS@N?(olHy`uVBq!ia0vp^tU%1k!3HFMt$j8RNU;<<d4_NRK@CSr2S~EOBeEE%
z{yGRVI%&+V018T$xJHx&=ckpFCl;kLl$V$5W#(lUCnpx9>g5-u&wghk1yp3{>Eal|
zF*Etj*7Do+Y$gXz95|rRtaswjfde0ApK9vi;o&(W(e(d+@{W#1PUn`!Mn;Ai$GE)t
TmnUxrYG&|s^>bP0l+XkK#KSo%
diff --git a/src/public/images/subnav-bar.png b/src/public/images/subnav-bar.png
deleted file mode 100644
index 58c68b4942bbea7046ca63a6cf9436ec492928b4..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001
literal 347
zcmeAS@N?(olHy`uVBq!ia0y~yU_Jn3%W*IP$()P_d_YRF#5JNMI6tkVJh3R1!7(L2
zDOJHUH!(dmC^a#qvhZZ84N%cvPZ!6Kid%2)I0`i@2(UOT{Nz8+?PC!0a~Y%ROU~c9
z&v>m7oSs{J?)BQJY;pdb@1q5E@=sq?DhaJ{d656__2&A+5{LJ)Ff{DH7Ik;G9Rov4
zS;f13*$fO08ST&40i8ENcmX5B0-*(43xHxTwiH;na4;||Eba&pWnfTP-pb6t5ENy>
zz_7r9o1KB-%8f=ghK4D!84L_73OfXVa(seJ3=X|u0hSC^28ITwhHcEe3=E347Z?}<
z5_)8TnmB+=1qWt^1_q$SdG?H8pm_=<%L-Ni!{SNLMxewL!!n?1WuO`dRfp_{Kw~cO
eosVZ^V~}7m)%q~&$|PVwFnGH9xvX<aXaWE_#BEpr
diff --git a/src/public/images/subnav-shadow.png b/src/public/images/subnav-shadow.png
new file mode 100644
index 0000000000000000000000000000000000000000..ad85ebf7da6cba8001eba3556367798e810be077
GIT binary patch
literal 217
zcmeAS@N?(olHy`uVBq!ia0vp^tUxTw!3HFgUM&*_QY^(zo*^7SP{WbZ0pxQQctjQh
z)n5l;MkkHg6+l7B64!{5;QX|b^2DN4hVt@qz0ADq;^f4FRK5J7^x5xhq=1UTJY5_^
zG$tnh`TyUZ*(%|Xz`~dbf?a_O+-8nzZf#tp5?9c0HYX!Pz)d_QB_ZL#A%Q>rs&)}&
z?{D{IUc9@zeA335ntf+I_n!nyCmeg`$D^LeE5OjsETW*;ZDs(pfx*+&&t;ucLK6TT
CUqv4P
literal 0
HcmV?d00001
--
1.7.4.4
5:58 a.m.
New subject: [PATCH 3/4] Fix misdefined local lookup.
From: Jakub Steiner <jimmac(a)gmail.com>
- fix local lookup
- reverted uppercasing h2. Makes everything up your face too much.
---
src/app/stylesheets/_liberation.scss | 8 ++++----
src/app/stylesheets/_text.scss | 2 +-
2 files changed, 5 insertions(+), 5 deletions(-)
diff --git a/src/app/stylesheets/_liberation.scss b/src/app/stylesheets/_liberation.scss
index a4461cd..cfa7ed8 100644
--- a/src/app/stylesheets/_liberation.scss
+++ b/src/app/stylesheets/_liberation.scss
@@ -1,6 +1,6 @@
@font-face {
font-family: 'Liberation Sans';
- src: local('Liberation Sans'), local('LiberationSans'),
local('Liberation Sans Regular'), local('LiberationSansRegular'),
+ src: local('Liberation Sans'), local('LiberationSans'),
local('Liberation-Sans'),
url('/fonts/LiberationSans-Regular-webfont.eot?#iefix')
format('eot'),
url('/fonts/LiberationSans-Regular-webfont.woff')
format('woff'),
url('/fonts/LiberationSans-Regular-webfont.ttf')
format('truetype'),
@@ -12,7 +12,7 @@
@font-face {
font-family: 'Liberation Sans';
- src: local('Liberation Sans Italic'), local('LiberationSansItalic'),
+ src: local('Liberation Sans Italic'), local('LiberationSansItalic'),
local('Liberation-Sans-Italic'),
url('/fonts/LiberationSans-Italic-webfont.woff')
format('woff'),
url('/fonts/LiberationSans-Italic-webfont.ttf')
format('truetype'),
url('/fonts/LiberationSans-Italic-webfont.svg#webfont8TmwkzPJ')
format('svg');
@@ -22,7 +22,7 @@
@font-face {
font-family: 'Liberation Sans';
- src: local('Liberation Sans Bold'), local('LiberationSansBold'),
+ src: local('Liberation Sans Bold'), local('LiberationSansBold'),
local('Liberation-Sans-Bold'),
url('/fonts/LiberationSans-Bold-webfont.woff') format('woff'),
url('/fonts/LiberationSans-Bold-webfont.ttf')
format('truetype'),
url('/fonts/LiberationSans-Bold-webfont.svg#webfontHyWb8e07')
format('svg');
@@ -32,7 +32,7 @@
@font-face {
font-family: 'Liberation Sans';
- src: local('Liberation Sans Bold Italic'),
local('LiberationSansBoldItalic'),
+ src: local('Liberation Sans Bold Italic'),
local('LiberationSansBoldItalic'), local('Liberation-Sans-Bold-Italic'),
url('/fonts/LiberationSans-BoldItalic-webfont.woff')
format('woff'),
url('/fonts/LiberationSans-BoldItalic-webfont.ttf')
format('truetype'),
url('/fonts/LiberationSans-BoldItalic-webfont.svg#webfont8uGO27Bu')
format('svg');
diff --git a/src/app/stylesheets/_text.scss b/src/app/stylesheets/_text.scss
index dbcfd04..d48cc06 100644
--- a/src/app/stylesheets/_text.scss
+++ b/src/app/stylesheets/_text.scss
@@ -18,7 +18,7 @@ h1 { font-size: 180%;
text-transform: uppercase;
font-weight: bold;
}
-h2 { font-size: 170%; text-transform: uppercase; }
+h2 { font-size: 170%; }
h3 { font-size: 160%; }
h4 { font-size: 150%; }
h5 { font-size: 140%; }
--
1.7.4.4
5:58 a.m.
New subject: [PATCH 4/4] avoid name clash with the breadcrumb widget in the promotions page.
From: Jakub Steiner <jimmac(a)gmail.com>
---
src/app/stylesheets/kalpana.scss | 2 +-
src/app/views/layouts/kalpana.haml | 4 ++--
2 files changed, 3 insertions(+), 3 deletions(-)
diff --git a/src/app/stylesheets/kalpana.scss b/src/app/stylesheets/kalpana.scss
index 9a40e8c..54d9a3b 100644
--- a/src/app/stylesheets/kalpana.scss
+++ b/src/app/stylesheets/kalpana.scss
@@ -736,7 +736,7 @@ nav {
}
}
-#content {
+#maincontent {
background: transparent url(/images/center-background.png) no-repeat center top;
overflow: hidden;
min-height: 200px;
diff --git a/src/app/views/layouts/kalpana.haml b/src/app/views/layouts/kalpana.haml
index 2dbf53e..93582fd 100644
--- a/src/app/views/layouts/kalpana.haml
+++ b/src/app/views/layouts/kalpana.haml
@@ -25,14 +25,14 @@
%header.container_16
= render :partial => '/layouts/header'
- if not current_user
- #content.container_16
+ #maincontent.container_16
#formwindow
= yield
- else
#subheader
%nav.container_16.tab_nav
= render_navigation(:expand_all => true, :level => 1)
- #content
+ #maincontent
%nav.subnav.container_16
= render_navigation(:expand_all => true, :level => 2)
.inner.container_16
--
1.7.4.4
4:01 p.m.
On 05/24/2011 04:57 AM, Jakub Steiner wrote:
Howdy!
Here's the initial patchset to clean up the look of the navigation. The purpose was
to get rid of various misalignments, missing separators for the tabs and generally stop
relying on fixed size definitions.
Second patch implements a more fitting styling we iterated on within the UX team for the
2nd and 3rd level navigation. It nicely separates the content from the navigation, keeps
the two levels in relation to each other visually.
3rd and 4th patch are minor fixes.
[PATCH 1/4] Refactor navigation.
[PATCH 2/4] More fitting subnav.
[PATCH 3/4] Fix misdefined local lookup.
[PATCH 4/4] avoid name clash with the breadcrumb widget in the
applies cleanly on 50d7549a38da3c9a3859c8fad29da2325d2469db
_______________________________________________
katello mailing list
katello(a)lists.fedorahosted.org
https://fedorahosted.org/mailman/listinfo/katello
$ git log -n 5
commit 55d19cb773f0f904a97e57e73c41189396ceaa95
Author: Jason E. Rist <jrist(a)redhat.com>
Date: Tue May 24 14:57:05 2011 -0600
Fix for search box on tupane in new navigation refactor.
commit 340ed43bf1274937df7746adc97cc5d4db582b73
Author: Jakub Steiner <jsteiner(a)redhat.com>
Date: Tue May 24 22:02:33 2011 +0200
make subnav work in ff3.6
Signed-off-by: Jason E. Rist <jrist(a)redhat.com>
commit ce4f26682ff4c6589441bee28ac92cd6585a7f12
Author: Jakub Steiner <jsteiner(a)redhat.com>
Date: Tue May 24 16:23:20 2011 +0200
Set margins as margin. Avoids mispositioned loupe icon.
Signed-off-by: Jason E. Rist <jrist(a)redhat.com>
commit f310aeabf0d5db4076948ef6279e1b2c21f66ce0
Author: Jakub Steiner <jimmac(a)gmail.com>
Date: Mon May 23 15:32:03 2011 +0200
avoid name clash with the breadcrumb widget in the promotions page.
Signed-off-by: Jason E. Rist <jrist(a)redhat.com>
commit 0f771d824283ab67e3bdab6a45834f822a154824
Author: Jakub Steiner <jimmac(a)gmail.com>
Date: Fri May 20 15:13:45 2011 +0200
Fix misdefined local lookup.
- fix local lookup
- reverted uppercasing h2. Makes everything up your face too much.
Signed-off-by: Jason E. Rist <jrist(a)redhat.com>
jrist@jrist:/workspace/katello{master}$ git log -n 6
commit 55d19cb773f0f904a97e57e73c41189396ceaa95
Author: Jason E. Rist <jrist(a)redhat.com>
Date: Tue May 24 14:57:05 2011 -0600
Fix for search box on tupane in new navigation refactor.
commit 340ed43bf1274937df7746adc97cc5d4db582b73
Author: Jakub Steiner <jsteiner(a)redhat.com>
Date: Tue May 24 22:02:33 2011 +0200
make subnav work in ff3.6
Signed-off-by: Jason E. Rist <jrist(a)redhat.com>
commit ce4f26682ff4c6589441bee28ac92cd6585a7f12
Author: Jakub Steiner <jsteiner(a)redhat.com>
Date: Tue May 24 16:23:20 2011 +0200
Set margins as margin. Avoids mispositioned loupe icon.
Signed-off-by: Jason E. Rist <jrist(a)redhat.com>
commit f310aeabf0d5db4076948ef6279e1b2c21f66ce0
Author: Jakub Steiner <jimmac(a)gmail.com>
Date: Mon May 23 15:32:03 2011 +0200
avoid name clash with the breadcrumb widget in the promotions page.
Signed-off-by: Jason E. Rist <jrist(a)redhat.com>
commit 0f771d824283ab67e3bdab6a45834f822a154824
Author: Jakub Steiner <jimmac(a)gmail.com>
Date: Fri May 20 15:13:45 2011 +0200
Fix misdefined local lookup.
- fix local lookup
- reverted uppercasing h2. Makes everything up your face too much.
Signed-off-by: Jason E. Rist <jrist(a)redhat.com>
commit 0f54d883c9d7050457dfe76501d6cc0696e289f5
Author: Jakub Steiner <jimmac(a)gmail.com>
Date: Wed May 18 13:47:09 2011 +0200
More fitting subnav.
- + small tweaks to panel and selected block arrow.
- nicer separation of the 3rd level navigation.
Unify all the shades of blue. Derived from the product color - #b4d8dd
- selected blocks
- breadcrumbs
- notifications
- outline borders
- also toned down labels, as they get more attention than the value
(or everything else for that matter).
Signed-off-by: Jason E. Rist <jrist(a)redhat.com>
--
Jason E. Rist
Senior Software Engineer
Systems Management and Cloud Enablement
Red Hat, Inc.
+1.919.754.4048
Freenode: jrist
4727
days inactive
4727
days old
katello@lists.fedorahosted.org
5 comments
2 participants
participants (2)
-
Jakub Steiner -
Jason Rist