diff options
Diffstat (limited to 'web')
| -rw-r--r-- | web/react/components/post_list.jsx | 6 | ||||
| -rw-r--r-- | web/react/components/post_right.jsx | 8 | ||||
| -rw-r--r-- | web/sass-files/sass/partials/_post.scss | 50 | ||||
| -rw-r--r-- | web/sass-files/sass/partials/_post_right.scss | 23 | ||||
| -rw-r--r-- | web/sass-files/sass/partials/_responsive.scss | 6 |
5 files changed, 45 insertions, 48 deletions
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 { |