Format

Add arg to masto-html for mode
Remove unnecessary media queries
2024-05-29 15:09:10 +02:00 · 2024-05-29 15:09:01 +02:00 · 2024-05-29 15:08:20 +02:00 · 2024-05-29 15:08:00 +02:00 · 2024-05-29 15:07:28 +02:00 · 2024-05-29 14:31:16 +02:00
6 changed files with 378 additions and 68 deletions
--- a/public/index.html
+++ b/public/index.html
@ -3,14 +3,14 @@
  <head>
    <meta charset="utf-8" />
    <title>masto-embed</title>
+    <link rel="stylesheet" href="post.css">
  </head>
-  <link rel="stylesheet" href="post-container.css">
  <body>
    <div class="container">
      <div id="masto-embed" 
        account_name="meissa"
        host_url="https://social.meissa-gmbh.de"
-        
+        replies_to="112432461907918517"
        filter_favorited=true>
        Here the timeline will appear.
      </div>
--- a/src/main/dda/masto_embed/resources/post-container.scss
+++ b/src/main/dda/masto_embed/resources/post-container.scss
@ -1,15 +1,17 @@
-.section.post-container {
-
+.section.account-mode {
  --large: 1em;
  --medium: 0.5em;
  --small: 0.25em;
  margin-bottom: var(--large);
+  
  display: grid;
-  grid: ". post ." / auto 66% auto;
+  grid: ". post ." / auto auto auto;
+
+  font-size: calc(clamp(0.8rem, 19200.75rem - 40000vw, 1.0rem) + max(0.75rem, 0.5rem + 0.5208333vw) - 0.75rem);

  .mastodon-post {
    grid-area: post;
-    justify-self: stretch;
+    justify-self: center;
    display: grid;
    grid: 
      "header"
@ -17,7 +19,7 @@
      "image"
      "link-preview"
      "footer" /
-      100%;
+      minmax(380px, 450px);
    border: 1px solid #ccc;
    padding: var(--small);

@ -67,7 +69,7 @@
        justify-self: end;
        align-self: center;
        margin-right: 1em;
-      }   
+      }  
    }

    .mastodon-post-content {
@ -84,10 +86,10 @@
  
      .mastodon-post-image {
        grid-area: image;
-        max-width: 100%; /* Adjust as needed */
+        max-width: 100%; 
        height: auto;
        align-self: center;
-        justify-self: center;        
+        justify-self: center;
        border-radius: 1em;
      }
    }
@ -101,16 +103,16 @@
        "info" / 100%;
      text-decoration: none;
      border: 1px solid #ccc;
-      border-radius: 0.25em;
+      border-radius: var(--small);
      margin: var(--medium);

      .mastodon-post-link-image{
        grid-area: image;
        justify-self: center;
-        max-width: 100%;
+        width: 100%;
        height: auto;
        object-fit: cover;
-        border-radius: 0.25em;
+        border-radius:var(--small);
        margin-bottom: var(--small);
      }

@ -184,7 +186,6 @@

      .retoot-count {
        justify-self: center;
-        align-self: center;
        grid-area: retoot-count;
      }

@ -194,33 +195,159 @@
      }
    }
  }
+}

