Skip to content
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

Jump to bottom

(Re-)Center login forms [not urgent] #7909

Merged
merged 3 commits into from
Jul 3, 2024
Merged

(Re-)Center login forms [not urgent] #7909

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
12e1667
center login forms
MichaelBuessemeyer Jun 28, 2024
f1c4e4e
add changelog entry
MichaelBuessemeyer Jun 28, 2024
ff14f5e
proposal: stlye "try logging in" page like regular login page
hotzenklotz Jul 1, 2024
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
1 change: 1 addition & 0 deletions CHANGELOG.unreleased.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
### Fixed
- Fixed a bug where the warning to zoom in to see the agglomerate mapping was shown to the user even when the 3D viewport was maximized and no volume data was shown. [#7865](https://github.com/scalableminds/webknossos/issues/7865)
- Fixed a bug that prevented saving new dataset settings. [#7903](https://github.com/scalableminds/webknossos/pull/7903)
- Fixed that on large screens the login forms were not horizontally centered. [#7909](https://github.com/scalableminds/webknossos/pull/7909)
- Fixed a bug where brushing on a fallback segmentation with active mapping and with segment index file would lead to failed saves. [#7833](https://github.com/scalableminds/webknossos/pull/7833)
- Fixed a bug where the "Hide Meshes" / "Show Meshes" options of the context menu for segment groups were not available although at leas one mesh was set to visible / invisible. [#7890](https://github.com/scalableminds/webknossos/pull/7890)
- Fixed a bug where sometimes old mismatching javascript code would be served after upgrades. [#7854](https://github.com/scalableminds/webknossos/pull/7854)
Expand Down
2 changes: 1 addition & 1 deletion frontend/javascripts/admin/auth/login_view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ function LoginView({ history, redirect }: Props) {
return (
<Row justify="center" align="middle" className="login-view">
<Col xs={22} sm={20} md={16} lg={12} xl={8}>
<Card className="login-content">
<Card className="login-content" style={{ margin: "0 auto" }}>
Copy link
Member

@hotzenklotz hotzenklotz Jun 28, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

Die row in Zeile 31 centered doch schon den content. Ich versteh das nicht?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

The row centers its children, thats correct. Thus, the column is centered. But the Card (child of the column) does not fill the columns full width in case of large screens. In that scenario the Card just starts at the left edge of the column and is therefore not centered on large screens. Thist margin auto fix, mitigates this and the result is a centered login view.

Copy link
Member

@hotzenklotz hotzenklotz Jul 1, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

Right. In that case I would add the margin: auto style to the login-content CSS class/Less file directly. That way "Sign up" and "Reset Password" also profit from theses changes.

EDIT: I included this suggestion in my proposal commit ff14f5e

<h3>Login</h3>
<LoginForm layout="horizontal" onLoggedIn={onLoggedIn} />
</Card>
Expand Down
20 changes: 7 additions & 13 deletions frontend/javascripts/components/brain_spinner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { AsyncButton } from "components/async_clickables";
import { switchToOrganization } from "admin/admin_rest_api";
import messages from "messages";
import { Link } from "react-router-dom";
import { Button, Col, Row } from "antd";
import { Button, Card, Col, Row } from "antd";
import LoginForm from "admin/auth/login_form";

type Props = {
Expand Down Expand Up @@ -98,19 +98,13 @@ export function BrainSpinnerWithError({

export function CoverWithLogin({ onLoggedIn }: { onLoggedIn: () => void }) {
return (
<div className="cover-whole-screen">
<Row
justify="center"
style={{
padding: 50,
}}
align="middle"
>
<Col xs={22} sm={20} md={16} lg={12} xl={8}>
<Row justify="center" align="middle" className="login-view">
<Col xs={22} sm={20} md={16} lg={12} xl={8}>
<Card className="login-content">
<h3>Try logging in to view the dataset.</h3>
<LoginForm layout="horizontal" onLoggedIn={onLoggedIn} />
</Col>
</Row>
</div>
</Card>
</Col>
</Row>
);
}
5 changes: 3 additions & 2 deletions frontend/stylesheets/main.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -616,11 +616,12 @@ button.narrow {
min-height: calc(100vh - var(--navbar-height));
background: var(--background-blue-neurons);
}

.login-content {
max-width: 600px;
padding: 80px;

margin: 0 auto;

@media @smartphones {
padding: 20px;
margin: 20px;
Expand Down