update layout

- move links from navbar into sidebar - much more mobile friendly, especially on pages with very long tables
monty5811 · Feb 3, 2016 · 83ba7e6 · 83ba7e6
1 parent 5dba14f
commit 83ba7e6
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 83 deletions.
diff --git a/apostello/assets/js/main.js b/apostello/assets/js/main.js
@@ -68,7 +68,6 @@ $(document).ready(function() {
 });
 $(document).ready(function() {
     $('.dropdown').dropdown({
-        debug: true,
         label: {
             transition: 'horizontal flip',
             duration: 0,
@@ -77,7 +76,6 @@ $(document).ready(function() {
     });
 });
 $(document).ready(function() {
-    console.log('setup checkbox')
     $('.ui.checkbox')
         .checkbox({
             onChecked: function() {
@@ -90,5 +88,9 @@ $(document).ready(function() {
                 $('#members_dropdown').dropdown('clear')
             }
         });
-    console.log('checkbox done')
-});
+});
+$(document).ready(function() {
+    $('.ui.sidebar')
+    .sidebar()
+    .sidebar('attach events', '#togglesidebar');
+})
diff --git a/apostello/static/js/main.js b/apostello/static/js/main.js
diff --git a/apostello/templates/apostello/base.html b/apostello/templates/apostello/base.html
@@ -7,31 +7,91 @@
 {% endblock %}
 </head>
 <body>
-{% include 'apostello/includes/navbar.html' %}
-<div class="ui stackable horizontally padded mobile reversed grid">
-  <div class="row">
-    <div class="one wide column"></div>
-    <div class="one wide column">
-        {% if not hide_menu %}
-        <div class="ui simple dropdown icon item">
-          <i class="violet very large wrench icon"></i>
-          <div class="menu">
-            {% block side_bar %} {% endblock %}
-          </div>
-        </div>
-        {% endif %}
+{% cache 1800 navbar request.user %}
+{% with profile=request.user.profile %}
+<div class="ui top attached inverted violet menu">
+  <a class="item" id="togglesidebar">
+    <i class="sidebar icon"></i>
+    Menu
+  </a>
+  <div class="ui simple dropdown float right item">
+      {{user.email}} <i class="dropdown icon"></i>
+      <div class="menu">
+        <div class="header">{{ TWILIO_FROM_NUM }}</div>
+        <div class="divider"></div>
+        {% if request.user.is_staff %}<a class="item" href="/admin/">Admin</a>{% endif %}
+        {% if request.user.socialaccount_set|length < 1 %}<a class="item" href="/accounts/password/change">Change Password</a>{% endif %}
+        <a class="item" href="/accounts/logout/">Logout</a>
+      </div>
+    </div>
+</div>
+<div class="ui pushable">
+  <div class="ui inverted violet left inline vertical sidebar menu">
+    <a href="/" class="header item">
+      Apostello
+    </a>
+    {% if profile.can_send_sms or request.user.is_staff %}
+    <div class="item">
+      <div class="header">Send</div>
+      <div class="menu">
+        <a class="item" href="{% url 'send_adhoc' %}">Individuals</a>
+        <a class="item" href="{% url 'send_group' %}">Group</a>
+      </div>
+    </div>
+    {% endif %}
+    <div class="item">
+      <div class="header">Phonebook</div>
+      <div class="menu">
+        {% if profile.can_see_contact_names or request.user.is_staff %}<a class="item" href="{% url 'recipients' %}">Contacts</a>{% endif %}
+        {% if profile.can_see_groups or request.user.is_staff %}<a class="item" href="{% url 'recipient_groups' %}">Groups</a>{% endif %}
+      </div>
     </div>
-    <div class="eleven wide column">
-      <div class="ui stackable grid container">
-        <div class="sixteen wide column">
-          {% if messages %}
-            {% for message in messages %}
-            <div class="ui {{ message.tags }} message">
-              {{ message }}
+    {% if profile.can_see_keywords or request.user.is_staff %}<a class="item" href="{% url 'keywords' %}">Keywords</a>{% endif %}
+
+    <div class="item">
+      <div class="header">Logs</div>
+      <div class="menu">
+        {% if profile.can_see_incoming or request.user.is_staff %}<a class="item" href="{%  url 'incoming' %}">Incoming</a>{% endif %}
+        {% if profile.can_see_outgoing or request.user.is_staff %}<a class="item" href="{% url 'outgoing' %}">Outgoing</a>{% endif %}
+      </div>
+    </div>
+    {% if profile.can_import or request.user.is_staff %}
+    <div class="item">
+      <div class="header">Tools</div>
+      <div class="menu">
+         <a class="item" href="{% url 'import_recipients' %}">CSV</a>
+        <a class="item" href="{% url 'import_elvanto' %}">Elvanto</a>
+      </div>
+    </div>
+    {% endif %}
+  </div>
+  {% endwith %}
+  {% endcache %}
+  <div class="pusher">
+    <div class="ui hidden divider"></div>
+    <div class="ui stackable grid container">
+      <div class="one wide column">
+        {% if not hide_menu %}
+          <div class="ui simple dropdown icon item">
+            <i class="violet very large wrench icon"></i>
+            <div class="menu">
+              {% block side_bar %} {% endblock %}
             </div>
-            {% endfor %}
+          </div>
           {% endif %}
-          {% block content %} {% endblock %}
+      </div>
+      <div class="fifteen wide column">
+        <div class="ui stackable grid container">
+          <div class="sixteen wide column">
+            {% if messages %}
+              {% for message in messages %}
+              <div class="ui {{ message.tags }} message">
+                {{ message }}
+              </div>
+              {% endfor %}
+            {% endif %}
+            {% block content %} {% endblock %}
+          </div>
         </div>
       </div>
     </div>

diff --git a/apostello/templates/apostello/includes/navbar.html b/apostello/templates/apostello/includes/navbar.html