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/layout/_webhooks.scss | |
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/layout/_webhooks.scss')
-rw-r--r-- | webapp/sass/layout/_webhooks.scss | 69 |
1 files changed, 62 insertions, 7 deletions
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 { |