Accueil Explorer Aide
Connexion
FFDN
/
coin
12
3
Fork 17
Fichiers Tickets 55 Pull Requests 6 Wiki
Parcourir la source

Improve small screen rendering

Fabs il y a 10 ans
Parent
6193df2419
commit
f637c927ce
2 fichiers modifiés avec 64 ajouts et 39 suppressions
Vue unifiée Afficher les stats Diff
  1. 2 1
      coin/static/css/illyse.css
  2. 62 38
      coin/templates/base.html

+ 2 - 1
coin/static/css/illyse.css
Voir le fichier 

@@ -122,6 +122,7 @@ table.full-width {
 
 }
 
 }
 
 
 
 /* Footer */
 
 /* Footer */
 
+
 
 #footer {
 
 #footer {
 
     opacity: 0.18;
 
     opacity: 0.18;
 
     margin-top: 20px;
 
     margin-top: 20px;
 
@@ -132,7 +133,7 @@ table.full-width {
 
 }
 
 }
 
 #footer .duck {
 
 #footer .duck {
 
     background-image: url('../img/coin.svg');
 
     background-image: url('../img/coin.svg');
 
-    background-size: 20%;
 
+    background-size: auto 50%;
 
     background-repeat: no-repeat;
 
     background-repeat: no-repeat;
 
     background-position: center top;
 
     background-position: center top;
 
     height:50px;
 
     height:50px;

+ 62 - 38
coin/templates/base.html
Voir le fichier 

@@ -13,61 +13,85 @@
 
     <link rel="icon" type="image/png" href="{% static "img/coinitem.png" %}"/>
 
     <link rel="icon" type="image/png" href="{% static "img/coinitem.png" %}"/>
 
     <link rel="icon" type="image/x-icon" href="{% static "img/favicon.ico" %}" />
 
     <link rel="icon" type="image/x-icon" href="{% static "img/favicon.ico" %}" />
 
 </head>
 
 </head>
 
-<body class="off-canvas-wrap">
 
-<div class="row">
 
-    <div class="large-12 columns inner-wrap">
 
-    <header>
 
-       <h1><a href="{% url 'home' %}">COIN est un Outil pour un Internet Neutre</a></h1>
 
-    </header>
 
+<body>
 
+<div class="off-canvas-wrap" data-offcanvas>
 
+    <div class="inner-wrap">
 
 
 
-    {% if user.is_authenticated %}
 
-    <div class="show-for-small">
 
-        <a class="left-off-canvas-toggle button">Menu</a>
 
+        {% if user.is_authenticated %}
 
         <aside class="left-off-canvas-menu">
 
         <aside class="left-off-canvas-menu">
 
             <ul class="off-canvas-list">
 
             <ul class="off-canvas-list">
 
-                <li><label>Navigation</label></li>
 
+                <li><label>Menu</label></li>
 
                 {% include "menu_items.html" %}
 
                 {% include "menu_items.html" %}
 
             </ul>
 
             </ul>
 
         </aside>
 
         </aside>
 
-    </div>
 
-    {% endif %}
 
-
 
-    <div class="row">
 
-        {% if user.is_authenticated %}
 
-        <div class="large-3 columns">
 
-            {% block sidenav %}
 
-            <nav id="sidebox" class="hide-for-small">
 
-            <ul class="side-nav">
 
-                {% include "menu_items.html" %}
 
-            </ul>
 
-            </nav>
 
-            {% endblock %}
 
-        </div>
 
         {% endif %}
 
         {% endif %}
 
 
 
-        <div class="large-{% if user.is_authenticated %}9{% else %}12{% endif %} columns">
 
-            {% block content %}{% endblock %}
 
-        </div>
 
-    </div>
 
+        <header>
 
+            <div class="show-for-medium-up">
 
+                <div class="row">
 
+                    <div class="large-12">
 
+                        <h1><a href="{% url 'home' %}">COIN est un Outil pour un Internet Neutre</a></h1>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+            <div class="show-for-small">
 
+                <nav class="tab-bar">
 
+                    <section class="left-small">
 
+                        <a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
 
+                    </section>
 
+
 
+                    <section class="middle tab-bar-section">
 
+                        <h1 class="title">COIN</h1>
 
+                    </section>
 
+
 
+                </nav>
 
+            </div>
 
+        </header>
 
+
 
 
 
-    <div id="footer">
 
-        {% block footer %}
 
         <div class="row">
 
         <div class="row">
 
-            <div class="large-5 columns"><div class="line">&nbsp;</div></div>
 
-            <div class="large-2 columns"><div class="duck"></div></div>
 
-            <div class="large-5 columns"><div class="line">&nbsp;</div></div>
 
+            {% if user.is_authenticated %}
 
+            <div class="medium-4 large-3 columns">
 
+                {% block sidenav %}
 
+                <nav id="sidebox" class="show-for-medium-up">
 
+                    <ul class="side-nav">
 
+                        {% include "menu_items.html" %}
 
+                    </ul>
 
+                </nav>
 
+                {% endblock %}
 
+            </div>
 
+            {% endif %}
 
+
 
+            <div class="medium-{% if user.is_authenticated %}8{% else %}12{% endif %} large-{% if user.is_authenticated %}9{% else %}12{% endif %} columns">
 
+                {% block content %}{% endblock %}
 
+            </div>
 
         </div>
 
         </div>
 
-        {% endblock %}
 
-    </div>
 
+
 
+        
+
 
+        <div id="footer">
 
+            {% block footer %}
 
+            <div class="row">
 
+                <div class="small-5 columns"><div class="line">&nbsp;</div></div>
 
+                <div class="small-2 columns"><div class="duck"></div></div>
 
+                <div class="small-5 columns"><div class="line">&nbsp;</div></div>
 
+            </div>
 
+            {% endblock %}
 
+        </div>
 
+
 
+        <a class="exit-off-canvas"></a>
 
+    </div> <!-- .inner-wrap -->
 
+</div> <!-- .off-canvas-wrap -->
 
 
 
 
 
     <script src="{% static "js/vendor/jquery.js" %}"></script>
 
     <script src="{% static "js/vendor/jquery.js" %}"></script>
 
     <script src="{% static "js/foundation.min.js" %}"></script>
 
     <script src="{% static "js/foundation.min.js" %}"></script>
 
     <script src="{% static "js/foundation/foundation.offcanvas.js" %}"></script>
 
     <script src="{% static "js/foundation/foundation.offcanvas.js" %}"></script>
 
     <script src="{% static "js/illyse.js" %}"></script>
 
     <script src="{% static "js/illyse.js" %}"></script>
 
-    <script> $(document).foundation(); </script>
 
-
 
-    {% block js %}{% endblock js %}
 
+    {% block js %}{% endblock %}
 
 
 
+    <script>
 
+      $(document).foundation();
 
+    </script>
 
   </body>
 
   </body>
 
 </html>
 
 </html>