Merge pull request #10 from KryptoPX/master
fix dashboard deck css and add responisve feature to web
This commit is contained in:
commit
70b256d1ed
|
@ -46,6 +46,15 @@ a:hover {
|
||||||
z-index: 999;
|
z-index: 999;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
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 {
|
#sidebar #sidebar-services {
|
||||||
|
@ -317,3 +326,59 @@ h1.service-name {
|
||||||
td:hover .roll-hover {
|
td:hover .roll-hover {
|
||||||
visibility: visible;
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -9,6 +9,7 @@
|
||||||
{% block meta %}
|
{% block meta %}
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
<meta name="robots" content="NONE,NOARCHIVE" />
|
<meta name="robots" content="NONE,NOARCHIVE" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
<title>{% block title %}{% if title %}{{ title }} – {% endif %}Django musician{% endblock %}</title>
|
<title>{% block title %}{% if title %}{{ title }} – {% endif %}Django musician{% endblock %}</title>
|
||||||
|
@ -32,6 +33,8 @@
|
||||||
|
|
||||||
<body class="{% block bodyclass %}{% endblock %}">
|
<body class="{% block bodyclass %}{% endblock %}">
|
||||||
<div class="wrapper">
|
<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">
|
<nav id="sidebar" class="bg-primary border-right pt-4">
|
||||||
{% block sidebar %}
|
{% block sidebar %}
|
||||||
<div class="sidebar-branding">
|
<div class="sidebar-branding">
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
|
|
||||||
{% block content %}
|
{% 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 %}
|
{% 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>
|
<p>{% blocktrans with last_login=profile.last_login|date:"SHORT_DATE_FORMAT" %}Last time you logged in was: {{ last_login }}{% endblocktrans %}</p>
|
||||||
{% else %}
|
{% else %}
|
||||||
|
|
Loading…
Reference in New Issue