GNUsocial/gnu-social
4
0
Fork 1
Code Issues Releases Wiki Activity

[TWIG][CSS] Shortcuts now work in small screen sizes. Header icons further polish. Profile navigation structural rework.

Browse Source
This commit is contained in:
Eliseu Amaro
2021-08-30 21:01:32 +01:00
committed by Hugo Sales
parent ca2eff2906
commit 7dc390ca1c
5 changed files with 124 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
public/assets/css/base.css
View File

@@ -11,7 +11,7 @@
*/ */
--unit-size: 0.5rem; --unit-size: 0.5rem;
--main-size: 1.4rem; --main-size: 1.4rem;
--medium-size: 1.2rem; --medium-size: 1.15rem;
--small-size: 1rem; --small-size: 1rem;
/* colours and shadows */ /* colours and shadows */
@@ -40,9 +40,14 @@
background-size: 100% 100%; background-size: 100% 100%;
} }
.anchor-hidden {
display: none;
}
/* HEADER AND SIDEPANELS */ /* HEADER AND SIDEPANELS */
#header { #header {
z-index: 1; z-index: 1;
font-size: var(--main-size);
height: 3rem; height: 3rem;
display: flex; display: flex;
@@ -50,18 +55,13 @@
top: 0; top: 0;
background-color: var(--bg1); background-color: var(--bg1);
padding: var(--unit-size);
width: 100%; width: 100%;
align-items: center; align-items: center;
padding: var(--unit-size);
box-shadow: var(--shadow); box-shadow: var(--shadow);
} }
/* content should be rendered after the header, not bellow */
#header + * {
margin-top: 3rem;
}
#instance { #instance {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -96,10 +96,7 @@
/* CONTAINS ALL ELEMENTS BESIDES HEADER */ /* CONTAINS ALL ELEMENTS BESIDES HEADER */
.container { .container {
display: flex; margin-top: 3rem;
flex-wrap: wrap;
justify-content: space-around;
margin-left: 20%; margin-left: 20%;
margin-right: 20%; margin-right: 20%;
padding: var(--unit-size); padding: var(--unit-size);
@@ -457,11 +454,11 @@ input[type=file]:hover {
} }
/* MEDIA QUERIES */ /* MEDIA QUERIES */
/* sidepanels need to be shown by default on desktop, hidden on mobile */ /* sidepanels need to be shown by default on desktop, hidden on mobile */
.panel .panel-content { .panel .panel-content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
font-size: var(--small-size);
/* should remain in place for the user */ /* should remain in place for the user */
position: fixed; position: fixed;
@@ -473,7 +470,6 @@ input[type=file]:hover {
/* should occupy the entire vertical real estate */ /* should occupy the entire vertical real estate */
height: 100%; height: 100%;
padding: var(--unit-size); padding: var(--unit-size);
} }
@@ -486,12 +482,19 @@ input[type=file]:hover {
width: 100%; width: 100%;
max-width: 20%; max-width: 20%;
} }
a[id|="anchor"]:target + * {
animation-name: highlight;
animation-duration: 500ms;
animation-timing-function: ease;
}
} }
@media (max-width: 1200px) { @media (max-width: 1200px) {
/* content should occupy the entire width at this size */ /* content should occupy the entire width at this size */
.container { .container {
margin: unset; margin-left: unset;
margin-right: unset;
} }
.content { .content {
@@ -504,8 +507,9 @@ input[type=file]:hover {
} }
#panel-left-toggle:checked ~ .panel-content, #panel-left-toggle:checked ~ .panel-content,
#panel-right-toggle:checked ~ .panel-content { #panel-right-toggle:checked ~ .panel-content,
display: flex; a[id|="anchor"]:target ~ .panel-content {
display: flex !important;
width: 100%; width: 100%;
background-color: var(--bg2); background-color: var(--bg2);
@@ -594,10 +598,4 @@ input[type=file]:hover {
border-radius: var(--unit-size); border-radius: var(--unit-size);
box-shadow: initial; box-shadow: initial;
} }
}
[id|="anchor"]:target + * {
animation-name: highlight;
animation-duration: 500ms;
animation-timing-function: ease;
} }

87
public/assets/css/left/left.css
View File

@@ -5,20 +5,30 @@
#panel-left-toggle:not(:checked), #panel-left-toggle:not(:checked),
#panel-left-toggle:checked { #panel-left-toggle:checked {
position: absolute; position: absolute;
opacity: 0; top: -100%;
}
#panel-left-toggle:focus + * {
border-radius: 4px;
border: 2px solid var(--white);
}
#panel-left-icon {
cursor: pointer !important;
border: 2px solid transparent;
height: 100%;
width: auto;
}
.panel-left nav {
font-size: var(--medium-size);
} }
/* PROFILE */ /* PROFILE */
.profile-nav {
font-family: var(--display-font);
}
.profile-nav nav {
display: inline-grid;
margin-bottom: var(--main-size);
}
.profile { .profile {
display: flex;
flex-direction: column;
font-family: var(--display-font);
background-color: var(--translucent); background-color: var(--translucent);
margin-bottom: var(--main-size); margin-bottom: var(--main-size);
border: solid 2px var(--bg2); border: solid 2px var(--bg2);
@@ -28,56 +38,27 @@
box-sizing: border-box; box-sizing: border-box;
} }
#profile-links { #user {
display: flex; align-content: center;
align-items: center;
box-sizing: border-box;
margin-bottom: var(--unit-size);
} }
#user img {
#user-avatar { float: left;
box-sizing: border-box; width: 5rem;
border-radius: 50%;
padding: 0;
}
#user-avatar img {
border-radius: var(--unit-size);
width: calc(3 * var(--main-size));
height: auto; height: auto;
margin-right: 5px;
margin-right: var(--unit-size);
} }
#user-avatar:hover, .profile-navigation {
#user-avatar:focus { margin-bottom: var(--main-size);
cursor: pointer;
background: none !important;
} }
.profile-navigation > * {
#user-avatar:hover img, display: block;
#user-avatar:focus img {
border-radius: 50% !important;
box-shadow: var(--shadow-light) !important;
}
#user-info {
display: flex;
flex-direction: column;
}
#user-tags {
font-family: var(--main-font);
padding-left: var(--unit-size);
}
#stats {
display: flex;
flex-direction: column;
font-size: var(--medium-size);
font-weight: bold;
} }
/* TIMELINE NAVIGATION / PLUGINS */ /* TIMELINE NAVIGATION / PLUGINS */
.timeline-nav {
margin-bottom: var(--main-size);
}
.timeline-nav a, .timeline-nav a,
.timeline-nav h1 { .timeline-nav h1 {
display: flex; display: flex;
@@ -106,5 +87,5 @@
} }
.footer { .footer {
font-size: var(--small-size);
} }

