v5.1

New Login Page Minor UI Changes
swappsco · Feb 11, 2015 · 9e04479 · 9e04479
1 parent f6bf75b
commit 9e04479
Show file tree

Hide file tree

Showing 6 changed files with 116 additions and 50 deletions.
diff --git a/db.sqlite3 b/db.sqlite3
diff --git a/profile_images/me.jpg b/profile_images/me.jpg
diff --git a/profile_images/me_RMLRaw3.jpg b/profile_images/me_RMLRaw3.jpg
diff --git a/qa/models.py b/qa/models.py
@@ -27,7 +27,7 @@ class UserProfile(models.Model):
 
     # The additional attributes we wish to include.
     website = models.URLField(blank=True)
-    picture = models.ImageField(upload_to='static/profile_images', blank=True)
+    picture = models.ImageField(upload_to='profile_images', blank=True)
 
     # Override the __unicode__() method to return out something meaningful!
     def __unicode__(self):

diff --git a/qa/templates/qa/index.html b/qa/templates/qa/index.html
@@ -116,6 +116,7 @@
 </script>
 
 <div class="container">
+
 <div class="page-header">
   <a class="btn btn-lg btn-warning pull-right" href="#search"><span class="glyphicon glyphicon-search" aria-hidden="true"></span> Find</a><a class="btn btn-lg btn-danger pull-right" href="/add/">Ask Question</a><h1><a href="/">Simple QA </a><small>Open Questions</small></h1>
 </div>
@@ -161,6 +162,7 @@
 </div>
 
 <div class="col-md-4">
+
   <div class="panel panel-default">
     <div class="panel-body">
       <h4>Total Questions: {{ totalcount }}</h4>
@@ -194,16 +196,25 @@ <h3 class="panel-title">Unanswered Questions</h3>
     </div>
   </div>
 
+  {% if user.is_authenticated %}
+
+  <div class="span3 well">
+    <center>
+      <a href="/profile/{{ user.id }}" data-toggle="modal"><img src="/static/qa/user.png" name="aboutme" width="100" height="100" class="img-circle"></a>
+      <h3>{{ user.first_name }} {{ user.last_name }}</h3>
+      <a href="/profile/{{ user.id }}">My Profile</a> |
+      <a href="/logout/">Logout</a>
+    </center>
+  </div>
+  {% else %}
+  <a class="btn btn-block btn-success" href="/login"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> Login | Sign Up</a><br/>
+  {% endif %}
+
 </div>
 </div>
 <hr>
 <center>
-  {% if user.is_authenticated %}
-  <small>Logged in as <b>{{ user.username }}</b> ( <a href="/profile/{{ user.id }}">My Profile</a> | <a href="/logout/">Logout</a> )</small>
-  {% else %}
-  <small><a href="/login">Login</a></small>
-  {% endif %}
- | <a href="/admin">Admin Panel</a></small></center>
+<a href="/admin">Admin Panel</a></small></center>
  <br/><br/>
 
  <div id="search">

diff --git a/qa/templates/qa/login.html b/qa/templates/qa/login.html
@@ -3,51 +3,106 @@
 {% bootstrap_css %}
 {% bootstrap_javascript %}
 
-<div class="container">
-  <div class="page-header">
-    <h1><a href="/">Simple QA </a><small>Login</small></h1>
-  </div>
-
-  <div class="row">
-  <div class="col-md-6">
-  <div class="panel panel-default">
-    <div class="panel-heading">
-      <h3 class="panel-title">Login</h3>
-    </div>
-    <div class="panel-body">
-      <form id="login_form" method="post" action="/login/">
-        {% csrf_token %}
-        <input class="input-md" style="width:98%" placeholder="Username" type="text" name="username" value="" size="50" />
-        <br /><br />
-        <input class="input-md" style="width:98%" placeholder="Password" type="password" name="password" value="" size="50" />
-        <br /><br />
+<style>
+  body {
+    padding-top: 120px;
+    padding-bottom: 40px;
+    background-color: #eee;
+
+  }
+  .btn 
+  {
+   outline:0;
+   border:none;
+   border-top:none;
+   border-bottom:none;
+   border-left:none;
+   border-right:none;
+   box-shadow:inset 2px -3px rgba(0,0,0,0.15);
+  }
+  .btn:focus
+  {
+   outline:0;
+   -webkit-outline:0;
+   -moz-outline:0;
+  }
+  .fullscreen_bg {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-size: cover;
+    background-position: 50% 50%;
+    background-image: url('http://cleancanvas.herokuapp.com/img/backgrounds/color-splash.jpg');
+    background-repeat:repeat;
+  }
+  .form-signin {
+    max-width: 280px;
+    padding: 15px;
+    margin: 0 auto;
+      margin-top:50px;
+  }
+  .form-signin .form-signin-heading, .form-signin {
+    margin-bottom: 10px;
+  }
+  .form-signin .form-control {
+    position: relative;
+    font-size: 16px;
+    height: auto;
+    padding: 10px;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+  }
+  .form-signin .form-control:focus {
+    z-index: 2;
+  }
+  .form-signin input[type="text"] {
+    margin-bottom: -1px;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    border-top-style: solid;
+    border-right-style: solid;
+    border-bottom-style: none;
+    border-left-style: solid;
+    border-color: #000;
+  }
+  .form-signin input[type="password"] {
+    margin-bottom: 10px;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    border-top-style: none;
+    border-right-style: solid;
+    border-bottom-style: solid;
+    border-left-style: solid;
+    border-color: rgb(0,0,0);
+    border-top:1px solid rgba(0,0,0,0.08);
+  }
+  .form-signin-heading {
+    color: #fff;
+    text-align: center;
+    text-shadow: 0 2px 2px rgba(0,0,0,0.5);
+  }
+</style>
 
-        <input class="btn btn-primary" type="submit" value="Login" />
-      </form>
-    </div>
-  </div>
-</div>
+<div id="fullscreen_bg" class="fullscreen_bg"/>
 
-<div class="col-md-6">
-  <div class="panel panel-info">
-    <div class="panel-heading">
-      <h3 class="panel-title">New User?</h3>
-    </div>
-    <div class="panel-body">
-      <a href="/register">Create new Account!</a>
-    </div>
-  </div>
-</div>
 
-</div>
+<div class="container">
+	<form class="form-signin" id="login_form" method="post" action="/login/">
+    <center><a href="/"><h1 class="form-signin-heading text-muted">Simple QA</h1></a></center><br/>
+		<h1 class="form-signin-heading text-muted">Sign In</h1>
+		<input type="text" class="form-control" placeholder="Username" type="text" name="username" required="" autofocus="">
+		<input type="password" class="form-control" placeholder="Password" type="password" name="password" required="">
+        {% csrf_token %}
+		<button class="btn btn-lg btn-primary btn-block" type="submit">
+			Sign In
+		</button>
+	</form>
 
+	<center><h2 class="form-signin-heading text-muted">or</h2>
+    <a class="btn btn-lg btn-success" href="/register" type="submit">New User? Sign Up</a></center>
 </div>
-<hr>
-<center>
-  {% if user.is_authenticated %}
-  <small>Logged in as <b>{{ user.username }}</b> ( <a href="/profile/{{ user.id }}">My Profile</a> | <a href="/logout/">Logout</a> )</small>
-  {% else %}
-  <small><a href="/login">Login</a></small>
-  {% endif %}
-  | <a href="/admin">Admin Panel</a></small></center>
-  <br/><br/>
+
+