From 5495808d9c7f0d8f7a715796ef7d81e328e99e81 Mon Sep 17 00:00:00 2001
From: Santiago Lamora <slamora@users.noreply.github.com>
Date: Mon, 20 Jan 2020 18:17:37 +0100
Subject: [PATCH] Set sidebar paddings.

---
 musician/static/musician/css/default.css | 18 ++++++++++++++++--
 musician/templates/musician/base.html    | 24 +++++++++++-------------
 2 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/musician/static/musician/css/default.css b/musician/static/musician/css/default.css
index ecb1ff2..6d9efee 100644
--- a/musician/static/musician/css/default.css
+++ b/musician/static/musician/css/default.css
@@ -40,8 +40,8 @@ a:hover {
 }
 
 #sidebar {
-    min-width: 250px;
-    max-width: 250px;
+    min-width: 280px;
+    max-width: 280px;
     min-height: 100vh;
 }
 
@@ -49,6 +49,19 @@ a:hover {
     margin-left: -250px;
 }
 
+#sidebar .sidebar-branding {
+    padding-left: 2rem;
+    padding-right: 2rem;
+}
+#sidebar #sidebar-services {
+    padding-left: 1rem;
+    padding-right: 1rem;
+}
+
+#sidebar #user-profile-menu {
+    background: rgba(255, 255, 255, 0.3);
+}
+
 #sidebar ul.components {
     padding: 20px 0;
 }
@@ -107,6 +120,7 @@ a:hover {
     background: #ECECEB no-repeat url("../images/logo-pangea-light-gray-bg.svg");
     background-position: right 5% top 10%;
     color: #343434;
+    padding-left: 2rem;
 }
 
 /** services **/
diff --git a/musician/templates/musician/base.html b/musician/templates/musician/base.html
index 42158a5..8a531e3 100644
--- a/musician/templates/musician/base.html
+++ b/musician/templates/musician/base.html
@@ -34,14 +34,15 @@
   <div class="wrapper">
     <nav id="sidebar" class="bg-primary border-right pt-4">
       {% block sidebar %}
-      {# <!-- branding --> #}
-      <img class="img-fluid" src="{% static 'musician/images/logo-pangea-monocrome-white.png' %}"
-        alt="Pangea.org - Internet etic i solidari" />
+      <div class="sidebar-branding">
+        <img class="img-fluid" src="{% static 'musician/images/logo-pangea-monocrome-white.png' %}"
+          alt="Pangea.org - Internet etic i solidari" />
+      </div>
       <span class="text-light d-block text-right">{{ version }}</span>
       <div class="dropdown-divider"></div>
       {# <!-- services menu --> #}
       {% for item in services_menu %}
-      <ul class="nav flex-column">
+      <ul id="sidebar-services" class="nav flex-column">
           <li class="nav-item">
             <a class="nav-link text-light active" href="{% url item.pattern_name %}">
               <i class="fas fa-{{ item.icon }}"></i>
@@ -50,11 +51,10 @@
           </li>
       </ul>
       {% endfor %}
-      {# <!-- user profile menu --> #}
-      <div class="dropdown-divider mt-5"></div>
 
-      <div class="dropdown dropright">
-        <button type="button" class="btn btn-primary nav-link text-light w-100" data-toggle="dropdown">
+      {# <!-- user profile menu --> #}
+      <div id="user-profile-menu" class="mt-5 pt-1 dropdown dropright">
+        <button type="button" class="btn nav-link text-light w-100" data-toggle="dropdown">
           <img id="user-avatar" class="float-right" width="64" height="64" src="{% static "musician/images/default-profile-picture.png" %}" alt="user-profile-picture"/>
             <strong>{{ profile.username }}</strong><br/>
             <i class="fas fa-cog"></i> Settings
@@ -65,9 +65,8 @@
         </div>
       </div>
 
-      <div class="dropdown-divider"></div>
-
-          <ul class="nav flex-column">
+      <div class="sidebar-logout">
+        <ul class="nav flex-column">
           <li class="nav-item text-right">
             <a class="nav-link text-light" href="{% url 'musician:logout' %}">
               {% trans 'Log out' %}
@@ -75,8 +74,7 @@
             </a>
           </li>
         </ul>
-    
-    </ul>
+      </div>
 
       {% endblock sidebar %}
     </nav><!-- ./sidebar -->