diff options
| -rw-r--r-- | web/react/components/file_upload_overlay.jsx | 16 | ||||
| -rw-r--r-- | web/sass-files/sass/partials/_post.scss | 48 | ||||
| -rw-r--r-- | web/sass-files/sass/partials/_responsive.scss | 19 | ||||
| -rw-r--r-- | web/sass-files/sass/partials/_settings.scss | 3 | ||||
| -rw-r--r-- | web/static/images/filesOverlay.png | bin | 0 -> 8392 bytes | |||
| -rw-r--r-- | web/static/images/logoWhite.png | bin | 0 -> 5876 bytes |
6 files changed, 70 insertions, 16 deletions
diff --git a/web/react/components/file_upload_overlay.jsx b/web/react/components/file_upload_overlay.jsx index 4fcee6cb0..d991dd625 100644 --- a/web/react/components/file_upload_overlay.jsx +++ b/web/react/components/file_upload_overlay.jsx @@ -12,9 +12,19 @@ export default class FileUploadOverlay extends React.Component { return ( <div className={overlayClass}> - <div> - <i className='fa fa-upload'></i> - <span>Drop a file to upload it.</span> + <div className='overlay__circle'> + <img + className='overlay__files' + src='/static/images/filesOverlay.png' + alt='Files' + /> + <span><i className='fa fa-upload'></i>{'Drop a file to upload it.'}</span> + <img + className='overlay__logo' + src='/static/images/logoWhite.png' + width='100' + alt='Logo' + /> </div> </div> ); 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..3bffe82a2 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 { @@ -639,6 +645,9 @@ } &.has-close { .btn-close { + width: 40px; + text-align: center; + right: 0; display: block; @include opacity(0.5); } diff --git a/web/sass-files/sass/partials/_settings.scss b/web/sass-files/sass/partials/_settings.scss index c4591d7b6..bc53dc0e4 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 { + background: transparent; + } .radio { label { font-weight: 600; diff --git a/web/static/images/filesOverlay.png b/web/static/images/filesOverlay.png Binary files differnew file mode 100644 index 000000000..d24da7626 --- /dev/null +++ b/web/static/images/filesOverlay.png diff --git a/web/static/images/logoWhite.png b/web/static/images/logoWhite.png Binary files differnew file mode 100644 index 000000000..11bbd4632 --- /dev/null +++ b/web/static/images/logoWhite.png |
