From 501eef0385065d8630e5ddc299f8693a507e3a29 Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <asaad@spinpunch.com>
Date: Tue, 29 Mar 2016 17:55:30 +0500
Subject: Additional UI improvements

---
 webapp/components/posts_view.jsx       |  4 +++-
 webapp/components/textbox.jsx          |  4 ++--
 webapp/sass/layout/_post.scss          | 44 ++++++++++++++++------------------
 webapp/sass/layout/_sidebar-right.scss |  4 ++++
 webapp/sass/responsive/_desktop.scss   |  8 +++++++
 webapp/sass/responsive/_tablet.scss    |  4 ++++
 webapp/sass/routes/_signup.scss        |  2 +-
 webapp/utils/utils.jsx                 |  4 ++--
 8 files changed, 44 insertions(+), 30 deletions(-)

(limited to 'webapp')

diff --git a/webapp/components/posts_view.jsx b/webapp/components/posts_view.jsx
index 8b4b0c662..e034a592e 100644
--- a/webapp/components/posts_view.jsx
+++ b/webapp/components/posts_view.jsx
@@ -570,7 +570,9 @@ function FloatingTimestamp({isScrolling, post}) {
 
     return (
         <div className={className}>
-            <span>{dateString}</span>
+            <div>
+                <span>{dateString}</span>
+            </div>
         </div>
     );
 }
