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

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
plugins/AttachmentShowRelated/templates/attachmentShowRelated/attachmentRelatedNotes.html.twig
View File

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

8
plugins/AttachmentShowRelated/templates/attachmentShowRelated/attachmentRelatedTags.html.twig
View File

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

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

@ -408,19 +408,19 @@ summary:hover .icon-details-open {
border-radius: var(--unit-size);
background-color: var(--translucent);
padding: var(--small-size);
width: auto;
height: auto;
max-width: 100%;
}
.note-attachments > figure figcaption {
display: flex;
max-width: 100%;
word-break: break-all;
padding-top: var(--small-size);
}
.note-attachments > figure img,
.note-attachments > figure video {
width: 100%;
height: auto;
}
/* SECTIONS */
.section-widget {
display: flex;
@ -430,10 +430,34 @@ summary:hover .icon-details-open {
background-color: var(--translucent);
border-radius: var(--unit-size);
border: solid 2px var(--bg2);
margin-bottom: var(--unit-size);
margin-bottom: var(--medium-size);
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 {
font-size: var(--main-size);
@ -466,10 +490,6 @@ summary:hover .icon-details-open {
padding: var(--unit-size);
}
.section-form fieldset .form-group:last-of-type {
margin-bottom: unset;
}
.section-form-legend {
margin-top: unset;
margin-bottom: 10px;
@ -487,6 +507,7 @@ summary:hover .icon-details-open {
display: flex;
flex-direction: column;
margin-bottom: 10px;
}
.help-block {
@ -739,14 +760,12 @@ input[type=file] {
padding: var(--unit-size);
}
@media (min-width: 1200px) {
#panel-left-icon,
#panel-right-icon {
display: none;
}
@media only screen
and (min-width : 1200px) {
.panel .panel-content {
width: 100%;
width: 25rem;
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 */
.container {
margin-left: unset;

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

@ -17,6 +17,7 @@
}
.panel-left nav {
padding-top: var(--unit-size);
font-size: var(--medium-size);
}
@ -52,11 +53,10 @@
font-size: var(--main-size);
}
.profile-navigation {
margin-bottom: var(--main-size);
}
.profile-navigation > * {
display: block;
display: flex;
flex-direction: column;
}
/* TIMELINE NAVIGATION / PLUGINS */
@ -91,3 +91,23 @@
margin-top: auto;
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;
}
}

1
public/assets/css/reset.css
View File

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

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

@ -15,3 +15,17 @@
cursor: pointer !important;
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;
}
}

17
templates/attachments/show.html.twig
View File

@ -1,18 +1,13 @@
{% 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 %}
<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 %}
<a class="section-widget-button-like" href="{{ download }}"> {{ 'Download link' | trans }}</a>
</section>
</div>
{% endblock body %}

2
templates/attachments/view.html.twig
View File

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

1
templates/note/view.html.twig
View File

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

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

@ -5,13 +5,13 @@
<a id="anchor-left-panel" class="anchor-hidden" title="{{ 'Press tab to access selected region!' | trans }}"></a>
<aside class="panel-content accessibility-target">
{% 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') }}">
<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>
<nav id="user-tags">
<nav class="user-tags">
{% if user_tags %}
{% for tag in user_tags %}
<a href='#'> #{{ tag }}</a>
@ -27,15 +27,13 @@
</section>
</div>
</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 }}">
<strong id="timeline-nav-header">Profile</strong>
<a title='{{ 'Your messages.' | trans }}' href='{{ path('settings') }}' class='{{ active("replies") }}'>
Messages
</a>
@ -58,6 +56,9 @@
</nav>
{% else %}
<section class='section-widget section-widget-padded' title="{{ 'Your profile information.' | trans }}">
<h2 class="section-title">Account</h2>
<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') }}'>
@ -69,12 +70,14 @@
</a>
</nav>
</section>
{% endif %}
</section>
<div class="timeline-nav">
<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 }}">
<strong id="timeline-nav-header">Timeline</strong>
<ul>
<li>
<a href="{{ path('main_public') }}" class='{{ active('main_public') }}'>
@ -105,7 +108,7 @@
{% endif %}
</ul>
</nav>
</div>
</section>
<footer class="footer">
<nav>

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

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