From 804d714eea90ba06474137c81d8348d3f844cbf8 Mon Sep 17 00:00:00 2001
From: Baptiste Lemoine <contact@cipherbliss.com>
Date: Sun, 18 Oct 2020 17:57:32 +0200
Subject: [PATCH] :zap: style outputs

---
 views/index.pug             | 21 ++++++++++++++-------
 views/partials/config.pug   | 22 ++++++++++++++--------
 views/partials/contacts.pug | 26 +++++++++++++-------------
 views/partials/stats.pug    |  3 +++
 views/partials/toots.pug    |  6 ++----
 5 files changed, 46 insertions(+), 32 deletions(-)
 create mode 100644 views/partials/stats.pug

diff --git a/views/index.pug b/views/index.pug
index f170410..7511201 100644
--- a/views/index.pug
+++ b/views/index.pug
@@ -6,15 +6,22 @@ html(lang="en")
     link(rel='stylesheet', href='stylesheets/main.css', type='text/css')
     link(rel='stylesheet', href='stylesheets/tailwind.css', type='text/css')
   body
-    h1=pageTitle
+    h1.text-xl=pageTitle
       i.fa.fa-world
-    h2 Statistics
 
-
-    include partials/contacts.pug
-    include partials/hashtags.pug
-    include partials/config.pug
-    include partials/toots.pug
+    section.bg-white.rounded-lg.shadow-xl.text-gray-900.grid-cols-2
+      div.p-6
+        include partials/stats.pug
+      div.p-6
+        include partials/contacts.pug
+      div.p-6
+        include partials/hashtags.pug
+      div.p-6
+        include partials/config.pug
+      div.p-6
+        include partials/likes.pug
+      div.p-6
+        include partials/toots.pug
 
 
 
diff --git a/views/partials/config.pug b/views/partials/config.pug
index b6871c2..a6781a4 100644
--- a/views/partials/config.pug
+++ b/views/partials/config.pug
@@ -1,10 +1,16 @@
-h2 Configuration of this page
-div.config
-  h1 Configuration
+div.config.p-6.card.bg-blue-100
+  h1.text-xl.text-gray-500
+    i.fa.fa-gears
+    span Configuration
   p Showing #{outbox.length} of Messages #{outboxTotalLength} in your outbox.First #{max_toots} toots, filtered by a minimal length of #{min_length} characters of content.
-  p filter bigger toots: #{filterBiggerTottsBeforeSlicing}
-  p write statistics in output folder #{writeStatsJson}
-  p showing only toots with medias attached to them #{filterOnlyHavingMedias}
-  p show most recent toot first #{showMostRecentTootsOnTop}
+  i.fa.fa-slice
+  p filter bigger toots before slicing: #{filterBiggerTottsBeforeSlicing? "yes":"no"}
+  p write statistics in output folder : #{writeStatsJson? "yes":"no"}
+  if(filterOnlyHavingMedias)
+    i.fa.fa-img
+    p.text-orange-500 showing only toots with medias attached to them
+  p show most recent toot first: #{showMostRecentTootsOnTop? "yes":"no"}
   if(!displayMedias)
-    p.no-media Medias are not displayed
+    p.no-media
+      i.fa.fa-img
+      span.text-orange-500 Medias are not displayed
diff --git a/views/partials/contacts.pug b/views/partials/contacts.pug
index d917f00..1b262ee 100644
--- a/views/partials/contacts.pug
+++ b/views/partials/contacts.pug
@@ -1,20 +1,20 @@
 fieldset.stats.stats-recievers
       h3 You sent messages to these #{outboxStatistics.recievers.length} people
-      table
+      table.table-auto.table-
         thead
-          tr
-            th= "search"
-            th= "cover"
-            th= "avatar"
-            th= "name"
-            th= "times"
-            th= "toots lengh sum"
+          tr.bg-gray-100
+            th.border.p-4= "search"
+            th.border.p-4= "cover"
+            th.border.p-4= "avatar"
+            th.border.p-4= "name"
+            th.border.p-4= "times"
+            th.border.p-4= "toots lengh sum"
         tbody
         each someone in outboxStatistics.recievers
-          tr
-            td.search
-              a(href= 'https://duckduckgo.com/?q='+someone.user.username)
-                ='search'
+          tr.border
+            td.search.p-4.bg-blue-100
+              a.button.is-block(href= 'https://duckduckgo.com/?q='+someone.user.username)
+                i.fa.fa-search
             td.cover
             if(someone.infos && someone.infos.image)
               a(href=someone.infos.image.url)
@@ -24,6 +24,6 @@ fieldset.stats.stats-recievers
               a(href=someone.infos.icon.url)
                 img(src=someone.infos.icon.url)
             td.name
-              a(href=someone.name)=someone.user.username
+              a.font-medium(href=someone.name)=someone.user.username
             td.counter=someone.counter
             td.counter=someone.counterContentLength
diff --git a/views/partials/stats.pug b/views/partials/stats.pug
new file mode 100644
index 0000000..66b9623
--- /dev/null
+++ b/views/partials/stats.pug
@@ -0,0 +1,3 @@
+div
+  h2.text-l.text-gray-900.leading-tight.font-medium Statistics
+    p TODO
diff --git a/views/partials/toots.pug b/views/partials/toots.pug
index 6d5e296..f951728 100644
--- a/views/partials/toots.pug
+++ b/views/partials/toots.pug
@@ -11,16 +11,14 @@ div.container
 
         div.status.status-public
           p.toot_counter= toot_counter-=1
-          a(href=oredredItem['object'].url)="see"
+          a(href=oredredItem['object'].url)
             i.fa.fa-paperplane-o
             img.header(src='/avatar.gif')
           div.date-published=oredredItem['object'].published
-          blockquote.published(unescaped!=oredredItem['object'].content)
-          br
           blockquote.published(!=oredredItem['object'].content)
           if oredredItem['object'].attachment && oredredItem['object'].attachment.length
             if(!displayMedias)
-              sub.no-media Medias are not displayed
+              sub.font-medium.no-media Medias are not displayed
             if(displayMedias)
               each media in oredredItem['object'].attachment
                 include medias.pug