make login more mobile friendly

Author: mheidinger

static/style/common.css

@@ -13,6 +13,34 @@ main {
 	height: 1.8em;
 }
 
+/* Mobile optimizations */
+@media only screen and (max-width: 600px) {
+	.brand-logo {
+		font-size: 1.2rem;
+		left: 0.5rem;
+	}
+	
+	.brand-logo img {
+		height: 1.4em;
+	}
+	
+	nav .right {
+		font-size: 0.9rem;
+	}
+	
+	nav .right a {
+		padding: 0 0.5rem;
+	}
+	
+	.container {
+		width: 95%;
+	}
+	
+	.page-footer .container {
+		font-size: 0.9rem;
+	}
+}
+
 .page-footer {
 	padding-bottom: 1em;
 }

templates/base.html

@@ -22,13 +22,14 @@
         <div class="nav-wrapper container">
           <a href="/" class="brand-logo">
             <img src="/static/images/logo.png">
-            TraefikAccessControl - {{template "title"}}
+            <span class="hide-on-small-only">TraefikAccessControl - {{template "title"}}</span>
+            <span class="hide-on-med-and-up">TAC</span>
           </a>
           {{if .user}}
           <div class="right">
             {{if .user.IsAdmin}}
             <a href="/admin">Admin Area</a>
-            |
+            <span class="hide-on-small-only">|</span>
             {{end}}
             <a href="/logout">Logout</a>
             {{end}}
@@ -39,14 +40,14 @@
 
     <main>
       <div class="row">
-        <div class="col s2"></div>
+        <div class="col s12 m1 l2"></div>
 
-        <div class="col s8">
+        <div class="col s12 m10 l8">
           {{template "body" .}}
         </div>
 
         {{if .error}}
-        <div class="col s2">
+        <div class="col s12 m12 l2">
           <div class="card red darken-1" id="infoCard">
             <div class="card-content white-text">
               <span class="card-title">Error</span>
@@ -57,7 +58,7 @@
         {{end}}
 
         {{if .success}}
-        <div class="col s2">
+        <div class="col s12 m12 l2">
           <div class="card green darken-1" id="infoCard">
             <div class="card-content white-text">
               <span class="card-title">Success</span>

templates/login.html

@@ -6,25 +6,27 @@ <h1 class="header center orange-text">Login</h1>
 
 	<form class="container valign" method="post">
 		<div class="row">
-			<div class="input-field">
+			<div class="input-field col s12">
 				<i class="material-icons prefix">account_circle</i>
 				<input id="username" name="username" type="text" class="validate">
 				<label for="username">Username</label>
 			</div>
 		</div>
 		<div class="row">
-			<div class="input-field">
+			<div class="input-field col s12">
 				<i class="material-icons prefix">vpn_key</i>
 				<input id="password" name="password" type="password" class="validate">
 				<label for="password">Password</label>
 			</div>
 		</div>
 		<div class="row">
-			<div class="col s10"></div>
-			<button class="btn waves-effect waves-light col s2" type="submit" name="action">
-				Login
-				<i class="material-icons right">send</i>
-			</button>
+			<div class="col s12 m10 l10"></div>
+			<div class="col s12 m2 l2">
+				<button class="btn waves-effect waves-light" type="submit" name="action" style="width: 100%;">
+					Login
+					<i class="material-icons right">send</i>
+				</button>
+			</div>
 		</div>
 	</form>
 </div>