From 47114a18e3d6dc2090beeb43d03f865d6436a99a Mon Sep 17 00:00:00 2001
From: Debanshu Kundu <debanshu.kundu@joshtechnologygroup.com>
Date: Thu, 2 Mar 2017 23:17:27 +0530
Subject: 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
---
 webapp/sass/responsive/_mobile.scss | 45 +++++++++++++++++++++++++++++++++++++
 webapp/sass/responsive/_tablet.scss | 13 +++++++++++
 2 files changed, 58 insertions(+)

(limited to 'webapp/sass/responsive')

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
-- 
cgit v1.2.3-1-g7c22