add: better mobile ui for timeline pages

add: rename button classes (quaternary->lowered, tertiary->raised)
This commit is contained in:
trisua 2025-06-12 13:53:23 -04:00
parent 7bfb113b1f
commit 0dede99682
42 changed files with 272 additions and 177 deletions

View file

@ -25,7 +25,7 @@
("class" "card w-full secondary flex gap-2")
(a
("href" "/")
("class" "button red quaternary")
("class" "button red lowered")
(text "{{ icon \"x\" }}")
(span
(text "{{ text \"general:action.back\" }}")))))))

View file

@ -212,35 +212,35 @@
(text "{{ text \"auth:action.follow\" }}")))
(button
("onclick" "toggle_follow_user(event)")
("class" "quaternary red{% if not is_following %} hidden{% endif %}")
("class" "lowered red{% if not is_following %} hidden{% endif %}")
("atto_tag" "user.unfollow")
(text "{{ icon \"user-minus\" }}")
(span
(text "{{ text \"auth:action.unfollow\" }}")))
(button
("onclick" "toggle_block_user()")
("class" "quaternary red")
("class" "lowered red")
(text "{{ icon \"shield\" }}")
(span
(text "{{ text \"auth:action.block\" }}")))
(text "{% else %}")
(button
("onclick" "toggle_block_user()")
("class" "quaternary red")
("class" "lowered red")
(text "{{ icon \"shield-off\" }}")
(span
(text "{{ text \"auth:action.unblock\" }}")))
(text "{%- endif %} {% if not user.settings.private_chats or is_following_you %}")
(button
("onclick" "create_group_chat()")
("class" "quaternary")
("class" "lowered")
(text "{{ icon \"message-circle\" }}")
(span
(text "{{ text \"auth:action.message\" }}")))
(text "{%- endif %} {% if is_helper -%}")
(a
("href" "/mod_panel/profile/{{ profile.id }}")
("class" "button quaternary")
("class" "button lowered")
(text "{{ icon \"shield\" }}")
(span
(text "{{ text \"general:action.manage\" }}")))

View file

@ -26,14 +26,14 @@
(text "{% if user -%} {% if not is_blocking -%}")
(button
("onclick" "toggle_block_user()")
("class" "quaternary red")
("class" "lowered red")
(text "{{ icon \"shield\" }}")
(span
(text "{{ text \"auth:action.block\" }}")))
(text "{% else %}")
(button
("onclick" "toggle_block_user()")
("class" "quaternary red")
("class" "lowered red")
(text "{{ icon \"shield-off\" }}")
(span
(text "{{ text \"auth:action.unblock\" }}")))
@ -62,7 +62,7 @@
(text "{%- endif %}")
(a
("href" "/")
("class" "button red quaternary")
("class" "button red lowered")
(text "{{ icon \"x\" }}")
(span
(text "{{ text \"general:action.back\" }}")))))))

View file

@ -16,7 +16,7 @@
(text "{% if user -%}")
(a
("href" "/search?profile={{ profile.id }}")
("class" "button quaternary small")
("class" "button lowered small")
(text "{{ icon \"search\" }}")
(span
(text "{{ text \"general:link.search\" }}")))

View file

@ -34,7 +34,7 @@
; show button to delete question
(button
("class" "quaternary small red")
("class" "lowered small red")
("onclick" "trigger('me::remove_question', ['{{ question[0].id }}'])")
(icon (text "trash"))
(str (text "general:action.delete")))))

View file

@ -34,7 +34,7 @@
(text "{% if user -%}")
(a
("href" "/search?profile={{ profile.id }}")
("class" "button quaternary small")
("class" "button lowered small")
(text "{{ icon \"search\" }}")
(span
(text "{{ text \"general:link.search\" }}")))

View file

@ -33,7 +33,7 @@
(text "{{ text \"auth:action.request_to_follow\" }}")))
(button
("onclick" "cancel_follow_user(event)")
("class" "quaternary red{% if not follow_requested -%} hidden{%- endif %}")
("class" "lowered red{% if not follow_requested -%} hidden{%- endif %}")
("atto_tag" "user.cancel_request")
(text "{{ icon \"user-minus\" }}")
(span
@ -41,7 +41,7 @@
(text "{% else %}")
(button
("onclick" "toggle_follow_user(event)")
("class" "quaternary red")
("class" "lowered red")
("atto_tag" "user.unfollow")
(text "{{ icon \"user-minus\" }}")
(span
@ -49,14 +49,14 @@
(text "{%- endif %} {% if not is_blocking -%}")
(button
("onclick" "toggle_block_user()")
("class" "quaternary red")
("class" "lowered red")
(text "{{ icon \"shield\" }}")
(span
(text "{{ text \"auth:action.block\" }}")))
(text "{% else %}")
(button
("onclick" "toggle_block_user()")
("class" "quaternary red")
("class" "lowered red")
(text "{{ icon \"shield-off\" }}")
(span
(text "{{ text \"auth:action.unblock\" }}")))
@ -155,7 +155,7 @@
(text "{%- endif %}")
(a
("href" "/")
("class" "button red quaternary")
("class" "button red lowered")
(text "{{ icon \"x\" }}")
(span
(text "{{ text \"general:action.back\" }}")))))))

