[CSS] Refactor Right Panel style
This commit is contained in:
Diogo Peralta Cordeiro
Hugo Sales
parent
2d8d8ffb48
commit
a0b820fd76
|
|
@ -145,72 +145,6 @@ b {
|
|||
z-index: 1;
|
||||
}
|
||||
|
||||
/* RIGHT PANEL */
|
||||
#right-panel {
|
||||
order: 3;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
border: solid var(--fg);
|
||||
border-width: 0 3px 3px 0;
|
||||
display: none;
|
||||
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: var(--bg1);
|
||||
margin-top: calc(3 * var(--main-size));
|
||||
z-index: 0;
|
||||
border-left: solid 1px var(--accent-low);
|
||||
}
|
||||
|
||||
input.larger {
|
||||
width: var(--main-size);
|
||||
height: calc( 2 * var(--main-size));
|
||||
}
|
||||
|
||||
/* untoggled */
|
||||
.rss {
|
||||
right: 0;
|
||||
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;
|
||||
}
|
||||
|
||||
/* styling radio buttons and checkboxes */
|
||||
.content input[type="checkbox"] + label::before {
|
||||
content: '';
|
||||
|
|
|
|||
|
|
@ -173,72 +173,6 @@ b {
|
|||
z-index: 1;
|
||||
}
|
||||
|
||||
|
||||
/* RIGHT PANEL */
|
||||
#right-panel {
|
||||
order: 3;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
border: solid var(--bg1);
|
||||
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: var(--bg1);
|
||||
margin-top: calc(3 * var(--main-size));
|
||||
border: solid 1px var(--accent-low);
|
||||
}
|
||||
|
||||
input.larger {
|
||||
width: var(--main-size);
|
||||
height: calc( 2 * var(--main-size));
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
/* styling radio buttons and checkboxes */
|
||||
.content input[type="checkbox"] + label::before {
|
||||
content: '';
|
||||
|
|
|
|||
|
|
@ -172,72 +172,6 @@ b {
|
|||
z-index: 1;
|
||||
}
|
||||
|
||||
|
||||
/* RIGHT PANEL */
|
||||
#right-panel {
|
||||
order: 3;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
border: solid var(--bg1);
|
||||
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: var(--bg1);
|
||||
margin-top: calc(3 * var(--main-size));
|
||||
border: solid 1px var(--accent-low);
|
||||
}
|
||||
|
||||
input.larger {
|
||||
width: var(--main-size);
|
||||
height: calc( 2 * var(--main-size));
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
/* styling radio buttons and checkboxes */
|
||||
.content input[type="checkbox"] + label::before {
|
||||
content: '';
|
||||
|
|
|
|||
64
public/assets/css/right/right.css
Normal file
64
public/assets/css/right/right.css
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
#right-panel {
|
||||
order: 3;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
border: solid var(--fg);
|
||||
border-width: 0 3px 3px 0;
|
||||
display: none;
|
||||
padding: 0.3em;
|
||||
}
|
||||
.right {
|
||||
transform: rotate(135deg);
|
||||
-webkit-transform: rotate(135deg);
|
||||
}
|
||||
|
||||
#right-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: var(--nav-size);
|
||||
height: calc(100vh - (3 * var(--unit-size)));
|
||||
position: fixed;
|
||||
background-color: var(--bg1);
|
||||
margin-top: calc(3 * var(--main-size));
|
||||
z-index: 0;
|
||||
border-left: solid 1px var(--accent-low);
|
||||
}
|
||||
|
||||
input.larger {
|
||||
width: var(--main-size);
|
||||
height: calc( 2 * var(--main-size));
|
||||
}
|
||||
|
||||
/* untoggled */
|
||||
#right-container {
|
||||
right: 0;
|
||||
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~#right-container {
|
||||
display: flex;
|
||||
right: 0;
|
||||
top: 0;
|
||||
transition: 0.3s ease;
|
||||
}
|
||||
#toggle-right:checked+.arrow {
|
||||
transform: rotate(-45deg);
|
||||
transition: 0.3s ease;
|
||||
}
|
||||
64
public/assets/css/right/right_mid.css
Normal file
64
public/assets/css/right/right_mid.css
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
/* RIGHT PANEL */
|
||||
#right-panel {
|
||||
order: 3;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
border: solid var(--bg1);
|
||||
border-width: 0 3px 3px 0;
|
||||
display: inline-block;
|
||||
padding: 0.3em;
|
||||
}
|
||||
.right {
|
||||
transform: rotate(135deg);
|
||||
-webkit-transform: rotate(135deg);
|
||||
}
|
||||
|
||||
#right-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: var(--nav-size);
|
||||
height: calc(100vh - (3 * var(--unit-size)));
|
||||
position: fixed;
|
||||
background-color: var(--bg1);
|
||||
margin-top: calc(3 * var(--main-size));
|
||||
border: solid 1px var(--accent-low);
|
||||
}
|
||||
|
||||
input.larger {
|
||||
width: var(--main-size);
|
||||
height: calc( 2 * var(--main-size));
|
||||
}
|
||||
|
||||
/* untoggled */
|
||||
#right-container {
|
||||
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~#right-container {
|
||||
display: flex;
|
||||
right: 0;
|
||||
top: 0;
|
||||
transition: 0.3s ease;
|
||||
}
|
||||
#toggle-right:checked+.arrow {
|
||||
transform: rotate(-45deg);
|
||||
transition: 0.3s ease;
|
||||
}
|
||||
64
public/assets/css/right/right_small.css
Normal file
64
public/assets/css/right/right_small.css
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
/* RIGHT PANEL */
|
||||
#right-panel {
|
||||
order: 3;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
border: solid var(--bg1);
|
||||
border-width: 0 3px 3px 0;
|
||||
display: inline-block;
|
||||
padding: 0.3em;
|
||||
}
|
||||
.right {
|
||||
transform: rotate(135deg);
|
||||
-webkit-transform: rotate(135deg);
|
||||
}
|
||||
|
||||
#right-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: var(--nav-size);
|
||||
height: calc(100vh - (3 * var(--unit-size)));
|
||||
position: fixed;
|
||||
background-color: var(--bg1);
|
||||
margin-top: calc(3 * var(--main-size));
|
||||
border: solid 1px var(--accent-low);
|
||||
}
|
||||
|
||||
input.larger {
|
||||
width: var(--main-size);
|
||||
height: calc( 2 * var(--main-size));
|
||||
}
|
||||
|
||||
/* untoggled */
|
||||
#right-container {
|
||||
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~#right-container {
|
||||
display: flex;
|
||||
right: 0;
|
||||
top: 0;
|
||||
transition: 0.3s ease;
|
||||
}
|
||||
#toggle-right:checked+.arrow {
|
||||
transform: rotate(-45deg);
|
||||
transition: 0.3s ease;
|
||||
}
|
||||
|
|
@ -21,19 +21,5 @@
|
|||
{% endblock body %}
|
||||
|
||||
{% block right %}
|
||||
<div id="related-notes">
|
||||
{{ 'Notes where this attachment appears' | trans }}
|
||||
{% for note in related_notes %}
|
||||
{% include '/note/view.html.twig' with {'note' : note, 'hide_attachments': true} only %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div id="related-tags">
|
||||
{{ 'Tags for this attachment' | trans }}
|
||||
<br/>
|
||||
{% for tag in related_tags %}
|
||||
<i>#{{tag['tag']}}</i>
|
||||
{% else %}
|
||||
{{ 'No tags' | trans }}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% endblock right %}
|
||||
|
|
|
|||
|
|
@ -3,10 +3,7 @@
|
|||
<div class="arrow right">
|
||||
<label for="toggle-right" id='right-panel'></label>
|
||||
</div>
|
||||
<div class='rss'>
|
||||
<div> </div>
|
||||
</div>
|
||||
<div>
|
||||
<div id='right-container'>
|
||||
{% set current_path = app.request.get('_route') %}
|
||||
{% if right_panel_vars is defined %}
|
||||
{% for block in handle_event('AppendRightPanelBlock', {'path': current_path, 'vars': right_panel_vars}) %}
|
||||
|
|
|
|||
3
templates/sidepanel/right/right_stylesheets.html.twig
Normal file
3
templates/sidepanel/right/right_stylesheets.html.twig
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/right/right.css') }}" media="screen and (min-width: 1300px)">
|
||||
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/right/right_mid.css') }}" media="screen and (max-width: 1300px)">
|
||||
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/right/right_small.css') }}" media="screen and (max-width: 750px)">
|
||||
|
|
@ -2,6 +2,7 @@
|
|||
{% block stylesheets %}
|
||||
{{ parent() }}
|
||||
{% include '/sidepanel/left/left_stylesheets.html.twig' %}
|
||||
{% include '/sidepanel/right/right_stylesheets.html.twig' %}
|
||||
{% endblock %}
|
||||
{% block leftpanel %}
|
||||
{% include '/sidepanel/left/left.html.twig' %}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user