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 {
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 **/

View File

@ -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 -->