feat: update bucket style

msyfls123 · Apr 15, 2024 · 937581b · 937581b
1 parent 0f9c094
commit 937581b
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 14 deletions.
diff --git a/client/rollup.config.js b/client/rollup.config.js
@@ -26,8 +26,8 @@ export default {
         dir: '../static',
         format: 'iife',
         assetFileNames: '[name]-[hash][extname]',
-        sourcemap: hot,
+        sourcemap: !hot,
     },
     treeshake: !hot,
     plugins,
-}
+}
diff --git a/client/src/component/bucket.rs b/client/src/component/bucket.rs
@@ -1,4 +1,4 @@
-use js_sys::Promise;
+use js_sys::{JsString, Number, Promise};
 use serde_json::{Value};
 use wasm_bindgen::JsValue;
 use wasm_bindgen_futures::{spawn_local, JsFuture};
@@ -81,18 +81,18 @@ pub fn bucket(props: &BucketProps) -> Html {
     html! {
         <div>
             <h2>{"Bucket"}</h2>
-            <ul>
+            <div>
             {
                 if *is_loading {
                     html! { "loading" }
                 } else if list.is_some() {
                     html! {
-                        <table>
+                        <table class="bucket">
                             <thead>
                                 <tr>
-                                    <th>{"File"}</th>
-                                    <th>{"Size (bytes)"}</th>
-                                    <th>{"Modified Time"}</th>
+                                    <th class="file">{"File"}</th>
+                                    <th class="size">{"Size (bytes)"}</th>
+                                    <th class="time">{"Modified Time"}</th>
                                 </tr>
                             </thead>
                             <tbody>
@@ -106,13 +106,14 @@ pub fn bucket(props: &BucketProps) -> Html {
                 }
             }
 
-            </ul>
+            </div>
         </div>
     }
 }
 
 fn file_item(file: &File) -> Html {
-    let file_size = file.Size.as_str().unwrap();
+    let file_size = file.Size.as_str().unwrap().parse::<u32>().unwrap();
+    let size_display = Number::from(file_size).to_locale_string("en-US");
     let href = format!("https://cdn.ebichu.cc/{}", file.Key.as_str().unwrap());
     let file_key2 = file.Key.clone();
 
@@ -121,15 +122,15 @@ fn file_item(file: &File) -> Html {
     let time_display = format!("{}", time_parsed.format("%Y-%m-%d %H:%M:%S"));
 
     html! { <tr>
-        <td>
+        <td class="file">
             <a href={href.to_owned()} target="_blank">
                 {file_key2.as_str().unwrap()}
             </a>
         </td>
-        <td>
-            {file_size}
+        <td class="size">
+            {size_display.as_string().unwrap_or_default()}
         </td>
-        <td>
+        <td class="time">
             {time_display}
         </td>
     </tr> }

diff --git a/client/src/css/index.styl b/client/src/css/index.styl
@@ -15,3 +15,20 @@ nav
 
 body
   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, STHeiti, Droid Sans Fallback, Droid Sans, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif
+
+.bucket
+  border-collapse: collapse
+  td
+    border: 1px solid #ddd
+    padding: 5px
+  .file
+    max-width: 290px
+    word-break: break-all
+    a
+      color: #0067e5
+      text-decoration: none
+      &:hover
+        text-decoration: underline
+  .time
+  .size
+    font-variant: all-small-caps