[TWIG][CSS] Shortcuts now work in small screen sizes. Header icons further polish. Profile navigation structural rework.
This commit is contained in:
parent
ca2eff2906
commit
7dc390ca1c
@ -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);
|
||||||
@ -595,9 +599,3 @@ input[type=file]:hover {
|
|||||||
box-shadow: initial;
|
box-shadow: initial;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
[id|="anchor"]:target + * {
|
|
||||||
animation-name: highlight;
|
|
||||||
animation-duration: 500ms;
|
|
||||||
animation-timing-function: ease;
|
|
||||||
}
|
|
@ -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);
|
||||||
}
|
}
|
||||||
|
@ -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;
|
||||||
}
|
}
|
@ -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">
|
||||||
|
@ -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">
|
||||||
|
Loading…
Reference in New Issue
Block a user