From 45c5b10d93b6e795da30dbc7e6cfdc86c7e23da7 Mon Sep 17 00:00:00 2001
From: jem <michael.jerger@meissa-gmbh.de>
Date: Wed, 8 Jul 2020 09:23:28 +0200
Subject: [PATCH] added some bootstrap styling

---
 public/index.html                 | 13 ++++++++-----
 src/main/dda/masto_embed/api.cljs | 24 +++++++++++++-----------
 2 files changed, 21 insertions(+), 16 deletions(-)
diff --git a/public/index.html b/public/index.html
index ceb7796..bd33162 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,12 +4,15 @@
     <meta charset="utf-8" />
     <title>masto-embed</title>
   </head>
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
   <body>
-    <div id="masto-embed" 
-          account_name="team" 
-          coment_in_account_id="2"
-          host_url="https://social.meissa-gmbh.de">
-      Here the timeline will appear.
+    <div class="container">
+      <div id="masto-embed" 
+        account_name="team" 
+        coment_in_account_id="2"
+        host_url="https://social.meissa-gmbh.de">
+        Here the timeline will appear.
+      </div>
     </div>
     <script src="js/main.js"></script>
   </body>
diff --git a/src/main/dda/masto_embed/api.cljs b/src/main/dda/masto_embed/api.cljs
index f1c5c85..49a27ae 100644
--- a/src/main/dda/masto_embed/api.cljs
+++ b/src/main/dda/masto_embed/api.cljs
@@ -32,22 +32,24 @@
     (let [{:keys [title description image url]} card]
       [:div {:class "card" :url url}
        (when (some? image)
-         [:img {:src image}])
-       [:h3 title]
-       [:p description]])))
+         [:img {:class "card-img-top" :src image}])
+       [:h3 {:class "card-title"} title]
+       [:p {:class "card-body"} description]])))
 
 (defn masto->html [statuses]
-  [:ul 
+  [:ul {:class "list-group"}
    (map (fn [status] 
           (let [{:keys [created_at card]} status
                 date (t/parse created_at)]
-            [:li
-             [:h2
-              [:a {:href (get-in status [:account :url])}
-               (t/unparse (t/formatters :date) date) 
-               (t/unparse (t/formatters :hour-minute-second) date)]]
-             (:content status)
-             (mastocard->html card)])) 
+            [:li {:class "list-group-item, card"}
+             [:div {:class "card-body"}
+              [:h2 {:class "card-title"}
+               [:a {:href (get-in status [:account :url])}
+                (t/unparse (t/formatters :date) date) " "
+                (t/unparse (t/formatters :hour-minute-second) date)]]
+              [:p {:class "card-text"}
+               (:content status)
+               (mastocard->html card)]]])) 
         statuses)])
   
 
