mirror of
https://github.com/KevinMidboe/seasoned.git
synced 2026-03-11 11:55:38 +00:00
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:
@@ -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>
|
||||
|
||||
@@ -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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user