[CSS][Attachments] Attachments page view done. Standardized left and right panels sections. Applying styling through key classes to be defined in docs.

This commit is contained in:
Eliseu Amaro 2021-09-16 16:27:28 +01:00 committed by Diogo Peralta Cordeiro
parent eda3a5ffb6
commit 42f9a6a79c
Signed by: diogo
GPG Key ID: 18D2D35001FBFAB0
11 changed files with 144 additions and 87 deletions

View File

@ -1,6 +1,9 @@
<div id="related-notes" style="margin: var(--unit-size);"> <section class="section-widget section-widget-padded">
{{ 'Notes where this attachment appears' | trans }} <div class="section-title">
{{ 'Notes related' | trans }}
</div>
{% for note in related_notes %} {% for note in related_notes %}
{% include '/note/view.html.twig' with {'note' : note, 'hide_attachments': true, 'have_user': have_user} only %} {% include '/note/view.html.twig' with {'note' : note, 'hide_attachments': true, 'have_user': have_user} only %}
{% endfor %} {% endfor %}
</div> </section>

View File

@ -1,9 +1,11 @@
<div id="related-tags" style="margin: var(--unit-size);"> <section class="section-widget section-widget-padded">
{{ 'Tags for this attachment' | trans }} <div class="section-title">
<br/> {{ 'Tags for this attachment' | trans }}
</div>
{% for tag in related_tags %} {% for tag in related_tags %}
<i>#{{ tag['tag'] }}</i> <i>#{{ tag['tag'] }}</i>
{% else %} {% else %}
{{ 'No tags' | trans }} {{ 'No tags' | trans }}
{% endfor %} {% endfor %}
</div> </section>

View File

@ -408,19 +408,19 @@ summary:hover .icon-details-open {
border-radius: var(--unit-size); border-radius: var(--unit-size);
background-color: var(--translucent); background-color: var(--translucent);
padding: var(--small-size); padding: var(--small-size);
width: auto;
height: auto;
max-width: 100%;
} }
.note-attachments > figure figcaption { .note-attachments > figure figcaption {
display: flex; display: flex;
max-width: 100%;
word-break: break-all;
padding-top: var(--small-size); padding-top: var(--small-size);
} }
.note-attachments > figure img,
.note-attachments > figure video {
width: 100%;
height: auto;
}
/* SECTIONS */ /* SECTIONS */
.section-widget { .section-widget {
display: flex; display: flex;
@ -430,10 +430,34 @@ summary:hover .icon-details-open {
background-color: var(--translucent); background-color: var(--translucent);
border-radius: var(--unit-size); border-radius: var(--unit-size);
border: solid 2px var(--bg2); border: solid 2px var(--bg2);
margin-bottom: var(--unit-size); margin-bottom: var(--medium-size);
color: var(--white); color: var(--white);
} }
.section-widget-padded {
padding: var(--unit-size);
}
.section-title {
font-size: var(--main-size);
font-weight: 700;
margin: 0;
}
.section-widget-button-like {
border: 2px solid var(--bg2);
border-radius: var(--unit-size);
background: var(--bg-button);
padding: 5px 10px;
margin-top: 5px;
cursor: pointer;
float: right;
align-self: end;
font-family: var(--main-font);
font-weight: 700;
}
.section-title-details { .section-title-details {
font-size: var(--main-size); font-size: var(--main-size);
@ -466,10 +490,6 @@ summary:hover .icon-details-open {
padding: var(--unit-size); padding: var(--unit-size);
} }
.section-form fieldset .form-group:last-of-type {
margin-bottom: unset;
}
.section-form-legend { .section-form-legend {
margin-top: unset; margin-top: unset;
margin-bottom: 10px; margin-bottom: 10px;
@ -487,6 +507,7 @@ summary:hover .icon-details-open {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-bottom: 10px;
} }
.help-block { .help-block {
@ -739,14 +760,12 @@ input[type=file] {
padding: var(--unit-size); padding: var(--unit-size);
} }
@media (min-width: 1200px) {
#panel-left-icon, @media only screen
#panel-right-icon { and (min-width : 1200px) {
display: none;
}
.panel .panel-content { .panel .panel-content {
width: 100%; width: 25rem;
max-width: 20%; max-width: 20%;
} }
@ -757,7 +776,8 @@ input[type=file] {
} }
} }
@media (max-width: 1200px) { @media only screen
and (max-width: 1200px) {
/* content should occupy the entire width at this size */ /* content should occupy the entire width at this size */
.container { .container {
margin-left: unset; margin-left: unset;

View File

@ -17,6 +17,7 @@
} }
.panel-left nav { .panel-left nav {
padding-top: var(--unit-size);
font-size: var(--medium-size); font-size: var(--medium-size);
} }
@ -52,11 +53,10 @@
font-size: var(--main-size); font-size: var(--main-size);
} }
.profile-navigation { .profile-navigation {
margin-bottom: var(--main-size); display: flex;
} flex-direction: column;
.profile-navigation > * {
display: block;
} }
/* TIMELINE NAVIGATION / PLUGINS */ /* TIMELINE NAVIGATION / PLUGINS */
@ -91,3 +91,23 @@
margin-top: auto; margin-top: auto;
font-size: var(--small-size); font-size: var(--small-size);
} }
@media only screen
and (min-width : 1200px) {
#panel-left-icon {
display: none;
}
}
@media only screen
and (min-width: 2200px) {
.panel-left > * {
margin-left: 10rem;
}
.footer {
left: -10rem;
position: relative;
}
}

