davejansen/snikket-web-portal
1
0
Fork 0
Code Issues Pull Requests Activity

Improve navigation in circles section

Browse Source 
Separate the people/edit buttons visually (although they lead to
the same page) to anticipate user intent.
This commit is contained in:
Jonas Schäfer
2021-01-27 17:14:51 +01:00
parent d568a235eb
commit 0ead8ce4b3
4 changed files with 29 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
snikket_web/static/img/icons.svg
View File

@@ -52,11 +52,6 @@ licensed under the terms of the Apache 2.0 License -->
<path d="M0 0h24v24H0" fill="none" />
<path d="M8 11h8v2H8zm12.1 1H22c0-2.76-2.24-5-5-5h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1zM3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM19 12h-2v3h-3v2h3v3h2v-3h3v-2h-3z" />
</symbol>
<!-- from: content/create/materialiconsround/24px.svg -->
<symbol id="icon-edit" viewBox="0 0 24 24">
<path d="M0 0h24v24H0V0z" fill="none" />
<path d="M3 17.46v3.04c0 .28.22.5.5.5h3.04c.13 0 .26-.05.35-.15L17.81 9.94l-3.75-3.75L3.15 17.1c-.1.1-.15.22-.15.36zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" />
</symbol>
<!-- from: content/remove_circle_outline/materialiconsround/24px.svg -->
<symbol id="icon-remove" viewBox="0 0 24 24">
<path d="M0 0h24v24H0V0z" fill="none" />
@@ -97,6 +92,11 @@ licensed under the terms of the Apache 2.0 License -->
<rect fill="none" height="24" width="24" />
<g><path d="M12,12.75c1.63,0,3.07,0.39,4.24,0.9c1.08,0.48,1.76,1.56,1.76,2.73L18,17c0,0.55-0.45,1-1,1H7c-0.55,0-1-0.45-1-1l0-0.61 c0-1.18,0.68-2.26,1.76-2.73C8.93,13.14,10.37,12.75,12,12.75z M4,13c1.1,0,2-0.9,2-2c0-1.1-0.9-2-2-2s-2,0.9-2,2 C2,12.1,2.9,13,4,13z M5.13,14.1C4.76,14.04,4.39,14,4,14c-0.99,0-1.93,0.21-2.78,0.58C0.48,14.9,0,15.62,0,16.43L0,17 c0,0.55,0.45,1,1,1l3.5,0v-1.61C4.5,15.56,4.73,14.78,5.13,14.1z M20,13c1.1,0,2-0.9,2-2c0-1.1-0.9-2-2-2s-2,0.9-2,2 C18,12.1,18.9,13,20,13z M24,16.43c0-0.81-0.48-1.53-1.22-1.85C21.93,14.21,20.99,14,20,14c-0.39,0-0.76,0.04-1.13,0.1 c0.4,0.68,0.63,1.46,0.63,2.29V18l3.5,0c0.55,0,1-0.45,1-1L24,16.43z M12,6c1.66,0,3,1.34,3,3c0,1.66-1.34,3-3,3s-3-1.34-3-3 C9,7.34,10.34,6,12,6z" /></g>
</symbol>
<!-- from: social/people/materialiconsround/24px.svg -->
<symbol id="icon-people" viewBox="0 0 24 24">
<path d="M0 0h24v24H0V0z" fill="none" />
<path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5s-3 1.34-3 3 1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V18c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-1.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05.02.01.03.03.04.04 1.14.83 1.93 1.94 1.93 3.41V18c0 .35-.07.69-.18 1H22c.55 0 1-.45 1-1v-1.5c0-2.33-4.67-3.5-7-3.5z" />
</symbol>
<!-- from: social/group_add/materialiconsround/24px.svg -->
<symbol id="icon-create_group" viewBox="0 0 24 24">
<path d="M0 0h24v24H0V0z" fill="none" />
@@ -107,4 +107,9 @@ licensed under the terms of the Apache 2.0 License -->
<path d="M0 0h24v24H0V0z" fill="none" />
<path d="M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z" />
</symbol>
<!-- from: image/edit/materialiconsround/24px.svg -->
<symbol id="icon-edit" viewBox="0 0 24 24">
<path d="M0 0h24v24H0V0z" fill="none" />
<path d="M3 17.46v3.04c0 .28.22.5.5.5h3.04c.13 0 .26-.05.35-.15L17.81 9.94l-3.75-3.75L3.15 17.1c-.1.1-.15.22-.15.36zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" />
</symbol>
</defs></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

