Meilleur affichage petits écrans

librelois · Apr 8, 2017 · c68474f · c68474f
1 parent e8c50cf
commit c68474f
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 9 deletions.
diff --git a/content/css/custom.css b/content/css/custom.css
@@ -7,6 +7,10 @@ body {
     margin-top: 10px;
 }
 
+#tipue_search_input {
+    width: 100%;
+}
+
 .search-query {
     border-radius: 4px !important;
 }
@@ -160,4 +164,32 @@ img.credits {
 
 .dashed {
     border: 1px dashed gray;
-}
+}
+
+@media (max-width:992px) {
+
+    .navbar-header a {
+        /*padding-right: 0 !important;*/
+    }
+
+    .navbar-header img {
+        margin-right: 0 !important;
+    }
+
+    #siteName {
+        display: none;
+    }
+
+    .navbar-collapse li {
+        /*max-width: 100px;*/
+    }
+
+    .navbar-collapse li a {
+        margin-left: 0;
+        margin-right: 0;
+    }
+
+    .nav.navbar-nav {
+        width: 90%;
+    }
+}
diff --git a/pelican-themes/pelican-bootstrap3/templates/base.html b/pelican-themes/pelican-bootstrap3/templates/base.html
@@ -115,7 +115,7 @@
             {% endif %}
             <a href="{{ SITEURL }}/" class="navbar-brand">
                 {% if SITELOGO %}<img class="img-responsive pull-left gap-right" src="{{ SITEURL }}/{{ SITELOGO }}" width="{{ SITELOGO_SIZE }}"/> {% endif %}
-                {% if not HIDE_SITENAME %}{{ SITENAME }}{% endif %}
+                {% if not HIDE_SITENAME %}<span id="siteName">{{ SITENAME }}</span>{% endif %}
             </a>
         </div>
         <div class="collapse navbar-collapse navbar-ex1-collapse">
@@ -145,13 +145,6 @@
                 {% endif %}
             </ul>
             <ul class="nav navbar-nav navbar-right">
-            {% if 'tipue_search' in PLUGINS %}
-              <li><span>
-                <form class="navbar-search" action="{{ SEARCH_URL | default('/search.html') }}">
-                  <input type="text" class="search-query" placeholder="Search" name="q" id="tipue_search_input" required>
-                </form></span>
-              </li>
-            {% endif %}
             {% if ARCHIVES_SAVE_AS %}
               <li><a href="{{ SITEURL }}/{{ ARCHIVES_URL | default('archives.html') }}"><i class="fa fa-th-list"></i><span class="icon-label">{{ _('Archives') }}</span></a></li>
             {% endif %}

diff --git a/pelican-themes/pelican-bootstrap3/templates/includes/sidebar.html b/pelican-themes/pelican-bootstrap3/templates/includes/sidebar.html
@@ -4,6 +4,16 @@
 
 <section class="well well-sm">
     <ul class="list-group list-group-flush">
+
+        <!-- Search bar in low width mode -->
+        {% if 'tipue_search' in PLUGINS %}
+        <li id="searchSideBar" class="list-group-item"><span>
+                <form class="navbar-search" action="{{ SEARCH_URL | default('/search.html') }}">
+                  <input type="text" class="search-query" placeholder="Search" name="q" id="tipue_search_input" required>
+                </form></span>
+        </li>
+        {% endif %}
+
         {% if SOCIAL %}
         <li class="list-group-item"><h4><i class="fa fa-home fa-lg"></i><span class="icon-label">{{ _('Social') }}</span></h4>
               <ul class="list-group" id="social">