DGNum/experiENS
6
0
Fork 0
Code Issues 11 Pull requests 1 Projects Releases Packages Wiki Activity Actions

Une table des matières pour rendre l'affichage d'un stage plus consistant

Browse source
This commit is contained in:
Evarin 2017-04-15 14:22:14 +02:00
parent c36141c7c5
commit 6c966ccb9c
4 changed files with 161 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
avisstage/sass/screen.scss
View file

@ -103,7 +103,6 @@ p {
} }
} }
// Index // Index
.homeh1 { .homeh1 {
@ -178,13 +177,13 @@ article.stage {
text-shadow: -3px 3px 0 rgba(#000, 0.3); text-shadow: -3px 3px 0 rgba(#000, 0.3);
} }
h3 { h3 {
background: desaturate($compl, 40%); border-bottom: 2px solid desaturate($compl, 40%);
margin-left: -25px; margin-left: -25px;
margin-top: 30px; margin-top: 30px;
padding: 5px; padding: 5px;
padding-left: 20px; padding-left: 20px;
color: #fff; color: #000;
text-shadow: -3px 3px 0 rgba(#000, 0.3); text-shadow: -3px 3px 0 rgba(#000, 0.1);
//margin-right: 25px; //margin-right: 25px;
} }
section { section {
@ -193,7 +192,15 @@ article.stage {
max-width: 600px; max-width: 600px;
margin: 30px auto; margin: 30px auto;
&:first-child {
margin-top: 0;
h3 {
margin-top: 0;
}
}
&.misc { &.misc {
padding-top: 0;
ul.infos { ul.infos {
margin: 0 -3px; 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;
}
}
}

114
avisstage/static/css/screen.css
View file

@ -165,7 +165,7 @@ header h1 {
margin: 0.5em 0; margin: 0.5em 0;
} }
/* line 109, ../../sass/screen.scss */ /* line 108, ../../sass/screen.scss */
.homeh1 { .homeh1 {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -175,33 +175,33 @@ header h1 {
border-bottom: 3px solid #000; border-bottom: 3px solid #000;
margin-bottom: 15px; margin-bottom: 15px;
} }
/* line 118, ../../sass/screen.scss */ /* line 117, ../../sass/screen.scss */
.homeh1 > * { .homeh1 > * {
display: inline-block; display: inline-block;
} }
/* line 128, ../../sass/screen.scss */ /* line 127, ../../sass/screen.scss */
.stagelist li { .stagelist li {
display: table; display: table;
width: 100%; width: 100%;
background: #fff; background: #fff;
margin: 12px; margin: 12px;
} }
/* line 135, ../../sass/screen.scss */ /* line 134, ../../sass/screen.scss */
.stagelist li > *, .stagelist li:before { .stagelist li > *, .stagelist li:before {
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
padding: 15px; padding: 15px;
} }
/* line 140, ../../sass/screen.scss */ /* line 139, ../../sass/screen.scss */
.stagelist li a { .stagelist li a {
width: auto; width: auto;
} }
/* line 142, ../../sass/screen.scss */ /* line 141, ../../sass/screen.scss */
.stagelist li a:hover { .stagelist li a:hover {
background: #ccc; background: #ccc;
} }
/* line 146, ../../sass/screen.scss */ /* line 145, ../../sass/screen.scss */
.stagelist li:before { .stagelist li:before {
content: "&nbsp"; content: "&nbsp";
text-align: right; text-align: right;
@ -209,27 +209,27 @@ header h1 {
opacity: 0.8; opacity: 0.8;
color: #fff; color: #fff;
} }
/* line 153, ../../sass/screen.scss */ /* line 152, ../../sass/screen.scss */
.stagelist li.stage-brouillon:before { .stagelist li.stage-brouillon:before {
content: "Brouillon"; content: "Brouillon";
background: #C21B26; background: #C21B26;
} }
/* line 157, ../../sass/screen.scss */ /* line 156, ../../sass/screen.scss */
.stagelist li.stage-publie:before { .stagelist li.stage-publie:before {
content: "Publié"; content: "Publié";
background: #27E35F; background: #27E35F;
} }
/* line 161, ../../sass/screen.scss */ /* line 160, ../../sass/screen.scss */
.stagelist li.stage-ajout:before { .stagelist li.stage-ajout:before {
content: "+"; content: "+";
color: #000; color: #000;
} }
/* line 170, ../../sass/screen.scss */ /* line 169, ../../sass/screen.scss */
article.stage { article.stage {
font-weight: normal; font-weight: normal;
} }
/* line 173, ../../sass/screen.scss */ /* line 172, ../../sass/screen.scss */
article.stage h2 { article.stage h2 {
background: #d8d864; background: #d8d864;
padding: 10px 20px; padding: 10px 20px;
@ -237,28 +237,40 @@ article.stage h2 {
margin-bottom: 25px; margin-bottom: 25px;
text-shadow: -3px 3px 0 rgba(0, 0, 0, 0.3); text-shadow: -3px 3px 0 rgba(0, 0, 0, 0.3);
} }
/* line 180, ../../sass/screen.scss */ /* line 179, ../../sass/screen.scss */
article.stage h3 { article.stage h3 {
background: #56917c; border-bottom: 2px solid #56917c;
margin-left: -25px; margin-left: -25px;
margin-top: 30px; margin-top: 30px;
padding: 5px; padding: 5px;
padding-left: 20px; padding-left: 20px;
color: #fff; color: #000;
text-shadow: -3px 3px 0 rgba(0, 0, 0, 0.3); text-shadow: -3px 3px 0 rgba(0, 0, 0, 0.1);
} }
/* line 190, ../../sass/screen.scss */ /* line 189, ../../sass/screen.scss */
article.stage section { article.stage section {
background: #eee; background: #eee;
padding: 14px; padding: 14px;
max-width: 600px; max-width: 600px;
margin: 30px auto; margin: 30px auto;
} }
/* line 195, ../../sass/screen.scss */
article.stage section:first-child {
margin-top: 0;
}
/* line 197, ../../sass/screen.scss */ /* 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 { article.stage section.misc ul.infos {
margin: 0 -3px; margin: 0 -3px;
} }
/* line 200, ../../sass/screen.scss */ /* line 207, ../../sass/screen.scss */
article.stage section.misc ul.infos li { article.stage section.misc ul.infos li {
display: inline-block; display: inline-block;
padding: 5px; padding: 5px;
@ -268,42 +280,42 @@ article.stage section.misc ul.infos li {
font-size: 0.9em; font-size: 0.9em;
border-radius: 4px; border-radius: 4px;
} }
/* line 209, ../../sass/screen.scss */ /* line 216, ../../sass/screen.scss */
article.stage section.misc ul.infos li.thematique { article.stage section.misc ul.infos li.thematique {
background-color: #28BF8A; background-color: #28BF8A;
} }
/* line 212, ../../sass/screen.scss */ /* line 219, ../../sass/screen.scss */
article.stage section.misc ul.infos li.matiere { article.stage section.misc ul.infos li.matiere {
background-color: #E80051; background-color: #E80051;
} }
/* line 219, ../../sass/screen.scss */ /* line 226, ../../sass/screen.scss */
article.stage section .chapo, article.stage section .avis-texte { article.stage section .chapo, article.stage section .avis-texte {
margin-bottom: 15px; margin-bottom: 15px;
background: #fff; background: #fff;
padding: 20px; padding: 20px;
} }
/* line 224, ../../sass/screen.scss */ /* line 231, ../../sass/screen.scss */
article.stage section .chapo { article.stage section .chapo {
font-size: 1.1em; font-size: 1.1em;
font-weight: 500; font-weight: 500;
font-variant: small-caps; font-variant: small-caps;
} }
/* line 229, ../../sass/screen.scss */ /* line 236, ../../sass/screen.scss */
article.stage section .avis-texte { article.stage section .avis-texte {
border-left: 1px solid #ccc; border-left: 1px solid #ccc;
padding-left: 15px; padding-left: 15px;
} }
/* line 234, ../../sass/screen.scss */ /* line 241, ../../sass/screen.scss */
article.stage section .plusmoins { article.stage section .plusmoins {
max-width: 600px; max-width: 600px;
margin: 15px auto; margin: 15px auto;
} }
/* line 238, ../../sass/screen.scss */ /* line 245, ../../sass/screen.scss */
article.stage section .plusmoins > div { article.stage section .plusmoins > div {
display: table; display: table;
width: 100%; width: 100%;
} }
/* line 242, ../../sass/screen.scss */ /* line 249, ../../sass/screen.scss */
article.stage section .plusmoins > div:before { article.stage section .plusmoins > div:before {
content: "&nbsp"; content: "&nbsp";
width: 100px; width: 100px;
@ -312,44 +324,78 @@ article.stage section .plusmoins > div:before {
text-align: right; text-align: right;
padding-right: 12px; padding-right: 12px;
} }
/* line 251, ../../sass/screen.scss */ /* line 258, ../../sass/screen.scss */
article.stage section .plusmoins > div > *, article.stage section .plusmoins > div:before { article.stage section .plusmoins > div > *, article.stage section .plusmoins > div:before {
display: table-cell; display: table-cell;
} }
/* line 255, ../../sass/screen.scss */ /* line 262, ../../sass/screen.scss */
article.stage section .plusmoins > div > div { article.stage section .plusmoins > div > div {
padding: 15px; padding: 15px;
color: #fff; color: #fff;
} }
/* line 258, ../../sass/screen.scss */ /* line 265, ../../sass/screen.scss */
article.stage section .plusmoins > div > div h4 { article.stage section .plusmoins > div > div h4 {
font-weight: normal; font-weight: normal;
margin-left: -5px; margin-left: -5px;
font-size: 0.9em; font-size: 0.9em;
opacity: 0.9; opacity: 0.9;
} }
/* line 264, ../../sass/screen.scss */ /* line 271, ../../sass/screen.scss */
article.stage section .plusmoins > div > div p { article.stage section .plusmoins > div > div p {
font-weight: bold; font-weight: bold;
margin: 2px; margin: 2px;
} }
/* line 272, ../../sass/screen.scss */ /* line 279, ../../sass/screen.scss */
article.stage section .plusmoins .plus > div { article.stage section .plusmoins .plus > div {
background: #23cc56; background: #23cc56;
} }
/* line 275, ../../sass/screen.scss */ /* line 282, ../../sass/screen.scss */
article.stage section .plusmoins .plus:before { article.stage section .plusmoins .plus:before {
content: "Les +"; content: "Les +";
vertical-align: bottom; vertical-align: bottom;
color: #1b9f43; color: #1b9f43;
} }
/* line 282, ../../sass/screen.scss */ /* line 289, ../../sass/screen.scss */
article.stage section .plusmoins .moins > div { article.stage section .plusmoins .moins > div {
background: #af1822; background: #af1822;
} }
/* line 285, ../../sass/screen.scss */ /* line 292, ../../sass/screen.scss */
article.stage section .plusmoins .moins:before { article.stage section .plusmoins .moins:before {
content: "Les -"; content: "Les -";
vertical-align: top; vertical-align: top;
color: #88131b; 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;
}

8
avisstage/static/js/toc.min.js vendored Normal file
View file

@ -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("<span/>").attr("id",i).insertBefore(g)}var l=a("<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("<li/>").addClass(e.itemClass(d,f,g,e.prefix)).append(l);c.append(m)}),b.html(c)})},jQuery.fn.toc.defaults={container:"body",listType:"<ul/>",selectors:"h1,h2,h3",smoothScrolling:function(b,c,d){a(b).smoothScroller({offset:c.scrollToOffset}).on("smoothScrollerComplete",function(){d()})},scrollToOffset:0,prefix:"toc",activeClass:"toc-active",onHighlight:function(){},highlightOnScroll:!0,highlightOffset:100,anchorName:function(c,d,e){if(d.id.length)return d.id;var f=a(d).text().replace(/[^a-z0-9]/gi," ").replace(/\s+/g,"-").toLowerCase();if(b[f]){for(var g=2;b[f+g];)g++;f=f+"-"+g}return b[f]=!0,e+"-"+f},headerText:function(a,b,c){return c.text()},itemClass:function(a,b,c,d){return d+"-"+c[0].tagName.toLowerCase()}}}(jQuery);

13
avisstage/templates/avisstage/detail/stage.html
View file

@ -1,11 +1,23 @@
{% extends "avisstage/base.html" %} {% extends "avisstage/base.html" %}
{% load staticfiles %} {% load staticfiles %}
{% block extra_head %}
<script src="{% static 'js/toc.min.js' %}" type="text/javascript"></script>
<script type="text/javascript">
$(function(){$(".toc").toc({container:'.content'});});
</script>
{% endblock %}
{% block content %} {% block content %}
<h1>{{ object.sujet }}</h1> <h1>{{ object.sujet }}</h1>
{% if object.auteur == user.profil %} {% if object.auteur == user.profil %}
<p><a href="{% url "avisstage:stage_edit" object.id %}">Modifier ce stage</a></p> <p><a href="{% url "avisstage:stage_edit" object.id %}">Modifier ce stage</a></p>
{% endif %} {% endif %}
<div class="article-wrapper">
<div class="toc-wrapper">
<div class="toc">
</div>
</div>
<article class="stage"> <article class="stage">
<section class="misc"> <section class="misc">
<h3>À propos du stage</h3> <h3>À propos du stage</h3>
@ -26,4 +38,5 @@
{% include "avisstage/detail/avis.html" with avis=avis titre="Avis sur le lieu" %} {% include "avisstage/detail/avis.html" with avis=avis titre="Avis sur le lieu" %}
{% endfor %} {% endfor %}
</article> </article>
</div>
{% endblock %} {% endblock %}