Update attendance view template

Fix base.html
Ayukha · Nov 5, 2017 · fcfecdd · fcfecdd
1 parent 04ccad9
commit fcfecdd
Show file tree

Hide file tree

Showing 9 changed files with 76 additions and 554 deletions.
diff --git a/assets/fonts/FontAwesome.otf b/assets/fonts/FontAwesome.otf
diff --git a/assets/fonts/fontawesome-webfont.eot b/assets/fonts/fontawesome-webfont.eot
diff --git a/assets/fonts/fontawesome-webfont.svg b/assets/fonts/fontawesome-webfont.svg
diff --git a/assets/fonts/fontawesome-webfont.ttf b/assets/fonts/fontawesome-webfont.ttf
diff --git a/assets/fonts/fontawesome-webfont.woff b/assets/fonts/fontawesome-webfont.woff
diff --git a/attendence/static/css/font-awesome.min.css b/attendence/static/css/font-awesome.min.css
diff --git a/attendence/static/css/style.css b/attendence/static/css/style.css
@@ -208,6 +208,7 @@ footer img:hover {
 	top: 3rem;
 }
 
+/* Login page */
 #login-container {
 	width: 24%;
 	min-width: 320px;
@@ -230,9 +231,22 @@ footer img:hover {
 	margin: 2rem 0;
 }
 
+#login input {
+	margin: auto;
+	width: 80%;
+	margin-bottom: 1.875rem;
+}
+
+#login button {
+	margin: 2rem auto;
+	width: 90%;
+}
+/* ---------- */
+
+/* Attendance List */
 #blue-container {
-	width: 30%;
-	min-width: 320px;
+	width: 40%;
+	min-width: 440px;
 	padding: 2rem;
 	background-color: #303F9F;
 	color: #FFF;
@@ -273,26 +287,45 @@ footer img:hover {
 	display: none;
 }
 
-#attendance-profile input[type="radio"]:checked {
-
-}
-
-#attendance-profile label {
+#attendance-profile input[type="radio"]+label {
 	padding: 0.8rem 1rem;
 	background-color: #E0E0E0;
-	color: #9E9E9E;
+	color: #424242;
 	font-weight: 600;
 	border-radius: 50%;
 	cursor: pointer;
 }
 
-#login input {
-	margin: auto;
-	width: 80%;
-	margin-bottom: 1.875rem;
+#attendance-profile ul li {
+	padding: 0;
 }
 
-#login button {
+#p input[type="radio"] + label:hover {
+	background-color: #9CCC65;
+}
+
+#a input[type="radio"] + label:hover {
+	background-color: #EF5350;
+}
+
+#l input[type="radio"] + label:hover {
+	background-color: #29B6F6;
+}
+
+#p input[type="radio"]:checked + label {
+	background-color: #7CB342;
+}
+
+#a input[type="radio"]:checked + label {
+	background-color: #E53935;
+}
+
+#l input[type="radio"]:checked + label {
+	background-color: #1E88E5;
+}
+
+#blue-container button {
 	margin: 2rem auto;
-	width: 90%;
-}
+	width: 80%;
+}
+/* ---------- */
diff --git a/attendence/templates/attendence/attendance.html b/attendence/templates/attendence/attendance.html
@@ -1,17 +1,26 @@
-{% extends "attendence/base.html" %}
+{% extends attendance/base.html %}
 <!-- Attendance form -->
 {% block content %}
-	<div id="blue-container">
-		<h2>ATTENDANCE FORM</h2>
-		<div id="attendance-profile">
-			<img src="" id="profile-image">
-			<p></p>
-			<input type="radio" name="attendance" id="present">
-			<label for="present"></label>
-			<input type="radio" name="attendance" id="absent">
-			<label for="absent"></label>
-			<input type="radio" name="attendance" id="leave">
-			<label for="leave"></label>
-		</div>
+<div id="blue-container">
+	<h2>ATTENDANCE FORM</h2>
+	<div id="attendance-profile">
+		<img id="profile-image">
+		<p id="profile-name"></p>
+		<ul>
+			<li id="p">
+				<input type="radio" name="attendance" id="present">
+				<label for="present"></label>
+			</li>
+			<li id="a">
+				<input type="radio" name="attendance" id="absent">
+				<label for="absent"></label>
+			</li>
+			<li id="l">
+				<input type="radio" name="attendance" id="leave">
+				<label for="leave"></label>
+			</li>
+		</ul>
 	</div>
+	<button type="submit">SUBMIT</button>
+</div>
 {% endblock %}
diff --git a/attendence/templates/attendence/base.html b/attendence/templates/attendence/base.html
@@ -3,12 +3,13 @@
 <html>
 <head>
 	<title>Heimdall</title>
-  <!-- Custom CSS -->
+	<!-- Custom CSS -->
 	<link rel="stylesheet" type="text/css" href="../static/css/style.css">
 	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 </head>
 <body>
+	<!-- Navbar -->
 	<nav id="navbar">
 		<a href="#" id="logo"><img src="assets/logo.png"><span>HEIMDALL</span></a>
 		<a href="#" id="menu"></a>
@@ -17,10 +18,13 @@
 			<li><a href="login.html">SIGN IN</a></li>
 		</ul>
 	</nav>
+	<!-- Main container -->
 	<div id="main-container">
+		<!-- Extension placeholder -->
 		{% block content %}
-        {% endblock %}
+		{% endblock %}
 	</div>
+	<!-- Footer -->
 	<footer>
 		<a href="http://hackncs.com" target="new"><img src="assets/ncs-logo.png"></a>
 		<div id="social">