[UI] Right panel added

This commit is contained in:
rainydaysavings 2020-08-13 02:54:51 +01:00 committed by Hugo Sales
parent 1c7ea95b1f
commit 565140adcf
Signed by: someonewithpc
GPG Key ID: 7D0C7EAFC9D835A0
6 changed files with 78 additions and 6 deletions

View File

@ -138,3 +138,70 @@ b {
fill: currentColor;
align-self: center;
}
/* RIGHT PANEL */
#right-panel {
order: 4;
}
.arrow {
border: solid white;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 0.3em;
}
.right {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
.rss {
display: flex;
flex-direction: column;
width: var(--nav-size);
height: calc(100vh - (3 * var(--unit-size)));
position: fixed;
background-color: rgba(0, 0, 0, 0.40);
margin-top: calc(3 * var(--main-size));
}
.right-panel input[type=checkbox] {
transform: scale(3);
-ms-transform: scale(3);
-webkit-transform: scale(3);
padding: 3em;
}
/* untoggled */
.rss {
right: -100%;
top: 0;
transition: 0.3s ease;
}
.arrow label {
display: block;
cursor: pointer
}
#toggle-right {
position: absolute;
z-index: 2;
cursor: pointer;
opacity: 0;
}
#toggle-right:not(:checked)+.arrow {
transform: rotate(135deg);
transition: 0.3s ease;
}
/* toggled */
#toggle-right:checked~.rss {
display: flex;
right: 0;
top: 0;
transition: 0.3s ease;
}
#toggle-right:checked+.arrow {
transform: rotate(-45deg);
transition: 0.3s ease;
}

View File

@ -144,7 +144,7 @@ b {
}
#left-panel {
order: 2;
order: 1;
}
#search {

View File

@ -140,7 +140,7 @@ b {
}
#left-panel {
order: 2;
order: 1;
}
#search {

View File

@ -25,9 +25,6 @@
margin-right: var(--unit-size);
}
.navbar {
left: -15em;
top: 0;
transition: 0.3s ease;
left: 0;
top: 0;
transition: 0.3s ease;

View File

@ -30,7 +30,7 @@
}
.navbar {
left: -100%;
top:0;
top: 0;
transition: 0.3s ease;
}
.navbar a {

View File

@ -66,6 +66,14 @@
<svg id='search' class="icon icon-search">
<use xlink:href="#icon-search"></use>
</svg>
<div id="right-panel">
<input type="checkbox" id="toggle-right" autofocus>
<div class="arrow right">
<label for="toggle-right" id='right-panel'></label>
</div>
<div class='rss'>
</div>
</div>
</div>
</div>
{% endblock header%}