View File

@ -86,6 +86,7 @@ h1 {
h2 { h2 {
font-size: var(--medium-size); font-size: var(--medium-size);
font-weight: 600; font-weight: 600;
margin-bottom: 10px;
} }
h3 { h3 {

View File

@ -14,4 +14,18 @@
#panel-right-icon { #panel-right-icon {
cursor: pointer !important; cursor: pointer !important;
border: 2px solid transparent; border: 2px solid transparent;
}
@media only screen
and (min-width: 1200px) {
#panel-right-icon {
display: none;
}
}
@media only screen
and (min-width: 2200px) {
.panel-right > * {
margin-right: 10rem;
}
} }

View File

@ -1,18 +1,13 @@
{% extends 'stdgrid.html.twig' %} {% extends 'stdgrid.html.twig' %}
{% block stylesheets %}
{{ parent() }}
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/network/public.css') }}"
media="screen and (min-width: 1300px)">
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/network/public_mid.css') }}"
media="screen and (max-width: 1300px)">
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/network/public_small.css') }}"
media="screen and (max-width: 750px)">
{% endblock %}
{% block body %} {% block body %}
<div class="content"> <div class="content">
<a href="{{ download }}"> {{ 'Download link' | trans }}</a> <section class="section-widget section-widget-padded">
{% include '/attachments/view.html.twig' with {'attachment': attachment, 'note': null} only %}
{% include '/attachments/view.html.twig' with {'attachment': attachment, 'note': null} only %}
<a class="section-widget-button-like" href="{{ download }}"> {{ 'Download link' | trans }}</a>
</section>
</div> </div>
{% endblock body %} {% endblock body %}

View File

@ -1,7 +1,9 @@
{% set handled = false %} {% set handled = false %}
{% for block in handle_event('ViewAttachment', {'attachment': attachment, 'note': note}) %} {% for block in handle_event('ViewAttachment', {'attachment': attachment, 'note': note}) %}
{% set handled = true %} {% set handled = true %}
{{ block | raw }} <div class="note-attachments">
{{ block | raw }}
</div>
{% endfor %} {% endfor %}
{% if not handled %} {% if not handled %}
<div> <div>

View File

@ -37,6 +37,7 @@
<section tabindex="0" role="dialog" class="e-content entry-content note-content"> <section tabindex="0" role="dialog" class="e-content entry-content note-content">
{{ note.getRendered() | raw }} {{ note.getRendered() | raw }}
{% if hide_attachments is not defined %} {% if hide_attachments is not defined %}
<div class="note-attachments" tabindex="0" title="{{ 'Note attachments' | trans }}"> <div class="note-attachments" tabindex="0" title="{{ 'Note attachments' | trans }}">
{% for attachment in note.getAttachments() %} {% for attachment in note.getAttachments() %}
{% include '/attachments/view.html.twig' with {'attachment': attachment, 'note': note} only%} {% include '/attachments/view.html.twig' with {'attachment': attachment, 'note': note} only%}

View File

