Fixes UI for small window sizes

Miel Vander Sande · Miel Vander Sande · commit eb9f81fe76d6 · 2018-11-14T12:56:53.000+01:00
diff --git a/common/css/solid.css b/common/css/solid.css
@@ -48,3 +48,7 @@
 .progress .level-4{
     width: 100%;
 }
+
+.xs-header {
+    margin-top: 0;
+}
diff --git a/default-views/auth/login-username-password.hbs b/default-views/auth/login-username-password.hbs
@@ -2,18 +2,18 @@
   <div class="panel-body">
     <form method="post" action="/login/password">
       <div class="form-group">
-        <label class="control-label" for="username">Username</label>
-        <input type="text" class="form-control" name="username" id="username" placeholder="alice"/>
+        <label class="control-label hidden-xs" for="username">Username</label>
+        <input type="text" class="form-control" name="username" id="username" placeholder="Username"/>
       </div>
 
       <div class="form-group">
-        <div class="pull-right">
+        <label class="control-label hidden-xs" for="password">Password</label>
+        <input type="password" class="form-control" name="password" id="password" placeholder="Password"/>
+                <div class="pull-right">
         <a href="/account/password/reset{{#if returnToUrl}}?returnToUrl={{{returnToUrl}}}{{/if}}">
           Forgot password?
           </a>
         </div>
-        <label class="control-label" for="password">Password</label>
-        <input type="password" class="form-control" name="password" id="password"/>
       </div>
 
       <button type="submit" class="btn btn-primary" id="login">Log In</button>
diff --git a/default-views/auth/login.hbs b/default-views/auth/login.hbs
@@ -8,16 +8,18 @@
   <link rel="stylesheet" href="/common/css/solid.css">
 </head>
 <body>
-<div class="container">
-  <div class="page-header">
+<div class="container-fluid">
+  <div class="page-header hidden-xs hidden-sm">
     <h1>Login</h1>
   </div>
+  
 
   {{> shared/error}}
 
-  <div class="row">
+  <div class="row visible-xs-inline visible-lg-block visible-md-block visible-sm-block">
     <div class="col-md-6">
       {{#if enablePassword}}
+        <h4 class="visible-xs visible-sm xs-header">Login</h4>
         {{> auth/login-username-password}}
       {{/if}}
       <div class="visible-md visible-lg">
diff --git a/package-lock.json b/package-lock.json

Original file line number	Diff line number	Diff line change
`@@ -48,3 +48,7 @@`
`48`	`48`	`.progress .level-4{`
`49`	`49`	`width: 100%;`
`50`	`50`	`}`
	`51`	`+`
	`52`	`+.xs-header {`
	`53`	`+ margin-top: 0;`
	`54`	`+}`