Merge pull request #932 from solid/feature/popup-ui

kjetilk · web-flow · commit 6b2be224560e · 2018-11-14T13:09:52.000+01:00
Fixes login UI for small popup window sizes
diff --git a/common/css/solid.css b/common/css/solid.css
@@ -48,3 +48,11 @@
 .progress .level-4{
     width: 100%;
 }
+
+.login-up-form .form-group {
+    margin-bottom: 5px;
+}
+
+.xs-header {
+    margin-top: 0px;
+}
diff --git a/default-views/auth/login-username-password.hbs b/default-views/auth/login-username-password.hbs
@@ -1,19 +1,23 @@
 <div class="panel panel-default">
   <div class="panel-body">
-    <form method="post" action="/login/password">
+    <form method="post" action="/login/password" class="form-horizontal login-up-form">
       <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="col-xs-3 control-label" for="username">Username</label>
+        <div class="col-xs-9">
+          <input type="text" class="form-control" name="username" id="username" placeholder="Username"/>
+        </div>
       </div>
 
       <div class="form-group">
-        <div class="pull-right">
-        <a href="/account/password/reset{{#if returnToUrl}}?returnToUrl={{{returnToUrl}}}{{/if}}">
-          Forgot password?
-          </a>
+        <label class="col-xs-3 control-label" for="password">Password</label>
+        <div class="col-xs-9">
+          <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>
         </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
