Merge pull request #804 from dotKom/wiki-response-fix

Tried making the wiki-head a bit more responsive. Fixing #797

files/static/less/wiki.less

@@ -21,6 +21,29 @@
         resize: vertical;
         height: 600px;
     }
+    #article-menu {
+        border-bottom: none;
+        margin-bottom: 8px;
+        li {
+            padding-top: 0px;
+            a {
+                padding-bottom: 9px;
+            }
+        }
+    }
+    #article-breadcrumbs {
+        border-bottom: 1px solid #EEEEEE;
+        margin-bottom: 12px;
+        > div.pull-left {
+            margin-bottom: 9px;
+            margin-left: 0px !important;
+            margin-right: 10px;
+        }
+        .breadcrumb {
+            margin-bottom: 8px;
+            margin-right: 10px;
+        }
+    }
     .wiki-article {
         pre * {
             margin: 0;
@@ -62,6 +85,29 @@
             width: auto;
             border: 0px;
         }
+    }    
+    #article-menu {
+        border-bottom: none;
+        margin-bottom: 8px;
+        li {
+            padding-top: 0px;
+            a {
+                padding-bottom: 9px;
+            }
+        }
+    }
+    #article-breadcrumbs {
+        border-bottom: 1px solid #EEEEEE;
+        margin-bottom: 12px;
+        > div.pull-left {
+            margin-bottom: 9px;
+            margin-left: 0px !important;
+            margin-right: 10px;
+        }
+        .breadcrumb {
+            margin-bottom: 8px;
+            margin-right: 10px;
+        }
     }
 }
 .navbar-fixed-top {
@@ -75,4 +121,37 @@
 .navbar-fixed-top {
 	padding-left: 0px;
 	padding-right: 0px;
-}
+}
+
+@media all and (max-width: 768px) {
+    #wiki {
+        #article-menu {
+            float: left !important;
+            margin-bottom: 7px;
+            li {
+                padding-top: 0px;
+
+                a {
+                    background-color: #5BC0DE;
+                    border-color: #5BC0DE;
+                    color: #FFFFFF;
+                    margin-left: 10px;
+                    padding-top: 13px;
+                    padding-bottom: 11px;
+                    margin-left: 0px;
+                    margin-right: 10px;
+                }
+                span {
+                    display: block;
+                }
+                span.hideme {
+                    display: none;
+                }
+            }
+            li.active a {
+                background-color: #428BCA;
+                color: #fff;
+            }
+        }
+    }
+}

templates/wiki/includes/article_menu.html

@@ -0,0 +1,53 @@
+{% load i18n wiki_tags %}{% load url from future %}
+
+{% with selected_tab as selected %}
+
+<li class="pull-right{% if selected == "settings" %} active{% endif %}">
+  {% if not user.is_anonymous %}
+  <a href="{% url 'wiki:settings' article_id=article.id path=urlpath.path %}">
+    <span class="icon-wrench"></span>
+    <span class="hideme">{% trans "Settings" %}</span>
+  </a>
+  {% endif %}
+</li>
+
+{% for plugin in article_tabs %}
+  <li class="pull-right{% if selected == plugin.slug %} active{% endif %}">
+    <a href="{% url 'wiki:plugin' slug=plugin.slug article_id=article.id path=urlpath.path %}">
+      <span class="{{ plugin.article_tab.1 }}"></span>
+      <span class="hideme">{{ plugin.article_tab.0 }}</span>
+    </a>
+  </li>
+{% endfor %}
+
+<li class="pull-right{% if selected == "history" %} active{% endif %}">
+  <a href="{% url 'wiki:history' article_id=article.id path=urlpath.path %}">
+    <span class="icon-time"></span>
+    <span class="hideme">{% trans "Changes" %}</span>
+  </a>
+</li>
+
+{% if article|can_write:user and not article.current_revision.locked %}
+<li class="pull-right{% if selected == "edit" %} active{% endif %}">
+  <a href="{% url 'wiki:edit' article_id=article.id path=urlpath.path %}">
+    <span class="icon-edit"></span>
+    <span class="hideme">{% trans "Edit" %}</span>
+  </a>
+</li>
+{% else %}
+<li class="pull-right{% if selected == "source" %} active{% endif %}">
+  <a href="{% url 'wiki:source' article_id=article.id path=urlpath.path %}">
+    <span class="icon-lock"></span>
+    <span class="hideme">{% trans "View Source" %}</span>
+  </a>
+</li>
+{% endif %}
+
+<li class="pull-right{% if selected == "view" %} active{% endif %}">
+  <a href="{% url 'wiki:get' article_id=article.id path=urlpath.path %}">
+    <span class="icon-home"></span>
+    <span class="hideme">{% trans "View" %}</span>
+  </a>
+</li>
+
+{% endwith %}