From 91511281c55ac9b7d3d8ce21d409905c2aec1955 Mon Sep 17 00:00:00 2001 From: Reed Garmsen Date: Tue, 7 Jul 2015 13:10:11 -0700 Subject: Changed loading logic for retrieving more channels to allow for loading animation to be inserted into the More... menu that allows you to join more channels while waiting for the list of channels to load --- web/sass-files/sass/partials/_loading.scss | 57 ++++++++++++++++++++++++++++++ 1 file changed, 57 insertions(+) (limited to 'web/sass-files/sass/partials') diff --git a/web/sass-files/sass/partials/_loading.scss b/web/sass-files/sass/partials/_loading.scss index 185a42180..a078d3563 100644 --- a/web/sass-files/sass/partials/_loading.scss +++ b/web/sass-files/sass/partials/_loading.scss @@ -66,3 +66,60 @@ } } } + +.channel-loading-screen { + position: absolute; + text-align: center; + padding: 2em 1em; +} + +.channel-loading-message { + .loading__content { + .round { + background-color: #444; + width: 4px; + height: 4px; + display: inline-block; + margin: 0 1px; + opacity: 0.1; + @include border-radius(10px); + -moz-animation: move 0.75s infinite linear; + -webkit-animation: move 0.75s infinite linear; + } + + #round_1 { + -moz-animation-delay: .2s; + -webkit-animation-delay: .2s; + } + + #round_2 { + -moz-animation-delay: .4s; + -webkit-animation-delay: .4s; + } + + #round_3 { + -moz-animation-delay: .6s; + -webkit-animation-delay: .6s; + } + + @-moz-keyframes move { + 0% { + opacity: 1; + } + + 100% { + opacity: 0.1; + }; + } + + @-webkit-keyframes move { + 0% { + opacity: 1; + } + + 100% { + opacity: 0.1; + }; + } + } +} -- cgit v1.2.3-1-g7c22 From de742baac09726fe2ef9f7274d260950a6828589 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Wed, 8 Jul 2015 23:08:06 +0500 Subject: MM-1469 - Loading message in more channel modal --- web/sass-files/sass/partials/_files.scss | 2 +- web/sass-files/sass/partials/_loading.scss | 64 +++--------------------------- web/sass-files/sass/partials/_post.scss | 2 +- 3 files changed, 8 insertions(+), 60 deletions(-) (limited to 'web/sass-files/sass/partials') diff --git a/web/sass-files/sass/partials/_files.scss b/web/sass-files/sass/partials/_files.scss index 1268d8a07..79142176e 100644 --- a/web/sass-files/sass/partials/_files.scss +++ b/web/sass-files/sass/partials/_files.scss @@ -119,7 +119,7 @@ width: 120px; height: 100px; float: left; - margin: 0 1em 1em 0; + margin: 5px 10px 5px 0; &.custom-file { width: 85px; height: 100px; diff --git a/web/sass-files/sass/partials/_loading.scss b/web/sass-files/sass/partials/_loading.scss index a078d3563..b47594daf 100644 --- a/web/sass-files/sass/partials/_loading.scss +++ b/web/sass-files/sass/partials/_loading.scss @@ -5,10 +5,15 @@ position: absolute; @include box-sizing(border-box); text-align: center; + &.loading-screen--channel { + position: relative; + padding: 4em 0 3.5em; + } .loading__content { display: table-cell; vertical-align: middle; h3 { + font-size: 16px; font-weight: 400; margin: 0 0.2em 0; display: inline-block; @@ -23,64 +28,7 @@ width: 4px; height: 4px; display: inline-block; - margin: 0 1px; - opacity: 0.1; - @include border-radius(10px); - -moz-animation: move 0.75s infinite linear; - -webkit-animation: move 0.75s infinite linear; - } - - #round_1 { - -moz-animation-delay: .2s; - -webkit-animation-delay: .2s; - } - - #round_2 { - -moz-animation-delay: .4s; - -webkit-animation-delay: .4s; - } - - #round_3 { - -moz-animation-delay: .6s; - -webkit-animation-delay: .6s; - } - - @-moz-keyframes move { - 0% { - opacity: 1; - } - - 100% { - opacity: 0.1; - }; - } - - @-webkit-keyframes move { - 0% { - opacity: 1; - } - - 100% { - opacity: 0.1; - }; - } - } -} - -.channel-loading-screen { - position: absolute; - text-align: center; - padding: 2em 1em; -} - -.channel-loading-message { - .loading__content { - .round { - background-color: #444; - width: 4px; - height: 4px; - display: inline-block; - margin: 0 1px; + margin: 0; opacity: 0.1; @include border-radius(10px); -moz-animation: move 0.75s infinite linear; diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss index f33cedd16..4891fe67f 100644 --- a/web/sass-files/sass/partials/_post.scss +++ b/web/sass-files/sass/partials/_post.scss @@ -306,7 +306,7 @@ body.ios { } .post-image__columns { @include legacy-pie-clearfix; - margin-top: 1em; + padding-bottom: 5px; } .post-info--hidden { display: none; -- cgit v1.2.3-1-g7c22 From c760e06433fa9829c92905cc3b8cdedb5479466d Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Thu, 9 Jul 2015 21:11:47 +0500 Subject: Updating Ui for posts --- web/sass-files/sass/partials/_post.scss | 114 +++++++++++++------------- web/sass-files/sass/partials/_responsive.scss | 32 +++++--- 2 files changed, 80 insertions(+), 66 deletions(-) (limited to 'web/sass-files/sass/partials') diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss index 4891fe67f..2d5cd67db 100644 --- a/web/sass-files/sass/partials/_post.scss +++ b/web/sass-files/sass/partials/_post.scss @@ -41,67 +41,68 @@ body.ios { min-height:37px; } -#post-list { - .date-separator, .new-separator { - text-align: center; - height: 2em; - margin: 0; - position: relative; - &:before, &:after { - content: ""; - height: 1em; - position: absolute; - left: 0; - width: 100%; - display: none; - } +.date-separator, .new-separator { + text-align: center; + height: 2em; + margin: 0; + position: relative; + &:before, &:after { + content: ""; + height: 1em; + position: absolute; + left: 0; + width: 100%; + display: none; + } + &:before { + bottom: 0; + } + &:after { + top: 0; + } + &.hovered--after { &:before { - bottom: 0; + background: #f5f5f5; + display: block; } + } + &.hovered--before { &:after { - top: 0; - } - &.hovered--after { - &:before { - background: #f5f5f5; - display: block; - } - } - &.hovered--before { - &:after { - background: #f5f5f5; - display: block; - } - } - .separator__hr { - border-color: #ccc; - margin: 0; - position: relative; - z-index: 5; - top: 1em; - } - .separator__text { - line-height: 2em; - color: #555; - background: #FFF; - display: inline-block; - padding: 0 1em; - font-weight: 700; - @include border-radius(50px); - position: relative; - z-index: 5; - font-size: 13px; + background: #f5f5f5; + display: block; } } - .new-separator { - .separator__hr { - border-color: #FFAF53; - } - .separator__text { - color: #F80; - font-weight: normal; - } + .separator__hr { + border-color: #ccc; + margin: 0; + position: relative; + z-index: 5; + top: 1em; } + .separator__text { + line-height: 2em; + color: #555; + background: #FFF; + display: inline-block; + padding: 0 1em; + font-weight: 700; + @include border-radius(50px); + position: relative; + z-index: 5; + font-size: 13px; + } +} +.new-separator { + .separator__hr { + border-color: #FFAF53; + } + .separator__text { + color: #F80; + font-weight: normal; + } +} + +#post-list { .post-list-holder-by-time { background: #fff; overflow-y: scroll; @@ -135,6 +136,7 @@ body.ios { color: grey; } } + .post-create__container { form { width: 100%; @@ -347,7 +349,7 @@ body.ios { } &.post-info { .post-profile-time { - width: 100px; + width: 150px; display: inline-block; margin-left: 50px; } diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss index 1a2befc3f..0eeaa3615 100644 --- a/web/sass-files/sass/partials/_responsive.scss +++ b/web/sass-files/sass/partials/_responsive.scss @@ -1,6 +1,13 @@ @media screen and (max-width: 1800px) { .inner__wrap { &.move--left { + .date-separator, .new-separator { + &.hovered--comment { + &:before, &:after { + background: none; + } + } + } .post { &.same--root { margin-left: 60px; @@ -82,6 +89,13 @@ max-width: 810px; } } + .date-separator, .new-separator { + &.hovered--comment { + &:before, &:after { + background: none; + } + } + } .post { &.same--root { margin-left: 60px; @@ -207,17 +221,15 @@ } @media screen and (max-width: 768px) { - #post-list { - .date-seperator, .new-separator { - &.hovered--after { - &:before { - background: none; - } + .date-separator, .new-separator { + &.hovered--after { + &:before { + background: none; } - &.hovered--before { - &:after { - background: none; - } + } + &.hovered--before { + &:after { + background: none; } } } -- cgit v1.2.3-1-g7c22 From 23c40243a4291bac573ccc05d45ad025b9570f62 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Thu, 9 Jul 2015 21:20:32 +0500 Subject: Updating font size and margins for loading animation --- web/sass-files/sass/partials/_loading.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'web/sass-files/sass/partials') diff --git a/web/sass-files/sass/partials/_loading.scss b/web/sass-files/sass/partials/_loading.scss index b47594daf..bc819e8f5 100644 --- a/web/sass-files/sass/partials/_loading.scss +++ b/web/sass-files/sass/partials/_loading.scss @@ -12,6 +12,7 @@ .loading__content { display: table-cell; vertical-align: middle; + font-size: 0; h3 { font-size: 16px; font-weight: 400; @@ -28,7 +29,7 @@ width: 4px; height: 4px; display: inline-block; - margin: 0; + margin: 0 2px; opacity: 0.1; @include border-radius(10px); -moz-animation: move 0.75s infinite linear; -- cgit v1.2.3-1-g7c22