From bf7f2e7aeb8fcaf772b1951664e6ef353f556408 Mon Sep 17 00:00:00 2001
From: Rogerio Chaves <rogeriocfj@gmail.com>
Date: Sun, 26 Apr 2020 11:37:23 +0200
Subject: [PATCH] Add min height to pictures to avoid layout from jumping
 around

---
 app/public/js/shared.js      | 33 +++++++++++++++++++++++++++++++++
 app/public/shared.css        |  3 +++
 app/views/_footer.ejs        |  1 +
 app/views/mobile/_layout.ejs |  1 +
 4 files changed, 38 insertions(+)
 create mode 100644 app/public/js/shared.js

diff --git a/app/public/js/shared.js b/app/public/js/shared.js
new file mode 100644
index 0000000..e0ceec4
--- /dev/null
+++ b/app/public/js/shared.js
@@ -0,0 +1,33 @@
+/**
+ * Fix image heights
+ */
+
+let imagesFixed = false;
+const fixImageHeights = () => {
+  if (imagesFixed) return;
+  imagesFixed = true;
+
+  const css = `
+    .profile-pic {
+      min-height: 0;
+    }
+    .post-profile-pic {
+      min-height: 0;
+    }
+    .link-profile-pic {
+      min-height: 0;
+    }
+  `;
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const style = document.createElement("style");
+
+  head.appendChild(style);
+  style.appendChild(document.createTextNode(css));
+};
+
+document.addEventListener("readystatechange", (event) => {
+  if (event.target.readyState === "complete") {
+    fixImageHeights();
+  }
+});
+setTimeout(fixImageHeights, 2000);
diff --git a/app/public/shared.css b/app/public/shared.css
index 69e38fb..63e2eb5 100644
--- a/app/public/shared.css
+++ b/app/public/shared.css
@@ -140,6 +140,7 @@ h2 {
   width: 48px;
   max-height: 200px;
   border: 1px solid #044;
+  min-height: 48px;
 }
 
 .post-content {
@@ -170,6 +171,7 @@ h2 {
 .profile-pic {
   width: 128px;
   border: 1px solid #044;
+  min-height: 128px;
 }
 
 .profile-actions form {
@@ -262,6 +264,7 @@ h2 {
   width: 32px;
   max-height: 100px;
   margin-right: 5px;
+  min-height: 32px;
 }
 
 .secret-button {
diff --git a/app/views/_footer.ejs b/app/views/_footer.ejs
index 4311335..f527e3f 100644
--- a/app/views/_footer.ejs
+++ b/app/views/_footer.ejs
@@ -1,4 +1,5 @@
     </main>
+    <script src="/js/shared.js"></script>
     <script src="/js/desktop.js"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/app/views/mobile/_layout.ejs b/app/views/mobile/_layout.ejs
index 791caa4..b817f9e 100644
--- a/app/views/mobile/_layout.ejs
+++ b/app/views/mobile/_layout.ejs
@@ -50,6 +50,7 @@
 
     <%- body %>
 
+    <script src="/js/shared.js"></script>
     <script src="/js/mobile.js"></script>
   </body>
 </html>
\ No newline at end of file