wamo/gnu-social
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[CARDS][Navigation] Section styling more consistent and can now be selectively hidden by user

Browse Source 
[COMPONENTS][Right] Changed additional options div class names
This commit is contained in:
Eliseu Amaro 2021-12-08 15:16:30 +00:00
parent a285128dab
commit 870f866c23
No known key found for this signature in database
GPG Key ID: 96DA09D4B97BC2D5
4 changed files with 63 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,7 +13,10 @@
<details class="section-widget-title-details" open="open" <details class="section-widget-title-details" open="open"
title="{{ 'Expand if you want to access more options.' | trans }}"> title="{{ 'Expand if you want to access more options.' | trans }}">
<summary class="section-title-summary"> <summary class="section-title-summary">
{{ "Create a note" | trans }}{{ icon('arrow-down', 'icon icon-details-open') | raw }} <h2>
{{ "Create a note" | trans }}
</h2>
{{ icon('arrow-down', 'icon icon-details-open') | raw }}
</summary> </summary>
<div class="section-form"> <div class="section-form">
@ -26,7 +29,10 @@
<details class="section-widget-subtitle-details"> <details class="section-widget-subtitle-details">
<summary class="section-subtitle-summary"> <summary class="section-subtitle-summary">
{{ "Additional options" | trans }}{{ icon('arrow-down', 'icon icon-details-close') | raw }} <h3>
{{ "Additional options" | trans }}
</h3>
{{ icon('arrow-down', 'icon icon-details-close') | raw }}
</summary> </summary>
{{ form_row(blocks['post_form'].language) }} {{ form_row(blocks['post_form'].language) }}
{{ form_row(blocks['post_form'].tag_use_canonical) }} {{ form_row(blocks['post_form'].tag_use_canonical) }}

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

@ -22,12 +22,10 @@
align-self: center; align-self: center;
fill: var(--foreground); fill: var(--foreground);
} }
.edit-feed-link {
display: block;
float: right;
}
.active { .active {
font-weight: bold; font-size: 1.1em;
font-family: 'Poppins', sans-serif;
font-weight: 600;
} }
.anchor-hidden { .anchor-hidden {
width: 1px; width: 1px;

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

@ -76,7 +76,7 @@
font-family: 'Open Sans',sans-serif; font-family: 'Open Sans',sans-serif;
font-weight: 700; font-weight: 700;
} }
.section-widget-subtitle-details :not(summary,svg) { .section-widget-subtitle-details :not(summary,svg,h3) {
border-radius: var(--smaller); border-radius: var(--smaller);
background: var(--gradient); background: var(--gradient);
padding: 6px 10px; padding: 6px 10px;
@ -98,19 +98,26 @@
background: var(--gradient) !important; background: var(--gradient) !important;
} }
.section-widget-subtitle-details[open] svg, .section-widget-subtitle-details[open] svg,
.section-widget-title-details[open] svg { .section-widget-title-details[open] .icon-details-open {
transform: rotate(180deg); transform: rotate(180deg);
animation: fadeOut 200ms cubic-bezier(0,0.55,0.45,1); animation: fadeOut 200ms cubic-bezier(0,0.55,0.45,1);
} }
.section-widget-subtitle-details:not([open]) svg, .section-widget-subtitle-details:not([open]) svg,
.section-widget-title-details:not([open]) svg { .section-widget-title-details:not([open]) .icon-details-open {
transform: initial; transform: initial;
animation: fadeIn 200ms cubic-bezier(0,0.55,0.45,1); animation: fadeIn 200ms cubic-bezier(0,0.55,0.45,1);
} }
.section-subtitle-summary, .section-subtitle-summary,
.section-title-summary { .section-title-summary {
display: flex; display: flex;
justify-content: space-between; }
.section-subtitle-summary h3,
.section-title-summary h2 {
margin-right: auto;
}
.section-subtitle-summary svg:last-child,
.section-title-summary svg:last-child {
margin-left: 4px;
} }
.section-form { .section-form {
display: flex; display: flex;

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

@ -1,12 +1,17 @@
{% block feeds %} {% block feeds %}
<section class="section-widget section-widget-padded"> <section class="section-widget" title="{{ 'Feed navigation.' | trans }}">
<h2 class="section-title">{{ icon('logo', 'icon icon-logo') | raw }}{{ 'Feeds' | trans }} <details class="section-widget-title-details" open="open"
title="{{ 'Expand if you want to access more options.' | trans }}">
<summary class="section-title-summary">
<h2>{{ 'Feeds' | trans }}</h2>
{% if app.user %} {% if app.user %}
{# User custom feeds #} {# User custom feeds #}
<a class="edit-feed-link" href="{{ path('edit_feeds') }}">{{ icon('edit', 'icon icon-edit-feed') | raw }}</a> <a class="edit-feed-link" href="{{ path('edit_feeds') }}">{{ icon('edit', 'icon icon-edit-feed') | raw }}</a>
{% endif %} {% endif %}
</h2> {{ icon('arrow-down', 'icon icon-details-open') | raw }}
<nav class='sec-nav' tabindex="0" title="{{ 'Navigate through each feed.' | trans }}"> </summary>
<nav class='section-widget-padded' tabindex="0" title="{{ 'Navigate through each feed.' | trans }}">
{% if not app.user %} {# Default feeds #} {% if not app.user %} {# Default feeds #}
<ul> <ul>
<li> <li>
@ -37,6 +42,7 @@
</ul> </ul>
{% endif %} {% endif %}
</nav> </nav>
</details>
</section> </section>
{% endblock feeds %} {% endblock feeds %}