From ff72a5d26c51c34d3f7ced3591b5629132efe020 Mon Sep 17 00:00:00 2001 From: Ethan Dalool Date: Mon, 26 Aug 2019 14:54:29 -0700 Subject: [PATCH] Redo login.html css to be grid based. --- .../etiquette_flask/templates/login.html | 72 +++++++++---------- 1 file changed, 35 insertions(+), 37 deletions(-) diff --git a/frontends/etiquette_flask/templates/login.html b/frontends/etiquette_flask/templates/login.html index fefcd93..0790a16 100644 --- a/frontends/etiquette_flask/templates/login.html +++ b/frontends/etiquette_flask/templates/login.html @@ -22,44 +22,44 @@ button #content_body { - max-width: 900px; margin: auto; + grid-template: + "login_form register_form" auto + "message_area message_area" auto + / 1fr 1fr; } -#login_register_box +form { - display: flex; - flex-direction: row; - flex: 0 0 auto; + display: grid; + grid-auto-rows: max-content; + grid-row-gap: 8px; + margin: 0; } - -#login_form, -#register_form +form h2 { - display: flex; - flex-direction: column; - - margin: 8px; -} -#login_form > *, -#register_form > * -{ - margin-top: 5px; - margin-bottom: 5px; + margin: 0; } +#login_form { grid-area: login_form; } +#register_form { grid-area: register_form; } #message_area { + grid-area: message_area; width: 100%; height: 150px; } + @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; } } - @@ -67,22 +67,20 @@ button {{header.make_header(session=session)}}
-
-
-

Log in

- - - -
-
-

Register

- - - - - -
-
+
+

Log in

+ + + +
+
+

Register

+ + + + + +