Set sidebar paddings.

This commit is contained in:
Santiago Lamora 2020-01-20 18:17:37 +01:00
parent 442c2a3d19
commit 5495808d9c
2 changed files with 27 additions and 15 deletions

View File

@ -40,8 +40,8 @@ a:hover {
} }
#sidebar { #sidebar {
min-width: 250px; min-width: 280px;
max-width: 250px; max-width: 280px;
min-height: 100vh; min-height: 100vh;
} }
@ -49,6 +49,19 @@ a:hover {
margin-left: -250px; 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 { #sidebar ul.components {
padding: 20px 0; padding: 20px 0;
} }
@ -107,6 +120,7 @@ a:hover {
background: #ECECEB no-repeat url("../images/logo-pangea-light-gray-bg.svg"); background: #ECECEB no-repeat url("../images/logo-pangea-light-gray-bg.svg");
background-position: right 5% top 10%; background-position: right 5% top 10%;
color: #343434; color: #343434;
padding-left: 2rem;
} }
/** services **/ /** services **/

View File

@ -34,14 +34,15 @@
<div class="wrapper"> <div class="wrapper">
<nav id="sidebar" class="bg-primary border-right pt-4"> <nav id="sidebar" class="bg-primary border-right pt-4">
{% block sidebar %} {% block sidebar %}
{# <!-- branding --> #} <div class="sidebar-branding">
<img class="img-fluid" src="{% static 'musician/images/logo-pangea-monocrome-white.png' %}" <img class="img-fluid" src="{% static 'musician/images/logo-pangea-monocrome-white.png' %}"
alt="Pangea.org - Internet etic i solidari" /> alt="Pangea.org - Internet etic i solidari" />
</div>
<span class="text-light d-block text-right">{{ version }}</span> <span class="text-light d-block text-right">{{ version }}</span>
<div class="dropdown-divider"></div> <div class="dropdown-divider"></div>
{# <!-- services menu --> #} {# <!-- services menu --> #}
{% for item in services_menu %} {% for item in services_menu %}
<ul class="nav flex-column"> <ul id="sidebar-services" class="nav flex-column">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link text-light active" href="{% url item.pattern_name %}"> <a class="nav-link text-light active" href="{% url item.pattern_name %}">
<i class="fas fa-{{ item.icon }}"></i> <i class="fas fa-{{ item.icon }}"></i>
@ -50,11 +51,10 @@
</li> </li>
</ul> </ul>
{% endfor %} {% endfor %}
{# <!-- user profile menu --> #}
<div class="dropdown-divider mt-5"></div>
<div class="dropdown dropright"> {# <!-- user profile menu --> #}
<button type="button" class="btn btn-primary nav-link text-light w-100" data-toggle="dropdown"> <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"/> <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/> <strong>{{ profile.username }}</strong><br/>
<i class="fas fa-cog"></i> Settings <i class="fas fa-cog"></i> Settings
@ -65,8 +65,7 @@
</div> </div>
</div> </div>
<div class="dropdown-divider"></div> <div class="sidebar-logout">
<ul class="nav flex-column"> <ul class="nav flex-column">
<li class="nav-item text-right"> <li class="nav-item text-right">
<a class="nav-link text-light" href="{% url 'musician:logout' %}"> <a class="nav-link text-light" href="{% url 'musician:logout' %}">
@ -75,8 +74,7 @@
</a> </a>
</li> </li>
</ul> </ul>
</div>
</ul>
{% endblock sidebar %} {% endblock sidebar %}
</nav><!-- ./sidebar --> </nav><!-- ./sidebar -->