-  @media screen and (max-width: 575px) {
-    font-size: 2.1vw;
+.section.replies-mode {
+  --large: 1em;
+  --medium: 0.5em;
+  --small: 0.25em;
+  margin-bottom: var(--large);
+  
+  display: grid;
+  grid: ". post ." / auto auto auto;
+
+  font-size: calc(clamp(0.8rem, 19200.75rem - 40000vw, 1.0rem) + max(0.75rem, 0.5rem + 0.5208333vw) - 0.75rem);
+
+  .mastodon-post {
+    grid-area: post;
+    justify-self: center;
+    align-self: start;
+    display: grid;
+    grid: 
+      "header"
+      "content"
+      "image"
+      "link-preview"
+      "footer" /
+      minmax(380px, 450px);
+    border: 1px solid #ccc;
+    padding: var(--small);
+
+    .mastodon-post-header {
+      grid-area: header;
+      justify-self: stretch;
+      display: grid;
+      grid:  "avatar names . date" / max-content max-content auto 20%;
+      margin: var(--medium);
+  
+      .mastodon-post-avatar {
+        grid-area: avatar;
+        width: auto;
+        max-height: 60px;
+        object-fit: contain;
+        align-self: center;
+      }
+  
+      .mastodon-post-names {
+        grid-area: names;
+        display: grid;
+        grid: 
+          "dp-name"
+          "ac-name" /
+          auto;
+        justify-self: start;
+        margin-left: var(--medium);
+  
+        .display-name {
+          grid-area: dp-name;
+          align-self: end;
+          text-decoration: none;
+          color: inherit;
+        }
+      
+        .account-name {
+          grid-area: ac-name;
+          align-self: start;
+          text-decoration: none;
+          color: inherit;
+        }
+      }
+
+      .mastodon-post-date {
+        font-size: 85%;
+        grid-area: date;
+        justify-self: end;
+        align-self: center;
+        margin-right: 1em;
+      }   
+    }
+
+    .mastodon-post-content {
+      grid-area: content;
+      display: grid;
+      grid: 
+      "image text" / minmax(40%, 108px) auto;
+      padding: var(--medium);
+
+      .mastodon-post-text {
+        grid-area: text;
+        align-self: center;
+        display: grid;        
+        padding: var(--medium) 0 var(--medium) var(--medium);
+      }
+  
+      .mastodon-post-image {
+        grid-area: image;
+        max-width: 100%;
+        height: auto;
+        align-self: center;
+        justify-self: center;
+        border-radius: 1em;
+      }
+    }
+
+    .mastodon-post-link-preview {
+      grid-area: link-preview;
+      justify-self: center;
+      display: grid;
+      grid:
+        "image"
+        "info" / 100%;
+      text-decoration: none;
+      border: 1px solid #ccc;
+      border-radius: var(--small);
+      margin: var(--medium);
+
+      .mastodon-post-link-image{
+        grid-area: image;
+        justify-self: center;
+        width: 100%;
+        height: auto;
+        object-fit: cover;
+        border-radius: var(--small);
+        margin-bottom: var(--small);
+      }
+
+      .mastodon-post-link-info {
+        grid-area: info;
+        grid: 
+        "." "link-title" "."
+        "." "link-description" "."
+        "." "link-url" "." / auto auto auto;
+        padding: var(--small);
+        
+        .mastodon-post-link-title {
+          grid-area: link-title;
+          color: #383838;
+          font-weight: bold;
+        }
+      
+        .mastodon-post-link-description {
+          color: #383838;
+          grid-area: link-description;
+        }
+      
+        .mastodon-post-link-url {
+          grid-area: link-url;
+          color: #666;
+        }
+      }
+    }
+
+    .mastodon-post-footer {
+      display: none;
+    }
  }

-  @media screen and (min-width: 576px) {
-    font-size: 2vw;
-  }
+}

-  @media screen and (min-width: 768px) {
-    font-size: 2vw;
-  }
-
-  @media screen and (min-width: 992px) {
-    font-size: 1.5vw;
-  }
-
-  @media screen and (min-width: 1200px) {
-    font-size: 1.25vw;
-  }
-
-  @media screen and (min-width: 1400px) {
-    font-size: 1.1vw;
-  }
-
-  @media screen and (min-width: 2004px) {
-    font-size: 1vw;
-  }
-
-}
--- a/src/main/dda/masto_embed/modes.cljs
+++ b/src/main/dda/masto_embed/modes.cljs
@ -75,7 +75,7 @@
           (filter #(or (not filter-favorited) (:favorited %)))
           (reverse)
           (map :status)
-           (th/masto->html)
+           (th/masto->html "replies-mode")
           (render-html)
           (b/render-to-document)))))

@ -89,6 +89,6 @@
           (filter #(= nil (:reblog %)))
           (filter #(= nil (:in_reply_to_account_id %)))
           (take 4)
-           (th/masto->html)
+           (th/masto->html "account-mode")
           (render-html)
           (b/render-to-document)))))
--- a/src/main/dda/masto_embed/resources/post.css
+++ b/src/main/dda/masto_embed/resources/post.css
@ -1,15 +1,15 @@
-.section.post-container {
-
+.section.account-mode {
  --large: 1em;
  --medium: 0.5em;
  --small: 0.25em;
  margin-bottom: var(--large);
+  
  display: grid;
-  grid: ". post ." / auto 66% auto;
+  grid: ". post ." / auto auto auto;

  .mastodon-post {
    grid-area: post;
-    justify-self: stretch;
+    justify-self: center;
    display: grid;
    grid: 
      "header"
@ -17,7 +17,7 @@
      "image"
      "link-preview"
      "footer" /
-      100%;
+      minmax(380px, 450px);
    border: 1px solid #ccc;
    padding: var(--small);

@ -67,7 +67,7 @@
        justify-self: end;
        align-self: center;
        margin-right: 1em;
-      }   
+      }  
    }

    .mastodon-post-content {
@ -84,10 +84,10 @@
  
      .mastodon-post-image {
        grid-area: image;
-        max-width: 100%; /* Adjust as needed */
+        max-width: 100%; 
        height: auto;
        align-self: center;
-        justify-self: center;        
+        justify-self: center;
        border-radius: 1em;
      }
    }
