From 6c966ccb9cecdccb7f4432aac3e5ef6f7ab851d6 Mon Sep 17 00:00:00 2001 From: Evarin Date: Sat, 15 Apr 2017 14:22:14 +0200 Subject: [PATCH] =?UTF-8?q?Une=20table=20des=20mati=C3=A8res=20pour=20rend?= =?UTF-8?q?re=20l'affichage=20d'un=20stage=20plus=20consistant?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- avisstage/sass/screen.scss | 46 ++++++- avisstage/static/css/screen.css | 114 ++++++++++++------ avisstage/static/js/toc.min.js | 8 ++ .../templates/avisstage/detail/stage.html | 49 +++++--- 4 files changed, 161 insertions(+), 56 deletions(-) create mode 100644 avisstage/static/js/toc.min.js diff --git a/avisstage/sass/screen.scss b/avisstage/sass/screen.scss index 2558c89..e995fb7 100644 --- a/avisstage/sass/screen.scss +++ b/avisstage/sass/screen.scss @@ -103,7 +103,6 @@ p { } } - // Index .homeh1 { @@ -178,13 +177,13 @@ article.stage { text-shadow: -3px 3px 0 rgba(#000, 0.3); } h3 { - background: desaturate($compl, 40%); + border-bottom: 2px solid desaturate($compl, 40%); margin-left: -25px; margin-top: 30px; padding: 5px; padding-left: 20px; - color: #fff; - text-shadow: -3px 3px 0 rgba(#000, 0.3); + color: #000; + text-shadow: -3px 3px 0 rgba(#000, 0.1); //margin-right: 25px; } section { @@ -193,7 +192,15 @@ article.stage { max-width: 600px; margin: 30px auto; + &:first-child { + margin-top: 0; + h3 { + margin-top: 0; + } + } + &.misc { + padding-top: 0; ul.infos { margin: 0 -3px; @@ -291,3 +298,34 @@ article.stage { } } } + +.article-wrapper { + display: table; + .toc-wrapper, article { + display: table-cell; + vertical-align: top; + } + .toc-wrapper { + max-width: 250px; + width: 25%; + } + .toc { + position: -webkit-sticky; + position: sticky; + top: 0; + a { + color: inherit; + font-weight: normal; + } + .toc-h1 { + + } + .toc-h3 a { + font-weight: 300; + } + .toc-active a { + color: $fond; + } + } + +} diff --git a/avisstage/static/css/screen.css b/avisstage/static/css/screen.css index f075a7e..ab41fd4 100644 --- a/avisstage/static/css/screen.css +++ b/avisstage/static/css/screen.css @@ -165,7 +165,7 @@ header h1 { margin: 0.5em 0; } -/* line 109, ../../sass/screen.scss */ +/* line 108, ../../sass/screen.scss */ .homeh1 { display: flex; justify-content: space-between; @@ -175,33 +175,33 @@ header h1 { border-bottom: 3px solid #000; margin-bottom: 15px; } -/* line 118, ../../sass/screen.scss */ +/* line 117, ../../sass/screen.scss */ .homeh1 > * { display: inline-block; } -/* line 128, ../../sass/screen.scss */ +/* line 127, ../../sass/screen.scss */ .stagelist li { display: table; width: 100%; background: #fff; margin: 12px; } -/* line 135, ../../sass/screen.scss */ +/* line 134, ../../sass/screen.scss */ .stagelist li > *, .stagelist li:before { display: table-cell; vertical-align: middle; padding: 15px; } -/* line 140, ../../sass/screen.scss */ +/* line 139, ../../sass/screen.scss */ .stagelist li a { width: auto; } -/* line 142, ../../sass/screen.scss */ +/* line 141, ../../sass/screen.scss */ .stagelist li a:hover { background: #ccc; } -/* line 146, ../../sass/screen.scss */ +/* line 145, ../../sass/screen.scss */ .stagelist li:before { content: " "; text-align: right; @@ -209,27 +209,27 @@ header h1 { opacity: 0.8; color: #fff; } -/* line 153, ../../sass/screen.scss */ +/* line 152, ../../sass/screen.scss */ .stagelist li.stage-brouillon:before { content: "Brouillon"; background: #C21B26; } -/* line 157, ../../sass/screen.scss */ +/* line 156, ../../sass/screen.scss */ .stagelist li.stage-publie:before { content: "Publié"; background: #27E35F; } -/* line 161, ../../sass/screen.scss */ +/* line 160, ../../sass/screen.scss */ .stagelist li.stage-ajout:before { content: "+"; color: #000; } -/* line 170, ../../sass/screen.scss */ +/* line 169, ../../sass/screen.scss */ article.stage { font-weight: normal; } -/* line 173, ../../sass/screen.scss */ +/* line 172, ../../sass/screen.scss */ article.stage h2 { background: #d8d864; padding: 10px 20px; @@ -237,28 +237,40 @@ article.stage h2 { margin-bottom: 25px; text-shadow: -3px 3px 0 rgba(0, 0, 0, 0.3); } -/* line 180, ../../sass/screen.scss */ +/* line 179, ../../sass/screen.scss */ article.stage h3 { - background: #56917c; + border-bottom: 2px solid #56917c; margin-left: -25px; margin-top: 30px; padding: 5px; padding-left: 20px; - color: #fff; - text-shadow: -3px 3px 0 rgba(0, 0, 0, 0.3); + color: #000; + text-shadow: -3px 3px 0 rgba(0, 0, 0, 0.1); } -/* line 190, ../../sass/screen.scss */ +/* line 189, ../../sass/screen.scss */ article.stage section { background: #eee; padding: 14px; max-width: 600px; margin: 30px auto; } +/* line 195, ../../sass/screen.scss */ +article.stage section:first-child { + margin-top: 0; +} /* line 197, ../../sass/screen.scss */ +article.stage section:first-child h3 { + margin-top: 0; +} +/* line 202, ../../sass/screen.scss */ +article.stage section.misc { + padding-top: 0; +} +/* line 204, ../../sass/screen.scss */ article.stage section.misc ul.infos { margin: 0 -3px; } -/* line 200, ../../sass/screen.scss */ +/* line 207, ../../sass/screen.scss */ article.stage section.misc ul.infos li { display: inline-block; padding: 5px; @@ -268,42 +280,42 @@ article.stage section.misc ul.infos li { font-size: 0.9em; border-radius: 4px; } -/* line 209, ../../sass/screen.scss */ +/* line 216, ../../sass/screen.scss */ article.stage section.misc ul.infos li.thematique { background-color: #28BF8A; } -/* line 212, ../../sass/screen.scss */ +/* line 219, ../../sass/screen.scss */ article.stage section.misc ul.infos li.matiere { background-color: #E80051; } -/* line 219, ../../sass/screen.scss */ +/* line 226, ../../sass/screen.scss */ article.stage section .chapo, article.stage section .avis-texte { margin-bottom: 15px; background: #fff; padding: 20px; } -/* line 224, ../../sass/screen.scss */ +/* line 231, ../../sass/screen.scss */ article.stage section .chapo { font-size: 1.1em; font-weight: 500; font-variant: small-caps; } -/* line 229, ../../sass/screen.scss */ +/* line 236, ../../sass/screen.scss */ article.stage section .avis-texte { border-left: 1px solid #ccc; padding-left: 15px; } -/* line 234, ../../sass/screen.scss */ +/* line 241, ../../sass/screen.scss */ article.stage section .plusmoins { max-width: 600px; margin: 15px auto; } -/* line 238, ../../sass/screen.scss */ +/* line 245, ../../sass/screen.scss */ article.stage section .plusmoins > div { display: table; width: 100%; } -/* line 242, ../../sass/screen.scss */ +/* line 249, ../../sass/screen.scss */ article.stage section .plusmoins > div:before { content: " "; width: 100px; @@ -312,44 +324,78 @@ article.stage section .plusmoins > div:before { text-align: right; padding-right: 12px; } -/* line 251, ../../sass/screen.scss */ +/* line 258, ../../sass/screen.scss */ article.stage section .plusmoins > div > *, article.stage section .plusmoins > div:before { display: table-cell; } -/* line 255, ../../sass/screen.scss */ +/* line 262, ../../sass/screen.scss */ article.stage section .plusmoins > div > div { padding: 15px; color: #fff; } -/* line 258, ../../sass/screen.scss */ +/* line 265, ../../sass/screen.scss */ article.stage section .plusmoins > div > div h4 { font-weight: normal; margin-left: -5px; font-size: 0.9em; opacity: 0.9; } -/* line 264, ../../sass/screen.scss */ +/* line 271, ../../sass/screen.scss */ article.stage section .plusmoins > div > div p { font-weight: bold; margin: 2px; } -/* line 272, ../../sass/screen.scss */ +/* line 279, ../../sass/screen.scss */ article.stage section .plusmoins .plus > div { background: #23cc56; } -/* line 275, ../../sass/screen.scss */ +/* line 282, ../../sass/screen.scss */ article.stage section .plusmoins .plus:before { content: "Les +"; vertical-align: bottom; color: #1b9f43; } -/* line 282, ../../sass/screen.scss */ +/* line 289, ../../sass/screen.scss */ article.stage section .plusmoins .moins > div { background: #af1822; } -/* line 285, ../../sass/screen.scss */ +/* line 292, ../../sass/screen.scss */ article.stage section .plusmoins .moins:before { content: "Les -"; vertical-align: top; color: #88131b; } + +/* line 302, ../../sass/screen.scss */ +.article-wrapper { + display: table; +} +/* line 304, ../../sass/screen.scss */ +.article-wrapper .toc-wrapper, .article-wrapper article { + display: table-cell; + vertical-align: top; +} +/* line 308, ../../sass/screen.scss */ +.article-wrapper .toc-wrapper { + max-width: 250px; + width: 25%; +} +/* line 312, ../../sass/screen.scss */ +.article-wrapper .toc { + position: -webkit-sticky; + position: sticky; + top: 0; +} +/* line 316, ../../sass/screen.scss */ +.article-wrapper .toc a { + color: inherit; + font-weight: normal; +} +/* line 323, ../../sass/screen.scss */ +.article-wrapper .toc .toc-h3 a { + font-weight: 300; +} +/* line 326, ../../sass/screen.scss */ +.article-wrapper .toc .toc-active a { + color: #E80051; +} diff --git a/avisstage/static/js/toc.min.js b/avisstage/static/js/toc.min.js new file mode 100644 index 0000000..8cfde52 --- /dev/null +++ b/avisstage/static/js/toc.min.js @@ -0,0 +1,8 @@ +/*! + * toc - jQuery Table of Contents Plugin + * v0.3.2 + * http://projects.jga.me/toc/ + * copyright Greg Allen 2014 + * MIT License +*/ +!function(a){a.fn.smoothScroller=function(b){b=a.extend({},a.fn.smoothScroller.defaults,b);var c=a(this);return a(b.scrollEl).animate({scrollTop:c.offset().top-a(b.scrollEl).offset().top-b.offset},b.speed,b.ease,function(){var a=c.attr("id");a.length&&(history.pushState?history.pushState(null,null,"#"+a):document.location.hash=a),c.trigger("smoothScrollerComplete")}),this},a.fn.smoothScroller.defaults={speed:400,ease:"swing",scrollEl:"body,html",offset:0},a("body").on("click","[data-smoothscroller]",function(b){b.preventDefault();var c=a(this).attr("href");0===c.indexOf("#")&&a(c).smoothScroller()})}(jQuery),function(a){var b={};a.fn.toc=function(b){var c,d=this,e=a.extend({},jQuery.fn.toc.defaults,b),f=a(e.container),g=a(e.selectors,f),h=[],i=e.activeClass,j=function(b,c){if(e.smoothScrolling&&"function"==typeof e.smoothScrolling){b.preventDefault();var f=a(b.target).attr("href");e.smoothScrolling(f,e,c)}a("li",d).removeClass(i),a(b.target).parent().addClass(i)},k=function(){c&&clearTimeout(c),c=setTimeout(function(){for(var b,c=a(window).scrollTop(),f=Number.MAX_VALUE,g=0,j=0,k=h.length;k>j;j++){var l=Math.abs(h[j]-c);f>l&&(g=j,f=l)}a("li",d).removeClass(i),b=a("li:eq("+g+")",d).addClass(i),e.onHighlight(b)},50)};return e.highlightOnScroll&&(a(window).bind("scroll",k),k()),this.each(function(){var b=a(this),c=a(e.listType);g.each(function(d,f){var g=a(f);h.push(g.offset().top-e.highlightOffset);var i=e.anchorName(d,f,e.prefix);if(f.id!==i){a("").attr("id",i).insertBefore(g)}var l=a("").text(e.headerText(d,f,g)).attr("href","#"+i).bind("click",function(c){a(window).unbind("scroll",k),j(c,function(){a(window).bind("scroll",k)}),b.trigger("selected",a(this).attr("href"))}),m=a("
  • ").addClass(e.itemClass(d,f,g,e.prefix)).append(l);c.append(m)}),b.html(c)})},jQuery.fn.toc.defaults={container:"body",listType:"