diff --git a/webapp/components/textbox.jsx b/webapp/components/textbox.jsx
index 371c581e5..63d5486a4 100644
--- a/webapp/components/textbox.jsx
+++ b/webapp/components/textbox.jsx
@@ -131,7 +131,7 @@ export default class Textbox extends React.Component {
         const helpText = (
             <div
                 style={{visibility: hasText ? 'visible' : 'hidden', opacity: hasText ? '0.5' : '0'}}
-                className='help_format_text'
+                className='help__format-text'
             >
                 <b>
                     <FormattedMessage
@@ -208,8 +208,8 @@ export default class Textbox extends React.Component {
                     dangerouslySetInnerHTML={{__html: this.state.preview ? TextFormatting.formatText(this.props.messageText) : ''}}
                 >
                 </div>
-                {helpText}
                 <div className='help__text'>
+                    {helpText}
                     {previewLink}
                     <a
                         target='_blank'
diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss
index f0353029b..05ef09643 100644
--- a/webapp/sass/layout/_post.scss
+++ b/webapp/sass/layout/_post.scss
@@ -66,6 +66,7 @@ body.ios {
         font-size: 13px;
         position: absolute;
         right: 0;
+        text-align: right;
         z-index: 3;
     }
 
@@ -74,16 +75,14 @@ body.ios {
     }
 }
 
-.help_format_text {
+.help__format-text {
     @include opacity(0);
     @include single-transition(all .2s ease);
-    bottom: -23px;
-    display: none !important;
+    display: inline-block;
     font-size: .85em;
-    left: 0;
-    overflow: hidden;
-    position: absolute;
-    text-overflow: ellipsis;
+    margin-right: 10px;
+    vertical-align: bottom;
+    white-space: nowrap;
 
     b,
     i,
@@ -275,39 +274,36 @@ body.ios {
         outline: none;
         text-align: center;
     }
-
-    .beginning-messages-text {
-        color: grey;
-        display: block;
-        margin-bottom: 5px;
-        margin-top: 2px;
-        text-align: center;
-    }
 }
 
 .post-list__timestamp {
-    @include border-radius(3px);
     @include opacity(0);
     @include single-transition(all, .6s, ease);
     @include translateY(-45px);
-    @include font-smoothing(initial);
-    background: $primary-color;
-    color: $white;
     display: none;
-    font-size: 12px;
-    left: 50%;
-    line-height: 25px;
-    margin-left: -60px;
+    left: 0;
     position: absolute;
     text-align: center;
     top: 8px;
-    width: 120px;
+    width: 100%;
     z-index: 50;
 
     &.scrolling {
         @include translateY(0);
         @include opacity(.8);
     }
+
+    > div {
+        @include border-radius(3px);
+        @include font-smoothing(initial);
+        background: $primary-color;
+        color: $white;
+        display: inline-block;
+        font-size: 12px;
+        line-height: 25px;
+        padding: 0 8px;
+        text-align: center;
+    }
 }
 
 .post-list__arrows {
diff --git a/webapp/sass/layout/_sidebar-right.scss b/webapp/sass/layout/_sidebar-right.scss
index a7b631047..062c3bde1 100644
--- a/webapp/sass/layout/_sidebar-right.scss
+++ b/webapp/sass/layout/_sidebar-right.scss
@@ -25,6 +25,10 @@
         }
     }
 
+    .help__format-text {
+        display: none;
+    }
+
     .sidebar--right__content {
         @include display-flex;
         @include flex-direction(column);
diff --git a/webapp/sass/responsive/_desktop.scss b/webapp/sass/responsive/_desktop.scss
index ccd6f0226..1ae4b6b70 100644
--- a/webapp/sass/responsive/_desktop.scss
+++ b/webapp/sass/responsive/_desktop.scss
@@ -17,6 +17,14 @@
 }
 
 @media screen and (max-width: 1440px) {
+    .inner-wrap {
+        &.move--left {
+            .help__format-text {
+                display: none;
+            }
+        }
+    }
+
     .date-separator,
     .new-separator {
         &.hovered--comment {
diff --git a/webapp/sass/responsive/_tablet.scss b/webapp/sass/responsive/_tablet.scss
index 0a725a558..6863e660b 100644
--- a/webapp/sass/responsive/_tablet.scss
+++ b/webapp/sass/responsive/_tablet.scss
@@ -15,6 +15,10 @@
         }
     }
 
+    .help__format-text {
+        display: none;
+    }
+
     .inner-wrap {
         &.move--left {
             margin-right: 0;
diff --git a/webapp/sass/routes/_signup.scss b/webapp/sass/routes/_signup.scss
index 09f8e4185..61bb93daf 100644
--- a/webapp/sass/routes/_signup.scss
+++ b/webapp/sass/routes/_signup.scss
@@ -200,7 +200,7 @@
             display: block;
             height: 40px;
             line-height: 34px;
-            margin: 1em 1rem;
+            margin: 1em 0;
             min-width: 200px;
             padding: 0 1em;
             width: 200px;
diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx
index ac12edb82..04044746b 100644
--- a/webapp/utils/utils.jsx
+++ b/webapp/utils/utils.jsx
@@ -651,7 +651,7 @@ export function applyTheme(theme) {
     }
 
     if (theme.sidebarHeaderBg) {
-        changeCss('.sidebar--left .team__header, .sidebar--menu .team__header, .post-list__timestamp', 'background:' + theme.sidebarHeaderBg, 1);
+        changeCss('.sidebar--left .team__header, .sidebar--menu .team__header, .post-list__timestamp > div', 'background:' + theme.sidebarHeaderBg, 1);
         changeCss('.modal .modal-header', 'background:' + theme.sidebarHeaderBg, 1);
         changeCss('#navbar .navbar-default', 'background:' + theme.sidebarHeaderBg, 1);
         changeCss('@media(max-width: 768px){.search-bar__container', 'background:' + theme.sidebarHeaderBg, 1);
@@ -659,7 +659,7 @@ export function applyTheme(theme) {
     }
 
     if (theme.sidebarHeaderTextColor) {
-        changeCss('.sidebar--left .team__header .header__info, .sidebar--menu .team__header .header__info, .post-list__timestamp', 'color:' + theme.sidebarHeaderTextColor, 1);
+        changeCss('.sidebar--left .team__header .header__info, .sidebar--menu .team__header .header__info, .post-list__timestamp > div', 'color:' + theme.sidebarHeaderTextColor, 1);
         changeCss('.sidebar--left .team__header .navbar-right .dropdown__icon, .sidebar--menu .team__header .navbar-right .dropdown__icon', 'fill:' + theme.sidebarHeaderTextColor, 1);
         changeCss('.sidebar--left .team__header .user__name, .sidebar--menu .team__header .user__name', 'color:' + changeOpacity(theme.sidebarHeaderTextColor, 0.8), 1);
         changeCss('.sidebar--left .team__header:hover .user__name, .sidebar--menu .team__header:hover .user__name', 'color:' + theme.sidebarHeaderTextColor, 1);
-- 
cgit v1.2.3-1-g7c22