From 097257ade8b01a6f4ce4766cb844d06533bb74cf Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <Unknowngi@live.com>
Date: Thu, 13 Aug 2015 23:11:01 +0500
Subject: UI Upgrades to file overlay for uploads

---
 web/react/components/post_list.jsx            |  6 ++--
 web/react/components/post_right.jsx           |  8 +++--
 web/sass-files/sass/partials/_post.scss       | 50 ++++++++++++++++-----------
 web/sass-files/sass/partials/_post_right.scss | 23 ------------
 web/sass-files/sass/partials/_responsive.scss |  6 ++++
 5 files changed, 45 insertions(+), 48 deletions(-)

(limited to 'web')

diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx
index 756ed521d..53e8d0761 100644
--- a/web/react/components/post_list.jsx
+++ b/web/react/components/post_list.jsx
@@ -465,8 +465,10 @@ module.exports = React.createClass({
         return (
             <div>
                 <div className='center-file-overlay invisible'>
-                    <span className='center-file-help-text'>Drop a file to upload it.</span>
-                    <img className='center-file-help-picture' />
+                    <div>
+                        <i className="fa fa-upload"></i>
+                        <span>Drop a file to upload it.</span>
+                    </div>
                 </div>
                 <div ref="postlist" className="post-list-holder-by-time">
                     <div className="post-list__table">
diff --git a/web/react/components/post_right.jsx b/web/react/components/post_right.jsx
index 49c12ad9c..b772c7ee8 100644
--- a/web/react/components/post_right.jsx
+++ b/web/react/components/post_right.jsx
@@ -296,9 +296,11 @@ module.exports = React.createClass({
 
         return (
             <div className="post-right__container">
-                <div className='right-file-overlay invisible'>
-                    <span className='right-file-help-text'>Drop a file to upload it.</span>
-                    <img className='right-file-help-picture' />
+                <div className='center-file-overlay right-file-overlay invisible'>
+                    <div>
+                        <i className="fa fa-upload"></i>
+                        <span>Drop a file to upload it.</span>
+                    </div>
                 </div>
                 <div className="search-bar__container sidebar--right__search-header">{searchForm}</div>
                 <div className="sidebar-right__body">
diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss
index 0af5c01e2..614fc085b 100644
--- a/web/sass-files/sass/partials/_post.scss
+++ b/web/sass-files/sass/partials/_post.scss
@@ -106,30 +106,40 @@ body.ios {
 	}
 }
 
-#post-list {
-	.center-file-overlay {
-		top: 0px;
-		height: 100%;
-		width: 59.7%;
-		position: fixed;
-		z-index: 2147483646;
-		-moz-box-shadow: 0px 0px 3px #8a8a8a;
-		-webkit-box-shadow: 0px 0px 3px #8a8a8a;
-		box-shadow: 0px 0px 3px #8a8a8a;
+.center-file-overlay {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(0, 0, 0, 0.8);
+	text-align: center;
+	color: #FFF;
+	display: table;
+	font-size: 1.7em;
+	font-weight: 600;
+	z-index: 6;
 
-		.invisible {
-			visibility: hidden;
-		}
-		.visible {
-			visibility: visible;
-		}
-		.center-file-help-text {
+	> div {
+		display: table-cell;
+		vertical-align: middle;
+	}
 
-		}
-		.center-file-help-picture {
+	.fa {
+		display: block;
+		font-size: 2em;
+		margin: 0 0 0.3em;
+	}
 
-		}
+	.invisible {
+		visibility: hidden;
+	}
+	.visible {
+		visibility: visible;
 	}
+}
+
+#post-list {
 	.post-list-holder-by-time {
 		background: #fff;
 		overflow-y: scroll;
diff --git a/web/sass-files/sass/partials/_post_right.scss b/web/sass-files/sass/partials/_post_right.scss
index 41b7aaada..4cf3e32a1 100644
--- a/web/sass-files/sass/partials/_post_right.scss
+++ b/web/sass-files/sass/partials/_post_right.scss
@@ -1,28 +1,5 @@
 .post-right__container {
 
-	.right-file-overlay {
-		height: 100%;
-		width: 100%;
-		position: fixed;
-		z-index: 2147483646;
-		-moz-box-shadow: 0px 0px 3px #8a8a8a;
-		-webkit-box-shadow: 0px 0px 3px #8a8a8a;
-		box-shadow: 0px 0px 3px #8a8a8a;
-
-		.invisible {
-			visibility: hidden;
-		}
-		.visible {
-			visibility: visible;
-		}
-		.right-file-help-text {
-
-		}
-		.right-file-help-picture {
-
-		}
-	}
-
 	.post-right-root-message {
 		padding: 1em 1em 0;
 	}
diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss
index 47b2b6bd7..52bb5eae6 100644
--- a/web/sass-files/sass/partials/_responsive.scss
+++ b/web/sass-files/sass/partials/_responsive.scss
@@ -189,6 +189,9 @@
 }
 
 @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 {
@@ -240,6 +243,9 @@
     }
 }
 @media screen and (max-width: 768px) {
+    .center-file-overlay {
+        font-size: 1.3em;
+    }
     .date-separator, .new-separator {
         &.hovered--after {
             &:before {
-- 
cgit v1.2.3-1-g7c22