admin/vibetorrent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 6 Wiki Activity

feat: implement mobile card view and remove transition animations

Browse Source
This commit is contained in:
spinline
2026-02-01 14:51:53 +03:00
parent 52909499b3
commit b7199cab43
4 changed files with 25 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/public/tailwind.css
View File

@@ -2101,6 +2101,18 @@
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-transform {
transition-property: transform, translate, scale, rotate;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-none {
transition-property: none;
}
.duration-0 {
--tw-duration: 0ms;
transition-duration: 0ms;
}
.duration-100 {
--tw-duration: 100ms;
transition-duration: 100ms;
@@ -2109,10 +2121,6 @@
--tw-duration: 200ms;
transition-duration: 200ms;
}
.duration-300 {
--tw-duration: 300ms;
transition-duration: 300ms;
}
.btn-sm {
@layer daisyui.l1.l2 {
--fontsize: 0.75rem;

4
frontend/src/app.rs
View File

@@ -13,7 +13,7 @@ pub fn App() -> impl IntoView {
<div class="drawer lg:drawer-open">
<input id="my-drawer" type="checkbox" class="drawer-toggle" />
<div class="drawer-content flex flex-col h-screen overflow-hidden bg-base-100 text-base-content text-sm select-none transition-colors duration-300">
<div class="drawer-content flex flex-col h-screen overflow-hidden bg-base-100 text-base-content text-sm select-none">
// Toolbar at the top
<Toolbar />
@@ -32,7 +32,7 @@ pub fn App() -> impl IntoView {
<div class="drawer-side z-40">
<label for="my-drawer" aria-label="close sidebar" class="drawer-overlay"></label>
<div class="menu p-0 min-h-full bg-base-200 text-base-content border-r border-base-300">
<div class="menu p-0 min-h-full bg-base-200 text-base-content border-r border-base-300 transition-none duration-0">
<Sidebar />
</div>
</div>

4
frontend/src/components/layout/statusbar.rs
View File

@@ -4,13 +4,13 @@ use leptos::*;
pub fn StatusBar() -> impl IntoView {
view! {
<div class="h-8 min-h-8 bg-base-200 border-t border-base-300 flex items-center px-4 text-xs gap-4 text-base-content/70">
<div class="flex items-center gap-2 cursor-pointer hover:text-primary transition-colors">
<div class="flex items-center gap-2 cursor-pointer hover:text-primary">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75l3 3m0 0l3-3m-3 3v-7.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span class="font-mono">"0 KB/s"</span>
</div>
<div class="flex items-center gap-2 cursor-pointer hover:text-primary transition-colors">
<div class="flex items-center gap-2 cursor-pointer hover:text-primary">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 11.25l-3-3m0 0l-3 3m3-3v7.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>

18
frontend/src/components/torrent/table.rs
View File

@@ -166,25 +166,25 @@ pub fn TorrentTable() -> impl IntoView {
<table class="table table-sm table-pin-rows w-full max-w-full whitespace-nowrap">
<thead>
<tr class="text-xs uppercase text-base-content/60 border-b border-base-200">
<th class="cursor-pointer hover:bg-base-300 transition-colors group select-none" on:click=move |_| handle_sort(SortColumn::Name)>
<th class="cursor-pointer hover:bg-base-300 group select-none" on:click=move |_| handle_sort(SortColumn::Name)>
<div class="flex items-center">"Name" {move || sort_arrow(SortColumn::Name)}</div>
</th>
<th class="w-24 cursor-pointer hover:bg-base-300 transition-colors group select-none" on:click=move |_| handle_sort(SortColumn::Size)>
<th class="w-24 cursor-pointer hover:bg-base-300 group select-none" on:click=move |_| handle_sort(SortColumn::Size)>
<div class="flex items-center">"Size" {move || sort_arrow(SortColumn::Size)}</div>
</th>
<th class="w-48 cursor-pointer hover:bg-base-300 transition-colors group select-none" on:click=move |_| handle_sort(SortColumn::Progress)>
<th class="w-48 cursor-pointer hover:bg-base-300 group select-none" on:click=move |_| handle_sort(SortColumn::Progress)>
<div class="flex items-center">"Progress" {move || sort_arrow(SortColumn::Progress)}</div>
</th>
<th class="w-24 cursor-pointer hover:bg-base-300 transition-colors group select-none" on:click=move |_| handle_sort(SortColumn::Status)>
<th class="w-24 cursor-pointer hover:bg-base-300 group select-none" on:click=move |_| handle_sort(SortColumn::Status)>
<div class="flex items-center">"Status" {move || sort_arrow(SortColumn::Status)}</div>
</th>
<th class="w-24 cursor-pointer hover:bg-base-300 transition-colors group select-none" on:click=move |_| handle_sort(SortColumn::DownSpeed)>
<th class="w-24 cursor-pointer hover:bg-base-300 group select-none" on:click=move |_| handle_sort(SortColumn::DownSpeed)>
<div class="flex items-center">"Down Speed" {move || sort_arrow(SortColumn::DownSpeed)}</div>
</th>
<th class="w-24 cursor-pointer hover:bg-base-300 transition-colors group select-none" on:click=move |_| handle_sort(SortColumn::UpSpeed)>
<th class="w-24 cursor-pointer hover:bg-base-300 group select-none" on:click=move |_| handle_sort(SortColumn::UpSpeed)>
<div class="flex items-center">"Up Speed" {move || sort_arrow(SortColumn::UpSpeed)}</div>
</th>
<th class="w-24 cursor-pointer hover:bg-base-300 transition-colors group select-none" on:click=move |_| handle_sort(SortColumn::ETA)>
<th class="w-24 cursor-pointer hover:bg-base-300 group select-none" on:click=move |_| handle_sort(SortColumn::ETA)>
<div class="flex items-center">"ETA" {move || sort_arrow(SortColumn::ETA)}</div>
</th>
</tr>
@@ -210,7 +210,7 @@ pub fn TorrentTable() -> impl IntoView {
view! {
<tr
class=move || {
let base = "hover border-b border-base-200 transition-colors select-none";
let base = "hover border-b border-base-200 select-none";
if is_selected_fn() {
format!("{} bg-primary/10", base)
} else {
@@ -269,7 +269,7 @@ pub fn TorrentTable() -> impl IntoView {
view! {
<div
class=move || {
let base = "card card-compact bg-base-100 shadow-sm border border-base-200 transition-all active:scale-[0.99]";
let base = "card card-compact bg-base-100 shadow-sm border border-base-200 transition-transform active:scale-[0.99]";
if is_selected_fn() {
format!("{} ring-2 ring-primary", base)
} else {