diff options
author | Debanshu Kundu <debanshu.kundu@joshtechnologygroup.com> | 2017-03-02 23:17:27 +0530 |
---|---|---|
committer | enahum <nahumhbl@gmail.com> | 2017-03-02 14:47:27 -0300 |
commit | 47114a18e3d6dc2090beeb43d03f865d6436a99a (patch) | |
tree | b7126d5cb3bd025eb62228af0cb0f7994964c6fa /webapp/sass | |
parent | d9a297d6291838e08a4acdbd603c35601c0e9878 (diff) | |
download | chat-47114a18e3d6dc2090beeb43d03f865d6436a99a.tar.gz chat-47114a18e3d6dc2090beeb43d03f865d6436a99a.tar.bz2 chat-47114a18e3d6dc2090beeb43d03f865d6436a99a.zip |
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
Diffstat (limited to 'webapp/sass')
-rw-r--r-- | webapp/sass/layout/_post.scss | 2 | ||||
-rw-r--r-- | webapp/sass/layout/_webhooks.scss | 69 | ||||
-rw-r--r-- | webapp/sass/responsive/_mobile.scss | 45 | ||||
-rw-r--r-- | webapp/sass/responsive/_tablet.scss | 13 |
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 |