Add min height to pictures to avoid layout from jumping around
This commit is contained in:
parent
d291483908
commit
bf7f2e7aeb
|
@ -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);
|
|
@ -140,6 +140,7 @@ h2 {
|
||||||
width: 48px;
|
width: 48px;
|
||||||
max-height: 200px;
|
max-height: 200px;
|
||||||
border: 1px solid #044;
|
border: 1px solid #044;
|
||||||
|
min-height: 48px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.post-content {
|
.post-content {
|
||||||
|
@ -170,6 +171,7 @@ h2 {
|
||||||
.profile-pic {
|
.profile-pic {
|
||||||
width: 128px;
|
width: 128px;
|
||||||
border: 1px solid #044;
|
border: 1px solid #044;
|
||||||
|
min-height: 128px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.profile-actions form {
|
.profile-actions form {
|
||||||
|
@ -262,6 +264,7 @@ h2 {
|
||||||
width: 32px;
|
width: 32px;
|
||||||
max-height: 100px;
|
max-height: 100px;
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
|
min-height: 32px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.secret-button {
|
.secret-button {
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
</main>
|
</main>
|
||||||
|
<script src="/js/shared.js"></script>
|
||||||
<script src="/js/desktop.js"></script>
|
<script src="/js/desktop.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
|
@ -50,6 +50,7 @@
|
||||||
|
|
||||||
<%- body %>
|
<%- body %>
|
||||||
|
|
||||||
|
<script src="/js/shared.js"></script>
|
||||||
<script src="/js/mobile.js"></script>
|
<script src="/js/mobile.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
Loading…
Reference in New Issue