diff options
author | Asaad Mahmood <asaadmahmoodspin@users.noreply.github.com> | 2016-05-16 17:06:26 +0500 |
---|---|---|
committer | Christopher Speller <crspeller@gmail.com> | 2016-05-16 08:06:26 -0400 |
commit | 0258fcfa5c8da92351371169b66ce30462a34853 (patch) | |
tree | d69803cff43a633202b877738e514867f4424e0c /webapp/sass/responsive/_tablet.scss | |
parent | 565b111234f5566da632533109e1b4f4044e7116 (diff) | |
download | chat-0258fcfa5c8da92351371169b66ce30462a34853.tar.gz chat-0258fcfa5c8da92351371169b66ce30462a34853.tar.bz2 chat-0258fcfa5c8da92351371169b66ce30462a34853.zip |
Adding compact layout (#2991)
* Adding compact layout
* Fixing ESLint error
Diffstat (limited to 'webapp/sass/responsive/_tablet.scss')
-rw-r--r-- | webapp/sass/responsive/_tablet.scss | 114 |
1 files changed, 114 insertions, 0 deletions
diff --git a/webapp/sass/responsive/_tablet.scss b/webapp/sass/responsive/_tablet.scss index 72b4b5aad..f5e341b25 100644 --- a/webapp/sass/responsive/_tablet.scss +++ b/webapp/sass/responsive/_tablet.scss @@ -65,6 +65,7 @@ } } +// Tablet and desktop @media screen and (min-width: 768px) { .second-bar { display: none; @@ -83,6 +84,111 @@ } .post { + &.post--compact { + padding: 5px .5em 0 80px; + + .post__link { + margin: 4px 0 7px; + } + + .post__time { + font-size: .85em; + left: -70px; + position: absolute; + top: 2px; + } + + span { + p { + &:last-child { + margin-bottom: .3em; + } + } + } + + .post__header { + float: left; + height: 18px; + padding-top: 3px; + + .col__name { + font-weight: bold; + } + + .col__reply { + top: 2px; + } + } + + &.other--root { + .post__body { + > div { + &:first-child { + min-height: 21px; + } + } + } + + .post__link + .post__body { + clear: both; + } + + &.post--comment { + .post__header { + .col__reply { + top: 0; + } + } + } + } + + .post-code { + clear: both; + } + + &.same--root { + &.same--user { + padding-left: 80px; + + .post__img { + img { + display: none; + } + } + } + + &.post--comment { + padding-top: 1px; + + .post__img { + img { + display: inline-block; + } + } + + &.same--user { + .post__img { + img { + display: none; + } + } + } + + .post__header { + margin-left: 12px; + } + } + } + + .post__body { + width: 100%; + } + + .post__content { + padding-right: 85px; + } + } + &.same--root { &.same--user { .post__time { @@ -94,6 +200,14 @@ text-rendering: auto; top: -2px; } + + &.post--compact { + .post__time { + font-size: .85em; + left: -70px; + top: -5px; + } + } } } } |