diff options
Diffstat (limited to 'webapp/sass')
| -rw-r--r-- | webapp/sass/components/_modal.scss | 4 | ||||
| -rw-r--r-- | webapp/sass/layout/_post.scss | 76 | ||||
| -rw-r--r-- | webapp/sass/responsive/_mobile.scss | 5 | ||||
| -rw-r--r-- | webapp/sass/responsive/_tablet.scss | 114 |
4 files changed, 196 insertions, 3 deletions
diff --git a/webapp/sass/components/_modal.scss b/webapp/sass/components/_modal.scss index d53be29dc..3d3a11de0 100644 --- a/webapp/sass/components/_modal.scss +++ b/webapp/sass/components/_modal.scss @@ -448,7 +448,7 @@ @include opacity(.8); float: right; margin-right: 3px; - margin-top: 12px; + margin-top: 8px; } .member-select__container { @@ -459,7 +459,7 @@ select { @include opacity(.8); float: right; - margin: 5px 5px 0 2px; + margin: 1px 5px 0 2px; width: auto; } } diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss index a99c6d57c..bfefd08ee 100644 --- a/webapp/sass/layout/_post.scss +++ b/webapp/sass/layout/_post.scss @@ -417,7 +417,8 @@ body.ios { .post-create-footer { @include clearfix; font-size: 13px; - padding: 3px 0 0 0; + padding: 3px 0 0; + .control-label { font-weight: normal; margin-bottom: 0; @@ -482,6 +483,79 @@ body.ios { background-color: beige; } + &.post--compact { + + .markdown__heading { + font-size: 1em; + margin: 0 0 7px; + } + + .post__body { + background: transparent !important; + margin-top: -1px; + padding: 3px 0; + } + + .post-image__columns { + clear: both; + } + + .post-image__column { + @include border-radius(2px); + font-size: .9em; + height: 26px; + line-height: 25px; + padding: 0 7px; + + .post-image__thumbnail { + display: none; + } + + .post-image__details { + background: transparent; + border: none; + padding: 0; + width: 100%; + + > div { + display: none; + } + } + + .post-image__name { + @include clearfix; + display: block; + margin: 0; + padding-right: 10px; + text-overflow: ellipsis; + white-space: nowrap; + + i { + font-size: .9em; + margin-right: 5px; + opacity: .5; + } + } + + a { + &:hover { + text-decoration: none; + } + } + } + + .post__img { + padding-top: 3px; + width: 28px; + + img, + svg { + height: 20px; + width: 20px; + } + } + } + p { font-size: .97em; line-height: 1.6em; diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss index cc3d7a4b9..9af77d4f1 100644 --- a/webapp/sass/responsive/_mobile.scss +++ b/webapp/sass/responsive/_mobile.scss @@ -45,6 +45,11 @@ } .post { + &.post--compact { + + + } + .post__dropdown { display: inline-block; height: 20px; 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; + } + } } } } |