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

@ -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