style: beautify homepage

msyfls123 · Apr 25, 2024 · 41e2874 · 41e2874
1 parent e4cda2b
commit 41e2874
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 8 deletions.
diff --git a/client/src/component/bucket.rs b/client/src/component/bucket.rs
@@ -101,13 +101,13 @@ pub fn bucket(props: &BucketProps) -> Html {
                     html! { <span class="item-count">{" ("} {l.len()} {")"}</span> }
                 } else { html! {} }}
             </h2>
-            <div>
+            <div class="bucket">
             {
                 if *is_loading {
                     html! { "loading" }
                 } else if list.is_some() {
                     html! {<>
-                        <table class="bucket">
+                        <table>
                             <thead>
                                 <tr>
                                     <th class="file">{"File"}</th>

diff --git a/client/src/component/uploader.rs b/client/src/component/uploader.rs
@@ -161,7 +161,7 @@ pub fn uploader(props: &UploaderProps) -> Html {
                 }
             } else {
                 html! {
-                    <div class="upload-input">
+                    <div class="upload-input fa-solid fa-file">
                         <input type="file" onchange={move |e: Event| {
                             let target = e.target().unwrap();
                             let input_el: HtmlInputElement = target.dyn_into().unwrap();

diff --git a/client/src/css/index.styl b/client/src/css/index.styl
@@ -26,7 +26,13 @@ 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
+  display: table
+  margin: 20px 0
+  padding: 15px
+  box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.24)
+  border-radius: 6px
+  table
+    border-collapse: collapse
   th
     padding-bottom: 8px
   td
@@ -46,7 +52,7 @@ body
 .item-count
   font-variant: diagonal-fractions
 .bucket-paginator
-  margin: 20px 0
+  margin-top: 20px
   height: 32px
   font-size: medium
   min-width: 50px
@@ -62,9 +68,35 @@ body
   margin: 10px 0
   padding: 10px
   max-width: 250px
-  border-width: thin
-  border-style: dashed
-  border-color: var(--grey-2_5, rgba(20,30,41,0.12))
+  border-radius: 6px
+  border: none
+  box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.24)
+  .upload-input
+    position: relative
+    width: 100%
+    height: 25px
+    padding: 0
+    text-indent: 0.5em
+    line-height: 25px
+    text-shadow: 1px 1px 1px #c0c0c0
+    &::before
+    &::after
+      font-size: large
+      text-indent: 2rem
+    &::after
+      content: 'Click to upload'
+      font-size: small
+      margin-left: 10px
+      letter-spacing: 1.5px
+    input
+      position: absolute
+      display: block
+      top: 0
+      left: 0
+      right: 0
+      bottom: 0
+      opacity: 0
+      cursor: pointer
   .progress
     --circle-radius: 50px
     --circle-border: 10px