added some bootstrap styling

4 years ago · 45c5b10d93
parent 5f076fccc6
commit 45c5b10d93
2 changed files with 21 additions and 16 deletions
--- 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>
--- 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)])