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 32f2695b76306c6bd9a93cd3842b330c54989b57 Mon Sep 17 00:00:00 2001 From: simon Date: Sun, 23 Jul 2017 20:20:06 +0100 Subject: [PATCH 4/4] Added cross-scripting field to auth form. --- resources/templates/auth.html | 45 ++++++++++++++++++----------------- 1 file changed, 23 insertions(+), 22 deletions(-) diff --git a/resources/templates/auth.html b/resources/templates/auth.html index ce56af0..87ffbe2 100644 --- a/resources/templates/auth.html +++ b/resources/templates/auth.html @@ -1,27 +1,28 @@ {% extends "templates/base.html" %} {% block content %}
    -
    - - {% if user %} -

    - - -

    - {% else %} -

    - - -

    -

    - - -

    -

    - - -

    - {% endif %} - +
    + {% csrf-field %} + + {% if user %} +

    + + +

    + {% else %} +

    + + +

    +

    + + +

    +

    + + +

    + {% endif %} +
    {% endblock %}
    {{config.when-col-hdr}} {{config.what-col-hdr}}