13
public/assets/css/right/right.css
View File

@@ -5,5 +5,16 @@
#panel-right-toggle:not(:checked), #panel-right-toggle:not(:checked),
#panel-right-toggle:checked { #panel-right-toggle:checked {
position: absolute; position: absolute;
opacity: 0; top: -100%;
}
#panel-right-toggle:focus + * {
border-radius: 4px;
border: 2px solid var(--white);
}
#panel-right-icon {
cursor: pointer !important;
border: 2px solid transparent;
height: 100%;
width: auto;
} }

124
templates/sidepanel/left/left.html.twig
View File

@@ -1,22 +1,17 @@
<div class="panel panel-left"> <div class="panel panel-left">
<input type="checkbox" id="panel-left-toggle"> <input type="checkbox" id="panel-left-toggle">
<label for="panel-left-toggle">{{ icon('menu', 'icon icon-left') | raw }}</label> <label id="panel-left-icon" for="panel-left-toggle">{{ icon('menu', 'icon icon-left') | raw }}</label>
<a id="anchor-left-panel" class="anchor-hidden"></a> <a id="anchor-left-panel" class="anchor-hidden"></a>
<aside class="panel-content"> <aside class="panel-content">
<nav class='profile-nav'> {% if app.user %}
{% if app.user %} <section class='profile'>
<section class='profile' role="complementary"> <a id="user" href="{{ path('settings') }}">
<div id="profile-links"> <img src='{{ user_avatar }}' alt="Your avatar." class="icon icon-avatar">
<a id="user-avatar" href="{{ path('settings') }}"> <div id="user-info">
<img src='{{ user_avatar }}' alt="Your avatar." class="icon icon-avatar"> <h1>{{ user_nickname }}</h1>
</a>
<span id="user-info"> <nav id="user-tags">
<a id="user-nick" href="{{ path('settings') }}">
<h1>{{ user_nickname }}</h1>
</a>
<div id="user-tags">
{% if user_tags %} {% if user_tags %}
{% for tag in user_tags %} {% for tag in user_tags %}
<a href='#'> #{{ tag }}</a> <a href='#'> #{{ tag }}</a>
@@ -24,65 +19,60 @@
{% else %} {% else %}
{{ '(No tags)' | trans }} {{ '(No tags)' | trans }}
{% endif %} {% endif %}
</div> </nav>
</span>
<section id="user-stats">
{% if user_followers %}<h2>{{ 'Followers' | trans }} {{ user_followers }}</h2> {% endif %}
{% if user_followed %}<h2>{{ 'Followed' | trans }} {{ user_followed }}</h2> {% endif %}
</section>
</div> </div>
</a>
<section id="stats"> {# {% for extra in profile_extras %}
<label>{{ 'Followers' | trans }} {{ user_followers }}</label> {% include '/'~ extra.name ~ '/view.html.twig' with {'vars': extra.vars} only %}
<label>{{ 'Followed' | trans }} {{ user_followed }}</label>
</section>
{# {% for extra in profile_extras %}
{% include '/'~ extra.name ~ '/view.html.twig' with {'vars': extra.vars} only %}
{% endfor %} #} {% endfor %} #}
</section> </section>
<nav role="navigation"> <nav class="profile-navigation">
<a href='#'>Messages</a> <a href='#'>Messages</a>
<a href="{{ path("replies", {'nickname' : user_nickname}) }}" <a href="{{ path("replies", {'nickname' : user_nickname}) }}"
class='hover-effect {{ active("replies") }}'>Replies</a> class='hover-effect {{ active("replies") }}'>Replies</a>
{% for link in handle_event('InsertLeftPanelLink', user_nickname) %} {% for link in handle_event('InsertLeftPanelLink', user_nickname) %}
{{ link | raw }} {{ link | raw }}
{% endfor %}
<a href="{{ path('settings') }}"
class='hover-effect {{ active('settings_') }}'>Settings</a>
<a href='{{ path('logout') }}'>Logout</a>
</nav>
{% else %}
<nav class="profile-navigation">
<a href="{{ path('login') }}" class='hover-effect {{ active('login') }}'>Login</a>
<a href="{{ path('register') }}">Register</a>
</nav>
{% endif %}
<nav class="timeline-nav" role="menu">
<h1 role="tab">Timeline</h1>
<nav class='sec-nav' role="navigation">
<a href="{{ path('main_public') }}"
class='{{ active('main_public') }}'>Public</a>
{% if user_nickname is defined %}
<a href="{{ path("home_all", {'nickname' : user_nickname}) }}"
class='{{ active("home_all") }}'>Home</a>
{% endif %}
<a href="{{ path('main_all') }}" class='hover-effect {{ active('main_all') }}'>Network</a>
{% if main_nav_tabs is defined %}
{% for tab in main_nav_tabs %}
<a href="{{ path(tab['route']) }}"
class='{{ active(tab['route']) }}'>{{ tab['title'] }}</a>
{% endfor %} {% endfor %}
<a href="{{ path('settings') }}" {% endif %}
class='hover-effect {{ active('settings_') }}'>Settings</a> </nav>
<a href='{{ path('logout') }}'>Logout</a>
</nav>
{% else %}
<nav>
<a href="{{ path('login') }}" class='hover-effect {{ active('login') }}'>Login</a>
<a href="{{ path('register') }}">Register</a>
</nav>
{% endif %}
<div class="timeline-nav" role="menu">
<nav>
<h1 role="tab">Timeline</h1>
<nav class='sec-nav' role="navigation">
<a href="{{ path('main_public') }}"
class='{{ active('main_public') }}'>Public</a>
{% if user_nickname is defined %}
<a href="{{ path("home_all", {'nickname' : user_nickname}) }}"
class='{{ active("home_all") }}'>Home</a>
{% endif %}
<a href="{{ path('main_all') }}" class='hover-effect {{ active('main_all') }}'>Network</a>
{% if main_nav_tabs is defined %}
{% for tab in main_nav_tabs %}
<a href="{{ path(tab['route']) }}"
class='{{ active(tab['route']) }}'>{{ tab['title'] }}</a>
{% endfor %}
{% endif %}
</nav>
</nav>
</div>
</nav> </nav>
<div class="footer" role="contentinfo"> <div class="footer" role="contentinfo">

2
templates/sidepanel/right/right.html.twig
View File

@@ -1,6 +1,6 @@
<div class="panel panel-right"> <div class="panel panel-right">
<input type="checkbox" id="panel-right-toggle"> <input type="checkbox" id="panel-right-toggle">
<label for="panel-right-toggle">{{ icon('notes', 'icon icon-right') | raw }}</label> <label id="panel-right-icon" for="panel-right-toggle">{{ icon('notes', 'icon icon-right') | raw }}</label>
<a id="anchor-right-panel" class="anchor-hidden"></a> <a id="anchor-right-panel" class="anchor-hidden"></a>
<aside class="panel-content"> <aside class="panel-content">