mirror of
https://github.com/thelounge/thelounge.git
synced 2026-07-31 15:15:52 -04:00
a19088ad16
| | | |--------|--------| | <img width="2016" height="1476" alt="image" src="https://github.com/user-attachments/assets/381036c4-f9e2-4412-b3c7-2ac3c1a1163f" /> | <img width="1890" height="1458" alt="image" src="https://github.com/user-attachments/assets/f7d55d77-52f8-4493-9ad5-37ca00cb051f" /> | | <img width="1760" height="940" alt="image" src="https://github.com/user-attachments/assets/dacb9a5e-cf96-4f9c-bd4a-0633b2b55120" /> | <img width="1966" height="1424" alt="image" src="https://github.com/user-attachments/assets/110d409e-2bba-4fec-90e9-48ef2cdd5c98" /> | ## Summary Each settings page becomes a stack of cards with a consistent title, intro line and toggle rows, instead of loose headings and bare checkboxes. The shared pieces are `SettingCard.vue` and `SettingToggle.vue`, and the styling moves out of `style.css` into `client/css/settings.css`. Appearance is now the landing page for `/settings` (General moves to `/settings/general`, with a redirect so old `/settings/appearance` links keep working). Below the width where the fixed sidebar would collide with the centered container, the tabs collapse into a dropdown instead of stacking above the content. Setting names and bindings are unchanged, so nothing about how preferences are stored or synced moves. ## Test Plan - Ran the client and stepped through Appearance and Notifications: toggling a switch still writes through to the settings store, `/settings/appearance` redirects to Appearance, and the mobile dropdown opens aligned to the card. - Not verified in a browser: Account and General, which need a non-public instance.
19 lines
363 B
Vue
19 lines
363 B
Vue
<template>
|
|
<div class="setting-card">
|
|
<h2 :id="titleId" class="setting-card-title">{{ title }}</h2>
|
|
<slot />
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import {defineComponent} from "vue";
|
|
|
|
export default defineComponent({
|
|
name: "SettingCard",
|
|
props: {
|
|
title: {type: String, required: true},
|
|
titleId: {type: String, default: undefined},
|
|
},
|
|
});
|
|
</script>
|