@ -101,16 +101,16 @@
        "info" / 100%;
      text-decoration: none;
      border: 1px solid #ccc;
-      border-radius: 0.25em;
+      border-radius: var(--small);
      margin: var(--medium);

      .mastodon-post-link-image{
        grid-area: image;
        justify-self: center;
-        max-width: 100%;
+        width: 100%;
        height: auto;
        object-fit: cover;
-        border-radius: 0.25em;
+        border-radius:var(--small);
        margin-bottom: var(--small);
      }

@ -184,7 +184,6 @@

      .retoot-count {
        justify-self: center;
-        align-self: center;
        grid-area: retoot-count;
      }

@ -198,29 +197,209 @@
  @media screen and (max-width: 575px) {
    font-size: 2.1vw;
  }
-
+  
  @media screen and (min-width: 576px) {
    font-size: 2vw;
  }
-
+  
  @media screen and (min-width: 768px) {
    font-size: 2vw;
  }
-
+  
  @media screen and (min-width: 992px) {
    font-size: 1.5vw;
  }
-
+  
  @media screen and (min-width: 1200px) {
    font-size: 1.25vw;
  }
-
+  
  @media screen and (min-width: 1400px) {
    font-size: 1.1vw;
  }
-
+  
  @media screen and (min-width: 2004px) {
    font-size: 1vw;
  }

-}
+}
+
+.section.replies-mode {
+  --large: 1em;
+  --medium: 0.5em;
+  --small: 0.25em;
+  margin-bottom: var(--large);
+  
+  display: grid;
+  grid: ". post ." / auto auto auto;
+
+  .mastodon-post {
+    grid-area: post;
+    justify-self: center;
+    align-self: start;
+    display: grid;
+    grid: 
+      "header"
+      "content"
+      "image"
+      "link-preview"
+      "footer" /
+      minmax(380px, 450px);
+    border: 1px solid #ccc;
+    padding: var(--small);
+
+    .mastodon-post-header {
+      grid-area: header;
+      justify-self: stretch;
+      display: grid;
+      grid:  "avatar names . date" / max-content max-content auto 20%;
+      margin: var(--medium);
+  
+      .mastodon-post-avatar {
+        grid-area: avatar;
+        width: auto;
+        max-height: 60px;
+        object-fit: contain;
+        align-self: center;
+      }
+  
+      .mastodon-post-names {
+        grid-area: names;
+        display: grid;
+        grid: 
+          "dp-name"
+          "ac-name" /
+          auto;
+        justify-self: start;
+        margin-left: var(--medium);
+  
+        .display-name {
+          grid-area: dp-name;
+          align-self: end;
+          text-decoration: none;
+          color: inherit;
+        }
+      
+        .account-name {
+          grid-area: ac-name;
+          align-self: start;
+          text-decoration: none;
+          color: inherit;
+        }
+      }
+
+      .mastodon-post-date {
+        font-size: 85%;
+        grid-area: date;
+        justify-self: end;
+        align-self: center;
+        margin-right: 1em;
+      }   
+    }
+
+    .mastodon-post-content {
+      grid-area: content;
+      display: grid;
+      grid: 
+      "image text" / auto;
+      padding: var(--medium);
+
+      .mastodon-post-text {
+        grid-area: text;
+        align-self: center;
+        padding: var(--medium);
+      }
+  
+      .mastodon-post-image {
+        grid-area: image;
+        max-width: 100%;
+        height: auto;
+        align-self: center;
+        justify-self: center;
+        border-radius: 1em;
+      }
+    }
+
+    .mastodon-post-link-preview {
+      grid-area: link-preview;
+      justify-self: center;
+      display: grid;
+      grid:
+        "image"
+        "info" / 100%;
+      text-decoration: none;
+      border: 1px solid #ccc;
+      border-radius: var(--small);
+      margin: var(--medium);
+
+      .mastodon-post-link-image{
+        grid-area: image;
+        justify-self: center;
+        width: 100%;
+        height: auto;
+        object-fit: cover;
+        border-radius: var(--small);
+        margin-bottom: var(--small);
+      }
+
+      .mastodon-post-link-info {
+        grid-area: info;
+        grid: 
+        "." "link-title" "."
+        "." "link-description" "."
+        "." "link-url" "." / auto auto auto;
+        padding: var(--small);
+        
+        .mastodon-post-link-title {
+          grid-area: link-title;
+          color: #383838;
+          font-weight: bold;
+        }
+      
+        .mastodon-post-link-description {
+          color: #383838;
+          grid-area: link-description;
+        }
+      
+        .mastodon-post-link-url {
+          grid-area: link-url;
+          color: #666;
+        }
+      }
+    }
+
+    .mastodon-post-footer {
+      display: none;
+    }
+  }
+
+  @media screen and (max-width: 575px) {
+    font-size: 2.1vw;
+  }
+  
+  @media screen and (min-width: 576px) {
+    font-size: 2vw;
+  }
+  
+  @media screen and (min-width: 768px) {
+    font-size: 2vw;
+  }
+  
+  @media screen and (min-width: 992px) {
+    font-size: 1.5vw;
+  }
+  
+  @media screen and (min-width: 1200px) {
+    font-size: 1.25vw;
+  }
+  
+  @media screen and (min-width: 1400px) {
+    font-size: 1.1vw;
+  }
+  
+  @media screen and (min-width: 2004px) {
+    font-size: 1vw;
+  }
+
+}
+
--- a/src/main/dda/masto_embed/resources/post.html
+++ b/src/main/dda/masto_embed/resources/post.html
@ -1,4 +1,4 @@
-<section class="section post-container">
+<section class="section MODE">
  <article class="mastodon-post">
    <header class="mastodon-post-header">
      <img class="mastodon-post-avatar" src="AVATAR_URL"></img>
