From 113c2b243340a885c721691a14e703473defb624 Mon Sep 17 00:00:00 2001
From: nekobit <nekobit@noemail.net>
Date: Tue, 24 May 2022 02:33:22 +0000
Subject: [PATCH] Switch back to flexbox for Status info

While it breaks compatibility, flexbox allows for more control. This commit also tweaks up the colors a bit

FossilOrigin-Name: 62486c016f58b8c68703e8f1b8a79340d58cbaf3959682a95a1bf24e790caf83
---
 dist/treebird20.css | 25 +++++++++------
 src/string.c        |  8 +++++
 src/string.h        | 12 +++++++
 static/status.html  | 78 +++++++++++++++++++++------------------------
 4 files changed, 72 insertions(+), 51 deletions(-)

diff --git a/dist/treebird20.css b/dist/treebird20.css
index b0e0d87..72f9caa 100644
--- a/dist/treebird20.css
+++ b/dist/treebird20.css
@@ -567,7 +567,7 @@ svg.in-reply-to-icon
 .notification-regular,
 .scrobble
 {
-    padding: 10px 4px 0 10px;
+    padding: 10px 10px 0 10px;
     border-bottom: 1px dashed #cacaca;
     width: 100%;
     border-spacing: 0px;
@@ -648,26 +648,33 @@ svg.in-reply-to-icon
     text-decoration: none;
     font-size: 14px;
     vertical-align: middle;
-    padding-left: 4px;
+    padding: 0 6px;
+    color: #303030;
 }
 
 .status .poster-stats
 {
-    /* To maintain compatibility while keeping it a flexbox, we have to 
-     * hardcode the width, sorry! Tables are just weird and I hate CSS */
+    display: flex;
+    align-items: center;
     max-width: 480px;
 }
 
+.poster-stats .alignend
+{
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+}
+
 .status .username,
 .notification-regular .username
 {
-    display: inline-block;
+    overflow: hidden;
     font-weight: bold;
     text-overflow: ellipsis;
-    overflow: hidden;
-    max-width: 310px;
     white-space: nowrap;
-    vertical-align: middle;
+    min-width: 0;
 }
 
 .status .status-content
@@ -689,7 +696,7 @@ svg.in-reply-to-icon
     display: inline;
     float: right;
     font-size: 12px;
-    margin: 3px 0 0 3px;
+    margin-left: 5px;
 }
 
 .status-interact
diff --git a/src/string.c b/src/string.c
index fc0dd39..17f5066 100644
--- a/src/string.c
+++ b/src/string.c
@@ -21,6 +21,14 @@
 #include <string.h>
 #include "string.h"
 
+char* reltime_to_str(time_t stime)
+{
+    char str[16];
+    // Get current time
+    time_t curr_time = time(NULL);
+
+}
+
 int streql(char* cmp1, char* cmp2)
 {
     while (*cmp1 || *cmp2)
diff --git a/src/string.h b/src/string.h
index 9baf287..ff8b4c0 100644
--- a/src/string.h
+++ b/src/string.h
@@ -19,9 +19,21 @@
 #ifndef TREE_STRING_H
 #define TREE_STRING_H
 #include <stddef.h>
+#include <time.h>
 
 #define STRREPL_ALL 1
 
+/**
+ * Converts unix time into relative string format
+ *
+ * Longer variants for months and years to emphasize age
+ *
+ * Example: 5s, 5m, 5h, 5d, 5mon, 5yr
+ * @param time Unix timestamp
+ * @return char[16] containing time string
+ */
+char* reltime_to_str(time_t time);
+
 int streql(char* cmp1, char* cmp2);
 int strneql(char* cmp1, char* cmp2, size_t cmp1_n);
 char* strnstr(const char* haystack, const char* needle, size_t s);
diff --git a/static/status.html b/static/status.html
index bd18e68..396e243 100644
--- a/static/status.html
+++ b/static/status.html
@@ -5,49 +5,43 @@
       <img src="%s">
     </td>
     <td class="status-info">
-      <table class="ui-table">
-        <tr>
-          <td>
-            <div class="poster-stats">
-              <span class="username">%s</span>
-              <a class="instance-info" href="%s/@%s">%s</a>
-              <span class="alignend status-visibility menu-container">
-                %s
-                <div class="menu">
-                  <ul>
-                    <li>
-                      <form action="%s/status/%s/interact" method="post">
-                        <input type="hidden" name="itype" value="%smute">
-                        <input type="submit" class="btn-menu" value="%s">
-                      </form>
-                    </li>
-                    <li>
-                      <form action="%s/status/%s/interact" method="post">
-                        <input type="hidden" name="itype" value="%spin">
-                        <input type="submit" class="btn-menu" value="%s">
-                      </form>
-                    </li>
-                    <li>
-                      <form action="%s/status/%s/interact" method="post">
-                        <input type="hidden" name="itype" value="%sbookmark">
-                        <input type="submit" class="btn-menu" value="%s">
-                      </form>
-                    </li>
-                  </ul>
-                </div>
-              </span>
-            </div>
+      <div class="poster-stats">
+        <span class="username">%s</span>
+        <a class="instance-info" href="%s/@%s">%s</a>
+        <span class="alignend status-visibility menu-container">
+          <div class="menu">
             %s
-            <span class="status-content">
-              %s
-            </span>
-            %s
-            %s
-            %s
-            %s
-          </td>
-        </tr>
-      </table>
+            <ul>
+              <li>
+                <form action="%s/status/%s/interact" method="post">
+                  <input type="hidden" name="itype" value="%smute">
+                  <input type="submit" class="btn-menu" value="%s">
+                </form>
+              </li>
+              <li>
+                <form action="%s/status/%s/interact" method="post">
+                  <input type="hidden" name="itype" value="%spin">
+                  <input type="submit" class="btn-menu" value="%s">
+                </form>
+              </li>
+              <li>
+                <form action="%s/status/%s/interact" method="post">
+                  <input type="hidden" name="itype" value="%sbookmark">
+                  <input type="submit" class="btn-menu" value="%s">
+                </form>
+              </li>
+            </ul>
+          </div>
+        </span>
+      </div>
+      %s
+      <span class="status-content">
+        %s
+      </span>
+      %s
+      %s
+      %s
+      %s
     </td>
   </tr>
 </table>