From 136057a09eaeee78f3cbf750124f72b3dde960d4 Mon Sep 17 00:00:00 2001 From: simon Date: Sun, 12 Mar 2017 19:26:26 +0000 Subject: [PATCH] #18: A lot better, but not there yet Looks fine on desktops. On phones the wiki page looks reasonable, but for some reason I can't yet fathom has a huge right margin; tablets I haven't tackled yet. --- resources/public/content/stylesheet.css | 266 +++++++++++++++++------- resources/public/css/tablet.css | 4 +- resources/public/img/three-lines.png | Bin 0 -> 629 bytes resources/public/img/three-lines.svg | 88 ++++++++ resources/public/img/three-lines.xcf | Bin 0 -> 32471 bytes resources/public/img/threelines.png | Bin 260 -> 0 bytes resources/templates/base.html | 40 ++-- resources/templates/history.html | 2 +- src/smeagol/routes/wiki.clj | 1 + 9 files changed, 313 insertions(+), 88 deletions(-) create mode 100644 resources/public/img/three-lines.png create mode 100644 resources/public/img/three-lines.svg create mode 100644 resources/public/img/three-lines.xcf delete mode 100644 resources/public/img/threelines.png diff --git a/resources/public/content/stylesheet.css b/resources/public/content/stylesheet.css index 41020bb..a99315b 100644 --- a/resources/public/content/stylesheet.css +++ b/resources/public/content/stylesheet.css @@ -82,10 +82,6 @@ header h1 { margin-top: 0; } -header img { - float: right; -} - input { background-color: white; } @@ -115,14 +111,6 @@ label { display: inline-block; } -menu li { - display: inline; -} - -menu li::before { - content: "|| "; -} - table { border: 2px solid black; border-collapse: collapse; @@ -147,58 +135,6 @@ th { ## ids generally in document order */ -/* top-of-page navigation, not editable, provided by Smeagol */ -#nav{ - margin: 0; - padding: 0; - top: 0; - width: 100%; - _position: absolute; - _top: expression(document.documentElement.scrollTop); - z-index: 149; - background:rgba(40,40,40,0.8); -} - -#user { - font-height: 66%; - float: right; - padding: 0.1em 0.75em; - margin: 0; - color: white; -} - -#user a { - color: silver; -} - -/* only needed for fly-out menu effect on tablet and phone stylesheets */ -#nav-icon { - display: none; -} - -#nav-menu { - margin: 0; - padding: 0; -} - -#nav ul li { - padding: 0; - margin: 0; - display: inline; -} - -#nav ul li a { - color: white; - text-decoration: none; - font-weight: bold; - padding: 0.1em 0.75em; - margin: 0; -} - -#nav ul li.active a { background: silver;} -li.nav-item a:hover { background: rgb( 240, 240, 240) } -li.nav-item a:active { background: gray; color: white; } - /* Overall container div, holds all content of page. Yes, I know it shouldn't have fixed width */ #main-container{ } @@ -211,14 +147,6 @@ li.nav-item a:active { background: gray; color: white; } float: left; } -/* content of the current in the Wiki - editable, provided by users. Within main-container */ -#content { - border: thin solid silver; - width: 80%; - float: right; - padding-bottom: 5em; -} - /* cookies information box, fixed, in right margin, just above footer */ #cookies { width: 30%; @@ -312,3 +240,197 @@ li.nav-item a:active { background: gray; color: white; } margin: 0; } +/* desktops and laptops, primarily. Adapted to mouse; targets may be small */ +@media all and (min-device-width: 1025px) { + /* content of the current page in the Wiki - editable, provided by users. Within main-container */ + #content { + border: thin solid silver; + width: 80%; + float: right; + padding-bottom: 5em; + } + + #phone-side-bar, #phone-credits { + display: none; + } + + /* top-of-page navigation, not editable, provided by Smeagol */ + #nav{ + margin: 0; + padding: 0; + top: 0; + width: 100%; + _position: absolute; + _top: expression(document.documentElement.scrollTop); + z-index: 149; + background:rgba(40,40,40,0.8); + } + + /* only needed for fly-out menu effect on tablet and phone stylesheets */ + #nav-icon { + display: none; + } + + #nav-menu { + margin: 0; + padding: 0; + } + + #nav menu li { + padding: 0; + margin: 0; + display: inline; + } + + #nav menu li a { + color: white; + text-decoration: none; + font-weight: bold; + padding: 0.1em 0.75em; + margin: 0; + } + + #nav menu li.active a { background: gray;} + li.nav-item a:hover { background: rgb( 240, 240, 240) } + li.nav-item a:active { background: gray; color: white; } + + #nav menu li#user { + padding: 0 1em; + float: right; + } +} + +/* tablets, primarily. Adapted to touch; targets are larger */ +@media all and (min-device-width: 769px) and (max-device-width: 1024px) { +/* content of the current in the Wiki - editable, provided by users. Within main-container */ + #content { + border: thin solid silver; + width: 80%; + float: right; + padding-bottom: 5em; + } + + #nav{ + margin: 0; + padding: 0; + position: fixed; + z-index: 149; + background:rgba(40,40,40,0.8); + font-size: larger; + } + + #nav:hover #nav-menu { + display: inline; + } + + #nav-icon { + padding: 0.25em; + float: left; + } + + #nav-menu { + display: none; + } + + #nav ul li { + padding: 0; + margin: 0; + display: inline; + } + + #nav ul li a { + color: white; + text-decoration: none; + font-weight: bold; + padding: 0.1em 0.75em; + margin: 0; + } + #nav ul li.active a { background: silver;} + li.nav-item a:hover { background: rgb( 240, 240, 240) } + li.nav-item a:active { background: gray; color: white; } +} + +/* phones, and, indeed, smaller phones. Adapted to touch; display radically + * decluttered */ +@media all and (max-device-width: 768px) { + footer { + display: none; + } + + h1 { + /* I wouldn't normally use a px value, but the menu icon is 49px wide */ + padding: 0.25em 5%; + text-align: right; + } + + /* content of the current in the Wiki - editable, provided by users. Within main-container */ + #content { + border: thin solid silver; + width: 100%; + padding-bottom: 2em; + } + + #main-container { + width: 100%; + margin: 0; + padding: 0; + } + + + #cookies { + display: none; + } + + #nav{ + margin: 0; + padding: 0; + position: fixed; + z-index: 149; + color: silver; + background:rgba(40,40,40,0.9); + font-size: 200%; + } + + #nav a { + color: white; + text-decoration: none; + font-weight: bold; + } + + #nav:hover #nav-menu, #nav:hover #phone-side-bar { + display: block; + list-style-type: none; + width: 100%; + } + + #nav-icon { + padding: 0; + } + + #nav-menu, #phone-side-bar { + display: none; + } + + #nav menu li { + padding: 0.5em; + margin: 0.5 em; + font-size: 150%; + } + + #nav menu li a { + } + + #nav ul li.active a { background: silver;} + li.nav-item a:hover { background: rgb( 240, 240, 240) } + li.nav-item a:active { background: gray; color: white; } + + #nav menu #user { + text-decoration: none; + font-weight: bold; + margin: 0; + } + + #side-bar { + display: none; + } +} diff --git a/resources/public/css/tablet.css b/resources/public/css/tablet.css index 714c179..78d736a 100644 --- a/resources/public/css/tablet.css +++ b/resources/public/css/tablet.css @@ -42,13 +42,13 @@ body { display: none; } -#nav ul li { +#nav menu li { padding: 0; margin: 0; display: inline; } -#nav ul li a { +#nav menu li a { color: white; text-decoration: none; font-weight: bold; diff --git a/resources/public/img/three-lines.png b/resources/public/img/three-lines.png new file mode 100644 index 0000000000000000000000000000000000000000..a46f20e63b9b700614da045fd6068c4cbfe35dcb GIT binary patch literal 629 zcmeAS@N?(olHy`uVBq!ia0vp^DM0MQ!3HE}%L?%WDYhhUcNZWH1V5d3*8?fe0*}aI zppNSx%;=;sy8BY;#I{Y?Ddus}H$*NvoxK$idP>!|nNzh8a*_20c>2e-u&?Y{o@IhC9_%SxebqKUQx zgCY`Ic&sTT^r(xC`TX;9?;ot37Q5%>-C9-8#~&kH=NYT|M`lk|>719B=QXKo(F}{- zdkbZ>`;yg;N;x$!ARz$--!nH)N9l<994U4bI5DI8{86AuH+J*!^Q}?Q>%V^d@nieP z+bieATd!YJw)<@Swc`Kh=9sp)&ShY1L7;_GEqCwL-?sg$nXl-FhYb3mp-c0&zrIs^ z?wj6p?~lAv{gK+qJx#mce*b^&o7L}6N6;L>aEN2p)Xmes?!13J!60G#_2A8`F10UK z-h2CYwZxO>SEufqKi5#RU(|Kuuc=3i529(l;5Ff9&M_C8@atPY-?sF!n(O!V^|Ln3 z%2QFR{gy9QmzJI+XW=E~I&qOkQqb#~)WR*h0{eTS?Dh2b+Za8Y`Six`TiT~Teb=p% W{v*%)Xo46h^?17axvX + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + diff --git a/resources/public/img/three-lines.xcf b/resources/public/img/three-lines.xcf new file mode 100644 index 0000000000000000000000000000000000000000..23b8a4276c6aa91a54e7a99ae51da621bc955ef4 GIT binary patch literal 32471 zcmeHQO=v4s6h4`RvG(;(`~iO(eS(R!O}fyxX_)p&pDwge6^aWfO`7IK()QW3kJpX! zK;0-VT!>(KxDcKp8;QCTu?jB4gP}$j;^#yHSndJ>fCAiO z+oImxsQ&=A6DjO=I=#7;N=~PC((5Q9eD0%Ac6UFM3}&}8>Gkk%Xd{)_&TQ`lL)K<` zCly}{MrWed(!`jxKMJF1yh+pA=fT#7XnHMsWi653N(E8)gTCVMp{stKOO zq5^_<6Bx2>(dKsB#)bs{qK;UGftr1;!5(R_M;q*M*kZr6%pRVJ7o9Ns(z@J1TGr&6V0q`TyD9&$m4u1C}-0F9thrR`{oxB%7 zUz3}_`@q-0Z$#%W5QY9Ail9959`Ge_OccdAMV|m(2Hqr^Ef8Hmo%v4y9Mk*{z%Kyy zJr6Dy#(_zqOCJ$EyGr!@9`GUX9f1A6@F4Is@G5XX^x|VgFa1gsM|pe^z`o2Wfug=`r)mvRs$_8QA^U3z`o`5l7StQ^ITj1@Cx@~RUKw1igH1M{X<(jxlsA!)1j z-$iYz>EB2C_@T+IY<7CUMzmzyGDpm4#K>b4p^C!W-t$oN>uAw97Hm)9kpLU=%#9ylR^RT46zJfCMdH$XC-Pm&41pSt*Adlt()dVQu+}RRCv{s-^IfEfZRv;ebxr zjT$P1P4*0DI2atyVBxD1;p>DoeF(CbPg{oYrCv96{2Hn)HL)ki^m0uWrdkMdzG``N z+0yT#Wus#1>O0<+mX@lr8gl`~=nNM+?jwFyeWWn}1qk%B>?4T*JiIae@^nYgA7J^X zbM>pL0d+90cPu2!oyUfes~ZEwTt43KMl0xFTgj1DVR9mztbg>$+Ozb_b~55-s}sdS zA3@-a2-8sx$+AU=&RJWi6dtVSOc0G=wvPcM{oXx~Jf+53@W@lrn6o60zRp=& z=s6y)*;0FImaj7QFZn8sISg&q`ICm-e8j=I&y%Al}zq6E;FT!pkDNdp{uEfz6-3FWJ0Xts>)5==5J*Dg^ zTa3~@SkIY!m6jTSN8&GpXZ0~(NA8c?{qLRW>uPpjR=!yIlBzw)6=OKxO6tXD<*OIU zmuGWr+@SWfa}3g>KW>!fN`|@^Th!^gHA6)^Kfd#%p156gF>aR=yl_yQD;l&ATi{FX zytBLDl5;Rdt7%LMv4WxaV}6YqrcABAWyrce)+bpNWkt>U0yQlgBU3AAydV5e87zLh zEjA5L~c#`DCC7XMsm# zF#`j)FbFd;%$g$s6l5>)^mS#w$1X0+B;@iiOA9D8(bL5-B;xSfn;Ur>6a-oyT0fRs z^GL|&kcI&vM zG%zR%ZQL5>*>e9{pYNLbdz=Ca_bzEZ*ST8b^>U_P&c-t=90LD)Zrs~#r_{2bKVz+- xu!6%Gv5iYbRz6Gafk-RZ`Ds4>{zbl&sjyLACU)wCB%tFMJYD@<);T3K0RR#2UAq7P diff --git a/resources/templates/base.html b/resources/templates/base.html index bc71820..eacb5a1 100644 --- a/resources/templates/base.html +++ b/resources/templates/base.html @@ -3,7 +3,7 @@ {{config.site-title}}: {{title}} - + {% block extra-headers %} {% endblock %} @@ -12,22 +12,36 @@

{{config.site-title}}: {{title}}

{{header|safe}} diff --git a/resources/templates/history.html b/resources/templates/history.html index 72a7749..20f6137 100644 --- a/resources/templates/history.html +++ b/resources/templates/history.html @@ -1,7 +1,7 @@ {% extends "templates/base.html" %} {% block content %}
- +
diff --git a/src/smeagol/routes/wiki.clj b/src/smeagol/routes/wiki.clj index 2e7f1a5..52f7aba 100644 --- a/src/smeagol/routes/wiki.clj +++ b/src/smeagol/routes/wiki.clj @@ -225,6 +225,7 @@ :header (util/local-links (util/md->html "/content/_header.md")) :message (if changed? (:chpass-success layout/config)) :error (cond + (nil? oldpass) nil changed? nil (< (count pass1) 8) (:chpass-too-short layout/config) (not (= pass1 pass2)) (:chpass-bad-match layout/config)
{{config.when-col-hdr}} {{config.what-col-hdr}}