View file

@ -16,7 +16,7 @@
(text "{% if user -%}")
(a
("href" "/search?profile={{ profile.id }}")
("class" "button quaternary small")
("class" "button lowered small")
(text "{{ icon \"search\" }}")
(span
(text "{{ text \"general:link.search\" }}")))

View file

@ -49,7 +49,7 @@
("class" "w-full flex flex-col gap-2")
("data-tab" "account")
(div
("class" "card tertiary flex flex-col gap-2")
("class" "card lowered flex flex-col gap-2")
("id" "account_settings")
(div
("class" "pillmenu")
@ -96,7 +96,7 @@
(div
("class" "card")
(select
("onchange" "set_setting_field('default_timeline', event.target.selectedOptions[0].value.startsWith('{') ? JSON.parse(event.target.selectedOptions[0].value) : event.target.selectedOptions[0].value)")
("onchange" "window.SETTING_SET_FUNCTIONS[0]('default_timeline', event.target.selectedOptions[0].value.startsWith('{') ? JSON.parse(event.target.selectedOptions[0].value) : event.target.selectedOptions[0].value)")
(option
("value" "MyCommunities")
("selected" "{% if home == '/' -%}true{% else %}false{%- endif %}")
@ -227,7 +227,7 @@
("class" "w-full flex flex-col gap-2 hidden")
("data-tab" "account/security")
(div
("class" "card tertiary flex flex-col gap-2")
("class" "card lowered flex flex-col gap-2")
(a
("href" "#/account")
("class" "button secondary")
@ -272,7 +272,7 @@
(pre
("id" "totp_recovery_codes")))
(button
("class" "quaternary green")
("class" "lowered green")
("onclick" "enable_totp(event)")
(text "Enable TOTP 2FA"))
(text "{% else %}")
@ -282,11 +282,11 @@
(div
("class" "flex gap-2 flex-wrap")
(button
("class" "quaternary red")
("class" "lowered red")
("onclick" "refresh_totp_codes(event)")
(text "Refresh recovery codes"))
(button
("class" "quaternary red")
("class" "lowered red")
("onclick" "disable_totp(event)")
(text "Disable TOTP 2FA")))
(text "{%- endif %}")))
@ -335,7 +335,7 @@
("class" "w-full flex flex-col gap-2 hidden")
("data-tab" "account/following")
(div
("class" "card tertiary flex flex-col gap-2")
("class" "card lowered flex flex-col gap-2")
(a
("href" "#/account")
("class" "button secondary")
@ -360,14 +360,14 @@
(div
("class" "flex gap-2")
(button
("class" "quaternary red small")
("class" "lowered red small")
("onclick" "toggle_follow_user('{{ user.id }}')")
(text "{{ icon \"user-minus\" }}")
(span
(text "{{ text \"auth:action.unfollow\" }}")))
(a
("href" "/@{{ user.username }}")
("class" "button quaternary small")
("class" "button lowered small")
(text "{{ icon \"external-link\" }}")
(span
(text "{{ text \"requests:action.view_profile\" }}")))))
@ -391,7 +391,7 @@
("class" "w-full flex flex-col gap-2 hidden")
("data-tab" "account/blocks")
(div
("class" "card tertiary flex flex-col gap-2")
("class" "card lowered flex flex-col gap-2")
(a
("href" "#/account")
("class" "button secondary")
@ -415,7 +415,7 @@
(text "{{ components::avatar(username=user.username) }} {{ components::full_username(user=user) }}"))
(a
("href" "/@{{ user.username }}")
("class" "button quaternary small")
("class" "button lowered small")
(text "{{ icon \"external-link\" }}")
(span
(text "{{ text \"requests:action.view_profile\" }}"))))
@ -424,7 +424,7 @@
("class" "w-full flex flex-col gap-2 hidden")
("data-tab" "account/uploads")
(div
("class" "card tertiary flex flex-col gap-2")
("class" "card lowered flex flex-col gap-2")
(a
("href" "#/account")
("class" "button secondary")
@ -456,13 +456,13 @@
(div
("class" "flex gap-2")
(button
("class" "quaternary small")
("class" "lowered small")
("onclick" "trigger('ui::lightbox_open', ['/api/v1/uploads/{{ upload.id }}'])")
(text "{{ icon \"view\" }}")
(span
(text "{{ text \"general:action.view\" }}")))
(button
("class" "quaternary small red")
("class" "lowered small red")
("onclick" "remove_upload('{{ upload.id }}')")
(text "{{ icon \"x\" }}")
(span
@ -493,7 +493,7 @@
("class" "w-full flex flex-col gap-2 hidden")
("data-tab" "account/billing")
(div
("class" "card tertiary flex flex-col gap-2")
("class" "card lowered flex flex-col gap-2")
(a
("href" "#/account")
("class" "button secondary")
@ -534,7 +534,7 @@
portal.")))
(a
("href" "{{ config.stripe.billing_portal_url }}")
("class" "button quaternary")
("class" "button lowered")
("target" "_blank")
(text "Manage billing"))
(text "{% else %}")
@ -591,7 +591,7 @@
("class" "w-full hidden flex flex-col gap-2")
("data-tab" "profile")
(div
("class" "card tertiary flex flex-col gap-2")
("class" "card lowered flex flex-col gap-2")
("id" "profile_settings")
(text "{{ components::supporter_ad(body=\"Become a supporter to upload GIF images!\") }}")
(div
@ -655,7 +655,7 @@
(span
(text "{{ text \"general:action.save\" }}"))))
(div
("class" "card w-full tertiary hidden flex flex-col gap-2")
("class" "card w-full lowered hidden flex flex-col gap-2")
("data-tab" "sessions")
(text "{% for token in profile.tokens %}")
(div
@ -688,7 +688,7 @@
("class" "fade date")
(text "{{ token[2] }}")))
(button
("class" "quaternary red")
("class" "lowered red")
("onclick" "remove_token('{{ token[1] }}')")
(text "{{ text \"general:action.delete\" }}")))
(text "{% endfor %}"))
@ -696,7 +696,7 @@
("class" "w-full hidden flex flex-col gap-2")
("data-tab" "theme")
(div
("class" "card tertiary flex flex-col gap-2")
("class" "card lowered flex flex-col gap-2")
("id" "theme_settings")
(text "{% if failing_color_keys|length > 0 -%}")
(div
@ -714,7 +714,7 @@
(ul
(text "{% for key in failing_color_keys %}")
(li
(text "{{ key[0] }}")
(text "{{ key[0] }} ")
(b
(text "{{ key[1] }} < 4.5")))
(text "{% endfor %}")))
@ -745,7 +745,7 @@
(div
("class" "card")
(select
("onchange" "set_setting_field('theme_preference', event.target.selectedOptions[0].value)")
("onchange" "window.SETTING_SET_FUNCTIONS[0]('theme_preference', event.target.selectedOptions[0].value)")
(option
("value" "Auto")
("selected" "{% if user.settings.theme_preference == 'Auto' -%}true{% else %}false{%- endif %}")
@ -771,7 +771,7 @@
(div
("class" "card")
(select
("onchange" "set_setting_field('profile_theme', event.target.selectedOptions[0].value)")
("onchange" "window.SETTING_SET_FUNCTIONS[0]('profile_theme', event.target.selectedOptions[0].value)")
(option
("value" "Auto")
("selected" "{% if user.settings.profile_theme == 'Auto' -%}true{% else %}false{%- endif %}")
@ -795,20 +795,20 @@
(span
(text "{{ text \"general:action.save\" }}"))))
(div
("class" "card w-full tertiary hidden flex flex-col gap-2")
("class" "card w-full lowered hidden flex flex-col gap-2")
("data-tab" "connections")
(div
("class" "card w-full flex flex-wrap gap-2")
(text "{% if config.connections.spotify_client_id and not profile.connections.Spotify %}")
(button
("class" "quaternary")
("class" "lowered")
("onclick" "trigger('spotify::create_connection', ['{{ config.connections.spotify_client_id }}'])")
(text "{{ icon \"spotify\" }}")
(span
(text "Spotify")))
(text "{%- endif %} {% if config.connections.last_fm_key and not profile.connections.LastFm %}")
(button
("class" "quaternary")
("class" "lowered")
("onclick" "trigger('last_fm::create_connection', ['{{ config.connections.last_fm_key }}'])")
(text "{{ icon \"last_fm\" }}")
(span
@ -839,7 +839,7 @@
(div
("class" "card flex flex-col gap-2")
(button
("class" "quaternary red small")
("class" "lowered red small")
("onclick" "trigger('connections::delete', ['{{ key }}'])")
(text "{{ text \"general:action.delete\" }}"))
(label

View file

@ -31,7 +31,7 @@
(text "{{ text \"dialog:action.continue\" }}")))
(a
("href" "/")
("class" "button red quaternary")
("class" "button red lowered")
(text "{{ icon \"x\" }}")
(span
(text "{{ text \"general:action.back\" }}")))))))