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"
title="{{ 'Expand if you want to access more options.' | trans }}">
<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>
<div class="section-form">
@ -26,7 +29,10 @@
<details class="section-widget-subtitle-details">
<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>
{{ form_row(blocks['post_form'].language) }}
{{ 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;
fill: var(--foreground);
}
.edit-feed-link {
display: block;
float: right;
}
.active {
font-weight: bold;
font-size: 1.1em;
font-family: 'Poppins', sans-serif;
font-weight: 600;
}
.anchor-hidden {
width: 1px;

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

@ -76,7 +76,7 @@
font-family: 'Open Sans',sans-serif;
font-weight: 700;
}
.section-widget-subtitle-details :not(summary,svg) {
.section-widget-subtitle-details :not(summary,svg,h3) {
border-radius: var(--smaller);
background: var(--gradient);
padding: 6px 10px;
@ -98,19 +98,26 @@
background: var(--gradient) !important;
}
.section-widget-subtitle-details[open] svg,
.section-widget-title-details[open] svg {
.section-widget-title-details[open] .icon-details-open {
transform: rotate(180deg);
animation: fadeOut 200ms cubic-bezier(0,0.55,0.45,1);
}
.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;
animation: fadeIn 200ms cubic-bezier(0,0.55,0.45,1);
}
.section-subtitle-summary,
.section-title-summary {
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 {
display: flex;

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

@ -1,42 +1,48 @@
{% block feeds %}
<section class="section-widget section-widget-padded">
<h2 class="section-title">{{ icon('logo', 'icon icon-logo') | raw }}{{ 'Feeds' | trans }}
{% if app.user %}
{# User custom feeds #}
<a class="edit-feed-link" href="{{ path('edit_feeds') }}">{{ icon('edit', 'icon icon-edit-feed') | raw }}</a>
{% endif %}
</h2>
<nav class='sec-nav' tabindex="0" title="{{ 'Navigate through each feed.' | trans }}">
{% if not app.user %} {# Default feeds #}
<ul>
<li>
<a href="{{ path('main_public') }}" class='{{ active('main_public') }}'>
Public
</a>
</li>
<li>
<a href="{{ path('main_all') }}" class='hover-effect {{ active('main_all') }}'>
Network
</a>
</li>
</ul>
{% else %}
<ul>
{% for link in get_feeds(current_actor) %}
<section class="section-widget" title="{{ 'Feed navigation.' | 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 %}
{# User custom feeds #}
<a class="edit-feed-link" href="{{ path('edit_feeds') }}">{{ icon('edit', 'icon icon-edit-feed') | raw }}</a>
{% endif %}
{{ icon('arrow-down', 'icon icon-details-open') | raw }}
</summary>
<nav class='section-widget-padded' tabindex="0" title="{{ 'Navigate through each feed.' | trans }}">
{% if not app.user %} {# Default feeds #}
<ul>
<li>
<a href="{{ link.getUrl() }}" class='{{ active(link.getRoute()) }}'>{{ link.getTitle() }}</a>
</li>
{% endfor %}
{% for link in handle_event('AddMainNavigationItem', {'nickname': current_actor.getNickname()}) %}
<li>
<a href="{{ link['path'] }}" class='{{ active(link['path_id']) }}'>
{{ link['title'] }}
<a href="{{ path('main_public') }}" class='{{ active('main_public') }}'>
Public
</a>
</li>
{% endfor %}
</ul>
{% endif %}
</nav>
<li>
<a href="{{ path('main_all') }}" class='hover-effect {{ active('main_all') }}'>
Network
</a>
</li>
</ul>
{% else %}
<ul>
{% for link in get_feeds(current_actor) %}
<li>
<a href="{{ link.getUrl() }}" class='{{ active(link.getRoute()) }}'>{{ link.getTitle() }}</a>
</li>
{% endfor %}
{% for link in handle_event('AddMainNavigationItem', {'nickname': current_actor.getNickname()}) %}
<li>
<a href="{{ link['path'] }}" class='{{ active(link['path_id']) }}'>
{{ link['title'] }}
</a>
</li>
{% endfor %}
</ul>
{% endif %}
</nav>
</details>
</section>
{% endblock feeds %}