Nicer profile page

diff --git a/karmaworld/assets/css/dashboard.css b/karmaworld/assets/css/dashboard.css
index 5d63e1f99324d4f801f613401c45fd7ec5956ca6..4e17480bddf3d38e0abc2624d486c73fd32e5972 100644 (file)
--- a/karmaworld/assets/css/dashboard.css
+++ b/karmaworld/assets/css/dashboard.css
@@ -8,14 +8,15 @@
 /* STATS */
 #stats_container
 {
-  height: 130px;
+  height: 180px;
+  margin-bottom: 20px;
 }
 
 .stat_lead_in
 {
   padding-top: 25px;
   font-family: "MuseoSlab-900";
-  font-size: 8px;
+  font-size: 11px;
   text-transform: uppercase;
 }
 
@@ -168,3 +169,11 @@
   text-align: center;
   padding: 20px 0;
 }
+
+#no_activity
+{
+  font-family: "MuseoSlab-900";
+  font-size: 10px;
+  color: #8e8e8e;
+  margin-bottom: 20px;
+}
\ No newline at end of file

diff --git a/karmaworld/assets/css/global.css b/karmaworld/assets/css/global.css
index 962c1126c13f83b7b41f3a6ffddc6df02ea21a5c..dfe23a9edb78306a93e7c003e808ea8896b44424 100644 (file)
--- a/karmaworld/assets/css/global.css
+++ b/karmaworld/assets/css/global.css
@@ -107,7 +107,8 @@ input[type="text"]:focus, textarea:focus
   padding-bottom: 16px;
 }
 
-#login_container a
+#login_container > a,
+#login_container > i
 {
   float: right;
   padding-left: 15px;
@@ -119,6 +120,42 @@ input[type="text"]:focus, textarea:focus
   color: #f05a28;
 }
 
+#user_dropdown_container
+{
+  position: relative;
+  top: 4px;
+  display: none;
+  z-index: 5;
+}
+
+#user_dropdown
+{
+  list-style: none;
+  background-color: #424446;
+  padding: 10px;
+  margin: 10px;
+}
+
+#user_dropdown li
+{
+  text-align: right;
+  font-size: 17px;
+  font-family: "MuseoSlab-500";
+}
+
+#user_dropdown li:hover
+{
+  text-align: right;
+  font-size: 17px;
+  font-family: "MuseoSlab-500";
+  background-color: #909499;
+}
+
+#user_dropdown li a
+{
+  color: inherit;
+}
+
 #login_box
 {
   margin-top: 15px;
@@ -416,7 +453,6 @@ a.course_link, a.course_link:hover, a.school_link, a.school_link:hover, a.prof_l
 .row_alt_on
 {
   background: url(../img/dashboard_activity_alt_on_bg.gif);
-  padding: 5px 0;
 }
 
 .activity_details_action, .activity_details_action a
@@ -424,6 +460,7 @@ a.course_link, a.course_link:hover, a.school_link, a.school_link:hover, a.prof_l
   font-family: "MuseoSlab-300";
   font-size: 22px;
   line-height: 1.4em;
+  padding: 5px 0;
 }
 
 .note_name, .note_name a
@@ -462,6 +499,7 @@ a.activity_target:hover
   font-size: 11px;
   text-transform: uppercase;
   line-height: 200%;
+  padding: 5px 0;
 }
 
 .activity_details_callout

diff --git a/karmaworld/templates/header.html b/karmaworld/templates/header.html
index 502cda2b4688f55a67b6721e96e6e898bbce2e3d..8f3aceab0ff12918fbfb6ab502a15d265ed95ca4 100644 (file)
--- a/karmaworld/templates/header.html
+++ b/karmaworld/templates/header.html
@@ -37,7 +37,18 @@
 
     <div id="login_container" class="small-2 columns">
       {% if request.user.is_authenticated %}
-        <a class="white" href="{% url 'account_logout' %}">Log Out</a>
+        <i id="user_settings" class="fa fa-cog fa-lg"></i>
+        <div id="user_dropdown_container">
+          <ul id="user_dropdown">
+            <li><a href="{% url 'accounts_profile' %}">Dashboard</a></li>
+            <li><a href="{% url 'account_logout' %}">Log Out</a></li>
+          </ul>
+        </div>
+        <script>
+         $('#user_settings').click(function() {
+           $('#user_dropdown_container').toggle();
+         });
+        </script>
       {% else %}
         <a class="white" href="{% url 'account_login' %}">Log In</a>
       {% endif %}

diff --git a/karmaworld/templates/user_profile.html b/karmaworld/templates/user_profile.html
index 39654aa401edf9cb7da23c575ddd6a2f9dc75ea2..acc53bdf58445dcff56ea5d11e25f328fe61ac59 100644 (file)
--- a/karmaworld/templates/user_profile.html
+++ b/karmaworld/templates/user_profile.html
@@ -1,17 +1,86 @@
-{% extends "account/base.html" %}
+{% extends "base.html" %}
 {% load url from future %}
 {% load account %}
 
-{% block head_title %}
+{% block pagescripts %}
+  <link rel="stylesheet" type="text/css" media="all" href="{{ STATIC_URL }}css/dashboard.css">
+{% endblock %}
+
+{% block title %}
   Your KarmaNotes Profile
 {% endblock %}
 
 {% block content %}
-  <h1>Hello there,<br/>{% user_display user %}.</h1>
-  <p>Here are the notes that you've uploaded:</p>
-  <ul>
-    {% for note in user.note_set.all %}
-      <li><a href="{{ note.get_absolute_url }}">{{ note.name }}</a></li>
-    {% endfor %}
-  </ul>
+  <section id="dashboard_content">
+    <div id="stats_container" class="hero_gradient_bar">
+      <div class="row">
+        <div class="small-10 columns small-centered center header_title">
+          {% user_display user %}
+        </div>
+      </div>
+      <div class="row">
+        <div class="small-10 columns small-centered center stat_lead_in">
+          you've uploaded
+        </div>
+      </div>
+      <div class="row">
+        <div class="small-10 columns small-centered center stat_number stat_uploaded">
+          {{ user.note_set.count }}
+        </div>
+      </div>
+      <div class="row">
+        <div class="small-10 columns small-centered center stat_object stat_uploaded">
+          notes
+        </div>
+      </div>
+    </div>
+
+    <div id="activity_container">
+
+      <div class="row">
+        <div class="small-10 columns small-centered column_header">
+            latest activity
+        </div>
+      </div>
+
+      {% if not user.note_set.all %}
+        <div class="row">
+          <div id="no_activity" class="small-10 columns small-centered center">
+            <h4>Nothing to show here yet.</h4>
+          </div>
+        </div>
+      {% endif %}
+
+      {% for note in user.note_set.all %}
+
+        <div class="row">
+          <div class="small-10 columns small-centered {% cycle '' 'row_alt_on'%}">
+
+            <div class="activity_item">
+
+              <div class="row">
+                <div class="small-12 columns activity_timestamp">
+                  <span class="activity_date">{{ note.uploaded_at|date:"D b j Y" }}</span>
+                </div>
+                <div class="small-12 columns activity_details_action">
+                  You uploaded <a href="{{ note.get_absolute_url }}" class="activity_target">{{ note.name }}</a>
+                </div>
+                <div class="small-12 columns activity_details_context">
+                  <a href="{{ note.course.get_absolute_url }}" class="course_link">{{ note.course.name }} // {{ note.course.school.name }}</a>
+                </div>
+              </div>
+
+            </div>
+
+          </div>
+        </div>
+
+      {% endfor %}
+
+    </div>
+
+
+
+  </section>
+
 {% endblock %}