CSS: responsive and directory

3 files changed, 59 insertions, 27 deletions

diff --git a/chimere/static/chimere/css/styles.css b/chimere/static/chimere/css/styles.css
index 79deda2..e8c20ca 100644
--- a/chimere/static/chimere/css/styles.css
+++ b/chimere/static/chimere/css/styles.css
@@ -151,6 +151,11 @@ caption{
     display: inline-block;
 }
 
+#detail_footer .col-xs-6{
+    padding: 0;
+    text-align: center;
+}
+
 /*
  * Background colors
  */
@@ -567,6 +572,10 @@ div#sidebar-container{
     width: 400px;
 }
 
+#directory #detail-header, #directory #detail-content, #directory #detail_footer{
+    width: auto;
+}
+
 #detail-header h4{
     font-family: 'Yanone Kaffeesatz Light', sans-serif;
     text-shadow: 1px 1px 2px black; 
@@ -722,16 +731,24 @@ div#sidebar-container{
     font-family: sans-serif;
 }
 
+#detail_footer a.see-on-map,
 #detail_footer a.propose-modif{
     display: inline-block;
     height: 32px;
-    background-image: url("../../chimere/img/modify.png");
     background-position: right 4px;
     background-repeat: no-repeat;
     padding: 0.5em 37px 0.5em 1em;
     line-height: 18px;
 }
 
+#detail_footer a.see-on-map{
+    background-image: url("../../chimere/img/see-on-map.png");
+}
+
+#detail_footer a.propose-modif{
+    background-image: url("../../chimere/img/modify.png");
+}
+
 #close-detail{
     position: absolute;
     right: 10px;
@@ -1695,10 +1712,6 @@ div.pp_default .pp_expand{
     display: none;
 }
 
-#directory #detail-header, #directory #detail-content, #directory #detail_footer {
-    width: 100%;
-}
-
 #directory #detail-header{
     position: relative;
     top: 0;
@@ -1723,6 +1736,7 @@ div.pp_default .pp_expand{
     padding: 1em;
     font-family: 'Yanone Kaffeesatz Light', sans-serif;
     text-transform: uppercase;
+    width: auto;
 }
 
 #directory-category-list img{
@@ -1745,7 +1759,7 @@ ul#category-directory{
 }
 
 .selected .category-icon-on{
-    display: block;
+    display: inline;
 }
 
 .selected .category-icon-off{
@@ -1781,6 +1795,11 @@ ul#category-directory{
     background-color: #fff;
 }
 
+#category-directory-content .category-icon{
+    text-align: center;
+    line-height: 22px;
+}
+
 .category-directory-category{
     font-variant: small-caps;
     font-weight: bold;
@@ -2293,6 +2312,8 @@ span#permalink, .navbar-nav .lbl, #areas-div label, #permalink, #simple_button,
     position: absolute;
     right: 5px;
     padding: 3px;
+    width: 30px;
+    text-align: center;
 }
 
 .description_icon{
@@ -2313,7 +2334,7 @@ span#permalink, .navbar-nav .lbl, #areas-div label, #permalink, #simple_button,
 
 .subcategory .category-icon-off,
 .subcategory > .selected .category-icon-on{
-    display: block;
+    display: inline-block;
 }
 
 .subcategory .category-icon-on,
@@ -2375,11 +2396,15 @@ span#permalink, .navbar-nav .lbl, #areas-div label, #permalink, #simple_button,
     padding: 0 5px;
 }
 
+img.img-responsive{
+    max-width : 100%;
+    height: auto;
+    display: inline-block;
+}
 
-
-
-
-
+#category-directory-content .rslides img.img-responsive{
+    max-width: 100%;
+}
 
 #permalink{
     display: none;
diff --git a/chimere/templates/chimere/category_directory.html b/chimere/templates/chimere/category_directory.html
index 3975ae1..592f853 100644
--- a/chimere/templates/chimere/category_directory.html
+++ b/chimere/templates/chimere/category_directory.html
@@ -20,13 +20,13 @@
 {% endifchanged %}
 {% endfor %}
 {% if category %}
-#detail_footer a, .current-detail-bg{
+.current-detail-bg{
     background-color: {{category.category.color}};
 }
 {% endif %}
 </style>
 <div class="row" id="category-directory-content">
-    <div class="col-md-4">
+    <div class="col-md-3 col-xs-4">
         {% if not object_list.count %}
             <p>{% trans "No category defined!" %}</p>
         {% else %}
@@ -51,7 +51,7 @@
                               {{object.name}}
                           </a>
                       </span>
-                      <span class="col-xs-2">
+                      <span class="col-xs-2 category-icon">
                       {% if object.menu_icon.image and object.menu_icon_off.image%}
                       <img src="{{object.menu_icon_off.image.url}}"
                            class="category-icon-off">
@@ -70,7 +70,7 @@
         {% endif %}
     </div>
     {% if items %}
-    <div class="col-md-3">
+    <div class="col-md-3 col-xs-4">
         <ul id="category-directory">{% for marker in items %}
             <li class='{% if marker.pk == current_marker.pk %} selected{% endif %}'>
                 <a {% if marker.pk == current_marker.pk %}style="color: {{category.category.color}}"{% endif %}
@@ -83,7 +83,7 @@
     </div>
     {% endif %}
     {% if current_marker %}
-    <div class="col-md-5">
+    <div class="col-md-3 col-xs-4">
         {% include "chimere/category_item_detail.html" %}
     </div>
     {% endif %}
diff --git a/chimere/templates/chimere/detail.html b/chimere/templates/chimere/detail.html
index 3f2acf2..6f40cef 100644
--- a/chimere/templates/chimere/detail.html
+++ b/chimere/templates/chimere/detail.html
@@ -42,7 +42,7 @@
     <ul class="rslides">
     {% for picture in marker.default_pictures %}
         <li>
-            <img src='{{picture.picture.url}}'/>
+            <img src='{{picture.picture.url}}' class="img-responsive"/>
         </li>
     {% endfor %}
     {% for multimedia_item in marker.default_multimedia_items %}
@@ -69,16 +69,23 @@
             | <a class='detail_to' href='#'>{% trans "To" context "routing" %}</a>
             {% endif %}
         </div>
-        {% comment %}
-        <a href="{% get_tinyfied_url current_marker area_name %}">
-            {% trans "See on the map" %}
-        </a>
-        {% endcomment %}
-        {% if not is_directory %}
-        <a class="propose-modif current-detail-bg" href='#'>
-            {% trans "Submit a modification" %}
-        </a>
-        {% endif %}
+        <div class="row">
+            <div class="col-xs-6">
+                {% if is_directory %}
+                <a class="see-on-map"
+                   href="{% get_tinyfied_url current_marker area_name %}">
+                    {% trans "See on the map" %}
+                </a>
+                {% endif %}
+            </div>
+            <div class="col-xs-6">
+                {% if not is_directory %}
+                <a class="propose-modif current-detail-bg" href='#'>
+                    {% trans "Submit a modification" %}
+                </a>
+                {% endif %}
+            </div>
+        </div>
     </div>
 
 </div>