--- 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;
+ }
+
+}
--- 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;
+}
Binary file src/jocondelab/static/jocondelab/img/menus-sprite.png has changed
--- 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;
--- 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 @@
</head>
<body>
{% block body %}
+ <div class="language-menu-wrapper">
+ <ul class="language-menu menu-list">
+ {% get_language_info_list for LANGUAGES as languages %}
+ {% for language in languages %}
+ <li class="menu-item">
+ <a href="#" data-language-code="{{ language.code }}">{{ language.name_local }}</a>
+ </li>
+ {% endfor %}
+ </ul>
+ </div>
<div class="header-wrapper">
<header>
- {% block header %}
- <div class="main-title">
- <h1><a href="{% url 'front_home' %}">Joconde<span class="title-lab">Lab</span></a></h1>
- <h2 class="breadcrumbs">{% block breadcrumbs %}{% endblock %}</h2>
- </div>
- {% block header_search %}
- <form class="header-search-form search-form" action="{% url 'front_search' %}">
- <input class="header-search-input search-input" type="search" name="q" placeholder="{% trans 'Search in contents' %}" />
- </form>
- {% endblock %}
- <ul class="menu-links">
- <li class="menu-link"><a href="#main-menu">{% trans 'Menu' %}</a></li>
- <li class="menu-link"><a href="#language-menu">{% trans 'Changer de langue' %}</a></li>
- </ul>
- {% endblock %}
+ {% block header %}
+ <table class="header-widgets">
+ <tr>
+ <td>
+ {% block header_search %}
+ <form class="header-search-form search-form" action="{% url 'front_search' %}">
+ <input class="header-search-input search-input" type="search" name="q" placeholder="{% trans 'Search in contents' %}" />
+ </form>
+ {% endblock %}
+ </td>
+ <td class="menu-link language-menu-link">
+ <a href="#" title="{% trans 'Changer de langue' %}"></a>
+ </td>
+ <td class="menu-link main-menu-link">
+ <a href="#" title="{% trans 'Menu' %}"></a>
+ </td>
+ </tr>
+ </table>
+ <h1><a href="{% url 'front_home' %}">Joconde<span class="title-lab">Lab</span></a></h1>
+ <h2 class="breadcrumbs">{% block breadcrumbs %}{% endblock %}</h2>
+ <div class="clearer"></div>
+ {% endblock %}
</header>
</div>
<form class="language-form" action="{% url 'django.views.i18n.set_language' %}" method="post">
@@ -62,7 +79,7 @@
<input class="language-input" type="hidden" name="language" value="{% if lang %}{{lang|slice:':2'}}{% else %}{{LANGUAGE_CODE|slice:':2'}}{% endif %}" />
</form>
<div class="menus-wrapper">
- <ul class="menu-list" id="main-menu">
+ <ul class="main-menu menu-list">
<li class="menu-item">
<a href="{% url 'front_home' %}">{% trans 'Accueil' %}</a>
</li>
@@ -79,14 +96,6 @@
<a href="{% url 'random_describe' %}">{% trans "Contribuer à l'iconographie" %}</a>
</li>
</ul>
- <ul class="menu-list" id="language-menu">
- {% get_language_info_list for LANGUAGES as languages %}
- {% for language in languages %}
- <li class="menu-item">
- <a href="#" data-language-code="{{ language.code }}">{{ language.name_local }}</a>
- </li>
- {% endfor %}
- </ul>
</div>
<div class="main-wrapper">
<section class="main">
--- 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 @@
<ul class="module-list">
<li class="module-item">
<h3><a href="{% url 'front_termlist' %}">{% trans 'Liste des termes' %}</a></h3>
+ <p>Court texte de présentation de la liste de termes</p>
</li>
<li class="module-item">
<h3><a href="{% url 'front_timeline' %}">{% trans 'Frise chronologique' %}</a></h3>
+ <p>Court texte de présentation de la frise chronologique</p>
</li>
<li class="module-item">
<h3><a href="{% url 'front_geo' %}">{% trans 'Mappemonde' %}</a></h3>
+ <p>Court texte de présentation de la mappemonde</p>
</li>
<li class="module-item">
<h3><a href="{% url 'random_describe' %}">{% trans "Contribuer à l'iconographie" %}</a></h3>
+ <p>Court texte de présentation de la contribution iconographique</p>
</li>
<li class="module-item">
<h3><a href="{% url 'front_about' %}">{% trans 'À propos' %}</a></h3>
+ <p>Pour en savoir plus</p>
+ </li>
+ <li class="module-item">
+ <h3><a href="{% url 'front_about' %}">{% trans 'Travaux étudiants' %}</a></h3>
+ <p>Les travaux des étudiants des Gobelins</p>
</li>
</ul>
</div>
--- 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 @@
<link rel="stylesheet" href="{{STATIC_URL}}jocondelab/css/front-notice.css" type="text/css" />
{% endblock %}
-{% block title %}JocondeLab » {{title}}{% endblock %}
+{% block title %}JocondeLab » {% trans "Détail d'une notice" %}{% endblock %}
-{% block breadcrumbs %}<a href="{% url 'front_notice' object.id %}" dir="ltr">{{title|truncatechars:40}}</a>{% endblock %}
+{% block breadcrumbs %}<a href="{% url 'front_notice' object.id %}">{% trans "Détail d'une notice" %}</a>{% endblock %}
{% block main %}
<ul class="notice-images">
