# 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 %} -
-

JocondeLab

- -
- {% block header_search %} -
- -
- {% endblock %} - - {% endblock %} + {% block header %} + + + + + + +
+ {% block header_search %} +
+ +
+ {% endblock %} +
+

JocondeLab

+ +
+ {% endblock %}
@@ -62,7 +79,7 @@
diff -r 52589f846d42 -r 04791c6330b8 src/jocondelab/templates/jocondelab/front_home.html --- a/src/jocondelab/templates/jocondelab/front_home.html Tue Sep 24 17:46:18 2013 +0200 +++ b/src/jocondelab/templates/jocondelab/front_home.html Wed Sep 25 12:44:50 2013 +0200 @@ -17,18 +17,27 @@
diff -r 52589f846d42 -r 04791c6330b8 src/jocondelab/templates/jocondelab/front_notice.html --- a/src/jocondelab/templates/jocondelab/front_notice.html Tue Sep 24 17:46:18 2013 +0200 +++ b/src/jocondelab/templates/jocondelab/front_notice.html Wed Sep 25 12:44:50 2013 +0200 @@ -30,9 +30,9 @@ {% endblock %} -{% block title %}JocondeLab » {{title}}{% endblock %} +{% block title %}JocondeLab » {% trans "Détail d'une notice" %}{% endblock %} -{% block breadcrumbs %}{{title|truncatechars:40}}{% endblock %} +{% block breadcrumbs %}{% trans "Détail d'une notice" %}{% endblock %} {% block main %}