Commit 9dd538cba949a38040760ae56ef013980921a087

Authored by Georg Hopp
1 parent 884ad742

Improve upload file list

@@ -30,10 +30,28 @@ @@ -30,10 +30,28 @@
30 display: flex; 30 display: flex;
31 border: 1px solid black; 31 border: 1px solid black;
32 width: fit-content; 32 width: fit-content;
  33 + margin-bottom: .15em;
  34 +}
  35 +
  36 +.upload > ul > li:last-child {
  37 + margin-bottom: 0;
  38 +}
  39 +
  40 +.upload > ul > li > ul {
  41 + display: table;
33 } 42 }
34 43
35 .upload > ul > li > ul > li { 44 .upload > ul > li > ul > li {
36 - display: block; 45 + display: table-row;
  46 +}
  47 +
  48 +.upload > ul > li > ul > li > span {
  49 + display: table-cell;
  50 +}
  51 +
  52 +.upload > ul > li > ul > li > span:first-child:after {
  53 + content: ":";
  54 + margin-right: .15em;
37 } 55 }
38 56
39 .markdown { 57 .markdown {
1 use mogwai::prelude::*; 1 use mogwai::prelude::*;
  2 +use chrono::prelude::*;
2 3
3 use crate::component::upload::logic::UploadLogic; 4 use crate::component::upload::logic::UploadLogic;
4 5
@@ -13,17 +14,19 @@ pub(super) fn upload_preview_view( tx_canvas :broadcast::Sender<Dom> @@ -13,17 +14,19 @@ pub(super) fn upload_preview_view( tx_canvas :broadcast::Sender<Dom>
13 tx_canvas.try_broadcast(dom.clone()).unwrap(); 14 tx_canvas.try_broadcast(dom.clone()).unwrap();
14 }; 15 };
15 16
  17 + let size = format!("{}", size);
  18 + let mtime = format!("{}", Utc.timestamp_millis(mtime as i64));
  19 +
16 builder! { 20 builder! {
17 - <li style:display="flex"  
18 - on:click=tx_click.sink()> 21 + <li on:click=tx_click.sink()>
19 <canvas width="75px" 22 <canvas width="75px"
20 height="75px" 23 height="75px"
21 post:build=post_build /> 24 post:build=post_build />
22 <ul> 25 <ul>
23 - <li>{format!("filename: {}", filename)}</li>  
24 - <li>{format!("size: {}", size)}</li>  
25 - <li>{format!("mime type: {}", mime_type)}</li>  
26 - <li>{format!("modification time: {}", mtime)}</li> 26 + <li><span>"Name"</span><span>{filename}</span></li>
  27 + <li><span>"Size"</span><span>{size}</span></li>
  28 + <li><span>"Mime-Type"</span><span>{mime_type}</span></li>
  29 + <li><span>"Date"</span><span>{mtime}</span></li>
27 </ul> 30 </ul>
28 </li> 31 </li>
29 } 32 }
Please register or login to post a comment