DebaucheryLibrarian/traxxx-web
1
1
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Improved mobile scaling of preferences and account settings.

Browse Source
This commit is contained in:
DebaucheryLibrarian
2026-07-22 17:07:23 +02:00
parent 60ad068939
commit a81343c519
2 changed files with 32 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
components/user/account.vue
View File

@@ -79,7 +79,7 @@ async function verifyEmail() {
class="profile-section" class="profile-section"
@submit.prevent="updateAccount" @submit.prevent="updateAccount"
> >
<label class="setting"> <div class="setting">
<span class="setting-label"> <span class="setting-label">
<strong class="setting-title">E-mail address</strong> <strong class="setting-title">E-mail address</strong>
<span class="setting-description">Primarily used for alert notifications and password recovery</span> <span class="setting-description">Primarily used for alert notifications and password recovery</span>
@@ -132,9 +132,9 @@ async function verifyEmail() {
class="input" class="input"
> >
</span> </span>
</label> </div>
<label class="setting"> <div class="setting">
<span class="setting-label"> <span class="setting-label">
<strong class="setting-title">New password</strong> <strong class="setting-title">New password</strong>
<span class="setting-description">Change the password you use for signing in</span> <span class="setting-description">Change the password you use for signing in</span>
@@ -148,9 +148,9 @@ async function verifyEmail() {
@input="(password) => credentials.password = password" @input="(password) => credentials.password = password"
/> />
</span> </span>
</label> </div>
<label class="setting"> <div class="setting">
<span class="setting-label"> <span class="setting-label">
<strong class="setting-title">Current password</strong> <strong class="setting-title">Current password</strong>
<span class="setting-description">Enter your current password to save your changes</span> <span class="setting-description">Enter your current password to save your changes</span>
@@ -163,7 +163,7 @@ async function verifyEmail() {
@input="(password) => currentPassword = password" @input="(password) => currentPassword = password"
/> />
</span> </span>
</label> </div>
<div class="settings-actions"> <div class="settings-actions">
<Ellipsis v-if="saving" /> <Ellipsis v-if="saving" />
@@ -277,4 +277,15 @@ async function verifyEmail() {
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
@media(--small-20) {
.setting {
flex-direction: column;
align-items: flex-start;
}
.setting-label {
margin-bottom: .75rem;
}
}
</style> </style>

19
components/user/preferences.vue
View File

@@ -25,7 +25,7 @@ async function updateSettings() {
class="profile-section" class="profile-section"
@submit.prevent @submit.prevent
> >
<div class="setting"> <div class="setting noflip">
<span class="setting-label"> <span class="setting-label">
<strong class="setting-title">Enable alert notifications</strong> <strong class="setting-title">Enable alert notifications</strong>
<span class="setting-description">Your alerts can trigger notifications in traxxx</span> <span class="setting-description">Your alerts can trigger notifications in traxxx</span>
@@ -39,7 +39,7 @@ async function updateSettings() {
</span> </span>
</div> </div>
<div class="setting"> <div class="setting noflip">
<span class="setting-label"> <span class="setting-label">
<strong class="setting-title">Enable alert e-mails</strong> <strong class="setting-title">Enable alert e-mails</strong>
<span class="setting-description">Your alerts can trigger e-mails</span> <span class="setting-description">Your alerts can trigger e-mails</span>
@@ -53,7 +53,7 @@ async function updateSettings() {
</span> </span>
</div> </div>
<label class="setting"> <div class="setting">
<span class="setting-label"> <span class="setting-label">
<strong class="setting-title">Alert e-mail frequency</strong> <strong class="setting-title">Alert e-mail frequency</strong>
<span class="setting-description">Alert e-mails are sent immediately, or accumulated and sent periodically</span> <span class="setting-description">Alert e-mails are sent immediately, or accumulated and sent periodically</span>
@@ -71,7 +71,7 @@ async function updateSettings() {
<option value="monthly">Monthly</option> <option value="monthly">Monthly</option>
</select> </select>
</span> </span>
</label> </div>
</form> </form>
</template> </template>
@@ -112,4 +112,15 @@ async function updateSettings() {
color: var(--glass); color: var(--glass);
font-size: .9rem; font-size: .9rem;
} }
@media(--small-20) {
.setting:not(.noflip) {
flex-direction: column;
align-items: flex-start;
}
.setting-label {
margin-bottom: .75rem;
}
}
</style> </style>