Improve mobile UX: condense torrent table and standardize page layouts

- TorrentTable: Condense to 2 columns on mobile (title+meta, actions)
  - Title shown on first line, size/seeders on second line
  - Hide separate seed/size columns on mobile (desktop only)
  - Improved spacing and readability for mobile screens

- Standardize page layouts to match ActivityPage:
  - TorrentsPage: Update header style, padding, and container structure
  - GenPasswordPage: Align header and content layout with other pages
  - Consistent 3rem desktop padding, 0.75rem mobile padding
  - Unified h1 styling: 2rem desktop, 1.5rem mobile, font-weight 300

- Minor improvements:
  - Remove console.log statements from usePlexApi
  - Fix duration unit handling in useTautulliStats
  - Adjust AdminStats label font sizing
  - Reduce Graph.vue point radius for cleaner charts
This commit is contained in:
2026-02-27 18:19:38 +01:00
parent 0c4c30d1a0
commit 64a833c9f8
7 changed files with 163 additions and 44 deletions

View File

@@ -1,11 +1,11 @@
<template>
<section class="admin">
<h1 class="admin__title">Password gen</h1>
<div class="password">
<h1 class="password__title">Password Generator</h1>
<div class="form">
<div class="password__content">
<password-generator />
</div>
</section>
</div>
</template>
<script setup lang="ts">
@@ -17,9 +17,34 @@
</script>
<style lang="scss" scoped>
.form {
display: flex;
flex-direction: column;
gap: 0.65rem;
@import "scss/variables";
@import "scss/media-queries";
.password {
padding: 3rem;
max-width: 100%;
@include mobile-only {
padding: 0.75rem;
}
&__title {
margin: 0 0 2rem 0;
font-size: 2rem;
font-weight: 300;
color: $text-color;
line-height: 1;
@include mobile-only {
font-size: 1.5rem;
margin: 0 0 1rem 0;
}
}
&__content {
display: flex;
flex-direction: column;
gap: 0.65rem;
}
}
</style>

View File

@@ -1,28 +1,25 @@
<template>
<div>
<page-header title="Torrent search page" />
<div class="torrents">
<h1 class="torrents__title">Torrent Search</h1>
<section>
<div class="search-input-group">
<seasoned-input
v-model="query"
type="torrents"
placeholder="Search torrents"
@keydown.enter="setTorrentQuery"
/>
<seasoned-button @click="setTorrentQuery">Search</seasoned-button>
</div>
<div class="search-input-group">
<seasoned-input
v-model="query"
type="torrents"
placeholder="Search torrents"
@keydown.enter="setTorrentQuery"
/>
<seasoned-button @click="setTorrentQuery">Search</seasoned-button>
</div>
<active-torrents />
<active-torrents />
<TorrentList :query="torrentQuery" />
</section>
<TorrentList :query="torrentQuery" />
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import PageHeader from "@/components/PageHeader.vue";
import SeasonedInput from "@/components/ui/SeasonedInput.vue";
import SeasonedButton from "@/components/ui/SeasonedButton.vue";
import TorrentList from "@/components/torrent/TorrentSearchResults.vue";
@@ -42,16 +39,44 @@
</script>
<style lang="scss" scoped>
section {
padding: 1.25rem;
@import "scss/variables";
@import "scss/media-queries";
.torrents {
padding: 3rem;
max-width: 100%;
@include mobile-only {
padding: 0.75rem;
}
&__title {
margin: 0 0 2rem 0;
font-size: 2rem;
font-weight: 300;
color: $text-color;
line-height: 1;
@include mobile-only {
font-size: 1.5rem;
margin: 0 0 1rem 0;
}
}
.search-input-group {
display: flex;
gap: 0.5rem;
margin-bottom: 2rem;
@include mobile-only {
flex-direction: column;
gap: 0.75rem;
}
button {
margin-left: 0.5rem;
@include mobile-only {
width: 100%;
}
}
}
}