aiolabs/lnbits
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

fix: improve mobile responsiveness for admin settings (#3431)

Browse source 
Co-authored-by: Claude <noreply@anthropic.com>
This commit is contained in:
Ben Weeks 2025-10-21 11:54:49 +01:00 • committed by GitHub
parent 55c5ab3a6d
commit 785fb7af8e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 221 additions and 114 deletions
Download patch file Download diff file Expand all files Collapse all files

8
lnbits/core/templates/admin/_tab_exchange_providers.html
View file

@ -4,7 +4,7 @@
</h6>
<div class="row">
<div class="col-md-8 col-sm-12">
<div class="col-12 col-md-8">
<div class="q-pa-sm">
<canvas
style="
@ -17,7 +17,7 @@
></canvas>
</div>
</div>
<div class="col-md-4 col-sm-12">
<div class="col-12 col-md-4">
<q-input
filled
v-model="formData.lnbits_exchange_history_refresh_interval_seconds"
@ -74,11 +74,14 @@
</div>
</div>
<div class="overflow-auto">
<q-table
row-key="name"
:rows="formData.lnbits_exchange_rate_providers"
:columns="exchangesTable.columns"
v-model:pagination="exchangesTable.pagination"
:grid="$q.screen.xs"
:dense="$q.screen.lt.md"
>
<template v-slot:header="props">
<q-tr :props="props">
@ -168,6 +171,7 @@
</q-tr>
</template>
</q-table>
</div>
<ul>
<li>
<code>API URL</code> and <code>JSON Path</code> fields can use the

33
lnbits/core/templates/admin/_tab_security.html
View file

@ -2,7 +2,7 @@
<q-card-section class="q-pa-none">
<h6 class="q-my-none"><span v-text="$t('server_management')"></span></h6>
<div class="row">
<div class="col-md-6">
<div class="col-12 col-md-6">
<p><span v-text="$t('base_url')"></span></p>
<q-input
filled
@ -16,7 +16,7 @@
<span v-text="$t('authentication')"></span>
</h6>
<div class="row q-col-gutter-sm">
<div class="col-12 col-sm-6">
<div class="col-12 col-md-6">
<q-input
filled
v-model="formData.auth_token_expire_minutes"
@ -26,7 +26,7 @@
>
</q-input>
</div>
<div class="col-12 col-sm-6">
<div class="col-12 col-md-6">
<q-select
filled
v-model="formData.auth_allowed_methods"
@ -34,6 +34,7 @@
:hint="$t('auth_allowed_methods_hint')"
:label="$t('auth_allowed_methods_label')"
:options="formData.auth_all_methods"
:option-label="option => option.length > 25 ? option.substring(0, 22) + '...' : option"
></q-select>
</div>
</div>
@ -79,7 +80,7 @@
<strong class="q-my-none q-mb-sm">Google Auth</strong>
<div class="row">
<div class="col-md-6 col-sm-12 q-pr-sm">
<div class="col-12 col-md-6 q-pr-sm">
<q-input
filled
v-model="formData.google_client_id"
@ -88,7 +89,7 @@
>
</q-input>
</div>
<div class="col-md-6 col-sm-12">
<div class="col-12 col-md-6">
<q-input
filled
v-model="formData.google_client_secret"
@ -106,7 +107,7 @@
<strong class="q-my-none q-mb-sm">GitHub Auth</strong>
<div class="row">
<div class="col-md-6 col-sm-12 q-pr-sm">
<div class="col-12 col-md-6 q-pr-sm">
<q-input
filled
v-model="formData.github_client_id"
@ -115,7 +116,7 @@
>
</q-input>
</div>
<div class="col-md-6 col-sm-12">
<div class="col-12 col-md-6">
<q-input
filled
v-model="formData.github_client_secret"
@ -133,7 +134,7 @@
<strong class="q-my-none q-mb-sm">Keycloak Auth</strong>
<div class="row q-col-gutter-sm q-col-gutter-y-md">
<div class="col-md-4 col-sm-12">
<div class="col-12 col-md-4">
<q-input
filled
v-model="formData.keycloak_discovery_url"
@ -141,7 +142,7 @@
>
</q-input>
</div>
<div class="col-md-4 col-sm-12">
<div class="col-12 col-md-4">
<q-input
filled
v-model="formData.keycloak_client_id"
@ -150,7 +151,7 @@
>
</q-input>
</div>
<div class="col-md-4 col-sm-12">
<div class="col-12 col-md-4">
<q-input
filled
v-model="formData.keycloak_client_secret"
@ -159,7 +160,7 @@
>
</q-input>
</div>
<div class="col-md-4 col-sm-12">
<div class="col-12 col-md-4">
<q-input
filled
v-model="formData.keycloak_client_custom_org"
@ -167,7 +168,7 @@
>
</q-input>
</div>
<div class="col-md-8 col-sm-12">
<div class="col-12 col-md-8">
<q-input
filled
v-model="formData.keycloak_client_custom_icon"
@ -213,7 +214,7 @@
<div class="col-12 col-md-12">
<p v-text="$t('ip_blocker')"></p>
<div class="row q-col-gutter-md">
<div class="col-6">
<div class="col-12 col-md-6">
<q-input
filled
v-model="formBlockedIPs"
@ -243,7 +244,7 @@
</div>
<br />
</div>
<div class="col-6">
<div class="col-12 col-md-6">
<q-input
filled
v-model="formAllowedIPs"
@ -279,7 +280,7 @@
<div class="col-12 col-md-12">
<p v-text="$t('rate_limiter')"></p>
<div class="row q-col-gutter-md">
<div class="col-6">
<div class="col-12 col-md-6">
<q-input
filled
type="number"
@ -287,7 +288,7 @@
:label="$t('number_of_requests')"
></q-input>
</div>
<div class="col-6">
<div class="col-12 col-md-6">
<q-select
filled
:options="[$t('second'),$t('minute'),$t('hour')]"

55
lnbits/core/templates/admin/index.html
View file

@ -76,7 +76,30 @@ import window_vars with context %} {% block scripts %} {{ window_vars(user) }}
<div class="row q-col-gutter-md justify-center">
<div class="col q-gutter-y-md">
<q-card>
<q-splitter>
<!-- Mobile: Horizontal tabs at top -->
<q-tabs
v-if="$q.screen.lt.md"
@update:model-value="showExchangeProvidersTab"
v-model="tab"
dense
active-color="primary"
inline-label
class="text-primary"
>
<q-tab name="funding" icon="account_balance_wallet" label="Fund" />
<q-tab name="security" icon="security" label="Sec" />
<q-tab name="server" icon="settings" label="Srv" />
<q-tab name="exchange_providers" icon="swap_horiz" label="Exch" />
<q-tab name="fiat_providers" icon="account_balance" label="Fiat" />
<q-tab name="extensions" icon="extension" label="Ext" />
<q-tab name="notifications" icon="notifications" label="Not" />
<q-tab name="audit" icon="receipt_long" label="Aud" />
<q-tab name="site_customisation" icon="language" label="Site" />
<q-tab name="library" icon="image" label="Lib" />
</q-tabs>
<!-- Desktop: Vertical sidebar with splitter -->
<q-splitter v-if="$q.screen.gt.sm">
<template v-slot:before>
<q-tabs
@update:model-value="showExchangeProvidersTab"
@ -182,7 +205,6 @@ import window_vars with context %} {% block scripts %} {{ window_vars(user) }}
<q-tab-panels
v-model="tab"
animated
swipeable
vertical
scroll
transition-prev="jump-up"
@ -202,6 +224,35 @@ import window_vars with context %} {% block scripts %} {{ window_vars(user) }}
</q-form>
</template>
</q-splitter>
<!-- Mobile: Full-width content without sidebar -->
<q-form
v-if="$q.screen.lt.md"
name="settings_form"
id="settings_form_mobile"
>
<q-scroll-area style="height: 70vh">
<q-tab-panels
v-model="tab"
animated
vertical
scroll
transition-prev="jump-up"
transition-next="jump-up"
style="overflow-x: hidden; padding: 8px"
>
{% include "admin/_tab_funding.html" %} {% include
"admin/_tab_users.html" %} {% include "admin/_tab_server.html" %} {%
include "admin/_tab_exchange_providers.html" %}{% include
"admin/_tab_fiat_providers.html" %} {% include
"admin/_tab_extensions.html" %} {% include
"admin/_tab_notifications.html" %} {% include
"admin/_tab_security.html" %} {% include "admin/_tab_theme.html"
%}{% include "admin/_tab_audit.html"%}{% include
"admin/_tab_library.html"%}
</q-tab-panels>
</q-scroll-area>
</q-form>
</q-card>
</div>
</div>

