frontend stuff

Cargo.lock

@@ -661,6 +661,15 @@ dependencies = [
  "windows-link",
 ]
 
+[[package]]
+name = "chrono-humanize"
+version = "0.2.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "799627e6b4d27827a814e837b9d8a504832086081806d45b1afa34dc982b023b"
+dependencies = [
+ "chrono",
+]
+
 [[package]]
 name = "chrono-tz"
 version = "0.10.3"
@@ -3120,6 +3129,7 @@ dependencies = [
  "askama",
  "askama_web",
  "chrono",
+ "chrono-humanize",
  "futures-core",
  "hex",
  "mime_guess",

Cargo.toml

@@ -95,6 +95,7 @@ rustical_carddav = { path = "./crates/carddav/" }
 rustical_frontend = { path = "./crates/frontend/" }
 rustical_xml = { path = "./crates/xml/" }
 chrono-tz = "0.10"
+chrono-humanize = "0.2"
 rand = "0.8"
 argon2 = "0.5"
 rpassword = "7.3"

crates/frontend/Cargo.toml

@@ -23,6 +23,7 @@ mime_guess.workspace = true
 reqwest.workspace = true
 rand.workspace = true
 chrono.workspace = true
+chrono-humanize.workspace = true
 uuid.workspace = true
 url.workspace = true
 tracing.workspace = true

crates/frontend/public/assets/style.css

@@ -94,15 +94,19 @@ section {
   border-radius: 12px;
   box-shadow: 4px 2px 12px -8px black;
   border-collapse: collapse;
-  padding: 8px 24px 12px;
-  margin: 18px 12px;
+  padding: 8px 12px 12px;
+  margin: 18px 8px;
+  overflow: hidden;
+  max-width: 100%;
 }
 
 table {
   border: 2px solid black;
   border-radius: 12px;
-  box-shadow: 4px 2px 12px -5px black;
+  box-shadow: 4px 2px 12px -6px black;
   border-collapse: collapse;
+  overflow-x: scroll;
+  display: block;
 
   td,
   th {
@@ -114,16 +118,15 @@ table {
     height: 40px;
   }
 
-  tr:nth-of-type(2n+1) {
-    background: var(--background-darker);
-  }
+  /* tr:nth-of-type(2n+1) { */
+  /*   background: var(--background-darker); */
+  /* } */
 
   tr:hover {
     background: #DDD;
   }
 }
 
-
 #page-user {
   ul {
     padding-left: 0;
@@ -144,7 +147,7 @@ table {
           "restore color-chip"
           ". color-chip";
         grid-template-rows: 12px auto auto auto 12px;
-        grid-template-columns: auto 50px;
+        grid-template-columns: auto 80px;
         color: inherit;
         text-decoration: none;
         padding-left: 12px;
@@ -152,7 +155,7 @@ table {
         border: 2px solid black;
         border-radius: 12px;
         margin: 12px;
-        box-shadow: 4px 2px 12px -5px black;
+        box-shadow: 4px 2px 12px -6px black;
 
         .title {
           font-weight: bold;

crates/frontend/public/templates/pages/user.html

@@ -22,8 +22,7 @@
   </ul>
 
   <h3>App tokens</h3>
-
-  <table>
+  <table id="app-tokens">
     <tr>
       <th>Name</th>
       <th>Created at</th>
@@ -34,7 +33,8 @@
       <td>{{ app_token.name }}</td>
       <td>
         {% if let Some(created_at) = app_token.created_at %}
-          {{ created_at.to_rfc3339() }}
+          {{ chrono_humanize::HumanTime::from(created_at.to_owned()) }}
+          <!-- {{ created_at.to_rfc3339() }} -->
         {% endif %}
       </td>
       <td>
@@ -44,7 +44,7 @@
       </td>
     </tr>
     {% endfor %}
-    <tr>
+    <tr class="generate">
         <td>
           <form action="/frontend/user/{{ user.id }}/app_token" method="POST" id="form_generate_app_token">
             <label class="font_bold" for="generate_app_token_name">App name</label>