7
snikket_web/templates/admin_circles.html
View File

@@ -24,8 +24,11 @@
{%- call custom_form_button("create_link", invite_form.circles.name, circle.id_, slim=True, class="secondary accent") -%}
{% trans circle_name=circle.name %}Create invitation to circle {{ circle_name }}{% endtrans %}
{%- endcall -%}
{%- call action_button("more", url_for(".edit_circle", id_=circle.id_), class="primary") -%}
{% trans circle_name=circle.name %}Show details of circle {{ circle_name }}{% endtrans %}
{%- call action_button("people", url_for(".edit_circle", id_=circle.id_) + "#members", class="secondary") -%}
{% trans circle_name=circle.name %}Manage members of {{ circle_name }}{% endtrans %}
{%- endcall -%}
{%- call action_button("edit", url_for(".edit_circle", id_=circle.id_), class="primary") -%}
{% trans circle_name=circle.name %}Edit circle {{ circle_name }}{% endtrans %}
{%- endcall -%}
</td>
</tr>

23
snikket_web/translations/messages.pot
View File

@@ -8,7 +8,7 @@ msgid ""
msgstr ""
"Project-Id-Version: PROJECT VERSION\n"
"Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
"POT-Creation-Date: 2021-01-27 15:55+0100\n"
"POT-Creation-Date: 2021-01-27 17:16+0100\n"
"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
"Language-Team: LANGUAGE <LL@li.org>\n"
@@ -77,7 +77,7 @@ msgstr ""
msgid "Name"
msgstr ""
#: snikket_web/admin.py:284 snikket_web/templates/admin_circles.html:44
#: snikket_web/admin.py:284 snikket_web/templates/admin_circles.html:47
msgid "Create circle"
msgstr ""
@@ -302,20 +302,26 @@ msgstr ""
#: snikket_web/templates/admin_circles.html:28
#, python-format
msgid "Show details of circle %(circle_name)s"
msgid "Manage members of %(circle_name)s"
msgstr ""
#: snikket_web/templates/admin_circles.html:37
#: snikket_web/templates/admin_circles.html:31
#: snikket_web/templates/admin_edit_circle.html:8
#, python-format
msgid "Edit circle %(circle_name)s"
msgstr ""
#: snikket_web/templates/admin_circles.html:40
msgid "No circles"
msgstr ""
#: snikket_web/templates/admin_circles.html:38
#: snikket_web/templates/admin_circles.html:41
msgid ""
"Currently, there are no circles on this service. Use the form below to "
"create one."
msgstr ""
#: snikket_web/templates/admin_circles.html:41
#: snikket_web/templates/admin_circles.html:44
msgid "New circle"
msgstr ""
@@ -396,11 +402,6 @@ msgstr ""
msgid "Back"
msgstr ""
#: snikket_web/templates/admin_edit_circle.html:8
#, python-format
msgid "Edit circle %(circle_name)s"
msgstr ""
#: snikket_web/templates/admin_edit_circle.html:13
msgid "This circle cannot be modified"
msgstr ""

3
tools/icons.list
View File

@@ -8,7 +8,6 @@ communication/qr_code:qrcode
communication/vpn_key:passwd
content/add_circle_outline:add
content/add_link:create_link
content/create:edit
content/remove_circle_outline:remove
content/content_copy:copy
content/link_off:remove_link
@@ -17,5 +16,7 @@ navigation/arrow_forward:forward
navigation/cancel:cancel
navigation/more_vert:more
social/groups:groups
social/people:people
social/group_add:create_group
navigation/close:close
image/edit:edit