Skip to content

Fixes login UI for small popup window sizes #932

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kjetilk merged 3 commits into from
Nov 14, 2018
Merged

Fixes login UI for small popup window sizes #932

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
eb9f81f
Fixes UI for small window sizes
Nov 14, 2018
35a8126
Changed to horizontal layout
Nov 14, 2018
856df8b
Fix lock file
Nov 14, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions common/css/solid.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,3 +48,11 @@
.progress .level-4{
width: 100%;
}

.login-up-form .form-group {
margin-bottom: 5px;
}

.xs-header {
margin-top: 0px;
}
22 changes: 13 additions & 9 deletions default-views/auth/login-username-password.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
8 changes: 5 additions & 3 deletions default-views/auth/login.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Copy link
Contributor

@megoth megoth Nov 14, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just want to note that I'm also a bit skeptical of loosing this semantic too, but I'm inclined to "sacrifice" this in order to solve the original issue.

Copy link
Contributor Author

@mielvds mielvds Nov 14, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If the semantic is "Login" then it is not lost, but moved: https://github.com/solid/node-solid-server/blob/cc2d2c596e3182f4a97c513b924cc49b844feb6b/default-views/auth/login.hbs#L22
It's not ideal, but avoids getting into the CSS more.

<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">
Expand Down
Loading