From 136057a09eaeee78f3cbf750124f72b3dde960d4 Mon Sep 17 00:00:00 2001 From: simon Date: Sun, 12 Mar 2017 19:26:26 +0000 Subject: [PATCH 1/4] #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) From 506898e76102bb307a8523dcb2094939e92ed337 Mon Sep 17 00:00:00 2001 From: Simon Brooke Date: Mon, 13 Mar 2017 10:46:27 +0000 Subject: [PATCH 2/4] #18: Experimentally added Bootstrap It's what all the cool kids are using. --- .gitignore | 1 + project.clj | 2 +- resources/templates/base.html | 4 ++-- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/.gitignore b/.gitignore index 3d808a9..494087f 100644 --- a/.gitignore +++ b/.gitignore @@ -15,3 +15,4 @@ pom.xml.asc .lein-env .nrepl-port smeagol.log* +/node_modules/ \ No newline at end of file diff --git a/project.clj b/project.clj index 5b3236a..a5a784c 100644 --- a/project.clj +++ b/project.clj @@ -32,7 +32,7 @@ [lein-ancient "0.5.5" :exclusions [org.clojure/clojure org.clojure/data.xml]] [lein-marginalia "0.7.1" :exclusions [org.clojure/clojure]] [io.sarnowski/lein-docker "1.1.0"]] - :bower-dependencies [[simplemde "1.11.2"]] + :bower-dependencies [[simplemde "1.11.2"]["bootstrap" "3.3.7"]] :docker {:image-name "simonbrooke/smeagol" :dockerfile "Dockerfile"} :ring {:handler smeagol.handler/app diff --git a/resources/templates/base.html b/resources/templates/base.html index eacb5a1..23482b5 100644 --- a/resources/templates/base.html +++ b/resources/templates/base.html @@ -19,10 +19,10 @@
  • {{config.edit-users-link}}
    • {% endif %} {% if user %} -
  • - {{config.logout-link}}
  • {{config.change-pass-link}}
  • {{config.logged-in-as}} {{user}}
    • +
  • + {{config.logout-link}}
    • {% else %}
  • {{config.login-link}}
    • From a6f748b49fe0708beed0f772c4ea0a5da2563268 Mon Sep 17 00:00:00 2001 From: simon Date: Mon, 13 Mar 2017 11:29:44 +0000 Subject: [PATCH 3/4] That's bootstrap integrated, Although I'm not actually using it yet. But one thing is clear: what actually made the difference was setting the initial-scale on the viewport. So I may not need bootstrap (although it would still be good to learn it) --- resources/templates/base.html | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/resources/templates/base.html b/resources/templates/base.html index 23482b5..146e193 100644 --- a/resources/templates/base.html +++ b/resources/templates/base.html @@ -3,8 +3,13 @@ {{config.site-title}}: {{title}} + + + + + {% block extra-headers %} {% endblock %} From 77a18e20a5372f5b8be935fc57033b96e7950d60 Mon Sep 17 00:00:00 2001 From: Simon Brooke Date: Mon, 13 Mar 2017 20:35:13 +0000 Subject: [PATCH 4/4] #18: Very satisfactory! Looking good at all scales, and in the end I didn't use bootstrap (although it would still be a good thing to learn it). --- .gitignore | 3 +- project.clj | 2 +- resources/public/content/stylesheet.css | 73 +++++++++++++++--------- resources/public/img/three-lines.png | Bin 629 -> 665 bytes resources/templates/base.html | 27 ++++----- 5 files changed, 62 insertions(+), 43 deletions(-) diff --git a/.gitignore b/.gitignore index 494087f..41eb940 100644 --- a/.gitignore +++ b/.gitignore @@ -15,4 +15,5 @@ pom.xml.asc .lein-env .nrepl-port smeagol.log* -/node_modules/ \ No newline at end of file +/node_modules/ +.DS_Store diff --git a/project.clj b/project.clj index a5a784c..5b3236a 100644 --- a/project.clj +++ b/project.clj @@ -32,7 +32,7 @@ [lein-ancient "0.5.5" :exclusions [org.clojure/clojure org.clojure/data.xml]] [lein-marginalia "0.7.1" :exclusions [org.clojure/clojure]] [io.sarnowski/lein-docker "1.1.0"]] - :bower-dependencies [[simplemde "1.11.2"]["bootstrap" "3.3.7"]] + :bower-dependencies [[simplemde "1.11.2"]] :docker {:image-name "simonbrooke/smeagol" :dockerfile "Dockerfile"} :ring {:handler smeagol.handler/app diff --git a/resources/public/content/stylesheet.css b/resources/public/content/stylesheet.css index a99315b..a9d64f9 100644 --- a/resources/public/content/stylesheet.css +++ b/resources/public/content/stylesheet.css @@ -82,6 +82,12 @@ header h1 { margin-top: 0; } +img { + border: 0; + padding: 0; + vertical-align: middle; +} + input { background-color: white; } @@ -302,7 +308,13 @@ th { /* 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 */ + h1 { + /* I wouldn't normally use a px value, but the menu icon is 49px wide */ + padding: 0.25em 5%; + padding-left: 100px; + } + + /* content of the current page in the Wiki - editable, provided by users. Within main-container */ #content { border: thin solid silver; width: 80%; @@ -315,39 +327,48 @@ th { padding: 0; position: fixed; z-index: 149; - background:rgba(40,40,40,0.8); - font-size: larger; + color: silver; + background:rgba(40,40,40,0.9); } - #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 { + #nav a { color: white; text-decoration: none; font-weight: bold; - padding: 0.1em 0.75em; - margin: 0; } + + #nav:hover #nav-menu { + 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; + } } /* phones, and, indeed, smaller phones. Adapted to touch; display radically @@ -360,6 +381,7 @@ th { h1 { /* I wouldn't normally use a px value, but the menu icon is 49px wide */ padding: 0.25em 5%; + padding-left: 100px; text-align: right; } @@ -388,7 +410,6 @@ th { z-index: 149; color: silver; background:rgba(40,40,40,0.9); - font-size: 200%; } #nav a { diff --git a/resources/public/img/three-lines.png b/resources/public/img/three-lines.png index a46f20e63b9b700614da045fd6068c4cbfe35dcb..c7895a92c866b05b94aaf76288867ba4b975ac4b 100644 GIT binary patch literal 665 zcmV;K0%rY*P)5qVXb)#3nreN@2qdkeVAb%~4n(mfV01J9bFj zvP*H*(keWNx&S1MW%H&B3b;~F;P-yXlI7ie{yj5qJjU0jr)RHJDiM){LSl@WK@fcB zj^ms-j$?*lXhu<_MDV#>4z_K>DHb^=B5XDrbUGdM`+el|`Ai3&BnjT%-s1D)BVZWd z01(G9hQlFxy`B;dh~pTa9v)x-U};;ZqI9ebic15~05pJ|q*SL5BBH}R|JxP8JwJ!% zx;VA0%$GpV^I#ap5rAb`_;`PhYPAYxn%RE)Qlflu0n;==L`Mhsz7OB`mHPgPNGCxJ zKm*VKGytW=_g&z4JcbYgjAfgNloFon;_cNHjQv0)3`4ZrZFIX`SPFE4wOS3WR_h2r zN{RV=j_Gu&gzbe8hx5R}?^(BgTKjW=PJ$YM2A~13ba_xk=~y`caL#dkeT|=!i4uQ? zDwPTtV;}&=Oo*3Kx$LgjYeZ4>Pl?E+h;Wk2p-?Cw2!aXUKeufgwr#7G0Q5viR{;$` z1JD2z*I`3sFc@Go8i8}3>42q_cyoD)dcD5ud1gYqESF1aHk$-MiL23QP#nkfEeL+F z{|yOr4$uHJ01ZF`Pz}I#yHzIW^ga{^cAJwQ?(R@LJInmWXp$s&cXM-CkuhdM{4SNt zuT`{vFdqNni^by0sb#&AQj$u+o2F^5R;%Yf8=L~J=T(bv00000NkvXXu0mjfHLe^t 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 - - - {% block extra-headers %} {% endblock %} @@ -18,7 +15,7 @@

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

    {{config.when-col-hdr}} {{config.what-col-hdr}}