@ -9,7 +9,7 @@
      <time class="mastodon-post-date" datetime="DATETIME">TIME</time>
    </header>
    <section class="mastodon-post-content">
-      <p class="mastodon-post-text">POST_TEXT</p>
+      <div class="mastodon-post-text">POST_TEXT</div>
    </section>
    <footer class="mastodon-post-footer"><button class="footer-button replies"><svg xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 23.999989 18.905102" fill="currentColor">
--- a/src/main/dda/masto_embed/to_html.cljs
+++ b/src/main/dda/masto_embed/to_html.cljs
@ -46,8 +46,7 @@
        (cm/replace-all-matching-values-by-new-value "DISPLAY_NAME" display_name)
        (cm/replace-all-matching-values-by-new-value "ACCOUNT_NAME" (str "@" username))
        (cm/replace-all-matching-values-by-new-value "DATETIME" created_at)
-        (cm/replace-all-matching-values-by-new-value "TIME" (t/unparse (t/formatter "EEEE, dd MMMM yyyy") date))
-        )))
+        (cm/replace-all-matching-values-by-new-value "TIME" (t/unparse (t/formatter "EEEE, dd MMMM yyyy") date)))))

 (defn masto-content->html [html content]
    (-> html
@ -98,14 +97,19 @@
      (cm/replace-all-matching-values-by-new-value "REBLOGS_COUNT" reblogs_count)
      (cm/replace-all-matching-values-by-new-value "FAVOURITES_COUNT" favourites_count)))

-(defn masto->html [statuses]
+(defn insert-mode [html mode]
+  (-> html
+      (cm/replace-all-matching-values-by-new-value "section MODE" (str "section " mode))))
+
+(defn masto->html [mode statuses]
  (let [html (b/post-html-hiccup)]
    (map (fn [status]
           (let [{:keys [account created_at content media_attachments replies_count reblogs_count favourites_count card url]} status]
-             (-> html
+             (-> html                 
                 (masto-header->html account created_at url)
                 (masto-content->html content)
                 (masto-media->html media_attachments)
                 (masto-link-prev->html card)
-                 (masto-footer->html replies_count reblogs_count favourites_count))))
+                 (masto-footer->html replies_count reblogs_count favourites_count)
+                 (insert-mode mode))))
         statuses)))
Author	SHA1	Message	Date
erik	99323a05ef	Format	2024-05-29 15:09:10 +02:00
erik	47126a7b75	Add arg to masto-html for mode	2024-05-29 15:09:01 +02:00
erik	fd72cdecfa	Remove unnecessary media queries	2024-05-29 15:08:20 +02:00
erik	4b52c1214a	Fix post content	2024-05-29 15:08:00 +02:00
erik	8bb9e6c0f8	Implement proper font size calc	2024-05-29 15:07:28 +02:00
erik	9f253e4401	Use div instead of p For the case that hashtags and mentions are present.	2024-05-29 14:31:16 +02:00
erik	643541f798	Add post css	2024-05-29 14:30:48 +02:00
erik	14f66cb2e1	Remove unused	2024-05-29 14:30:33 +02:00
erik	ec9e4ae300	Rename to post css	2024-05-29 14:29:59 +02:00
erik	ff49e13b86	Use post.css and replies mode	2024-05-29 14:29:46 +02:00
erik	773ecc1820	Move link elem to head	2024-05-29 13:59:14 +02:00