Refactor for account mode output

1 month ago · 88aee64dad
parent 6c9372c80f
commit 88aee64dad
2 changed files with 195 additions and 3 deletions
--- a/public/index.html
+++ b/public/index.html
@ -4,13 +4,13 @@
    <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">
+  <link rel="stylesheet" href="post-container.css">
  <body>
    <div class="container">
      <div id="masto-embed" 
-        account_name="team"
+        account_name="meissa"
        host_url="https://social.meissa-gmbh.de"
-        replies_to="107937234506182462"
+        
        filter_favorited=true>
        Here the timeline will appear.
      </div>
--- a/public/post-container.css
+++ b/public/post-container.css
@ -0,0 +1,192 @@
+.section.post-container {
+
+  --large: 1em;
+  --medium: 0.5em;
+  --small: 0.25em;
+  margin-bottom: var(--large);
+  
+  display: grid;
+  grid: ". post ." / 33% 33% 33%;
+
+  .mastodon-post {
+    grid-area: post;
+    justify-self: center;
+    display: grid;
+    grid: 
+      "header"
+      "content"
+      "image"
+      "link-preview"
+      "footer" /
+      420px;
+    border: 1px solid #ccc;
+    padding: var(--small);
+
+    .mastodon-post-header {
+      grid-area: header;
+      justify-self: stretch;
+      display: grid;
+      grid:  "avatar names . date" / 60px;
+      margin: var(--medium);
+  
+      .mastodon-post-avatar {
+        grid-area: avatar;
+        width: auto;
+        height: 116%;
+        object-fit: contain;
+      }
+  
+      .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;
+        }
+      
+        .account-name {
+          grid-area: ac-name;
+          align-self: start;
+        }
+      }
+
+      .mastodon-post-date {
+        grid-area: date;
+        justify-self: end;
+        align-self: center;
+        margin-right: 1em;
+      }   
+    }
+
+    .mastodon-post-content {
+      grid-area: content;
+      display: grid;
+      grid: 
+        "text"
+        "image" / auto;
+      padding: var(--medium);
+
+      .mastodon-post-text {
+        grid-area: text;
+      }
+  
+      .mastodon-post-image {
+        grid-area: image;
+        width: 100%; /* Adjust as needed */
+        align-self: center;
+        justify-self: center;
+        height: auto;
+        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: 0.25em;
+      margin: var(--medium);
+
+      .mastodon-post-link-image{
+        grid-area: image;
+        justify-self: center;
+        width: 100%;
+        height: auto;
+        object-fit: cover;
+        border-radius: 0.25em;
+        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 {
+      margin-right: var(--medium);
+      margin-left:  var(--medium);
+      grid-area: footer;
+      display: grid;
+      justify-content: space-between;
+      grid:
+        "replies retoots likes" 
+        / auto auto auto;
+      padding-top: var(--small);
+
+      .footer-button {
+        background: none;
+        border: none;
+        display: flex;
+        svg {
+          width: 24px;
+          height: 24px;
+          margin-right: var(--small);
+        }
+      }
+
+      .replies {
+        justify-self: center;
+        grid-area: replies;
+      }
+
+      .retoots {
+        justify-self: center;
+        grid-area: retoots;    
+      }
+
+      .likes {
+        justify-self: center;
+        grid-area: likes;
+      }
+
+      .like-count {
+        justify-self: center;
+        grid-area: like-count;
+      }
+
+      .retoot-count {
+        justify-self: center;
+        align-self: center;
+        grid-area: retoot-count;
+      }
+
+      .reply-count {
+        justify-self: center;
+        grid-area: reply-count;
+      }
+    }
+  }
+}