no iframes, only content

slamp · Dec 5, 2022 · 490e87e · 490e87e
1 parent bb95030
commit 490e87e
Show file tree

Hide file tree

Showing 3 changed files with 122 additions and 72 deletions.
diff --git a/models.py b/models.py
@@ -20,3 +20,18 @@ def get_home_url(self, mastodon_base_url: str) -> str:
     def get_score(self, scorer: Scorer) -> float:
         return scorer.score(self)
 
+    @property
+    def account(self) -> dict:
+        return self.info.account
+
+    @property
+    def content(self) -> str:
+        return self.info.content
+
+    @property
+    def created_at(self) -> str:
+        return self.info.created_at.strftime("%Y-%m-%d %H:%M")
+
+    @property
+    def media(self) -> list:
+        return self.info.media_attachments
diff --git a/templates/posts.html.jinja b/templates/posts.html.jinja
@@ -4,6 +4,13 @@
     <span class="link-divider"> | </span>
     <a class="original-link" href="{{ post.url }}" target="_blank">Original Link</a>
     <br />
-    <iframe src="{{ post.url }}/embed" class="mastodon-embed" allowfullscreen="allowfullscreen" width="400"></iframe>
+    <div class="toot">
+      <div class="avatar"><a target="_blank" href="{{ post.account['url'] }}"><img src="{{ post.account['avatar'] }}"></a></div>
+      <div class="content">
+	<div class="user"><a target="_blank" href="{{ post.account['url'] }}"><span class="displayname">{{ post.account['display_name'] }}</span><span class="username">@{{ post.account['username'] }}</span></a></div>
+	<div class="status">{{ post.content }}`</div>
+	<div class="date"><a target="_blank" href="{{ post.url }}">★ {{ post.account['created_at'] }}</a></div>
+      </div>
+    </div>`
 </div>
-{% endfor %}
+{% endfor %}
diff --git a/templates/style.html.jinja b/templates/style.html.jinja
@@ -1,72 +1,100 @@
 <style>
 
-    body {
-        background-color: #292c36;
-        font-family: "Arial", sans-serif;
-    }
-
-    div#container {
-        margin: auto;
-        max-width: 640px;
-        padding: 10px;
-        text-align: center;
-    }
-
-    div.post {
-        margin-top: 20px;
-    }
-
-    h1 {
-        color: white;
-    }
-
-    h2 {
-        color: white;
-    }
-
-    a.home-link {
-        color: white;
-    }
-
-    a.original-link {
-        color: white;
-    }
-
-    span.link-divider {
-        color: white;
-    }
-
-    span#render-description {
-        color: #D3D3D3;
-    }
-
-    span#scorer {
-        color: #D3D3D3;
-    }
-
-    span#scorer-value {
-        font-weight: bold;
-    }
-
-    span#threshold {
-        color: #D3D3D3;
-    }
-
-    span#threshold-value {
-        font-weight: bold;
-    }
-
-    span#rendered-value {
-        font-weight: bold;
-    }
-
-    span#hours-value {
-        font-weight: bold;
-    }
-
-    iframe.mastodon-embed {
-        max-width: 100%;
-        border: 0;
-    }
-
-</style>
+  body {
+      background-color: #f9f9f9;
+      color: #3e3d41;
+      text-align: left;
+      display: flex;
+      justify-content: center;
+  }
+
+  #render-description, #scorer, #threshold {
+      opacity: .7;
+      font-size: .9em;
+  }
+
+  #render-description span, #scorer span, #threshold span {
+      font-weight: bold;
+  }
+
+  #container {
+      width: 100%;
+      max-width: 900px;
+      flex-direction: column;
+      margin: 10px;
+      line-height: 1.5;
+  }
+
+  .toot {
+      padding: 18px 20px;
+      border: 1px solid #E6E3E1;
+      border-radius: 5px;
+      display: flex;
+      flex-start: left;
+      margin: 15px;
+      box-shadow: 0.2px 0.4px 0.8px -10px rgba(0,0,0,0.03), 0.4px 0.9px 2px -10px rgba(0,0,0,0.030), 0.8px 1.8px 3.8px -10px rgba(0,0,0,0.038), 1.3px 3.1px 6.7px -10px rgba(0,0,0,0.045), 2.5px 5.8px 12.5px -10px rgba(0,0,0,0.06), 6px 14px 30px -10px rgba(0,0,0,0.08);
+  }
+  .avatar {
+      max-width: 64px;
+      min-width: 64px;
+      height: 64px;
+  }
+  .avatar img {
+      max-width: 100%;
+      border-radius: 50%;
+  }
+  .content {
+      color: #3e3d41;
+      font-size: 14px;
+      margin-left: 20px;
+      padding: 10px 0px;
+  }
+  .content p {
+      max-width: none;
+      margin: 5px 0px;
+  }
+  .post a, .content a {
+      color: #5d4f84;
+  }
+  .content a:hover {
+      color: #4d54d1;
+  }
+  .content a span {
+  }
+  .content .invisible {
+      opacity: .7;
+  }
+  .status a:not(.hashtag):not(.mention) span:not(.invisible){
+      font-weight: bold
+  }
+  .username {
+      opacity: .9;
+      font-weight: normal;
+  }
+  .home-link, .original-link, a.hashtag, a.mention {
+      text-decoration: none;
+      opacity: .8;
+      background-color: #e9e9f5;
+      padding: 0 5px;
+      border-radius: 5px;
+  }
+  .status img, .status video {
+      max-width: 100%;
+      max-height: 500px;
+  }
+  .user span {
+      padding: 0px 2px;
+  }
+  .displayname {
+      font-weight: bold;
+      font-size: 1.2em;
+  }
+  .content .status {
+      padding: 10px 0px;
+  }
+  .date a {
+      color: #3e3d41;
+      opacity: .6
+  }
+
+</style>