Merge branch 'feature/update-sidebarlayout' into dev

CHANGELOG.rst

@@ -4,7 +4,8 @@ Changelog
 0.0.9
 -----
 * [Feature] Replace sidemenu scrollbars with Mac-like ones
-* [Feature] Add dashboard reset button
+* [Feature] Added dashboard reset button
+* [Feature] Updated sidebar links ui
 * [Fix] Fixed filter submit block text alignment
 * [Fix] Made boolean field icon style global
 

jet/static/jet/css/_sidebar.scss

@@ -96,7 +96,7 @@
       &-list {
         @extend .clear-list;
 
-        &:not(:empty) {
+        .sidebar-menu-item-title + &:not(:empty) {
           margin-top: 10px !important;
         }
 
@@ -105,6 +105,17 @@
             display: none;
           }
 
+          &-icon {
+            font-size: 18px;
+            vertical-align: middle;
+            margin-right: 6px;
+            color: $sidebar-icon-color;
+          }
+
+          &.compact &-icon {
+            font-size: 16px;
+          }
+
           &-link {
             &, &:visited, &:hover {
               display: block;
@@ -173,6 +184,18 @@
             margin-left: 4px;
           }
         }
+
+        &.compact &-item-link {
+          &, &:visited, &:hover {
+            font-size: 11px;
+            padding: 6px 12px 6px 24px;
+            text-transform: uppercase;
+          }
+
+          &.padding-icon {
+            padding-left: 49px;
+          }
+        }
       }
     }
   }

jet/templates/admin/base.html

@@ -113,9 +113,9 @@
                     {% endif %}
                 {% endblock messages %}
 
-            <div class="content-sidebar">
-                        {% block sidebar %}{% endblock %}
-                    </div>
+                <div class="content-sidebar">
+                    {% block sidebar %}{% endblock %}
+                </div>
 
                 <div id="content" class="cf {% block coltype %}colM{% endblock %}">
                     {% block pretitle %}{% endblock %}
@@ -139,16 +139,34 @@
                         {% block branding %}{% endblock %}
                     </div>
                     <ul class="sidebar-menu">
-                        {% if user.is_active and user.is_staff %}
-                            <li class="sidebar-menu-item">
-                                <span class="sidebar-menu-item-icon icon-data"></span> <a href="{% url 'admin:index' %}" class="sidebar-menu-item-link">{% trans 'Home' %}</a>
-                            </li>
-                        {% endif %}
-                        {% if site_url %}
-                            <li class="sidebar-menu-item">
-                                <span class="sidebar-menu-item-icon icon-open-external"></span> <a href="{{ site_url }}" class="sidebar-menu-item-link">{% trans 'View site' %}</a>
-                            </li>
-                        {% endif %}
+                        <li class="sidebar-menu-item no-horizontal-padding">
+                            <ul class="sidebar-menu-item-list compact">
+                                {% if user.is_active and user.is_staff %}
+                                    <li class="sidebar-menu-item-list-item">
+                                        <a href="{% url 'admin:index' %}" class="sidebar-menu-item-list-item-link">
+                                            <span class="sidebar-menu-item-list-item-icon icon-data"></span> {% trans 'Home' %}
+                                        </a>
+                                    </li>
+                                {% endif %}
+                                {% if site_url %}
+                                    <li class="sidebar-menu-item-list-item">
+                                        <a href="{{ site_url }}" class="sidebar-menu-item-list-item-link">
+                                            <span class="sidebar-menu-item-list-item-icon icon-open-external"></span> {% trans 'View site' %}
+                                        </a>
+                                    </li>
+                                {% endif %}
+                                {% url 'django-admindocs-docroot' as docsroot %}
+                                {% if docsroot %}
+                                    <li class="sidebar-menu-item-list-item">
+                                        <a href="{{ docsroot }}" class="sidebar-menu-item-list-item-link">
+                                            <span class="sidebar-menu-item-list-item-icon icon-book"></span> {% trans 'Documentation' %}
+                                        </a>
+                                    </li>
+                                {% endif %}
+                                {% block nav-global %}{% endblock %}
+                            </ul>
+                        </li>
+
                         {% if user.is_active and user.is_staff %}
                             {% get_menu as app_list %}
                             {% if app_list.apps or app_list.pinned_apps %}
@@ -223,13 +241,6 @@
                                     </li>
                                 </ul>
                             </li>
-                            {% url 'django-admindocs-docroot' as docsroot %}
-                            {% if docsroot %}
-                                <li class="sidebar-menu-item">
-                                    <span class="sidebar-menu-item-icon icon-book"></span> <a href="{{ docsroot }}" class="sidebar-menu-item-link">{% trans 'Documentation' %}</a>
-                                </li>
-                            {% endif %}
-                            {% block nav-global %}{% endblock %}
                         {% endif %}
                     </ul>
                 </div>