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

[TWIG] Note actions extra structural changes to reflect standard note actions styling

Browse Source 
[CSS] Note actions extra details styling done
This commit is contained in:
Eliseu Amaro 2021-12-06 20:35:44 +00:00
parent cb276aee81
commit 6303f480f7
Signed by: eliseuamaro
GPG Key ID: 96DA09D4B97BC2D5
4 changed files with 57 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -200,7 +200,7 @@ embed header {
content: '@';
}
.note-actions {
.note-actions ul {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
@ -209,19 +209,44 @@ embed header {
vertical-align: middle
}
.note-actions-extra-details {
display: flex;
flex-direction: column;
}
.note-actions-extra-details summary {
display: block;
opacity: 0.33;
vertical-align: middle;
}
.note-actions-extra-details[open] > summary {
opacity: 1 !important;
}
.note-actions-extra-details[open] > summary + * {
z-index: 1;
display: flex;
position: absolute;
flex-direction: column;
padding: var(--smaller);
border-radius: var(--smaller);
background: var(--background-card);
box-shadow: var(--shadow);
font-size: var(--default);
line-height: 1.5;
width: max-content;
}
.note-actions-set {
opacity: 1 !important;
}
.button-container {
border: none !important;
-webkit-border-radius: unset !important;
-moz-border-radius: unset !important;
border-radius: unset !important;
-webkit-mask-repeat: no-repeat !important;
mask-repeat: no-repeat !important;
-webkit-mask-size: cover !important;
mask-size: cover !important;
display: inline-block;
margin-left: var(--smaller);
width: var(--default);
height: var(--default);

4
public/assets/icons/kebab.svg.twig
View File

@ -14,8 +14,8 @@
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
viewBox="0 0 16 16"
width="16"
height="16">
width="16px"
height="16px">
<title>Expand for more options</title>
<path d="M8 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM1.5 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm13 0a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 800 B

After

Width:  |  Height:  |  Size: 804 B

20
templates/cards/note/view.html.twig
View File

@ -1,21 +1,29 @@
{% block note_actions %}
{% if app.user or note_actions_hide is defined %}
<div class="note-actions">
{% for current_action in get_note_actions(note) %}
<a title="{{ current_action["title"] | trans }}" class="{{ current_action["classes"] }}" href="{{ current_action["url"] }}"></a>
{% endfor %}
<details>
<ul>
<li class="note-actions-extra">
<details class="note-actions-extra-details">
<summary>
{{ icon('kebab', 'icon icon-extra-note-actions') | raw }} {# button-container #}
{{ icon('kebab', 'icon icon-note-actions-extra') | raw }} {# button-container #}
</summary>
<ul>
{% for current_action in get_extra_note_actions(note) %}
<li>
<a class="{{ current_action["classes"] }}" href="{{ current_action["url"] }}">{{ current_action['title'] }}</a>
<a class="{{ current_action["classes"] }}"
href="{{ current_action["url"] }}">{{ current_action['title'] }}</a>
</li>
{% endfor %}
</ul>
</details>
</li>
{% for current_action in get_note_actions(note) %}
<li>
<a title="{{ current_action["title"] | trans }}" class="{{ current_action["classes"] }}"
href="{{ current_action["url"] }}"></a>
</li>
{% endfor %}
</ul>
</div>
{% endif %}
{% endblock note_actions %}