[CSS] Refactor Right Panel style

This commit is contained in:
Diogo Peralta Cordeiro 2021-04-30 02:23:19 +01:00 committed by Hugo Sales
parent 2d8d8ffb48
commit a0b820fd76
Signed by: someonewithpc
GPG Key ID: 7D0C7EAFC9D835A0
10 changed files with 198 additions and 217 deletions

View File

@ -145,72 +145,6 @@ b {
z-index: 1; 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 */ /* styling radio buttons and checkboxes */
.content input[type="checkbox"] + label::before { .content input[type="checkbox"] + label::before {
content: ''; content: '';

View File

@ -173,72 +173,6 @@ b {
z-index: 1; 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 */ /* styling radio buttons and checkboxes */
.content input[type="checkbox"] + label::before { .content input[type="checkbox"] + label::before {
content: ''; content: '';

View File

@ -172,72 +172,6 @@ b {
z-index: 1; 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 */ /* styling radio buttons and checkboxes */
.content input[type="checkbox"] + label::before { .content input[type="checkbox"] + label::before {
content: ''; content: '';

View 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;
}

View 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;
}

View 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;
}

View File

@ -21,19 +21,5 @@
{% endblock body %} {% endblock body %}
{% block right %} {% 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 %} {% endblock right %}

View File

@ -3,10 +3,7 @@
<div class="arrow right"> <div class="arrow right">
<label for="toggle-right" id='right-panel'></label> <label for="toggle-right" id='right-panel'></label>
</div> </div>
<div class='rss'> <div id='right-container'>
<div> </div>
</div>
<div>
{% set current_path = app.request.get('_route') %} {% set current_path = app.request.get('_route') %}
{% if right_panel_vars is defined %} {% if right_panel_vars is defined %}
{% for block in handle_event('AppendRightPanelBlock', {'path': current_path, 'vars': right_panel_vars}) %} {% for block in handle_event('AppendRightPanelBlock', {'path': current_path, 'vars': right_panel_vars}) %}

View 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)">

View File

@ -2,6 +2,7 @@
{% block stylesheets %} {% block stylesheets %}
{{ parent() }} {{ parent() }}
{% include '/sidepanel/left/left_stylesheets.html.twig' %} {% include '/sidepanel/left/left_stylesheets.html.twig' %}
{% include '/sidepanel/right/right_stylesheets.html.twig' %}
{% endblock %} {% endblock %}
{% block leftpanel %} {% block leftpanel %}
{% include '/sidepanel/left/left.html.twig' %} {% include '/sidepanel/left/left.html.twig' %}