From e48614d6cec19f781a63bc5166d7cc286c281d7b Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Tue, 20 Oct 2015 18:31:34 +0500 Subject: PLT-318 - Updating files overlay design --- web/sass-files/sass/partials/_post.scss | 48 ++++++++++++++++++++++----- web/sass-files/sass/partials/_responsive.scss | 16 ++++++--- 2 files changed, 51 insertions(+), 13 deletions(-) (limited to 'web/sass-files') diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss index 0f3cc0ef6..6ecc0d965 100644 --- a/web/sass-files/sass/partials/_post.scss +++ b/web/sass-files/sass/partials/_post.scss @@ -119,20 +119,52 @@ body.ios { background-color: rgba(0, 0, 0, 0.6); text-align: center; color: #FFF; - display: table; - font-size: 1.7em; + font-size: em(20px); font-weight: 600; z-index: 6; - > div { - display: table-cell; - vertical-align: middle; + &.right-file-overlay { + font-size: em(18px); + .overlay__circle { + width: 300px; + height: 300px; + margin: -150px 0 0 -150px; + } + .overlay__files { + margin: 60px auto 15px; + width: 150px; + } } - .fa { + .overlay__circle { + background: #111; + background: rgba(black, 0.7); + width: 370px; + height: 370px; + margin: -185px 0 0 -185px; + @include border-radius(500px); + position: absolute; + top: 50%; + left: 50%; + } + + .overlay__files { display: block; - font-size: 2em; - margin: 0 0 0.3em; + margin: 75px auto 20px; + } + + .overlay__logo { + position: absolute; + left: 50%; + bottom: 30px; + margin-left: -50px; + @include opacity(0.3); + } + + .fa { + display: inline-block; + font-size: 1.1em; + margin-right: 8px; } } diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss index 09ac2047c..71ae52635 100644 --- a/web/sass-files/sass/partials/_responsive.scss +++ b/web/sass-files/sass/partials/_responsive.scss @@ -199,9 +199,6 @@ } @media screen and (max-width: 960px) { - .center-file-overlay { - font-size: 1.5em; - } .post { .post-header .post-header-col.post-header__reply { .comment-icon__container__hide { @@ -278,8 +275,17 @@ display: block; } } - .center-file-overlay { - font-size: 1.3em; + .file-overlay { + font-size: em(18px); + .overlay__circle { + width: 300px; + height: 300px; + margin: -150px 0 0 -150px; + } + .overlay__files { + margin: 60px auto 15px; + width: 150px; + } } .date-separator, .new-separator { &.hovered--after { -- cgit v1.2.3-1-g7c22 From 4ba3a19855170fae8d29511aa82561f3975da2c0 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Tue, 20 Oct 2015 18:34:49 +0500 Subject: Adding background transparent for theme inputs --- web/sass-files/sass/partials/_settings.scss | 3 +++ 1 file changed, 3 insertions(+) (limited to 'web/sass-files') diff --git a/web/sass-files/sass/partials/_settings.scss b/web/sass-files/sass/partials/_settings.scss index c4591d7b6..5fc9b295b 100644 --- a/web/sass-files/sass/partials/_settings.scss +++ b/web/sass-files/sass/partials/_settings.scss @@ -103,6 +103,9 @@ text-overflow: ellipsis; margin-bottom: 0; } + .input-group-addon:not(:first-child) { + background: transparent; + } .radio { label { font-weight: 600; -- cgit v1.2.3-1-g7c22 From de3cd15b23641109af290be7623abc176dcc4a60 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Tue, 20 Oct 2015 18:36:33 +0500 Subject: Updating custom themes input addon --- web/sass-files/sass/partials/_settings.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'web/sass-files') diff --git a/web/sass-files/sass/partials/_settings.scss b/web/sass-files/sass/partials/_settings.scss index 5fc9b295b..bc53dc0e4 100644 --- a/web/sass-files/sass/partials/_settings.scss +++ b/web/sass-files/sass/partials/_settings.scss @@ -103,7 +103,7 @@ text-overflow: ellipsis; margin-bottom: 0; } - .input-group-addon:not(:first-child) { + .input-group-addon { background: transparent; } .radio { -- cgit v1.2.3-1-g7c22 From e9fc2434fc98bf3ac9ae7b0f05609169f19d07ea Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Tue, 20 Oct 2015 21:08:18 +0500 Subject: Updating btn-close size for direct messages on mobile devices. --- web/sass-files/sass/partials/_responsive.scss | 3 +++ 1 file changed, 3 insertions(+) (limited to 'web/sass-files') diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss index 71ae52635..3bffe82a2 100644 --- a/web/sass-files/sass/partials/_responsive.scss +++ b/web/sass-files/sass/partials/_responsive.scss @@ -645,6 +645,9 @@ } &.has-close { .btn-close { + width: 40px; + text-align: center; + right: 0; display: block; @include opacity(0.5); } -- cgit v1.2.3-1-g7c22 From d167e18f0048344c54685a08c19113a84a995ed9 Mon Sep 17 00:00:00 2001 From: Florian Orben Date: Sat, 17 Oct 2015 01:58:34 +0200 Subject: PLT-616: Enable playing of animated GIF in thumbnails and preview --- web/sass-files/sass/partials/_files.scss | 22 ++++++++++++++++++++++ web/sass-files/sass/partials/_modal.scss | 9 +++++++++ 2 files changed, 31 insertions(+) (limited to 'web/sass-files') diff --git a/web/sass-files/sass/partials/_files.scss b/web/sass-files/sass/partials/_files.scss index 01057423d..1d7754445 100644 --- a/web/sass-files/sass/partials/_files.scss +++ b/web/sass-files/sass/partials/_files.scss @@ -133,12 +133,25 @@ height: 100%; background-color: #FFF; background-repeat: no-repeat; + overflow: hidden; + position: relative; &.small { background-position: center; } &.normal { background-position: top left; } + .spinner.file__loading { + position: absolute; + left: 50%; + margin-left: -16px; + top: 50%; + margin-top: -16px; + } + .file__loaded { + height: 100px; + max-width: initial; + } } .post-image__thumbnail { float: left; @@ -215,3 +228,12 @@ } } } + +.file-play-button { + position: absolute; + right: 0; + bottom: 0; + font-size: 22px; + cursor: pointer; + z-index: 2; +} diff --git a/web/sass-files/sass/partials/_modal.scss b/web/sass-files/sass/partials/_modal.scss index 5570b5ce4..5a8c1899a 100644 --- a/web/sass-files/sass/partials/_modal.scss +++ b/web/sass-files/sass/partials/_modal.scss @@ -228,11 +228,20 @@ background: #FFF; display: table-cell; vertical-align: middle; + position: relative; } img { max-width: 100%; max-height: 100%; } + .spinner.file__loading { + z-index: 2; + position: absolute; + left: 50%; + margin-left: -16px; + top: 50%; + margin-top: -16px; + } } .modal-content{ box-shadow: none; -- cgit v1.2.3-1-g7c22 From 420c754ca300d6f089adc9f22d34a8acb00a571e Mon Sep 17 00:00:00 2001 From: Florian Orben Date: Mon, 19 Oct 2015 21:15:10 +0200 Subject: Horizontally align images if image height > image width --- web/sass-files/sass/partials/_files.scss | 1 + 1 file changed, 1 insertion(+) (limited to 'web/sass-files') diff --git a/web/sass-files/sass/partials/_files.scss b/web/sass-files/sass/partials/_files.scss index 1d7754445..cb9ff6862 100644 --- a/web/sass-files/sass/partials/_files.scss +++ b/web/sass-files/sass/partials/_files.scss @@ -135,6 +135,7 @@ background-repeat: no-repeat; overflow: hidden; position: relative; + text-align: center; &.small { background-position: center; } -- cgit v1.2.3-1-g7c22 From cd5df514c7d3130c9765a8160dfd31abccb8b741 Mon Sep 17 00:00:00 2001 From: Florian Orben Date: Mon, 19 Oct 2015 22:30:00 +0200 Subject: Add stop button to stop animated gifs --- web/sass-files/sass/partials/_files.scss | 15 +++++++++++++-- web/sass-files/sass/partials/_modal.scss | 4 ++++ 2 files changed, 17 insertions(+), 2 deletions(-) (limited to 'web/sass-files') diff --git a/web/sass-files/sass/partials/_files.scss b/web/sass-files/sass/partials/_files.scss index cb9ff6862..e4d658230 100644 --- a/web/sass-files/sass/partials/_files.scss +++ b/web/sass-files/sass/partials/_files.scss @@ -153,6 +153,9 @@ height: 100px; max-width: initial; } + &:hover .file-playback-controls.stop { + @include opacity(1); + } } .post-image__thumbnail { float: left; @@ -230,11 +233,19 @@ } } -.file-play-button { +.file-playback-controls { position: absolute; - right: 0; + right: 5px; bottom: 0; font-size: 22px; cursor: pointer; z-index: 2; + -webkit-transition: opacity 0.6s; + -moz-transition: opacity 0.6s; + -o-transition: opacity 0.6s; + transition: opacity 0.6s; + + &.stop { + @include opacity(0); + } } diff --git a/web/sass-files/sass/partials/_modal.scss b/web/sass-files/sass/partials/_modal.scss index 5a8c1899a..1dcdbf348 100644 --- a/web/sass-files/sass/partials/_modal.scss +++ b/web/sass-files/sass/partials/_modal.scss @@ -229,6 +229,10 @@ display: table-cell; vertical-align: middle; position: relative; + + &:hover .file-playback-controls.stop { + @include opacity(1); + } } img { max-width: 100%; -- cgit v1.2.3-1-g7c22 From 62a32f71875465f045b89486e234eb282975858a Mon Sep 17 00:00:00 2001 From: Florian Orben Date: Mon, 19 Oct 2015 22:48:15 +0200 Subject: always show stop gif button on small screen sizes --- web/sass-files/sass/partials/_responsive.scss | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'web/sass-files') diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss index 3bffe82a2..c8bb24f3a 100644 --- a/web/sass-files/sass/partials/_responsive.scss +++ b/web/sass-files/sass/partials/_responsive.scss @@ -758,6 +758,10 @@ .post-comments { padding: 9px 21px 10px 10px !important; } + + .post-image__column .post__image .file-playback-controls.stop, .image-wrapper > a .file-playback-controls.stop { + @include opacity(1); + } } @media screen and (max-width: 640px) { .access-history__table { -- cgit v1.2.3-1-g7c22 From b00697a5009b30eea7e34f340dfdf6b691c4087b Mon Sep 17 00:00:00 2001 From: Florian Orben Date: Tue, 20 Oct 2015 20:42:02 +0200 Subject: apply portrait/landscape/quadrat format to playing gif to always display it in best possible way --- web/sass-files/sass/partials/_files.scss | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) (limited to 'web/sass-files') diff --git a/web/sass-files/sass/partials/_files.scss b/web/sass-files/sass/partials/_files.scss index e4d658230..d3ab3b9f8 100644 --- a/web/sass-files/sass/partials/_files.scss +++ b/web/sass-files/sass/partials/_files.scss @@ -150,8 +150,13 @@ margin-top: -16px; } .file__loaded { - height: 100px; max-width: initial; + &.landscape, &.quadrat { + height: 100px; + } + &.portrait { + width: 120px; + } } &:hover .file-playback-controls.stop { @include opacity(1); -- cgit v1.2.3-1-g7c22