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

[TWIG][Templates] Rename inconsistent CSS classes 

[CSS] Font size hierarchy refactor
[PLUGINS][MediaFeed] Renamed BeforeFeed event

Type scale hierarchy redone. Bigger line height added, making it easier
to click on links and separate contents.

Feed title added. AddFeedActions replaces BeforeFeed event.
MediaFeed links will now show an icon to the right of the feed title,
smaller footprint and more consistent with the overall design.
This commit is contained in:
Eliseu Amaro 2021-12-23 21:29:46 +00:00 committed by Diogo Peralta Cordeiro
parent f10b3bb05c
commit 671c3968e2
Signed by: diogo
GPG Key ID: 18D2D35001FBFAB0
34 changed files with 264 additions and 355 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
components/Feed/templates/feed/feed.html.twig
View File

@ -9,9 +9,15 @@
{% endblock stylesheets %}
{% block body %}
{% for block in handle_event('BeforeFeed', app.request) %}
{{ block | raw }}
{% endfor %}
<header class="feed-header">
<h1>{{ page_title | trans }} {{ 'feed' | trans }}</h1>
<nav class="feed-actions" role=navigation>
{% for block in handle_event('AddFeedActions', app.request) %}
{{ block | raw }}
{% endfor %}
</nav>
</header>
{# Backwards compatibility with hAtom 0.1 #}
<main class="feed" tabindex="0" role="feed">
<div class="h-feed hfeed notes">

2
components/Group/templates/group/view.html.twig
View File

@ -36,7 +36,7 @@
</main>
{% else %}
<div class="section-widget-padded section-widget">
<div class="section-padding section-widget">
<p>{% trans with { '%group%': nickname } %}The group <em>%group%</em> doesn't exist.{% endtrans %}</p>
{% if create_form is defined and create_form is not null %}
<p>{% trans %}Would you like to create it?{% endtrans %}</p>

4
components/LeftPanel/templates/left_panel/edit_feeds.html.twig
View File

@ -6,7 +6,7 @@
{% endblock stylesheets %}
{% block body %}
<div class="section-widget section-widget-padded">
<div class="section-widget">
<form class="section-form" action="{{ path('edit_feeds') }}" method="post">
<fieldset>
@ -16,7 +16,7 @@
{{ form_start(edit_feeds) }}
{% for child in edit_feeds.children %}
{% if 'row_url' in child.vars.block_prefixes %}
<div class="section-widget section-widget-padded">
<div class="section-widget section-padding">
{{ form_label(child) }}
{{ form_widget(child) }}
{% elseif 'row_title' in child.vars.block_prefixes %}

2
components/LeftPanel/templates/left_panel/view.html.twig
View File

@ -7,7 +7,7 @@
<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='section-widget section-widget-padded' title="{{ 'Your profile information.' | trans }}">
<section class='section-widget section-padding' title="{{ 'Your profile information.' | trans }}">
{% block profile_view %}{% include 'cards/profile/view.html.twig' with { actor: current_actor } %}{% endblock profile_view %}
{{ block("profile_current_actor", "cards/navigation/view.html.twig") }}
</section>

6
components/RightPanel/templates/right_panel/view.html.twig
View File

@ -1,6 +1,6 @@
{% block rightpanel %}
<label class="panel-right-icon" for="panel-right-toggle" aria-hidden="true"
tabindex="-1">{{ icon('notes', 'icon icon-right') | raw }}</label>
tabindex="-1">{{ icon('chevron-left', 'icon icon-right') | raw }}</label>
<input type="checkbox" id="panel-right-toggle" aria-hidden="true" tabindex="-1">
<div class="header-panel section-panel-right">
@ -29,9 +29,9 @@
<details class="section-widget-subtitle-details">
<summary class="section-subtitle-summary">
<h3>
<strong>
{{ "Additional options" | trans }}
</h3>
</strong>
{{ icon('arrow-down', 'icon icon-details-close') | raw }}
</summary>
{{ form_row(blocks['post_form'].language) }}

2
components/Search/templates/search/show.html.twig
View File

@ -8,7 +8,7 @@
</label>
{% endif %}
<div class="section-widget-padded">
<div class="section-padding">
{{ form_start(search_form) }}
<div>
{{ form_row(search_form.search_query) }}

2
components/Tag/templates/actor_tag_feed.html.twig
View File

@ -23,7 +23,7 @@
{% block profile_view %}{% include 'cards/profile/view.html.twig' %}{% endblock profile_view %}
{% endfor %}
<div class="section-widget section-widget-padded">
<div class="section-widget section-padding">
{{ "Page: " ~ page }}
</div>
{% endblock %}

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

@ -1,6 +1,6 @@
{% import '/cards/note/view.html.twig' as noteView %}
<section class="section-widget section-widget-padded">
<section class="section-widget section-padding">
<div class="section-title">
{{ 'Notes related' | trans }}
</div>

2
plugins/MediaFeed/MediaFeed.php
View File

@ -54,7 +54,7 @@ class MediaFeed extends Plugin
*
* @return bool hook value; true means continue processing, false means stop
*/
public function onBeforeFeed(Request $request, &$res): bool
public function onAddFeedActions(Request $request, &$res): bool
{
$isMediaActive = $request->get('filter-type') === 'media';
// we need two urls: one with filter-type=media and without it.

7
plugins/MediaFeed/templates/mediaFeed/tabs.html.twig
View File

@ -1,5 +1,2 @@
<nav class=media-feed-tabs role=navigation>
<a {{ main.active ? 'class="active"' : '' }} href="{{ main.url }}">{% trans %}All{% endtrans %}</a>
<div tabindex="0" class=separator>&nbsp;</div>
<a {{ media.active ? 'class="active"' : '' }} href="{{ media.url }}">{% trans %}Media{% endtrans %}</a>
</nav>
<a {{ main.active ? 'class="active"' : '' }} href="{{ main.url }}">{{ icon('feed', 'icon icon-right') | raw }}</a>
<a {{ media.active ? 'class="active"' : '' }} href="{{ media.url }}">{{ icon('media', 'icon icon-right') | raw }}</a>

10
plugins/Oomox/templates/oomox/root_override.css.twig
View File

@ -1,9 +1,9 @@
:root {
--smaller: .6rem;
--default: 1rem;
--small: 1.3rem;
--medium: 1.62rem;
--big: 3rem;
--s: .6rem;
--unit: 1rem;
--m: 1.3rem;
--xl: 1.62rem;
--xxl: 3rem;
}
@media (prefers-color-scheme: dark) {

2
plugins/RelatedTags/templates/related_tags/actor_tags.html.twig
View File

@ -1,5 +1,5 @@
{% if actor_tags is not empty %}
<div class="section-widget section-widget-padded">
<div class="section-widget section-padding">
<h2>Related tags:</h2>
{% for at in actor_tags %}
{% include 'cards/tag/actor_tag.html.twig' with { 'tag': at, 'actor': null } %}

2
plugins/RelatedTags/templates/related_tags/note_tags.html.twig
View File

@ -1,5 +1,5 @@
{% if note_tags is not empty %}
<div class="section-widget section-widget-padded">
<div class="section-widget section-padding">
<h2>Related tags:</h2>
{% for nt in note_tags %}

2
plugins/TagBasedFiltering/templates/tag_based_filtering/add_blocked.html.twig
View File

@ -8,7 +8,7 @@
{% block body %}
{% if note is defined or actor is defined %}
<div class="section-widget-padded">
<div class="section-padding">
{% if note is defined and note is not null %}
{{ noteView.macro_note(note, {}) }}
{% elseif actor is defined and actor is not null %}

69
public/assets/default_theme/css/base.css
View File

@ -40,34 +40,33 @@
left: -90%;
width: 30%;
height: min-content;
padding: var(--smaller);
border-radius: var(--smaller);
padding: var(--s);
border-radius: var(--s);
background-color: var(--background-hard) !important;
border: 2px solid var(--border);
}
.accessibility-menu ul {
list-style-type: disc;
margin-left: var(--small);
margin-left: var(--m);
}
.accessibility-menu:focus-within:not(:active) {
top: var(--smaller);
left: var(--smaller);
top: var(--s);
left: var(--s);
}
html {
scroll-margin-top: var(--big);
scroll-margin-top: var(--xxl);
}
.page-header {
z-index: 1;
font-family: 'Poppins',sans-serif;
font-size: var(--medium);
height: var(--big);
height: var(--xxl);
display: flex;
justify-content: center;
position: fixed;
top: 0;
align-self: center;
align-items: center;
padding: var(--smaller);
padding: var(--s);
background: var(--gradient) !important;
box-shadow: var(--shadow);
}
@ -92,9 +91,8 @@ html {
top: 100%;
right: 0;
width: 16.5vw;
font-size: var(--default);
border-radius: 0 0 var(--smaller) var(--smaller);
padding: var(--smaller);
border-radius: 0 0 var(--s) var(--s);
padding: var(--s);
background: var(--background-hard);
box-shadow: var(--shadow);
}
@ -102,12 +100,11 @@ html {
display: flex;
flex-direction: column;
font-family: 'Open Sans',sans-serif;
font-size: var(--default);
position: fixed;
top: 0;
margin-top: var(--big);
height: calc(100% - var(--big));
padding: var(--smaller);
margin-top: var(--xxl);
height: calc(100% - var(--xxl));
padding: var(--s);
overflow-y: auto;
}
.panel-content {
@ -116,11 +113,11 @@ html {
}
.page-content-wrapper {
position: relative;
top: var(--big);
top: var(--xxl);
margin-left: auto;
margin-right: auto;
justify-content: center;
padding: var(--smaller) var(--smaller) 0;
padding: var(--s) var(--s) 0;
}
.page-content {
display: flex;
@ -128,8 +125,8 @@ html {
width: 100%;
}
.markdown-blocks {
border-radius: 0 0 var(--smaller) var(--smaller);
padding: var(--smaller);
border-radius: 0 0 var(--s) var(--s);
padding: var(--s);
background-color: var(--background-card) !important;
}
.markdown-blocks ul {
@ -140,30 +137,14 @@ html {
margin-bottom: 0.2em;
}
.doc-navigation {
border-radius: var(--smaller) var(--smaller) 0 0;
border-radius: var(--s) var(--s) 0 0;
border-bottom: 0;
padding: var(--smaller);
padding: var(--s);
background-color: var(--background-card) !important;
}
.doc-navigation ul {
display: flex;
justify-content: space-evenly;
font-size: var(--medium);
}
#replyform {
padding: var(--smaller);
margin-top: var(--smaller);
border-radius: var(--smaller);
display: flex;
flex-direction: column;
font-size: var(--default);
background-color: var(--background-card) !important;
}
#replyform textarea {
width: 100%;
resize: vertical;
margin-top: var(--smaller);
padding: var(--smaller);
}
@media only screen and (max-width:1280px) {
.page-header {
@ -268,17 +249,17 @@ html {
@keyframes highlight {
0% {
box-shadow: initial;
border-radius: var(--smaller);
border-radius: var(--s);
}
50% {
border-radius: var(--smaller);
border-radius: var(--s);
box-shadow: inset 0 20px 40px #FFF;
transition: box-shadow 0.3s ease-in-out;
z-index: 666;
}
100% {
box-shadow: initial;
border-radius: var(--smaller);
border-radius: var(--s);
}
}
}
@ -286,16 +267,16 @@ html {
@keyframes highlight {
0% {
box-shadow: initial;
border-radius: var(--smaller);
border-radius: var(--s);
}
50% {
border-radius: var(--smaller);
border-radius: var(--s);
box-shadow: inset 0 20px 40px #000;
transition: box-shadow 0.3s ease-in-out;
}
100% {
box-shadow: initial;
border-radius: var(--smaller);
border-radius: var(--s);
}
}
}

100
public/assets/default_theme/css/pages/feeds.css
View File

@ -1,13 +1,26 @@
.feed-header {
display: flex;
margin-top: var(--m);
}
.feed-header .feed-actions {
margin-left: auto;
}
.feed-header .feed-actions a {
margin-left: var(--s);
}
.feed-header .feed-actions a:not(.active) {
opacity: 0.4;
}
.notes hr {
margin-top: var(--smaller);
margin-top: var(--s);
}
.note-wrapper {
width: 100%;
height: inherit;
border-radius: var(--smaller) var(--smaller) 0 0;
border-radius: var(--s) var(--s) 0 0;
}
.note-sidebar {
padding: var(--smaller);
padding: var(--s);
}
.note-sidebar * {
display: flex;
@ -19,15 +32,15 @@
.note-sidebar .avatar {
max-width: 4rem;
max-height: 4rem;
min-width: var(--big);
min-width: var(--xxl);
width: 100%;
height: auto;
background: unset;
margin-bottom: var(--smaller);
margin-bottom: var(--s);
border-radius: 2px;
}
.h-entry:not(:first-child) {
margin-top: var(--smaller);
margin-top: var(--s);
}
.h-entry:not(embed) {
border: 2px solid var(--border) !important;
@ -39,17 +52,17 @@
.embed {
display: flex;
flex-wrap: wrap;
padding: var(--smaller);
padding: var(--s);
border: unset;
}
.embed header {
width: 100%;
margin-bottom: var(--small);
margin-bottom: var(--m);
}
.embed img {
width: 25%;
height: auto;
margin-right: var(--smaller);
margin-right: var(--s);
}
.embed .p-summary {
width: 60%;
@ -64,8 +77,8 @@
max-height: min-content;
}
.embed .p-summary hr {
margin-top: var(--smaller);
margin-bottom: var(--smaller);
margin-top: var(--s);
margin-bottom: var(--s);
}
.h-entry .embed[class*="p-"] {
padding: unset;
@ -75,41 +88,39 @@
}
.h-entry {
display: flex;
border-radius: var(--smaller);
border-radius: var(--s);
background-color: var(--background-card) !important;
}
.h-entry figure {
margin: unset;
object-fit: cover;
padding: var(--smaller);
padding: var(--s);
background: var(--gradient);
border-radius: var(--smaller);
border-radius: var(--s);
}
.h-entry .replies {
margin-bottom: var(--small);
padding: var(--smaller) var(--smaller) 0 0;
padding-left: var(--small);
margin-bottom: var(--m);
padding: var(--s) var(--s) 0 0;
padding-left: var(--m);
border-left: 2px solid var(--border);
}
.note-info,
embed header {
display: flex;
align-items: center;
max-height: var(--big);
max-height: var(--xxl);
border-bottom: unset;
border-radius: var(--smaller) var(--smaller) 0 0;
padding: 4px var(--smaller) 4px 0;
border-radius: var(--s) var(--s) 0 0;
padding: 4px var(--s) 4px 0;
}
.note-info {
background: var(--gradient-backwards);
}
.note-url {
opacity: 0.5;
font-size: 0.9em;
margin-left: var(--smaller);
margin-left: var(--s);
}
embed header {
font-size: var(--small);
justify-content: space-between;
}
.note-author-url {
@ -149,16 +160,15 @@ embed header {
position: absolute;
right: 0;
flex-direction: column;
padding: var(--smaller);
padding: var(--s);
border: 2px solid var(--border);
border-radius: var(--smaller);
border-radius: var(--s);
background: var(--background-card);
box-shadow: var(--shadow);
font-size: var(--default);
width: max-content;
}
.note-actions-extra-details[open] > summary + * > li:not(:last-of-type) {
margin-bottom: var(--smaller);
margin-bottom: var(--s);
}
.note-actions-set {
opacity: 1 !important;
@ -168,9 +178,9 @@ embed header {
mask-repeat: no-repeat !important;
mask-size: cover !important;
display: inline-block;
margin-left: var(--smaller);
width: var(--default);
height: var(--default);
margin-left: var(--s);
width: var(--unit);
height: var(--unit);
background-color: var(--foreground);
opacity: 0.33;
}
@ -209,13 +219,8 @@ embed header {
.note-content {
display: flex;
flex-direction: column;
border-radius: 0 0 var(--smaller) var(--smaller);
padding-top: var(--smaller);
padding-bottom: var(--smaller);
padding-right: var(--smaller);
}
.note-text {
margin-bottom: var(--smaller);
border-radius: 0 0 var(--s) var(--s);
padding-right: var(--s);
}
.note-text a {
text-decoration: underline !important;
@ -228,28 +233,28 @@ embed header {
display: flex;
flex-wrap: wrap;
max-width: max-content;
border-radius: var(--smaller);
padding: var(--smaller);
border-radius: var(--s);
padding: var(--s);
align-self:flex-start;
background-color: var(--background-card) !important;
}
.note-attachments-unit:not(:only-child) {
margin-right: var(--smaller);
margin-right: var(--s);
}
.note-attachments-unit > figure figcaption {
display: flex;
word-break: break-all;
margin-bottom: var(--smaller);
margin-bottom: var(--s);
}
.note-complementary {
border-left: 2px solid var(--accent);
border-end-start-radius: var(--smaller);
border-end-end-radius: var(--smaller);
padding-left: var(--smaller);
border-end-start-radius: var(--s);
border-end-end-radius: var(--s);
padding-left: var(--s);
padding-top: 5px;
padding-bottom: 5px;
margin-bottom: var(--smaller);
margin-right: var(--smaller);
margin-bottom: var(--s);
margin-right: var(--s);
background: var(--gradient) !important;
}
.note-complementary a {
@ -260,7 +265,6 @@ embed header {
float: right;
padding: 6px 12px;
background: var(--gradient-backwards);
font-size: var(--default);
color: var(--foreground);
border-radius: 0 0 var(--smaller) 0;
border-radius: 0 0 var(--s) 0;
}

31
public/assets/default_theme/css/pages/settings.css
View File

@ -1,27 +1,32 @@
.section-settings {
background: var(--background-card);
border: 2px solid var(--border);
box-shadow: var(--shadow);
}
.section-settings,
.section-title-settings {
background: var(--background-card);
.section-settings-details {
margin-bottom: .6rem;
border-radius: .6rem;
padding: .6rem;
box-sizing: border-box;
}
.section-title-settings[open] {
.section-settings-details {
border: 2px solid var(--border);
}
.section-settings-details-title {
display: block;
}
.section-settings-details[open] {
border-left: 2px solid var(--foreground);
}
.section-title-settings[open] > summary:first-child {
margin-bottom: var(--smaller);
.section-settings-details[open] > summary:first-child {
margin-bottom: var(--s);
}
.section-title-settings summary + form {
padding-left: var(--smaller);
.section-settings-details summary + form {
padding-left: var(--s);
}
.section-settings hr {
@ -29,24 +34,24 @@
margin-bottom: .6rem;
}
.section-title-settings summary h3:first-letter ,.section-title-settings summary em:first-letter {
.section-settings-details summary h3:first-letter ,.section-settings-details summary em:first-letter {
text-transform: uppercase;
}
.section-title-settings summary:focus .icon-details-open,.section-title-settings summary:hover .icon-details-open {
.section-settings-details summary:focus .icon-details-open,.section-settings-details summary:hover .icon-details-open {
transition: all 200ms cubic-bezier(0,0.55,0.45,1);
}
.section-title-settings[open] svg {
.section-settings-details[open] svg {
transform: rotate(180deg);
animation: fadeOut 200ms cubic-bezier(0,0.55,0.45,1);
}
.section-title-settings[open] .set-nav li:last-of-type {
.section-settings-details[open] .set-nav li:last-of-type {
margin-bottom: 0;
}
.section-title-settings:not([open]) svg {
.section-settings-details:not([open]) svg {
transform: initial;
animation: fadeIn 200ms cubic-bezier(0,0.55,0.45,1);
}

79
public/assets/default_theme/css/reset.css
View File

@ -9,7 +9,7 @@ html {
background-color: var(--background-hard);
background-attachment: fixed;
font-family: 'Open Sans',sans-serif;
font-size: var(--default);
font-size: var(--unit);
display: flex;
flex-direction: column;
}
@ -84,54 +84,53 @@ details > summary::-webkit-details-marker {
[hidden] {
display: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
all: unset;
display: block;
font-family: 'Poppins',sans-serif;
}
h1 {
font-size: var(--medium);
font-weight: 700;
margin-bottom: 16.2px;
}
h2 {
font-size: var(--small);
font-weight: 600;
margin-bottom: 13px;
}
h3 {
font-size: var(--default);
font-weight: 600;
margin-bottom: 10px;
}
h4,
h5 {
font-size: var(--default);
html {font-size: 100%;} /*16px*/
body {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
margin-bottom: 6.1px;
line-height: 1.75;
}
p {
all: unset;
font-family: 'Open Sans',sans-serif;
font-size: var(--default);
font-weight: 400;
margin: unset;
margin-bottom: 1rem;
}
p:first-line {
padding-left: var(--default);
h1, h2, h3, h4, h5, legend {
margin: 3rem 0 1.38rem;
font-family: 'Poppins', sans-serif;
font-weight: 600;
line-height: 1.3;
}
p:first-line {
h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, legend:first-child {
margin-top: initial;
}
h1 {
margin-top: 0;
margin-bottom: 10px;
font-size: 1.383rem;
}
p:not(:first-line) {
margin-top: 10px;
margin-bottom: 10px;
h2 {font-size: 1.296rem;}
h3 {font-size: 1.215rem;}
h4 {font-size: 1.138rem;}
h5 {font-size: 1.067rem;}
legend {
font-size: 1.296em;
}
small, .text_small {
font-family: 'Open Sans',sans-serif;
font-size: 0.937rem;
}
input[type=password],
input[type=text],
textarea {

10
public/assets/default_theme/css/root.css
View File

@ -1,9 +1,9 @@
:root {
--smaller: .6rem;
--default: 1rem;
--small: 1.3rem;
--medium: 1.62rem;
--big: 3rem;
--s: .6rem;
--unit: 1rem;
--m: 1.3rem;
--xl: 1.62rem;
--xxl: 3rem;
}
@media(prefers-color-scheme:dark) {

23
public/assets/default_theme/css/widgets/buttons.css
View File

@ -31,7 +31,7 @@ input[type=file] {
font-family: 'Open Sans',sans-serif !important;
font-weight: normal !important;
padding: unset !important;
border-radius: var(--smaller);
border-radius: var(--s);
background: var(--gradient) !important;
}
input[type=radio] {
@ -53,18 +53,18 @@ input[type=checkbox]:checked {
}
input[type=color] {
appearance: none;
width: var(--big);
height: var(--big);
width: var(--xxl);
height: var(--xxl);
background-color: transparent;
border: none;
cursor: pointer;
}
input[type=color]::-webkit-color-swatch {
border-radius: var(--smaller);
border-radius: var(--s);
border: none;
}
input[type=color]::-moz-color-swatch {
border-radius: var(--smaller);
border-radius: var(--s);
border: none;
}
::file-selector-button {
@ -84,7 +84,7 @@ button {
display: block !important;
cursor: pointer !important;
margin-left: auto !important;
margin-top: var(--smaller);
margin-top: var(--s);
}
button,
label {
@ -105,12 +105,19 @@ textarea {
display: inline-flex;
overflow: hidden;
font-size: inherit;
line-height: initial !important;
padding: 6px 8px !important;
border-radius: var(--smaller);
border-radius: var(--s);
border: 2px solid var(--border) !important;
width: inherit;
max-width: border-box !important;
}
button:not(:last-child),
input:not(:last-child),
select:not(:last-child),
textarea:not(:last-child) {
margin-bottom: var(--s);
}
button,
select,
textarea {
@ -125,7 +132,7 @@ select {
-moz-appearance: none !important;
cursor: pointer;
background-repeat: no-repeat;
border-radius: var(--smaller);
border-radius: var(--s);
max-width: 100% !important;
}
select[multiple] {

63
public/assets/default_theme/css/widgets/sections.css
View File

@ -3,9 +3,9 @@
flex-direction: column;
flex-wrap: wrap;
font-family: 'Open Sans',sans-serif;
margin-bottom: var(--smaller);
border-radius: var(--smaller);
padding: var(--smaller);
margin-bottom: var(--s);
border-radius: var(--s);
padding: var(--s);
background: var(--gradient) !important;
box-shadow: var(--shadow);
}
@ -18,7 +18,7 @@
flex-direction: column;
}
.profile-info-nickname {
font-size: var(--small);
font-size: var(--m);
}
.profile-info-tags {
margin: unset;
@ -27,15 +27,16 @@
margin-right: 5px;
}
.profile-info-stats {
margin-top: var(--smaller);
margin-top: var(--s);
}
.profile-info-bio {
.profile-info-bio,
.profile-info-nickname {
word-break: break-all;
}
.profile-avatar {
max-width: 4rem;
max-height: 4rem;
min-width: var(--big);
min-width: var(--xxl);
width: 100%;
height: auto;
margin-right: 5px;
@ -44,30 +45,28 @@
.section-widget {
display: flex;
flex-direction: column;
border-radius: var(--smaller);
margin-bottom: var(--small);
border-radius: var(--s);
margin-bottom: var(--m);
background-color: var(--background-card) !important;
box-shadow: var(--shadow);
border: 2px solid var(--border) !important;
}
.section-widget hr {
margin-bottom: var(--smaller);
margin-bottom: var(--s);
}
.section-widget-padded {
padding: var(--smaller);
.section-padding {
padding: var(--s);
}
.section-widget-paging {
display: block;
margin-top: var(--smaller);
margin-top: var(--s);
margin-left: auto;
}
.section-title {
font-size: var(--small);
font-weight: 700;
margin: 0;
.section-widget-title {
margin-left: unset;
}
.section-widget-button-like {
border-radius: var(--smaller);
border-radius: var(--s);
padding: 6px 10px;
margin-top: 6px;
cursor: pointer;
@ -76,24 +75,22 @@
font-family: 'Open Sans',sans-serif;
font-weight: 700;
}
.section-widget-subtitle-details :not(summary,svg,h3) {
border-radius: var(--smaller);
.section-widget-subtitle-details :not(summary,svg,strong) {
border-radius: var(--s);
background: var(--gradient);
padding: 6px 10px;
}
.section-widget-title-details summary {
font-size: var(--small);
font-weight: 700;
}
.section-widget-subtitle-details summary {
border: 2px solid var(--border);
font-size: var(--default);
font-weight: 700;
margin-bottom: var(--smaller);
margin-bottom: var(--s);
}
.section-widget-title-details summary,
.section-widget-subtitle-details summary {
border-radius: var(--smaller);
align-items: center;
border-radius: var(--s);
padding: 6px 10px;
background: var(--gradient) !important;
}
@ -111,10 +108,14 @@
.section-title-summary {
display: flex;
}
.section-subtitle-summary h3,
.section-subtitle-summary strong,
.section-title-summary h2 {
margin-right: auto;
}
.section-subtitle-summary a,
.section-title-summary a {
line-height: initial;
}
.section-subtitle-summary svg:last-child,
.section-title-summary svg:last-child {
margin-left: 4px;
@ -124,19 +125,18 @@
flex-direction: column;
max-width: 100%;
width: 100%;
padding: var(--smaller);
padding: var(--s);
}
.section-form-legend {
margin-top: unset;
margin-bottom: 10px;
margin-bottom: var(--s);
font-weight: bold;
font-size: var(--medium);
}
div[class^="mb-"] {
display: flex;
flex-direction: column;
flex-basis: border-box;
margin-bottom: var(--smaller);
margin-bottom: var(--s);
}
div[class^="mb-"]:last-of-type {
margin-bottom: unset;
@ -149,10 +149,9 @@ div[class^="mb-"] textarea {
.alert-danger {
display: inline-block;
font-style: italic;
font-size: 1rem;
border: solid 2px #ff6347;
background-color: #FF634733;
border-radius: var(--smaller);
border-radius: var(--s);
padding: 2px 6px;
margin-top: 6px;
margin-bottom: 6px;

7
public/assets/icons/chevron-left.svg.twig Normal file
View File

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg
class="{{ iconClass|default('') }}"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
<title>Open right sidepanel</title>
<path fill-rule="evenodd" d="M9.78 12.78a.75.75 0 01-1.06 0L4.47 8.53a.75.75 0 010-1.06l4.25-4.25a.75.75 0 011.06 1.06L6.06 8l3.72 3.72a.75.75 0 010 1.06z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 390 B

13
public/assets/icons/feed.svg.twig Normal file
View File

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- https://github.com/primer/octicons -->
<!-- MIT License -->
<svg
xmlns="http://www.w3.org/2000/svg"
class="{{ iconClass|default('') }}"
viewBox="0 0 16 16"
width="16"
height="16">
<title>Default feed</title>
<path fill-rule="evenodd" d="M1.75 1A1.75 1.75 0 000 2.75v9.5C0 13.216.784 14 1.75 14H3v1.543a1.457 1.457 0 002.487 1.03L8.061 14h6.189A1.75 1.75 0 0016 12.25v-9.5A1.75 1.75 0 0014.25 1H1.75zM1.5 2.75a.25.25 0 01.25-.25h12.5a.25.25 0 01.25.25v9.5a.25.25 0 01-.25.25h-6.5a.75.75 0 00-.53.22L4.5 15.44v-2.19a.75.75 0 00-.75-.75h-2a.25.25 0 01-.25-.25v-9.5z"></path>
<path d="M22.5 8.75a.25.25 0 00-.25-.25h-3.5a.75.75 0 010-1.5h3.5c.966 0 1.75.784 1.75 1.75v9.5A1.75 1.75 0 0122.25 20H21v1.543a1.457 1.457 0 01-2.487 1.03L15.939 20H10.75A1.75 1.75 0 019 18.25v-1.465a.75.75 0 011.5 0v1.465c0 .138.112.25.25.25h5.5a.75.75 0 01.53.22l2.72 2.72v-2.19a.75.75 0 01.75-.75h2a.25.25 0 00.25-.25v-9.5z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1021 B

8
public/assets/icons/media.svg.twig Normal file
View File

@ -0,0 +1,8 @@
<svg
xmlns="http://www.w3.org/2000/svg"
class="{{ iconClass|default('') }}"
viewBox="0 0 16 16"
width="16" height="16">
<path fill-rule="evenodd" d="M1.75 2.5a.25.25 0 00-.25.25v10.5c0 .138.112.25.25.25h.94a.76.76 0 01.03-.03l6.077-6.078a1.75 1.75 0 012.412-.06L14.5 10.31V2.75a.25.25 0 00-.25-.25H1.75zm12.5 11H4.81l5.048-5.047a.25.25 0 01.344-.009l4.298 3.889v.917a.25.25 0 01-.25.25zm1.75-.25V2.75A1.75 1.75 0 0014.25 1H1.75A1.75 1.75 0 000 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0016 13.25zM5.5 6a.5.5 0 11-1 0 .5.5 0 011 0zM7 6a2 2 0 11-4 0 2 2 0 014 0z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 624 B

59
public/assets/icons/menu.svg.twig
View File

@ -1,58 +1,13 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- https://github.com/primer/octicons -->
<!-- MIT License -->
<svg
class="{{ iconClass|default('') }}"
viewBox="0 0 16 16"
width="16"
height="16"
version="1.1"
id="svg6"
sodipodi:docname="menu.svg"
inkscape:version="1.1 (c4e8f9ed74, 2021-05-24)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/">
<defs
id="defs10" />
<sodipodi:namedview
id="namedview8"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
showgrid="false"
inkscape:zoom="12.150261"
inkscape:cx="15.637524"
inkscape:cy="21.563323"
inkscape:window-width="1920"
inkscape:window-height="1016"
inkscape:window-x="0"
inkscape:window-y="36"
inkscape:window-maximized="1"
inkscape:current-layer="svg6" />
<title
id="title2">Open left sidepanel.</title>
<path
fill-rule="evenodd"
d="M 0.9999891,2.9999916 A 0.75000111,0.75000111 0 0 1 1.7499903,2.2499909 H 14.25001 a 0.75000111,0.75000111 0 1 1 0,1.5000021 H 1.7499903 A 0.75000111,0.75000111 0 0 1 0.9999891,2.9999916 Z m 0,5.0000076 A 0.75000111,0.75000111 0 0 1 1.7499903,7.2499981 H 14.25001 a 0.7500013,0.7500013 0 1 1 0,1.5000024 H 1.7499903 A 0.75000111,0.75000111 0 0 1 0.9999891,7.9999992 Z m 0.7500012,4.2500058 a 0.75000231,0.75000231 0 1 0 0,1.500004 H 14.25001 a 0.75000231,0.75000231 0 1 0 0,-1.500004 z"
id="path4"
style="stroke-width:1" />
<metadata
id="metadata12">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:title>Open left sidepanel.</dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
xmlns="http://www.w3.org/2000/svg"
class="{{ iconClass|default('') }}"
viewBox="0 0 16 16"
width="16"
height="16">
<title>Open left sidepanel</title>
<path d="m0.99999 3a0.75 0.75 0 0 1 0.75-0.75h12.5a0.75 0.75 0 1 1 0 1.5h-12.5a0.75 0.75 0 0 1-0.75-0.75zm0 5a0.75 0.75 0 0 1 0.75-0.75h12.5a0.75 0.75 0 1 1 0 1.5h-12.5a0.75 0.75 0 0 1-0.75-0.75zm0.75 4.25a0.75 0.75 0 1 0 0 1.5h12.5a0.75 0.75 0 1 0 0-1.5z" fill-rule="evenodd"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 606 B

68
public/assets/icons/notes.svg.twig
View File

@ -1,68 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- https://github.com/primer/octicons -->
<!-- MIT License -->
<svg
class="{{ iconClass|default('') }}"
viewBox="0 0 16 16"
width="16"
height="16"
version="1.1"
id="svg8"
sodipodi:docname="notes.svg"
inkscape:version="1.1 (c4e8f9ed74, 2021-05-24)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/">
<defs
id="defs12" />
<sodipodi:namedview
id="namedview10"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
showgrid="false"
inkscape:zoom="6.6503072"
inkscape:cx="2.2555349"
inkscape:cy="27.818264"
inkscape:window-width="1920"
inkscape:window-height="1016"
inkscape:window-x="0"
inkscape:window-y="36"
inkscape:window-maximized="1"
inkscape:current-layer="svg8" />
<title
id="title2">
Create a note
</title>
<g
id="g20"
transform="matrix(0.66666667,0,0,0.66666667,-4e-8,1.6962954e-4)">
<path
fill-rule="evenodd"
d="M 1.75,1 A 1.75,1.75 0 0 0 0,2.75 v 9.5 C 0,13.216 0.784,14 1.75,14 H 3 v 1.543 a 1.457,1.457 0 0 0 2.487,1.03 L 8.061,14 H 14.25 A 1.75,1.75 0 0 0 16,12.25 V 2.75 A 1.75,1.75 0 0 0 14.25,1 Z M 1.5,2.75 A 0.25,0.25 0 0 1 1.75,2.5 h 12.5 a 0.25,0.25 0 0 1 0.25,0.25 v 9.5 A 0.25,0.25 0 0 1 14.25,12.5 H 7.75 A 0.75,0.75 0 0 0 7.22,12.72 L 4.5,15.44 V 13.25 A 0.75,0.75 0 0 0 3.75,12.5 h -2 A 0.25,0.25 0 0 1 1.5,12.25 Z"
id="path4" />
<path
d="M 22.5,8.75 A 0.25,0.25 0 0 0 22.25,8.5 h -3.5 a 0.75,0.75 0 0 1 0,-1.5 h 3.5 C 23.216,7 24,7.784 24,8.75 v 9.5 A 1.75,1.75 0 0 1 22.25,20 H 21 v 1.543 a 1.457,1.457 0 0 1 -2.487,1.03 L 15.939,20 H 10.75 A 1.75,1.75 0 0 1 9,18.25 v -1.465 a 0.75,0.75 0 0 1 1.5,0 v 1.465 c 0,0.138 0.112,0.25 0.25,0.25 h 5.5 a 0.75,0.75 0 0 1 0.53,0.22 l 2.72,2.72 v -2.19 a 0.75,0.75 0 0 1 0.75,-0.75 h 2 a 0.25,0.25 0 0 0 0.25,-0.25 z"
id="path6" />
</g>
<metadata
id="metadata16">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:title>
Create a note
</dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.5 KiB

4
public/components/Left/assets/css/view.css
View File

@ -23,7 +23,7 @@
/* FEED NAVIGATION / PLUGINS */
.feed-nav {
margin-bottom: var(--medium);
margin-bottom: var(--xl);
}
.feed-nav a {
@ -50,7 +50,7 @@
.footer {
margin-top: auto;
font-size: var(--default);
font-size: var(--unit);
}
/* > 720p */

2
public/components/Right/assets/css/view.css
View File

@ -11,7 +11,7 @@
}
.panel-right-icon {
margin-left: var(--small) !important;
margin-left: var(--m) !important;
cursor: pointer !important;
border: 2px solid transparent;
}

2
public/plugins/MediaFeed/assets/css/mediaFeed.css
View File

@ -1,6 +1,6 @@
.media-feed-tabs {
border: 2px solid var(--border);
border-radius: var(--smaller) var(--smaller) 0 0;
border-radius: var(--s) var(--s) 0 0;
border-bottom: none;
display: flex;
}

2
templates/cards/attachments/show.html.twig
View File

@ -2,7 +2,7 @@
{% block body %}
<div class="page">
<section class="section-widget section-widget-padded">
<section class="section-widget section-padding">
{% include '/cards/attachments/view.html.twig' with {'attachment': attachment, 'note': null} only %}

4
templates/cards/navigation/view.html.twig
View File

@ -11,7 +11,7 @@
{{ icon('arrow-down', 'icon icon-details-open') | raw }}
</summary>
<nav class='section-widget-padded' tabindex="0" title="{{ 'Navigate through each feed.' | trans }}">
<nav class='section-padding' tabindex="0" title="{{ 'Navigate through each feed.' | trans }}">
{% if not app.user %} {# Default feeds #}
<ul>
<li>
@ -55,7 +55,7 @@
{% endblock profile_current_actor %}
{% block profile_security %}
<section class='section-widget section-widget-padded' title="{{ 'Your profile information.' | trans }}">
<section class='section-widget section-padding' title="{{ 'Your profile information.' | trans }}">
<h2 class="section-title">Account</h2>
<nav tabindex="0" class="profile-navigation" title="{{ 'Navigate through account related pages.' | trans }}">

4
templates/cards/profile/view.html.twig
View File

@ -14,9 +14,9 @@
<section class="profile-info-bio">
{% if actor_bio %}
<p>{{ actor_bio }}</p>
<span>{{ actor_bio }}</span>
{% else %}
<p>{{ '(No bio)' | trans }}</p>
<span>{{ '(No bio)' | trans }}</span>
{% endif %}
</section>
</div>

8
templates/settings/base.html.twig
View File

@ -11,20 +11,18 @@
{% endblock stylesheets %}
{% block body %}
<nav class='section-settings'>
<h2>Settings</h2>
<nav class='section-widget section-padding'>
<h2 class="section-widget-title">Settings</h2>
<ul>
<li>
{% set profile_tabs = [{'title': 'Personal Info', 'desc': 'Nickname, Homepage, Bio and more.', 'id': 'settings-personal-info', 'form': personal_info_form}] %}
{% set profile_tabs = profile_tabs|merge(handle_event('PopulateSettingsTabs', app.request, 'profile')) %}
{{ macros.settings_details_container('Profile', 'Personal Information, Avatar and Profile', 'settings-profile-details', profile_tabs, _context) }}
</li>
<hr>
<li>
{% set muting_tabs = handle_event('PopulateSettingsTabs', app.request, 'muting') %}
{{ macros.settings_details_container('Muting', 'Blocked tags and actors', 'settings-muting-details', muting_tabs, _context) }}
</li>
<hr>
<li>
{{ macros.settings_details_element('Email', 'Set incoming and outgoing email settings', 'settings-email-details', email_form, _context) }}
</li>
@ -34,12 +32,10 @@
<li>
{{ macros.settings_details_element('Language', 'Select and set language preferences', 'settings-language-details', language_form, _context) }}
</li>
<hr>
<li>
{% set colour_tabs = handle_event('PopulateSettingsTabs', app.request, 'colours') %}
{{ macros.settings_details_container('Colours', 'Customize your interface colours', 'settings-colour-details', colour_tabs, _context) }}
</li>
<hr>
<li>
{{ macros.settings_details_container('Notifications', 'Enable/disable notifications (Email, XMPP, Replies...)', 'notifications', tabbed_forms_notify, _context) }}
</li>

6
templates/settings/macros.html.twig
View File

@ -2,12 +2,12 @@
{% if details_ids is null %}
{% set details_ids = [id] %}
{% endif %}
<details class="section-title-settings" {{ open_details(context.open_details_query, details_ids) }} id={{ id }}>
<details class="section-settings-details" {{ open_details(context.open_details_query, details_ids) }} id={{ id }}>
<summary>
<h3>
<strong class="section-settings-details-title">
{{ title | trans }}
{{ icon('arrow-down', 'icon icon-details-open') | raw }}
</h3>
</strong>
<em>
{{ summary | trans }}
</em>