# HG changeset patch # User rougeronj # Date 1425316247 -3600 # Node ID d5b166da842d38431847ed26f3192b11b05a5a6f # Parent 20107345d73b22477db754c08d0ba3a0aab39f92 update design for "domaines artstiques" pages. Show 9 categories and possibility to show the 9 others diff -r 20107345d73b -r d5b166da842d src/hdalab/static/hdalab/css/cattree.css --- a/src/hdalab/static/hdalab/css/cattree.css Sat Feb 28 07:31:59 2015 +0100 +++ b/src/hdalab/static/hdalab/css/cattree.css Mon Mar 02 18:10:47 2015 +0100 @@ -1,9 +1,9 @@ .leftzone { - width: 280px; + width: 360px; min-height: 400px; float: left; height: 100%; - padding-right: 20px; + padding-right: 10px; border-right: 1px solid #999; } @@ -12,11 +12,11 @@ } .leftzone h3 { - font-size: 13px; font-weight: bold; margin: 30px 0 5px; + font-size: 13px; font-weight: bold; margin: 20px 0 5px; } .leftzone input { - background: #ffffff; width: 260px; font-size: 14px; font-weight: bold; margin: 5px 0; + background: #ffffff; width: 340px; font-size: 14px; font-weight: bold; margin: 5px 0; } .results { @@ -27,20 +27,159 @@ color: #000060; } -ul.disciplist, ul.theslist { - list-style: none; margin: 10px 5px; +ul.disciplist { + list-style: none; + margin: 15px 33px 0px; + text-align: center; + overflow: hidden; + height: 282px; + -webkit-transition: all 1000ms ease; + -moz-transition: all 1000ms ease; + -o-transition: all 1000ms ease; + transition: all 1000ms ease; +} + +ul.disciplist.extend { + height: 564px; +} + +.disciplist li { + font-size: 12px; + font-weight: bold; + float:left; + width: 90px; + height: 86px; + margin: 4px; + position: relative; +} + +/* .disciplist li:nth-child(n+10) { */ +/* visibility: hidden; */ +/* display:none; */ +/* } */ +/* .disciplist.all li { */ +/* visibility: visible; */ +/* display:inherit; */ +/* } */ + +#morecategories { + border-top: 1px solid; + background: url("../img/asc.gif") no-repeat scroll 50% 0 rgba(0, 0, 0, 0); + margin: 4px 36px; + height: 10px; + padding: 4px; + text-align: center; +} +#morecategories:hover { + cursor: pointer; +} +#morecategories.less{ + background: url("../img/desc.gif") no-repeat scroll 50% 0 rgba(0, 0, 0, 0); } -.disciplist li, .theslist li { - font-size: 12px; font-weight: bold; +.disciplist li img { + display: block; + width: 90px; + height: 86px; +} +.disciplist li a { + background-color: rgba(0, 0, 0, 0.8); + display: table; + height: 86px; + left: 0; + position: absolute; + top: 0; + transition: background 0.5s ease 0s; + width: 90px; +} +.disciplist li a > span { + color: #fff; + display: table-cell; + font-family: "FranklinGothic",Arial,Helvetica,sans-serif; + font-size: 1.2rem; + font-weight: 300; + padding-top: 60px; + text-align: center; + text-transform: uppercase; + vertical-align: middle; +} +.disciplist li a > span span { + display: block; + font-size: 1.3rem; + text-transform: none; +} +.disciplist li a.arts-plastiques::before { + background-position: left -50px; +} +.disciplist li a.arts-decoratifs::before { + background-position: left -100px; +} +.disciplist li a.arts-jardins::before { + background-position: left -150px; +} +.disciplist li a.arts-cirque::before { + background-position: left -200px; +} +.disciplist li a.arts-numeriques::before { + background-position: left -250px; +} +.disciplist li a.bd::before { + background-position: left -300px; +} +.disciplist li a.chanson::before { + background-position: left -350px; } - -.disciplist a, .theslist a { - color: #000066; +.disciplist li a.cinema::before { + background-position: left -400px; +} +.disciplist li a.danse::before { + background-position: left -450px; +} +.disciplist li a.design::before { + background-position: left -500px; +} +.disciplist li a.dessin::before { + background-position: left -550px; +} +.disciplist li a.litterature::before { + background-position: left -600px; +} +.disciplist li a.musique::before { + background-position: left -650px; +} +.disciplist li a.mode::before { + background-position: left -700px; +} +.disciplist li a.peinture::before { + background-position: left -750px; } - -.disciplist .selected a, .theslist .selected a { - color: #0000ff; +.disciplist li a.photographie::before { + background-position: left -800px; +} +.disciplist li a.poesie::before { + background-position: left -850px; +} +.disciplist li a.sculpture::before { + background-position: left -900px; +} +.disciplist li a.theatre::before { + background-position: left -950px; +} +.disciplist li a::before { + background: url("../img/icos-sheets.png") no-repeat scroll left top rgba(0, 0, 0, 0); + content: ""; + display: block; + height: 0; + left: 50%; + margin-left: -25px; + overflow: hidden; + padding: 50px 0 0 50px; + position: absolute; + top: 10px; + width: 0; +} +.disciplist li a:hover, .disciplist li.selected a { + background-color: rgba(0, 0, 0, 0.5); } .ui-autocomplete strong { @@ -48,5 +187,5 @@ } div.cattree { - margin: 10px 0 0 320px; + margin: 10px 0 0 390px; } diff -r 20107345d73b -r d5b166da842d src/hdalab/static/hdalab/img/icos-sheets.png Binary file src/hdalab/static/hdalab/img/icos-sheets.png has changed diff -r 20107345d73b -r d5b166da842d src/hdalab/static/hdalab/img/thumb-architecture.jpg Binary file src/hdalab/static/hdalab/img/thumb-architecture.jpg has changed diff -r 20107345d73b -r d5b166da842d src/hdalab/static/hdalab/img/thumb-cinema.jpg Binary file src/hdalab/static/hdalab/img/thumb-cinema.jpg has changed diff -r 20107345d73b -r d5b166da842d src/hdalab/static/hdalab/img/thumb-musique.jpg Binary file src/hdalab/static/hdalab/img/thumb-musique.jpg has changed diff -r 20107345d73b -r d5b166da842d src/hdalab/static/hdalab/img/thumb-peinture.jpg Binary file src/hdalab/static/hdalab/img/thumb-peinture.jpg has changed diff -r 20107345d73b -r d5b166da842d src/hdalab/static/hdalab/img/thumb-photographie.jpg Binary file src/hdalab/static/hdalab/img/thumb-photographie.jpg has changed diff -r 20107345d73b -r d5b166da842d src/hdalab/static/hdalab/img/thumb-poesie.jpg Binary file src/hdalab/static/hdalab/img/thumb-poesie.jpg has changed diff -r 20107345d73b -r d5b166da842d src/hdalab/static/hdalab/js/cattree.js --- a/src/hdalab/static/hdalab/js/cattree.js Sat Feb 28 07:31:59 2015 +0100 +++ b/src/hdalab/static/hdalab/js/cattree.js Mon Mar 02 18:10:47 2015 +0100 @@ -57,4 +57,15 @@ gettree($(this).text().trim()); $("#catsearch").val(""); }); -}); \ No newline at end of file + $("#morecategories").click(function(){ + if ($(".disciplist").hasClass('extend')){ + $(".disciplist").removeClass('extend'); + $("#morecategories").removeClass('less'); + } + else{ + $(".disciplist").addClass('extend'); + $("#morecategories").addClass('less'); + } + }); +}); + diff -r 20107345d73b -r d5b166da842d src/hdalab/templates/categories.html --- a/src/hdalab/templates/categories.html Sat Feb 28 07:31:59 2015 +0100 +++ b/src/hdalab/templates/categories.html Mon Mar 02 18:10:47 2015 +0100 @@ -41,16 +41,27 @@ Seules les ressources les plus pertinentes sont affichées.

+
{% trans 'Voir plus ou moins de categories' %}
+

Recherche de catégories de Wikipédia :