Merge pull request #10 from KryptoPX/master

fix dashboard deck css and add responisve feature to web
This commit is contained in:
Santiago L 2022-02-05 13:07:03 +01:00 committed by GitHub
commit 70b256d1ed
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 69 additions and 1 deletions

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: none;
width: fit-content;
transition-duration: 200ms;
transition-property: left;
}
#sidebar #sidebar-services {
@ -317,3 +326,59 @@ h1.service-name {
td:hover .roll-hover {
visibility: visible;
}
#sidebar-btn * {
font-size: 14.4px !important;
font-family: "Font Awesome 5 Free";
}
@media (min-width: 1350px){
.card-deck .card {
flex: 1 0 0%;
}
}
@media (max-width: 800px){
#sidebar {
left: calc(-277px + 34px);
}
#sidebar * {
opacity: 0;
transition-delay: 150ms;
transition-duration: 300ms;
}
#sidebar-btn {
display: block;
}
#sidebar-btn::before {
font-family: "Font Awesome 5 Free";
content: "\f0c9";
font-weight: 900;
}
#content {
margin-left: 34px;
}
#sidebar-toggle:checked {
width: 277px;
}
#sidebar-toggle:checked ~ #sidebar {
left: 0;
}
#sidebar-toggle:checked ~ #sidebar * {
opacity: 100%;
}
#sidebar-toggle:checked ~ #sidebar-btn {
left: 243px;
}
#sidebar-toggle:checked ~ #sidebar-btn::before {
content: "\f00d";
}
}
@media (min-width: 576px){
.card-deck .card {
flex: 1 0 40%;
margin: 15px;
}
}

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"></label>
<nav id="sidebar" class="bg-primary border-right pt-4">
{% block sidebar %}
<div class="sidebar-branding">

View file

@ -3,7 +3,7 @@
{% block content %}
<h2>{% trans "Welcome back" %} <strong>{{ profile.username }}</strong></h2>
<h2 style="margin-top: 10px;">{% trans "Welcome back" %} <strong>{{ profile.username }}</strong></h2>
{% 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 %}