# HG changeset patch # User veltr # Date 1380105890 -7200 # Node ID 04791c6330b8c8c1cde682474685eed77430a45c # Parent 52589f846d42de7d1915e74e53f1c0cdcc9dd9ee Reorganized headers diff -r 52589f846d42 -r 04791c6330b8 src/jocondelab/static/jocondelab/css/front-common.css --- a/src/jocondelab/static/jocondelab/css/front-common.css Tue Sep 24 17:46:18 2013 +0200 +++ b/src/jocondelab/static/jocondelab/css/front-common.css Wed Sep 25 12:44:50 2013 +0200 @@ -66,6 +66,10 @@ /* END OF THE RESET PART */ +.clearer { + clear: both; +} + a { text-decoration: none; color: inherit; } @@ -113,19 +117,23 @@ font-family: 'OpenSans'; font-size: 10px; overflow-x: hidden; } -.header-wrapper, .menus-wrapper, .main-wrapper { - padding: 0 10px; +.header-wrapper, .menus-wrapper, .main-wrapper, .language-menu-wrapper { + padding: 0 10px; clear: both; +} + +.language-menu-wrapper { + background: #ffffff; } .header-wrapper { - height: 70px; background: url('../img/background-pinstripe-blue.png'); + background: url('../img/background-pinstripe-blue.png'); } .menus-wrapper { - background: #ffffff; box-shadow: 0 2px 4px #666666; position: absolute; left: 0; top: 70px; right: 0; z-index: 6; + background: #ffffff; box-shadow: 0 2px 4px #666666; } -header, .main, footer, .menu-list { +header, .main, footer, .menu-list, .language-menu { margin: 0 auto; max-width: 960px; clear: both; } @@ -142,22 +150,22 @@ /* HEADER > TITLE */ header { - position: relative; height: 70px; + padding: 10px 0; } -.main-title { - float: left; margin-top: 10px; height: 50px; line-height: 50px; overflow: hidden; -} - -html[dir=rtl] .main-title { +.header-widgets { float: right; } -.main-title h1, .main-title h2 { +html[dir=rtl] .header-widgets { + float: left; +} + +header h1, header h2 { display: inline; } -.main-title h1 { +header h1 { font-size: 26px; } @@ -173,15 +181,11 @@ font-weight: 800; } -/* HEADER > SEARCH FORM */ - -.header-search-form { - position: absolute; top: 8px; right: 0; max-width: 35%; +.header-widgets { + padding: 5px 0; } -html[dir=rtl] .header-search-form { - left: 0; right: auto; -} +/* HEADER > SEARCH FORM */ .search-input, .search-form .tagit { border-radius: 8px; box-shadow: 1px 1px 1px #666666 inset; border: none; @@ -194,7 +198,7 @@ } .header-search-input, .header-search-form .tagit { - margin: 0 auto; width: 260px; max-width: 90%; font-size: 14px; z-index: 1; + margin: 0 auto; width: 260px; max-width: 100%; font-size: 14px; z-index: 1; } .header-search-input { @@ -241,18 +245,35 @@ /* HEADER > MENUS */ -.menu-links { - position: absolute; right: 0; top: 44px; font-size: 14px; font-weight: bold; +.menu-link { + height: 26px; width: 28px; padding: 3px 0 0 4px; +} + +html[dir=rtl] .menu-link { + padding: 3px 4px 0 0; +} + +.menu-link a { + display: inline-block; width: 28px; height: 26px; background: url(../img/menus-sprite.png); } -html[dir=rtl] .menu-links { - left: 0; right: auto; +.main-menu-link a:hover { + background-position: 0 -26px; +} + +.language-menu-link a { + background-position: -28px 0; } -.menu-link { - float: right; margin-left: 20px; +.language-menu-link a:hover { + background-position: -28px -26px; } +.language-menu-link { + display: none; +} + + /* MENUS */ .language-form { @@ -260,11 +281,23 @@ } .menu-list { - width: 100%; font-size: 14px; padding: 10px 0; display: none; text-align: right; + width: 100%; font-size: 14px; padding: 8px 0; line-height: 2em; text-align: right; } .menu-item { - display: inline-block; margin-left: 20px; + display: inline-block; +} + +.menu-item:before { + content: " "; width: 0.8em; display: inline-block; +} + +.menu-item:first-child:before { + display: none; +} + +.main-menu { + display: none; } /* DBPEDIA OVERLAY */ @@ -312,13 +345,6 @@ position: relative; } -@media screen and (max-width: 640px) { - .notice-item { - width: 120px; - height: 120px; - } -} - .notice-image { font-size: 0; line-height: 0; } @@ -380,3 +406,41 @@ .notice-year { font-weight: bold; } + +/* Smaller screens adaptation */ + +@media screen and (max-width: 720px) { + + header h1 { + font-size: 20px; + } + + .breadcrumbs { + font-size: 15px; + } + + .notice-item { + width: 120px; + height: 120px; + } + + .header-widgets { + padding: 0; + } +} + +@media screen and (max-width: 540px) { + + .header-widgets { + width: 100%; + } + + .language-menu-link { + display: table-cell; + } + + .language-menu { + display: none; + } + +} diff -r 52589f846d42 -r 04791c6330b8 src/jocondelab/static/jocondelab/css/front-home.css --- a/src/jocondelab/static/jocondelab/css/front-home.css Tue Sep 24 17:46:18 2013 +0200 +++ b/src/jocondelab/static/jocondelab/css/front-home.css Wed Sep 25 12:44:50 2013 +0200 @@ -7,12 +7,14 @@ } .module-item { - width: 20%; height: 80px; float: left; + width: 25%; height: 120px; float: left; + background: -webkit-linear-gradient(to right bottom, #ffffff 0%, #f0f0f0 100%); + background: -moz-linear-gradient(to right bottom, #ffffff 0%, #f0f0f0 100%); } -@media screen and (max-width: 720px) and (min-width: 400px){ +@media screen and (max-width: 760px) and (min-width: 400px){ .module-item { - width: 33%; + width: 50%; } } @@ -22,18 +24,15 @@ } } -.module-item:nth-child(even) { - background: #fff8e0; -} - -.module-item:nth-child(odd) { - background: #f8f8f8; -} - .module-item:hover { - background: #ffffff; + background: -webkit-linear-gradient(to right bottom, #f0f0f0 0%, #ffffff 100%); + background: -moz-linear-gradient(to right bottom, #f0f0f0 0%, #ffffff 100%); } .module-item h3 { - margin: 10px 5px; font-size: 16px; text-decoration: underline; text-align: center; + margin: 8px 5px; font-size: 16px; text-decoration: underline; text-align: center; } + +.module-item p { + margin: 8px 5px; font-size: 13px; +} diff -r 52589f846d42 -r 04791c6330b8 src/jocondelab/static/jocondelab/img/menus-sprite.png Binary file src/jocondelab/static/jocondelab/img/menus-sprite.png has changed diff -r 52589f846d42 -r 04791c6330b8 src/jocondelab/static/jocondelab/js/front-common.js --- a/src/jocondelab/static/jocondelab/js/front-common.js Tue Sep 24 17:46:18 2013 +0200 +++ b/src/jocondelab/static/jocondelab/js/front-common.js Wed Sep 25 12:44:50 2013 +0200 @@ -403,30 +403,30 @@ $overlayImg.load(recentreDbpediaBox); - var hideTo, $ml = $(".menu-list"); + var hideTo, $mm = $(".main-menu"); - function hideMenus() { + function hideMenu() { clearTimeout(hideTo); hideTo = setTimeout(function() { - $ml.stop(true).slideUp(); + $mm.stop(true).slideUp(); }, 3000); } function showMenu(selector) { clearTimeout(hideTo); - $(selector).stop(true).slideDown(); + $mm.stop(true).slideDown(); } - $(".menu-link a").mouseenter(function() { - $ml.stop(true).slideUp(); - showMenu($(this).attr("href")); - }).mouseleave(hideMenus).click(function() { + $(".main-menu-link").mouseenter(showMenu).mouseleave(hideMenu).click(function() { + $mm.stop(true).slideToggle(); return false; }); - $ml.mouseover(function() { - showMenu(this); - }).mouseout(hideMenus); + $mm.mouseover(showMenu).mouseout(hideMenu); - $("#language-menu a").click(function() { + $(".language-menu-link").click(function() { + $(".language-menu").slideToggle(); + }); + + $(".language-menu a").click(function() { $(".language-input").val($(this).attr("data-language-code")); $(".language-form").submit(); return false; diff -r 52589f846d42 -r 04791c6330b8 src/jocondelab/templates/jocondelab/front_base.html --- a/src/jocondelab/templates/jocondelab/front_base.html Tue Sep 24 17:46:18 2013 +0200 +++ b/src/jocondelab/templates/jocondelab/front_base.html Wed Sep 25 12:44:50 2013 +0200 @@ -38,23 +38,40 @@
{% block body %} +| + {% block header_search %} + + {% endblock %} + | ++ + | ++ + | +
Court texte de présentation de la liste de termes
Court texte de présentation de la frise chronologique
Court texte de présentation de la mappemonde
Court texte de présentation de la contribution iconographique
Pour en savoir plus
+Les travaux des étudiants des Gobelins