@ -5,13 +5,13 @@
<a id="anchor-left-panel" class="anchor-hidden" title="{{ 'Press tab to access selected region!' | trans }}"></a> <a id="anchor-left-panel" class="anchor-hidden" title="{{ 'Press tab to access selected region!' | trans }}"></a>
<aside class="panel-content accessibility-target"> <aside class="panel-content accessibility-target">
{% if app.user %} {% if app.user %}
<section class='profile' title="{{ 'Your profile information.' | trans }}"> <section class='section-widget section-widget-padded' title="{{ 'Your profile information.' | trans }}">
<a id="user" href="{{ path('settings') }}"> <a id="user" href="{{ path('settings') }}">
<img src='{{ user_avatar }}' class="icon icon-avatar" alt="{{ 'Your account\'s avatar.' | trans }}"> <img src='{{ user_avatar }}' class="icon icon-avatar" alt="{{ 'Your account\'s avatar.' | trans }}">
<div id="user-info"> <div class="user-info">
<strong id="user-nickname" title="{{ 'Your account\' nickname.' | trans }}">{{ user_nickname }}</strong> <strong id="user-nickname" title="{{ 'Your account\' nickname.' | trans }}">{{ user_nickname }}</strong>
<nav id="user-tags"> <nav class="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>
@ -27,54 +27,57 @@
</section> </section>
</div> </div>
</a> </a>
</section>
{# {% for extra in profile_extras %}
{% include '/'~ extra.name ~ '/view.html.twig' with {'vars': extra.vars} only %}
{% endfor %} #}
<nav tabindex="0" class="profile-navigation" title="{{ 'Navigate through account related pages.' | trans }}"> {# {% for extra in profile_extras %}
<strong id="timeline-nav-header">Profile</strong> {% include '/'~ extra.name ~ '/view.html.twig' with {'vars': extra.vars} only %}
{% endfor %} #}
<a title='{{ 'Your messages.' | trans }}' href='{{ path('settings') }}' class='{{ active("replies") }}'> <nav tabindex="0" class="profile-navigation" title="{{ 'Navigate through account related pages.' | trans }}">
Messages <a title='{{ 'Your messages.' | trans }}' href='{{ path('settings') }}' class='{{ active("replies") }}'>
</a> Messages
</a>
<a title='{{ 'Replies to your notes.' | trans }}' href="{{ path('replies', {'nickname' : user_nickname}) }}" class='{{ active("replies") }}'> <a title='{{ 'Replies to your notes.' | trans }}' href="{{ path('replies', {'nickname' : user_nickname}) }}" class='{{ active("replies") }}'>
Replies Replies
</a> </a>
{% for link in handle_event('InsertLeftPanelLink', user_nickname) %} {% for link in handle_event('InsertLeftPanelLink', user_nickname) %}
{{ link | raw }} {{ link | raw }}
{% endfor %} {% endfor %}
<a title='{{ 'Access your account settings.' | trans }}' href="{{ path('settings') }}" class='{{ active('settings') }}'> <a title='{{ 'Access your account settings.' | trans }}' href="{{ path('settings') }}" class='{{ active('settings') }}'>
Settings Settings
</a> </a>
<a title='{{ 'Logout from your account.' | trans }}' href='{{ path('logout') }}'> <a title='{{ 'Logout from your account.' | trans }}' href='{{ path('logout') }}'>
Logout Logout
</a> </a>
</nav> </nav>
{% else %} {% else %}
<nav tabindex="0" class="profile-navigation" title="{{ 'Navigate through account related pages.' | trans }}">
<a title='{{ 'Login with your existing account.' | trans }}' href="{{ path('login') }}" class='hover-effect {{ active('login') }}'> <section class='section-widget section-widget-padded' title="{{ 'Your profile information.' | trans }}">
Login <h2 class="section-title">Account</h2>
</a> <nav tabindex="0" class="profile-navigation" title="{{ 'Navigate through account related pages.' | trans }}">
<a title='{{ 'Register a new account!' | trans }}' href="{{ path('register') }}"> <a title='{{ 'Login with your existing account.' | trans }}' href="{{ path('login') }}" class='hover-effect {{ active('login') }}'>
Register Login
</a> </a>
</nav> <a title='{{ 'Register a new account!' | trans }}' href="{{ path('register') }}">
{% endif %} Register
</a>
<div class="timeline-nav"> </nav>
</section>
{% endif %}
</section>
<section class="section-widget section-widget-padded">
<h2 class="section-title">Timeline</h2>
<nav class='sec-nav' tabindex="0" title="{{ 'Navigate through each timeline.' | trans }}"> <nav class='sec-nav' tabindex="0" title="{{ 'Navigate through each timeline.' | trans }}">
<strong id="timeline-nav-header">Timeline</strong>
<ul> <ul>
<li> <li>
<a href="{{ path('main_public') }}" class='{{ active('main_public') }}'> <a href="{{ path('main_public') }}" class='{{ active('main_public') }}'>
@ -105,7 +108,7 @@
{% endif %} {% endif %}
</ul> </ul>
</nav> </nav>
</div> </section>
<footer class="footer"> <footer class="footer">
<nav> <nav>

View File

@ -42,15 +42,11 @@
{% 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}) %}
<section class="section-widget"> {{ block | raw }}
{{ block | raw }}
</section>
{% endfor %} {% endfor %}
{% else %} {% else %}
{% for block in handle_event('AppendRightPanelBlock', {'path': current_path}) %} {% for block in handle_event('AppendRightPanelBlock', {'path': current_path}) %}
<section class="section-widget"> {{ block | raw }}
{{ block | raw }}
</section>
{% endfor %} {% endfor %}
{% endif %} {% endif %}
</aside> </aside>