formatting

Author: Maneren

app/src/components/breadcrumbs.rs

@@ -25,14 +25,14 @@ pub fn Breadcrumbs(path: Signal<PathBuf>) -> impl IntoView {
 
     let home_icon = view! {
       <a href="/index">
-        <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24">
+        <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24">
           <path d="M12,3L20,9V21H15V14H9V21H4V9L12,3Z" />
         </svg>
       </a>
     };
 
     view! {
-      <div class="text-lg breadcrumbs max-w-full">
+      <div class="max-w-full text-lg breadcrumbs">
         <ul class="h-8">
           <li>{home_icon}</li>
           {breadcrumbs}

app/src/components/file_entries.rs

@@ -33,11 +33,11 @@ pub fn EntryComponent(data: Entry) -> impl IntoView {
     } = data;
 
     let inner = view! {
-      <div class="entry w-full grid grid-cols-(--entry-cols-mobile) md:grid-cols-(--entry-cols) gap-2">
+      <div class="grid gap-2 w-full entry grid-cols-(--entry-cols-mobile) md:grid-cols-(--entry-cols)">
         <Icon type_=type_ name=name.clone() />
-        <span class="flex items-center overflow-x-hidden">{name}</span>
-        <span class="flex items-center justify-end">{size}</span>
-        <span class="hidden md:flex items-center">{relative_time}</span>
+        <span class="flex overflow-x-hidden items-center">{name}</span>
+        <span class="flex justify-end items-center">{size}</span>
+        <span class="hidden items-center md:flex">{relative_time}</span>
       </div>
     };
 

app/src/components/folder_download.rs

@@ -19,10 +19,10 @@ pub fn FolderDownloads(path: Signal<PathBuf>) -> impl IntoView {
 
     view! {
       <div class="dropdown dropdown-hover grow">
-        <label tabindex="0" class="btn btn-primary w-full">
+        <label tabindex="0" class="w-full btn btn-primary">
           Download Folder
         </label>
-        <ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box">
+        <ul tabindex="0" class="p-2 shadow dropdown-content menu bg-base-100 rounded-box">
           {method_list}
         </ul>
       </div>

app/src/components/new_folder.rs

@@ -17,23 +17,27 @@ pub fn NewFolderButton(path: Signal<PathBuf>, action: ServerAction<NewFolder>) -
 
     view! {
       <div class="grow">
-        <button class="btn btn-primary w-full" onclick="new_folder_modal.showModal()">
+        <button class="w-full btn btn-primary" onclick="new_folder_modal.showModal()">
           Create New Folder
         </button>
         <dialog id="new_folder_modal" class="modal">
           <ActionForm action=action>
             <div class="modal-box">
-              <h3 class="font-bold text-lg">New Folder</h3>
+              <h3 class="text-lg font-bold">New Folder</h3>
               <input
-                class="input py-2 my-2"
+                class="py-2 my-2 input"
                 type="text"
                 value="New Folder"
                 on:focus=on_new_folder_focus
                 node_ref=new_folder_input
                 name="name"
                 autofocus
               />
-              <input type="hidden" name="path" value=move || os_to_string(path.read().as_os_str()) />
+              <input
+                type="hidden"
+                name="path"
+                value=move || os_to_string(path.read().as_os_str())
+              />
               <div class="modal-action">
                 <button class="btn" type="reset" onclick="new_folder_modal.close()">
                   Cancel

app/src/components/upload.rs

@@ -218,33 +218,35 @@ pub fn FileUpload(path: Signal<PathBuf>, #[prop(into)] on_upload: Callback<()>)
         });
     };
 
-    let ProgressBar = |Progress {
-                           size,
-                           start_time,
-                           uploaded,
-                       }| {
+    fn ProgressBar(
+        Progress {
+            size,
+            start_time,
+            uploaded,
+        }: Progress,
+    ) -> impl IntoView {
         let percent = move || *uploaded.read() * 100 / size;
         let speed = move || {
             format_bytes(((uploaded() * 1000) as f64 / start_time.elapsed().as_millis_f64()) as u64)
         };
         view! {
-          <div class="m-2 flex flex-row items-baseline justify-between gap-5 w-full">
+          <div class="flex flex-row gap-5 justify-between items-baseline m-2 w-full">
             <span>Uploading {move || format!("{: >3}", percent())}%</span>
-            <div class="bg-neutral rounded-full grow h-3">
+            <div class="h-3 rounded-full bg-neutral grow">
               <div
-                class="bg-info h-full transition-all ease-linear duration-50 rounded-full"
+                class="h-full rounded-full transition-all ease-linear bg-info duration-50"
                 style:width=move || format!("{: >3}%", percent())
               />
             </div>
             <span class="w-28 text-right">{speed}/s</span>
           </div>
         }
-    };
+    }
 
     view! {
-      <div class="flex grow flex-col gap-2">
+      <div class="flex flex-col gap-2 grow">
         <form
-          class="flex flex-wrap grow-2 gap-2"
+          class="flex flex-wrap gap-2 grow-2"
           method="POST"
           enctype="multipart/form-data"
           node_ref=form_ref
@@ -257,14 +259,7 @@ pub fn FileUpload(path: Signal<PathBuf>, #[prop(into)] on_upload: Callback<()>)
           />
           // placeholder that is filled on submission
           <input type="hidden" name="id" value="" />
-          <input
-            type="file"
-            name="uploads"
-            class="file-input grow-3"
-            multiple
-            node_ref=file_ref
-          />
-          // ref_=file_ref
+          <input type="file" name="uploads" class="file-input grow-3" multiple node_ref=file_ref />
           <button type="submit" class="btn btn-primary grow-1">
             Upload
           </button>

app/src/lib.rs

@@ -74,7 +74,7 @@ pub fn FilesPage() -> impl IntoView {
 
         <Breadcrumbs path=path_signal />
 
-        <div class="grid grid-cols-(--entry-cols-mobile) md:grid-cols-(--entry-cols) gap-2 border-b border-base-content mb-1">
+        <div class="grid gap-2 mb-1 border-b grid-cols-(--entry-cols-mobile) border-base-content md:grid-cols-(--entry-cols)">
           <span></span>
           <span>Name</span>
           <span>Size</span>