⚡ style outputs

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
 
 
 

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

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

views/partials/stats.pug

@@ -0,0 +1,3 @@
+div
+  h2.text-l.text-gray-900.leading-tight.font-medium Statistics
+    p TODO

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