From 42bc64ed5f9b0f50b6795fb030bbfcd786f5ef05 Mon Sep 17 00:00:00 2001
From: Charles Connell <charles@connells.org>
Date: Mon, 13 Jan 2014 22:35:56 -0500
Subject: [PATCH] Nicer profile page

---
 karmaworld/assets/css/dashboard.css    | 13 +++-
 karmaworld/assets/css/global.css       | 42 ++++++++++++-
 karmaworld/templates/header.html       | 13 +++-
 karmaworld/templates/user_profile.html | 87 +++++++++++++++++++++++---
 4 files changed, 141 insertions(+), 14 deletions(-)

diff --git a/karmaworld/assets/css/dashboard.css b/karmaworld/assets/css/dashboard.css
index 5d63e1f..4e17480 100644
--- 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 962c112..dfe23a9 100644
--- 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 502cda2..8f3acea 100644
--- 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 39654aa..acc53bd 100644
--- 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 %}
-- 
2.25.1