51
lnbits/templates/base.html
View file

@ -23,6 +23,57 @@
.wallet-list-card:first-child {
margin-left: 1px;
}
/* Force chip content to wrap on mobile */
@media (max-width: 1023px) {
.q-chip {
height: auto !important;
min-height: 2rem !important;
}
.q-chip .q-chip__content {
white-space: normal !important;
word-break: break-all !important;
min-height: 1.5rem !important;
height: auto !important;
}
.q-chip .ellipsis {
overflow: visible !important;
text-overflow: clip !important;
white-space: normal !important;
word-break: break-all !important;
}
/* Fix q-input hint text wrapping and container growth */
.q-field {
overflow: visible !important;
height: auto !important;
min-height: 56px !important;
}
.q-field__inner {
overflow: visible !important;
height: auto !important;
}
.q-field__control {
overflow: visible !important;
height: auto !important;
}
.q-field__bottom {
position: relative !important;
transform: none !important;
max-height: none !important;
overflow: visible !important;
height: auto !important;
margin-bottom: 8px !important;
}
.q-field__messages {
min-height: auto !important;
}
.q-field__messages,
.q-field__messages > div {
white-space: normal !important;
word-wrap: break-word !important;
overflow-wrap: break-word !important;
word-break: break-word !important;
}
}
</style>
<title>{% block title %}{{ SITE_TITLE }}{% endblock %}</title>
<meta charset="utf-8" />