Merge pull request #1800 from asaadmahmoodspin/ui-improvements

Multiple UI Improvements

5 files changed, 47 insertions, 25 deletions

diff --git a/web/react/components/setting_item_min.jsx b/web/react/components/setting_item_min.jsx
index 2a72be207..ffd2061fe 100644
--- a/web/react/components/setting_item_min.jsx
+++ b/web/react/components/setting_item_min.jsx
@@ -8,7 +8,7 @@ export default class SettingItemMin extends React.Component {
             editButton = (
                 <li className='col-sm-2 section-edit'>
                     <a
-                        className='section-edit theme'
+                        className='theme'
                         href='#'
                         onClick={this.props.updateSection}
                     >
diff --git a/web/react/components/tutorial/tutorial_tip.jsx b/web/react/components/tutorial/tutorial_tip.jsx
index d7c67cc9c..03ecdabab 100644
--- a/web/react/components/tutorial/tutorial_tip.jsx
+++ b/web/react/components/tutorial/tutorial_tip.jsx
@@ -101,22 +101,24 @@ export default class TutorialTip extends React.Component {
                     <div className={'tip-overlay ' + this.props.overlayClass}>
                         <div className='arrow'></div>
                         {this.props.screens[this.state.currentScreen]}
-                        <div className='tutorial__circles'>{dots}</div>
-                        <div className='text-right'>
-                            <button
-                                className='btn btn-primary'
-                                onClick={this.handleNext}
-                            >
-                                {buttonText}
-                            </button>
-                            <div className='tip-opt'>
-                                {'Seen this before? '}
-                                <a
-                                    href='#'
-                                    onClick={this.skipTutorial}
+                        <div className='tutorial__footer'>
+                            <div className='tutorial__circles'>{dots}</div>
+                            <div className='text-right'>
+                                <button
+                                    className='btn btn-primary'
+                                    onClick={this.handleNext}
                                 >
-                                    {'Opt out of these tips.'}
-                                </a>
+                                    {buttonText}
+                                </button>
+                                <div className='tip-opt'>
+                                    {'Seen this before? '}
+                                    <a
+                                        href='#'
+                                        onClick={this.skipTutorial}
+                                    >
+                                        {'Opt out of these tips.'}
+                                    </a>
+                                </div>
                             </div>
                         </div>
                     </div>
diff --git a/web/sass-files/sass/partials/_modal.scss b/web/sass-files/sass/partials/_modal.scss
index 6f70e502f..7627f6a4c 100644
--- a/web/sass-files/sass/partials/_modal.scss
+++ b/web/sass-files/sass/partials/_modal.scss
@@ -229,6 +229,12 @@
 				height: 80%;
 			}
 
+			audio, canvas, progress, video {
+				max-width: 100%;
+				height: auto;
+				display: block;
+			}
+
 			.modal-close {
 				background: url("../images/close.png") no-repeat;
 				@include background-size(100% 100%);
diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss
index 635b46077..8491869a6 100644
--- a/web/sass-files/sass/partials/_responsive.scss
+++ b/web/sass-files/sass/partials/_responsive.scss
@@ -299,15 +299,6 @@
                 .settings-content {
                     &.minimize-settings {
                         display: block;
-                        .section-edit {
-                            position: absolute;
-                            top: 7px;
-                            right: 0;
-                            width: 50px;
-                            .fa {
-                                display: inline-block;
-                            }
-                        }
                     }
                     .section-min:hover {
                         background: none;
@@ -349,6 +340,15 @@
                 width: 100%;
             }
             .settings-content {
+                .section-edit {
+                    position: absolute;
+                    top: 14px;
+                    right: 0;
+                    padding-right: 0;
+                    .fa {
+                        display: inline-block;
+                    }
+                }
                 &.minimize-settings {
                     padding: 0;
                     display: none;
@@ -356,6 +356,9 @@
                         padding: 70px 20px 30px;
                     }
                 }
+                .section-min:hover {
+                    background: none !important;
+                }
             }
             .settings-links {
                 background: #fff;
@@ -736,6 +739,9 @@
     }
 }
 @media screen and (max-width: 480px) {
+    .tip-overlay.tip-overlay--sidebar {
+        min-height: 350px;
+    }
     .modal {
         .modal-body {
             max-height: 70%;
diff --git a/web/sass-files/sass/partials/_tutorial.scss b/web/sass-files/sass/partials/_tutorial.scss
index 9e5e1ad7a..20a15441e 100644
--- a/web/sass-files/sass/partials/_tutorial.scss
+++ b/web/sass-files/sass/partials/_tutorial.scss
@@ -32,6 +32,14 @@
     &.tip-overlay--sidebar {
         max-width: 75%;
         margin: 50px 0 0 10px;
+        min-height: 310px;
+        .tutorial__footer {
+            position: absolute;
+            width: 100%;
+            bottom: 20px;
+            left: 0;
+            padding: 0 20px;
+        }
         .arrow {
             top: 80px;
             left: -10px;