pangea/django-musician
7
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

FIX: add responsive sidebarand content

Browse source
This commit is contained in:
KryptoPX 2022-01-27 13:04:06 +00:00
parent 74bcbb43a1
commit 560c48ddaa
3 changed files with 61 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
musician/static/musician/css/default.css
View file

@ -46,6 +46,15 @@ a:hover {
z-index: 999;
display: flex;
flex-direction: column;
transition-duration: 200ms;
transition-property: left;
}
#sidebar-btn {
display: block;
width: fit-content;
transition-duration: 200ms;
transition-property: left;
}
#sidebar #sidebar-services {
@ -317,3 +326,51 @@ h1.service-name {
td:hover .roll-hover {
visibility: visible;
}
@media (min-width: 576px){
.card-deck .card {
flex: 1 0 40%;
margin: 15px;
}
#sidebar-btn {
display: none;
}
}
@media (min-width: 1350px){
.card-deck .card {
flex: 1 0 0%;
}
#content {
margin-left: 280px;
}
}
@media (max-width: 800px){
#sidebar-toggle:checked {
width: 277px;
}
#sidebar-toggle:checked ~ #sidebar {
left: 0;
}
#sidebar-toggle:checked ~ #sidebar-btn {
left: 277px;
}
#sidebar-btn {
display: block;
width: fit-content;
}
#sidebar {
left: -277px;
}
#content {
margin-left: 0;
}
}

3
musician/templates/musician/base.html
View file

@ -9,6 +9,7 @@
{% block meta %}
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="NONE,NOARCHIVE" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{% endblock %}
<title>{% block title %}{% if title %}{{ title }} – {% endif %}Django musician{% endblock %}</title>
@ -32,6 +33,8 @@
<body class="{% block bodyclass %}{% endblock %}">
<div class="wrapper">
<input style="display: none" type="checkbox" id="sidebar-toggle" />
<label type="button" for="sidebar-toggle" id="sidebar-btn" class="btn btn-primary fixed-top"><i class="fas fa-bars"></i></label>
<nav id="sidebar" class="bg-primary border-right pt-4">
{% block sidebar %}
<div class="sidebar-branding">

2
musician/templates/musician/dashboard.html
View file

@ -3,7 +3,7 @@
{% block content %}
<h2>{% trans "Welcome back" %} <strong>{{ profile.username }}</strong></h2>
<h1 style="margin-top: 10px;">{% trans "Welcome back" %} <strong>{{ profile.username }}</strong></h1>
{% if profile.last_login %}
<p>{% blocktrans with last_login=profile.last_login|date:"SHORT_DATE_FORMAT" %}Last time you logged in was: {{ last_login }}{% endblocktrans %}</p>
{% else %}