fix: Improvements to mobile UI (argoproj#5965)

Signed-off-by: Marcus Noble <github@marcusnoble.co.uk>
abc-dp · Apr 7, 2021 · 2a2b81f · 2a2b81f
1 parent f06fc0d
commit 2a2b81f
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 4 deletions.
diff --git a/ui/src/app/login/components/login.tsx b/ui/src/app/login/components/login.tsx
@@ -51,7 +51,7 @@ export class Login extends React.Component<RouteComponentProps<{}>, State> {
         const ssoConfigured = authSettings && ((authSettings.dexConfig && (authSettings.dexConfig.connectors || []).length > 0) || authSettings.oidcConfig);
         return (
             <div className='login'>
-                <div className='login__content'>
+                <div className='login__content show-for-medium'>
                     <div className='login__text'>Let's get stuff deployed!</div>
                     <div className='argo__logo' />
                 </div>
@@ -87,7 +87,7 @@ export class Login extends React.Component<RouteComponentProps<{}>, State> {
                             {formApi => (
                                 <form role='form' className='width-control' onSubmit={formApi.submitForm}>
                                     <div className='argo-form-row'>
-                                        <FormField formApi={formApi} label='Username' field='username' component={Text} />
+                                        <FormField formApi={formApi} label='Username' field='username' component={Text} componentProps={{autoCapitalize: 'none'}} />
                                     </div>
                                     <div className='argo-form-row'>
                                         <FormField formApi={formApi} label='Password' field='password' component={Text} componentProps={{type: 'password'}} />

diff --git a/ui/src/app/shared/components/page/page.scss b/ui/src/app/shared/components/page/page.scss
@@ -2,6 +2,37 @@
 
 .page-wrapper {
     .page {
+        @media (max-width: map-get($breakpoints, medium)) {
+            &--has-toolbar {
+                padding-top: 0
+            }
+
+            &--has-toolbar &__top-bar {
+                height: auto;
+                position: initial;
+
+                .top-bar.row > div {
+                    max-width: 100%;
+                    flex: 0 0 100%;
+                    text-align: center;
+
+                    &.top-bar__right-side > div {
+                        display: inline-block;
+                    }
+
+                    & > div {
+                        display: flex;
+                        flex-wrap: wrap;
+                        justify-content: center;
+
+                        button {
+                            margin-bottom: 2px
+                        }
+                    }
+                }
+            }
+        }
+
         $single-toolbar-height: 50px;
         &--has-toolbar {
             padding-top: $single-toolbar-height;
@@ -24,4 +55,4 @@
     &:hover {
         color: $argo-color-teal-5;
     }
-} 
+}
diff --git a/ui/src/app/shared/components/paginate/paginate.scss b/ui/src/app/shared/components/paginate/paginate.scss
@@ -4,13 +4,31 @@
     position: relative;
     height: 25px;
 
+
+    @media (max-width: map-get($breakpoints, medium)) {
+        & {
+            position: initial;
+            height: auto;
+            text-align: center;
+        }
+
+        li.previous,
+        li.next {
+            display: none;
+        }
+
+        &__size-menu {
+            position: initial;
+        }
+    }
+
     &__paginator {
         ul {
             display: inline-block;
             margin: 0;
             padding: 0;
         }
-    
+
         li {
             display: inline-block;
             margin-right: 1em;