diff options
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 |