forked from GNUsocial/gnu-social
[UI] Right panel added
This commit is contained in:
parent
c0b6d8807f
commit
4568578e16
@ -137,4 +137,71 @@ b {
|
|||||||
stroke: currentColor;
|
stroke: currentColor;
|
||||||
fill: currentColor;
|
fill: currentColor;
|
||||||
align-self: center;
|
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;
|
||||||
}
|
}
|
@ -144,7 +144,7 @@ b {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#left-panel {
|
#left-panel {
|
||||||
order: 2;
|
order: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
#search {
|
#search {
|
||||||
|
@ -140,7 +140,7 @@ b {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#left-panel {
|
#left-panel {
|
||||||
order: 2;
|
order: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
#search {
|
#search {
|
||||||
|
@ -25,9 +25,6 @@
|
|||||||
margin-right: var(--unit-size);
|
margin-right: var(--unit-size);
|
||||||
}
|
}
|
||||||
.navbar {
|
.navbar {
|
||||||
left: -15em;
|
|
||||||
top: 0;
|
|
||||||
transition: 0.3s ease;
|
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
transition: 0.3s ease;
|
transition: 0.3s ease;
|
||||||
|
@ -30,7 +30,7 @@
|
|||||||
}
|
}
|
||||||
.navbar {
|
.navbar {
|
||||||
left: -100%;
|
left: -100%;
|
||||||
top:0;
|
top: 0;
|
||||||
transition: 0.3s ease;
|
transition: 0.3s ease;
|
||||||
}
|
}
|
||||||
.navbar a {
|
.navbar a {
|
||||||
|
@ -66,6 +66,14 @@
|
|||||||
<svg id='search' class="icon icon-search">
|
<svg id='search' class="icon icon-search">
|
||||||
<use xlink:href="#icon-search"></use>
|
<use xlink:href="#icon-search"></use>
|
||||||
</svg>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
{% endblock header%}
|
{% endblock header%}
|
||||||
|
Loading…
Reference in New Issue
Block a user