PLT-5380 Moved link preview image to top right corner of preview area (#5212)

* PLT-5380 Moved link preview image to top right corner of preview area for smaller images, larger and wide images are still shown below the text.

Also added logic to hide image area if image loading fails.

* Updating link previews css

4 files changed, 121 insertions, 8 deletions

diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss
index bca10cae2..ab391fa1d 100644
--- a/webapp/sass/layout/_post.scss
+++ b/webapp/sass/layout/_post.scss
@@ -1191,7 +1191,7 @@
         cursor: pointer;
         display: inline-block;
         font: normal normal normal 14px/1 FontAwesome;
-        margin: 0 0 10px;
+        margin: 0;
         text-rendering: auto;
 
         &.pull-left {
diff --git a/webapp/sass/layout/_webhooks.scss b/webapp/sass/layout/_webhooks.scss
index 904c50ccc..f3a8c6fd3 100644
--- a/webapp/sass/layout/_webhooks.scss
+++ b/webapp/sass/layout/_webhooks.scss
@@ -38,6 +38,9 @@
 
 .post {
     .attachment {
+        &.attachment--opengraph {
+            max-width: 800px;
+        }
         .attachment__content {
             border-radius: 4px;
             border-style: solid;
@@ -68,11 +71,29 @@
             &.attachment__container--danger {
                 border-left-color: #e40303;
             }
+            &.attachment__container--opengraph {
+                display: table;
+                table-layout: fixed;
+                width: 100%;
+                margin: 0;
+                padding-bottom: 13px;
+                div {
+                    margin: 0;
+                }
+            }
             .sitename {
                 color: #A3A3A3;
             }
         }
 
+        .attachment__body__wrap {
+            &.attachment__body__wrap--opengraph {
+                display: table-cell;
+                width: 100%;
+                vertical-align: top;
+            }
+        }
+
         .attachment__body {
             float: left;
             overflow-x: auto;
@@ -83,13 +104,11 @@
             &.attachment__body--no_thumb {
                 width: 100%;
             }
-            .attachment__image {
-                margin-bottom: 0;
-                max-height: 150px;
-                max-width: 150px;
-                &.loading {
-                    height: 150px;
-                }
+            &.attachment__body--opengraph {
+                float: none;
+                padding-right: 0;
+                width: 100%;
+                word-wrap: break-word;
             }
         }
 
@@ -97,10 +116,38 @@
             display: inline-block;
         }
 
+        .attachment__image__container--openraph {
+            display: table-cell;
+            vertical-align: top;
+            padding-top: 3px;
+            padding-left: 15px;
+        }
+
         .attachment__image {
             margin-bottom: 1em;
             max-height: 300px;
             max-width: 500px;
+
+            &.attachment__image--openraph {
+                margin-bottom: 0;
+                max-height: 80px;
+                max-width: 200px;
+
+                &.loading {
+                    height: 80px;
+                }
+
+                &.large_image {
+                    border-radius: 3px;
+                    margin-top: 10px;
+                    max-height: 200px;
+                    max-width: 400px;
+
+                    &.loading {
+                        height: 150px;
+                    }
+                }
+            }
         }
 
         .attachment__author-name {
@@ -121,6 +168,14 @@
                 overflow: hidden;
                 white-space: nowrap;
             }
+
+            &.attachment__title--opengraph {
+                height: auto;
+                word-wrap: break-word;
+                &.is-url {
+                    word-break: break-all
+                }
+            }
         }
 
         .attachment-link-more {
diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss
index d1fc10428..3170fb0d4 100644
--- a/webapp/sass/responsive/_mobile.scss
+++ b/webapp/sass/responsive/_mobile.scss
@@ -1210,6 +1210,15 @@
             }
         }
     }
+    .post {
+        .attachment {
+            .attachment__image {
+                &.attachment__image--openraph {
+                    max-width: 200px;
+                }
+            }
+        }
+    }
 }
 
 @media screen and (max-width: 640px) {
@@ -1385,6 +1394,16 @@
             text-align: left;
         }
     }
+
+    .post {
+        .attachment {
+            .attachment__image {
+                &.attachment__image--openraph {
+                    max-width: 200px;
+                }
+            }
+        }
+    }
 }
 
 @media screen and (max-width: 550px) {
@@ -1415,6 +1434,15 @@
         top: 60px;
         width: calc(100% - 30px);
     }
+    .post {
+        .attachment {
+            .attachment__image {
+                &.attachment__image--openraph {
+                    max-width: 180px;
+                }
+            }
+        }
+    }
 }
 
 @media screen and (max-width: 480px) {
@@ -1521,6 +1549,16 @@
     .integration__icon {
         display: none;
     }
+
+    .post {
+        .attachment {
+            .attachment__image {
+                &.attachment__image--openraph {
+                    max-width: 120px;
+                }
+            }
+        }
+    }
 }
 
 @media screen and (max-height: 640px) {
@@ -1553,6 +1591,13 @@
                 }
             }
         }
+        .attachment {
+            .attachment__image {
+                &.attachment__image--openraph {
+                    max-width: 80px;
+                }
+            }
+        }
     }
 
     .tutorial-steps__container {
diff --git a/webapp/sass/responsive/_tablet.scss b/webapp/sass/responsive/_tablet.scss
index 96a71694f..06a725a31 100644
--- a/webapp/sass/responsive/_tablet.scss
+++ b/webapp/sass/responsive/_tablet.scss
@@ -128,6 +128,19 @@
             }
         }
     }
+    .post {
+        .attachment {
+            .attachment__image {
+                &.attachment__image--openraph {
+                    max-height: 70px;
+                    max-width: 300px;
+                    &.loading {
+                        height: 70px;
+                    }
+                }
+            }
+        }
+    }
 }
 
 // Tablet and desktop