voussoir/etiquette
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Redo login.html css to be grid based.

Browse source
This commit is contained in:
voussoir 2019-08-26 14:54:29 -07:00
parent 42be44a509
commit ff72a5d26c
1 changed files with 35 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

72
frontends/etiquette_flask/templates/login.html
View file

@ -22,44 +22,44 @@ button
#content_body #content_body
{ {
max-width: 900px;
margin: auto; margin: auto;
grid-template:
"login_form register_form" auto
"message_area message_area" auto
/ 1fr 1fr;
} }
#login_register_box form
{ {
display: flex; display: grid;
flex-direction: row; grid-auto-rows: max-content;
flex: 0 0 auto; grid-row-gap: 8px;
margin: 0;
} }
form h2
#login_form,
#register_form
{ {
display: flex; margin: 0;
flex-direction: column;
margin: 8px;
}
#login_form > *,
#register_form > *
{
margin-top: 5px;
margin-bottom: 5px;
} }
#login_form { grid-area: login_form; }
#register_form { grid-area: register_form; }
#message_area #message_area
{ {
grid-area: message_area;
width: 100%; width: 100%;
height: 150px; height: 150px;
} }
@media screen and (max-width: 800px) @media screen and (max-width: 800px)
{ {
#login_register_box #content_body
{ {
flex-direction: column; grid-template:
"login_form" auto
"register_form" auto
"message_area" auto
/ 1fr;
} }
} }
</style> </style>
</head> </head>
@ -67,22 +67,20 @@ button
<body> <body>
{{header.make_header(session=session)}} {{header.make_header(session=session)}}
<div id="content_body"> <div id="content_body">
<div id="login_register_box"> <form id="login_form" class="panel" action="/login" method="post">
<form id="login_form" class="panel" action="/login" method="post"> <h2>Log in</h2>
<h2>Log in</h2> <input type="text" id="login_input_username" name="username" placeholder="username" autofocus>
<input type="text" id="login_input_username" name="username" placeholder="username" autofocus> <input type="password" id="login_input_password" name="password" placeholder="password">
<input type="password" id="login_input_password" name="password" placeholder="password"> <button type="submit" id="login_submit_button" class="green_button" onclick="login_form(event)">Log in</button>
<button type="submit" id="login_submit_button" class="green_button" onclick="login_form(event)">Log in</button> </form>
</form> <form id="register_form" class="panel" action="/register" method="post">
<form id="register_form" class="panel" action="/register" method="post"> <h2>Register</h2>
<h2>Register</h2> <input type="text" id="register_input_username" name="username" placeholder="username (at least {{min_username_length}})">
<input type="text" id="register_input_username" name="username" placeholder="username (at least {{min_username_length}})"> <input type="text" id="register_input_display_name" name="display_name" placeholder="display name (optional)">
<input type="text" id="register_input_display_name" name="display_name" placeholder="display name (optional)"> <input type="password" id="register_input_password_1" name="password_1" placeholder="password (at least {{min_password_length}})">
<input type="password" id="register_input_password_1" name="password_1" placeholder="password (at least {{min_password_length}})"> <input type="password" id="register_input_password_2" name="password_2" placeholder="password again">
<input type="password" id="register_input_password_2" name="password_2" placeholder="password again"> <button type="submit" id="register_input_button" class="green_button" onclick="register_form(event)">Register</button>
<button type="submit" id="register_input_button" class="green_button" onclick="register_form(event)">Register</button> </form>
</form>
</div>
<div id="message_area"> <div id="message_area">
</div> </div>
</div> </div>