Browse Source

simplify login form

Andrew Dolgov 9 months ago
parent
commit
4f720f906e
8 changed files with 224 additions and 206 deletions
  1. 36 33
      css/default.css
  2. 1 1
      css/default.css.map
  3. 42 34
      css/tt-rss.less
  4. 71 70
      include/login_form.php
  5. 36 33
      themes/night.css
  6. 1 1
      themes/night.css.map
  7. 36 33
      themes/night_blue.css
  8. 1 1
      themes/night_blue.css.map

+ 36 - 33
css/default.css

@@ -914,43 +914,51 @@ body.ttrss_main #feedEditDlg img.feedIcon {
   height: auto;
   width: auto;
 }
-body.ttrss_login {
-  padding: 2em;
-  font-size: 14px;
+body.ttrss_login .container {
+  background: #f5f5f5;
+  color: black;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  position: absolute;
 }
-body.ttrss_login fieldset {
-  margin-left: auto;
-  margin-right: auto;
-  display: block;
-  width: 400px;
-  border-width: 0px;
+body.ttrss_login .container .footer {
+  text-align: center;
+  padding: 10px;
+}
+body.ttrss_login .container .center {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  flex-grow: 1;
+  justify-content: center;
+}
+body.ttrss_login .container .center .login-form {
+  background: white;
+  padding: 20px;
+  border: 1px solid #ddd;
+  box-shadow: 0px 1px 1px -1px rgba(0, 0, 0, 0.1);
 }
-body.ttrss_login label {
+body.ttrss_login .container .center .login-form form {
+  margin: 0px;
+}
+body.ttrss_login fieldset > label:first-of-type {
   width: 120px;
   margin-right: 20px;
   display: inline-block;
   text-align: right;
-  color: gray;
+  font-weight: bold;
 }
-body.ttrss_login div.header {
-  border: 0px solid #257aa7;
-  border-bottom-width: 1px;
-  margin-bottom: 1em;
-  padding-bottom: 5px;
+body.ttrss_login fieldset {
+  border-width: 0;
+  padding: 5px 0px;
 }
-body.ttrss_login div.footer {
-  margin-top: 1em;
-  padding-top: 5px;
-  border: 0px solid #257aa7;
-  border-top-width: 1px;
-  text-align: center;
-  color: gray;
-  font-size: 12px;
+body.ttrss_login fieldset.narrow {
+  padding: 2px 0px;
 }
-body.ttrss_login a.forgotpass {
+body.ttrss_login fieldset.align-right {
   text-align: right;
-  font-size: 11px;
-  display: inline-block;
 }
 body.ttrss_login a {
   color: #257aa7;
@@ -968,12 +976,7 @@ body.ttrss_login div.footer a:hover {
   color: #257aa7;
 }
 body.ttrss_login div.row {
-  padding: 0px 0px 5px 0px;
-}
-body.ttrss_login div.row-error {
-  color: red;
-  text-align: center;
-  padding: 0px 0px 5px 0px;
+  padding-bottom: 5px;
 }
 body.ttrss_main .dijitDialog h1:first-of-type,
 body.ttrss_main .dijitDialog h2:first-of-type,

File diff suppressed because it is too large
+ 1 - 1
css/default.css.map


+ 42 - 34
css/tt-rss.less

@@ -1086,46 +1086,60 @@ body.ttrss_main {
 }
 
 body.ttrss_login {
-	padding : 2em;
-	font-size : 14px;
 
-	fieldset {
-		margin-left : auto;
-		margin-right : auto;
-		display : block;
-		width : 400px;
-		border-width : 0px;
+	.container {
+		background : @color-panel-bg;
+		color : @default-fg;
+		display : flex;
+		flex-direction: column;
+		width : 100%;
+		height : 100%;
+		position : absolute;
+
+		.footer {
+			text-align : center;
+			padding : 10px;
+		}
+
+		.center {
+			width : 100%;
+			display : flex;
+			align-items: center;
+			flex-grow : 1;
+			justify-content : center;
+
+			.login-form {
+				form {
+					margin : 0px;
+				}
+
+				background : white;
+				padding : 20px;
+				border : 1px solid #ddd;
+				box-shadow : 0px 1px 1px -1px rgba(0,0,0,0.1);
+			}
+		}
 	}
 
-	label {
+	fieldset > label:first-of-type {
 		width : 120px;
 		margin-right : 20px;
 		display : inline-block;
 		text-align : right;
-		color : gray;
+		font-weight : bold;
 	}
 
-	div.header {
-		border: 0px solid @color-accent;
-		border-bottom-width: 1px;
-		margin-bottom : 1em;
-		padding-bottom : 5px;
+	fieldset {
+		border-width : 0;
+		padding : 5px 0px;
 	}
 
-	div.footer {
-		margin-top : 1em;
-		padding-top : 5px;
-		border: 0px solid @color-accent;
-		border-top-width: 1px;
-		text-align : center;
-		color : gray;
-		font-size : 12px;
+	fieldset.narrow {
+		padding : 2px 0px;
 	}
 
-	a.forgotpass {
+	fieldset.align-right {
 		text-align : right;
-		font-size : 11px;
-		display : inline-block;
 	}
 
 	a {
@@ -1148,13 +1162,7 @@ body.ttrss_login {
 	}
 
 	div.row {
-		padding : 0px 0px 5px 0px;
-	}
-
-	div.row-error {
-		color : red;
-		text-align : center;
-		padding : 0px 0px 5px 0px;
+		padding-bottom : 5px;
 	}
 }
 
@@ -1277,4 +1285,4 @@ body.ttrss_main {
 
 video::-webkit-media-controls-overlay-play-button {
 	display: none;
-}
+}

+ 71 - 70
include/login_form.php

@@ -62,95 +62,96 @@ function bwLimitChange(elem) {
 
 <?php $return = urlencode($_SERVER["REQUEST_URI"]) ?>
 
-<form action="public.php?return=<?php echo $return ?>"
-	dojoType="dijit.form.Form" method="POST" id="loginForm" name="loginForm">
+<div class="container">
 
-<input dojoType="dijit.form.TextBox" style="display : none" name="op" value="login">
+	<div class="center">
+		<div class="login-form">
 
-<div class='header'>
-	<img src="images/logo_wide.png">
-</div>
+			<form action="public.php?return=<?php echo $return ?>"
+				  dojoType="dijit.form.Form" method="POST">
 
-<div class='form'>
+				<?php print_hidden("op", "login"); ?>
 
-	<fieldset>
-		<?php if ($_SESSION["login_error_msg"]) { ?>
-		<div class="row-error">
-			<?php echo $_SESSION["login_error_msg"] ?>
-		</div>
-			<?php $_SESSION["login_error_msg"] = ""; ?>
-		<?php } ?>
-		<div class="row">
-			<label><?php echo __("Login:") ?></label>
-			<input name="login" id="login" dojoType="dijit.form.TextBox" type="text"
-				onchange="fetchProfiles()" onfocus="fetchProfiles()" onblur="fetchProfiles()"
-				style="width : 220px"
-				required="1"
-				value="<?php echo $_SESSION["fake_login"] ?>" />
-		</div>
+				<?php if ($_SESSION["login_error_msg"]) { ?>
+					<?php echo format_error($_SESSION["login_error_msg"]) ?>
+					<?php $_SESSION["login_error_msg"] = ""; ?>
+				<?php } ?>
 
+				<fieldset>
+					<label><?php echo __("Login:") ?></label>
+					<input name="login" id="login" dojoType="dijit.form.TextBox" type="text"
+						   onchange="fetchProfiles()" onfocus="fetchProfiles()" onblur="fetchProfiles()"
+						   required="1" value="<?php echo $_SESSION["fake_login"] ?>" />
+				</fieldset>
 
-		<div class="row">
-			<label><?php echo __("Password:") ?></label>
-			<input type="password" name="password" required="1"
-                    dojoType="dijit.form.TextBox"
-					style="width : 220px" class="input input-text"
-					value="<?php echo $_SESSION["fake_password"] ?>"/>
-			<label></label>
-		<?php if (strpos(PLUGINS, "auth_internal") !== FALSE) { ?>
-			<a class='forgotpass' href="public.php?op=forgotpass"><?php echo __("I forgot my password") ?></a>
-		<?php } ?>
-		</div>
+				<fieldset>
+					<label><?php echo __("Password:") ?></label>
 
+					<input type="password" name="password" required="1"
+						   dojoType="dijit.form.TextBox"
+						   class="input input-text"
+						   value="<?php echo $_SESSION["fake_password"] ?>"/>
 
-		<div class="row">
-			<label><?php echo __("Profile:") ?></label>
+					<?php if (strpos(PLUGINS, "auth_internal") !== FALSE) { ?>
+						<a href="public.php?op=forgotpass"><?php echo __("I forgot my password") ?></a>
+					<?php } ?>
+				</fieldset>
 
-			<select disabled='disabled' name="profile" id="profile" dojoType='dijit.form.Select'
-				style='width : 220px; margin : 0px'>
-				<option><?php echo __("Default profile") ?></option></select>
+				<fieldset>
+					<label><?php echo __("Profile:") ?></label>
 
-		</div>
+					<select disabled='disabled' name="profile" id="profile" dojoType='dijit.form.Select'>
+						<option><?php echo __("Default profile") ?></option>
+					</select>
+				</fieldset>
 
-		<div class="row">
-			<label>&nbsp;</label>
-			<input dojoType="dijit.form.CheckBox" name="bw_limit" id="bw_limit" type="checkbox"
-				onchange="bwLimitChange(this)">
-			<label id="bw_limit_label" style='display : inline' for="bw_limit"><?php echo __("Use less traffic") ?></label>
-		</div>
+				<fieldset class="narrow">
+					<label> </label>
 
-		<div dojoType="dijit.Tooltip" connectId="bw_limit_label" position="below" style="display:none">
-        <?php echo __("Does not display images in articles, reduces automatic refreshes."); ?>
-		</div>
+					<label id="bw_limit_label"><input dojoType="dijit.form.CheckBox" name="bw_limit" id="bw_limit"
+						  type="checkbox" onchange="bwLimitChange(this)">
+						<?php echo __("Use less traffic") ?></label>
+				</fieldset>
 
-		<?php if (SESSION_COOKIE_LIFETIME > 0) { ?>
+				<div dojoType="dijit.Tooltip" connectId="bw_limit_label" position="below" style="display:none">
+					<?php echo __("Does not display images in articles, reduces automatic refreshes."); ?>
+				</div>
 
-		<div class="row">
-			<label>&nbsp;</label>
-			<input dojoType="dijit.form.CheckBox" name="remember_me" id="remember_me" type="checkbox">
-			<label style='display : inline' for="remember_me"><?php echo __("Remember me") ?></label>
-		</div>
+				<?php if (SESSION_COOKIE_LIFETIME > 0) { ?>
 
-		<?php } ?>
+					<fieldset class="narrow">
+						<label> </label>
+						<label>
+							<input dojoType="dijit.form.CheckBox" name="remember_me" id="remember_me" type="checkbox">
+							<?php echo __("Remember me") ?>
+						</label>
+					</fieldset>
 
-		<div class="row" style='text-align : right'>
-			<button dojoType="dijit.form.Button" type="submit"><?php echo __('Log in') ?></button>
-			<?php if (defined('ENABLE_REGISTRATION') && ENABLE_REGISTRATION) { ?>
-				<button onclick="return gotoRegForm()" dojoType="dijit.form.Button">
-					<?php echo __("Create new account") ?></button>
-			<?php } ?>
-		</div>
+				<?php } ?>
 
-	</fieldset>
+				<hr/>
 
+				<fieldset class="align-right">
+					<label> </label>
 
-</div>
+					<button dojoType="dijit.form.Button" type="submit" class="alt-primary"><?php echo __('Log in') ?></button>
 
-<div class='footer'>
-	<a href="http://tt-rss.org/">Tiny Tiny RSS</a>
-	&copy; 2005&ndash;<?php echo date('Y') ?> <a href="http://fakecake.org/">Andrew Dolgov</a>
-</div>
+					<?php if (defined('ENABLE_REGISTRATION') && ENABLE_REGISTRATION) { ?>
+						<button onclick="return gotoRegForm()" dojoType="dijit.form.Button">
+							<?php echo __("Create new account") ?></button>
+					<?php } ?>
+				</fieldset>
 
-</form>
+			</form>
+		</div>
+	</div>
+
+	<div class="footer">
+		<a href="https://tt-rss.org/">Tiny Tiny RSS</a>
+		&copy; 2005&ndash;<?php echo date('Y') ?> <a href="https://fakecake.org/">Andrew Dolgov</a>
+	</div>
+
+</div>
 
-</body></html>
+</body>
+</html>

+ 36 - 33
themes/night.css

@@ -915,43 +915,51 @@ body.ttrss_main #feedEditDlg img.feedIcon {
   height: auto;
   width: auto;
 }
-body.ttrss_login {
-  padding: 2em;
-  font-size: 14px;
+body.ttrss_login .container {
+  background: #222;
+  color: #ccc;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  position: absolute;
 }
-body.ttrss_login fieldset {
-  margin-left: auto;
-  margin-right: auto;
-  display: block;
-  width: 400px;
-  border-width: 0px;
+body.ttrss_login .container .footer {
+  text-align: center;
+  padding: 10px;
+}
+body.ttrss_login .container .center {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  flex-grow: 1;
+  justify-content: center;
+}
+body.ttrss_login .container .center .login-form {
+  background: white;
+  padding: 20px;
+  border: 1px solid #ddd;
+  box-shadow: 0px 1px 1px -1px rgba(0, 0, 0, 0.1);
 }
-body.ttrss_login label {
+body.ttrss_login .container .center .login-form form {
+  margin: 0px;
+}
+body.ttrss_login fieldset > label:first-of-type {
   width: 120px;
   margin-right: 20px;
   display: inline-block;
   text-align: right;
-  color: gray;
+  font-weight: bold;
 }
-body.ttrss_login div.header {
-  border: 0px solid #b87d2c;
-  border-bottom-width: 1px;
-  margin-bottom: 1em;
-  padding-bottom: 5px;
+body.ttrss_login fieldset {
+  border-width: 0;
+  padding: 5px 0px;
 }
-body.ttrss_login div.footer {
-  margin-top: 1em;
-  padding-top: 5px;
-  border: 0px solid #b87d2c;
-  border-top-width: 1px;
-  text-align: center;
-  color: gray;
-  font-size: 12px;
+body.ttrss_login fieldset.narrow {
+  padding: 2px 0px;
 }
-body.ttrss_login a.forgotpass {
+body.ttrss_login fieldset.align-right {
   text-align: right;
-  font-size: 11px;
-  display: inline-block;
 }
 body.ttrss_login a {
   color: #b87d2c;
@@ -969,12 +977,7 @@ body.ttrss_login div.footer a:hover {
   color: #b87d2c;
 }
 body.ttrss_login div.row {
-  padding: 0px 0px 5px 0px;
-}
-body.ttrss_login div.row-error {
-  color: red;
-  text-align: center;
-  padding: 0px 0px 5px 0px;
+  padding-bottom: 5px;
 }
 body.ttrss_main .dijitDialog h1:first-of-type,
 body.ttrss_main .dijitDialog h2:first-of-type,

File diff suppressed because it is too large
+ 1 - 1
themes/night.css.map


+ 36 - 33
themes/night_blue.css

@@ -915,43 +915,51 @@ body.ttrss_main #feedEditDlg img.feedIcon {
   height: auto;
   width: auto;
 }
-body.ttrss_login {
-  padding: 2em;
-  font-size: 14px;
+body.ttrss_login .container {
+  background: #222;
+  color: #ccc;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  position: absolute;
 }
-body.ttrss_login fieldset {
-  margin-left: auto;
-  margin-right: auto;
-  display: block;
-  width: 400px;
-  border-width: 0px;
+body.ttrss_login .container .footer {
+  text-align: center;
+  padding: 10px;
+}
+body.ttrss_login .container .center {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  flex-grow: 1;
+  justify-content: center;
+}
+body.ttrss_login .container .center .login-form {
+  background: white;
+  padding: 20px;
+  border: 1px solid #ddd;
+  box-shadow: 0px 1px 1px -1px rgba(0, 0, 0, 0.1);
 }
-body.ttrss_login label {
+body.ttrss_login .container .center .login-form form {
+  margin: 0px;
+}
+body.ttrss_login fieldset > label:first-of-type {
   width: 120px;
   margin-right: 20px;
   display: inline-block;
   text-align: right;
-  color: gray;
+  font-weight: bold;
 }
-body.ttrss_login div.header {
-  border: 0px solid #257aa7;
-  border-bottom-width: 1px;
-  margin-bottom: 1em;
-  padding-bottom: 5px;
+body.ttrss_login fieldset {
+  border-width: 0;
+  padding: 5px 0px;
 }
-body.ttrss_login div.footer {
-  margin-top: 1em;
-  padding-top: 5px;
-  border: 0px solid #257aa7;
-  border-top-width: 1px;
-  text-align: center;
-  color: gray;
-  font-size: 12px;
+body.ttrss_login fieldset.narrow {
+  padding: 2px 0px;
 }
-body.ttrss_login a.forgotpass {
+body.ttrss_login fieldset.align-right {
   text-align: right;
-  font-size: 11px;
-  display: inline-block;
 }
 body.ttrss_login a {
   color: #257aa7;
@@ -969,12 +977,7 @@ body.ttrss_login div.footer a:hover {
   color: #257aa7;
 }
 body.ttrss_login div.row {
-  padding: 0px 0px 5px 0px;
-}
-body.ttrss_login div.row-error {
-  color: red;
-  text-align: center;
-  padding: 0px 0px 5px 0px;
+  padding-bottom: 5px;
 }
 body.ttrss_main .dijitDialog h1:first-of-type,
 body.ttrss_main .dijitDialog h2:first-of-type,

File diff suppressed because it is too large
+ 1 - 1
themes/night_blue.css.map