A number of design changes

diff --git a/karmaworld/apps/courses/models.py b/karmaworld/apps/courses/models.py
index de65a7aee1dc315df44d24b5bc5bc7e04ea83085..f6b3f8cdcb976e779ddd7ebcbf266314a19c5226 100644 (file)
--- a/karmaworld/apps/courses/models.py
+++ b/karmaworld/apps/courses/models.py
@@ -316,7 +316,7 @@ class Course(models.Model):
         # loaded into memory. In that case, we avoid making any more database
         # queries.
         sum = 0
-        for note in self.note_set:
+        for note in self.note_set.all():
             sum += note.thanks
         return sum
 

diff --git a/karmaworld/apps/courses/views.py b/karmaworld/apps/courses/views.py
index 29445b28022d7e952d7575594bbfb3bb71484d12..873da73c51d87f5d1778ce4aa61ccc6fd551e6db 100644 (file)
--- a/karmaworld/apps/courses/views.py
+++ b/karmaworld/apps/courses/views.py
@@ -77,6 +77,15 @@ class CourseListSubView(ListView):
         # get the course form for the form at the bottom of the homepage
         context['course_form'] = CourseForm()
 
+        schools = set()
+        for course in self.object_list:
+            if course.school:
+                schools.add(course.school)
+            elif course.department.school:
+                schools.add(course.department.school)
+
+        context['schools'] = sorted(list(schools), key=lambda x: x.name)
+
         # Include settings constants for honeypot
         for key in ('HONEYPOT_FIELD_NAME', 'HONEYPOT_VALUE'):
             context[key] = getattr(settings, key)

diff --git a/karmaworld/assets/css/dashboard.css b/karmaworld/assets/css/dashboard.css
index 426172a45645e168e630fc28805a7a70eb93522c..1ed1390e350ae0dc0193b5cdbb4a06b1bc255d4c 100644 (file)
--- a/karmaworld/assets/css/dashboard.css
+++ b/karmaworld/assets/css/dashboard.css
@@ -16,6 +16,10 @@
 
 div.stat-container {
   border-left: solid 1px #dfdfdf;
+  width: 200px;
+  float: left;
+  padding: 0 10px 0 20px;
+  margin: 5px 0 5px 0;
 }
 
 .activity_item {

diff --git a/karmaworld/assets/css/global.css b/karmaworld/assets/css/global.css
index c0cffadf26a21af91e52c03506850a17b0a00df8..ecda509d90515c7d86e733e5eada7d5102c0f868 100644 (file)
--- a/karmaworld/assets/css/global.css
+++ b/karmaworld/assets/css/global.css
@@ -28,7 +28,21 @@ p {
 
 .top-bar-section ul li > a {
   font-family: inherit;
-  font-size: 1em;
+  font-size: 1.2em;
+  padding: 0;
+}
+
+.top-bar-section ul li {
+  margin-left: 20px;
+  padding: 0;
+}
+
+.top-bar-section ul li > a:hover {
+  background: #ffffff !important;
+  border-radius: 2px;
+  color: #333333 !important;
+  text-decoration: none !important;
+  font-family: 'museo700';
 }
 
 #content-container {
@@ -41,6 +55,20 @@ p {
   color: #d4d4d4;
 }
 
+div.contain-to-grid {
+  padding: 5px 0 5px 0;
+}
+
+@media only screen and (max-width: 500px) {
+  div.contain-to-grid {
+    padding: 0;
+  }
+  .top-bar-section ul li {
+    padding: 10px;
+    margin-left: 5px;
+  }
+}
+
 #header-login-nav {
   text-align: right;
   color: #ffffff;
@@ -60,6 +88,12 @@ p {
   padding: 0 5px 0 5px;
 }
 
+@media only screen and (max-width: 500px) {
+  #splash {
+    background-image: url('/static/img/banner_small.jpg');
+  }
+}
+
 #global_footer {
   line-height: 1.5em;
   color: #d4d4d4;
@@ -192,6 +226,7 @@ table.dataTable a {
   float: left;
 }
 
+table.dataTable .table-row.even .data-table-entry-wrapper,
 .even {
   background-color: #fafafa !important;
   border-top: 1px solid #f0f0f0;
@@ -226,19 +261,22 @@ ul.ui-autocomplete {
 }
 
 dl.tabs dd.active {
-  border-radius: 3px;
+  border-radius: 5px 5px 0 0;
+  border: 1px solid #dfdfdf;
+  border-bottom: none;
 }
 
 dl.tabs dd {
-  margin: 0 10px 0px 10px;
-  border: 1px solid #dfdfdf;
   border-bottom: none;
+  margin-left: 10px;
 }
 
 dl.tabs dd,
-dl.tabs dd a {
+dl.tabs dd a,
+dl.tabs dd a:hover {
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
+  background: transparent;
 }
 
 dl.tabs dd a {
@@ -258,3 +296,58 @@ ul.socialaccount_providers li{
   display: inline;
   margin: 0 5px 0 5px;
 }
+
+.select-wrapper {
+  border: 1px solid #cfcfcf;
+  border-radius: 3px;
+  width: 100%;
+  height: 30px;
+  overflow: hidden;
+  background: url('/static/img/angle-down.png') no-repeat right #fff;
+  margin: 5px 20px 20px 0;
+}
+
+select,
+select:hover {
+  width: 120%;
+  height: 30px;
+  background: transparent;
+  border: 0px;
+  padding: 5px;
+}
+
+input.search {
+  display: inline;
+  font-size: 1.2em;
+  font-family: 'adelle-sans';
+  font-weight: lighter;
+  border-radius: 3px 0 0 3px;
+  width: calc(100% - 40px);
+  height: 40px;
+  margin-right: 0;
+}
+
+i.search-icon,
+button.search-icon {
+  background-color: black;
+  color: white;
+  height: 40px;
+  width: 40px;
+  vertical-align: top;
+  padding: 12px;
+  border-radius: 0 3px 3px 0;
+  margin-left: -4px;
+  margin-bottom: 0;
+  cursor: pointer;
+}
+
+.sort-label {
+  font-size: 0.8em;
+  font-weight: normal;
+  margin-top: 10px;
+}
+
+.filter-options {
+  border-bottom: 1px solid #a9a9a9;
+}
+

diff --git a/karmaworld/assets/css/home.css b/karmaworld/assets/css/home.css
index b5426a5f7ed06921f796939c40568b366447d0b6..3c29050627495521d5d454034a78bb804854c269 100644 (file)
--- a/karmaworld/assets/css/home.css
+++ b/karmaworld/assets/css/home.css
@@ -26,21 +26,6 @@
   }
 } /* medium screens and down */
 
-input.search-courses {
-  display: inline;
-  margin: 0 0 10px 5px;
-  max-width: 30em;
-}
-
-#course-sort-wrapper {
-  float: right;
-  display: inline;
-}
-
-select.course-sort {
-  width: 10em;
-}
-
 #course-search-bar {
   background: #f5f5f5;
   padding: 15px 0 0 0;
@@ -52,6 +37,7 @@ select.course-sort {
   background: #ffffff;
   margin: 10px 0 0 0;
   padding: 5px 5px 5px 5px;
+  box-shadow: 1px 1px 3px black;
 }
 
 #add-course-form p {
@@ -76,6 +62,10 @@ label.validation_error {
 }
 
 #add-course-btn {
-  width: 100%
+  width: 100%;
+  font-size: 1.2em;
+  border-radius: 3px;
+  height: 40px;
+  margin-bottom: 10px;
 }
 

diff --git a/karmaworld/assets/css/note_course_pages.css b/karmaworld/assets/css/note_course_pages.css
index cf9c33f528ff6357494a9fc3459dbe3994063155..0bd7a7fdbf5a16e8a869969030f31d71edc301cc 100644 (file)
--- a/karmaworld/assets/css/note_course_pages.css
+++ b/karmaworld/assets/css/note_course_pages.css
@@ -33,20 +33,10 @@ form.search-notes {
   display: inline;
 }
 
-#note-sort-wrapper {
-  float: right;
-  display: inline;
-}
-
-select.note-sort {
-  width: 10em;
-}
-
 #note-search-bar {
   background: #f5f5f5;
   padding: 15px 0 0 0;
   font: 1em 'museo300';
-  margin-bottom: 20px;
 }
 
 ul.socialaccount_providers li
@@ -69,7 +59,7 @@ table.dataTable span.note-thanks {
 div.return-to-course {
   background: #f5f5f5;
   padding: 10px 0 10px 0;
-  font-size: 0.8em;
+  font-size: 0.7em;
 }
 
 #results_header {
@@ -114,6 +104,10 @@ div.header-title-row {
 
 button.add-note-btn {
   width: 100%;
+  font-size: 1.2em;
+  font-family: 'museo700';
+  margin-bottom: 10px;
+  height: 40px;
 }
 
 .note-upload-remove-button {
@@ -137,4 +131,9 @@ button.add-note-btn {
   font-size: inherit;
   margin: 0;
   padding: 5px;
-}
\ No newline at end of file
+}
+
+#keyword-intro {
+  font-size: 0.8em;
+}
+

diff --git a/karmaworld/assets/img/angle-down.png b/karmaworld/assets/img/angle-down.png
new file mode 100644 (file)
index 0000000..85ffd36
Binary files /dev/null and b/karmaworld/assets/img/angle-down.png differ

diff --git a/karmaworld/assets/img/global_header_logo.png b/karmaworld/assets/img/global_header_logo.png
deleted file mode 100644 (file)
index 07e56aa..0000000
Binary files a/karmaworld/assets/img/global_header_logo.png and /dev/null differ

diff --git a/karmaworld/assets/img/karmanotes_logo.png b/karmaworld/assets/img/karmanotes_logo.png
new file mode 100644 (file)
index 0000000..dd3ec8b
Binary files /dev/null and b/karmaworld/assets/img/karmanotes_logo.png differ

diff --git a/karmaworld/assets/img/karmanotes_logo_small.png b/karmaworld/assets/img/karmanotes_logo_small.png
new file mode 100644 (file)
index 0000000..c51b3af
Binary files /dev/null and b/karmaworld/assets/img/karmanotes_logo_small.png differ

diff --git a/karmaworld/assets/js/course-list.js b/karmaworld/assets/js/course-list.js
index 68cc0cbada3beeaece4d503b224e611ca6287b98..e526ef30b5bc6d485e367cb341efdd7f606a4d2e 100644 (file)
--- a/karmaworld/assets/js/course-list.js
+++ b/karmaworld/assets/js/course-list.js
@@ -40,24 +40,26 @@ $(function() {
     dataTable.fnFilter($(this).val());
   });
 
-  function sortDirection(col) {
-    if (col == 3) {
-      return 'asc';
-    } else {
-      return 'desc';
-    }
-  }
-
   // wire up sort chooser
-  $('select.course-sort').change(function() {
+  $('#sort-by').change(function() {
     var sortCol = $(this).val();
-    dataTable.fnSort([[sortCol, sortDirection(sortCol)]]);
+    dataTable.fnSort([[sortCol, 'desc']]);
   });
 
   // sort by current value of sort chooser, since
   // the browser may change this from our default
-  var sortCol = $('select.course-sort').val();
-  dataTable.fnSort([[sortCol, sortDirection(sortCol)]]);
+  var sortCol = $('#sort-by').val();
+  dataTable.fnSort([[sortCol, 'desc']]);
+
+  // filter by chosen school
+  $('#school-filter').change(function() {
+    var schoolName = $(this).val();
+    if (schoolName === 'ALL') {
+      dataTable.fnFilter('');
+    } else {
+      dataTable.fnFilter(schoolName);
+    }
+  });
 
 });
 

diff --git a/karmaworld/templates/courses/course_detail.html b/karmaworld/templates/courses/course_detail.html
index 131e3ecd79d16399bf5b3876e627a6651ab12526..72df39bb77dc3820d7a8b738912e1a93a9e6b3d7 100644 (file)
--- a/karmaworld/templates/courses/course_detail.html
+++ b/karmaworld/templates/courses/course_detail.html
@@ -74,11 +74,6 @@
                 {% else %}
                   <button id="flag-button" class="modify-button"><i class="fa fa-flag"></i> Report course as inappropriate</button>
                 {% endif %}
-              {% else %}
-                <button id="flag-button-disabled" class="modify-button disabled opentip"
-                        data-ot="Log in to report a course"
-                        {% include 'partial/opentip_settings.html' %}>
-                        <i class="fa fa-flag"></i> Report course as inappropriate</button>
               {% endif %}
             </span>
           </span>
@@ -157,29 +152,31 @@
     {% endif %}
 
     <div id="note-search-bar" class="row">
-      <div class="small-12 large-2 columns">
+      <div class="small-12 large-3 columns">
         {{ file_upload_form.fp_file }}
       </div>
-      <div class="small-12 large-6 columns">
+      <div class="small-12 large-9 columns">
         <form class="search-notes" action="{% url 'note_search' %}" method="GET">
-          <span>
           <input type="hidden" name="course_id" value="{{ course.id }}" />
-          <input name="query" class="search-notes" type="text" placeholder="Search Notes" />
-          </span>
+          <input name="query" class="search" type="text" placeholder="Search Notes" />
+          <button type="submit" class="search-icon"><i class="fa fa-search inline"></i></button>
         </form>
       </div>
-      <div class="large-4 columns show-for-large-up">
-        <div id="note-sort-wrapper">
-          Sort By
+      <div class="small-12 columns">
+        {% include 'partial/filepicker.html' %}
+      </div>
+    </div>
+
+    <div class="row filter-options show-for-large-up">
+      <div class="large-3 columns end">
+        <div class="sort-label">Sort By</div>
+        <div class="select-wrapper">
           <select class="note-sort">
-            <option value="0" selected>Date</option>
+            <option value="0" selected>Date Added</option>
             <option value="1">Popularity</option>
           </select>
         </div>
       </div>
-      <div class="small-12 columns">
-        {% include 'partial/filepicker.html' %}
-      </div>
     </div>
 
     <div id="course_container">

diff --git a/karmaworld/templates/courses/course_list.html b/karmaworld/templates/courses/course_list.html
index 9f157936aa60738ce92fb977ab528c7df08fe8d2..96fd589f1454f18e57aff27d72a4657089487678 100644 (file)
--- a/karmaworld/templates/courses/course_list.html
+++ b/karmaworld/templates/courses/course_list.html
@@ -39,7 +39,7 @@
         <div class="row">
           <div class="small-12 columns">
             <a href="{% url 'about' %}">
-              <button id="intro-video-button">Watch the video&nbsp;&nbsp;<i class='fa fa-caret-right'></i></button>
+              <button id="intro-video-button">Watch the video&nbsp;&nbsp;<i class='fa fa-caret-right fa-lg'></i></button>
             </a>
           </div>
         </div>
@@ -48,22 +48,36 @@
 
     <div id="course-search-bar">
       <div class="row">
-        <div class="small-12 large-2 columns">
-          <button id="add-course-btn" class="inline-button important" data-reveal-id="add-course-form">Add a Course</button>
+        <div class="small-12 large-3 columns">
+          <button id="add-course-btn" class="inline-button important museo700" data-reveal-id="add-course-form">Add a Course</button>
         </div>
-        <div class="small-12 large-6 columns">
-          <input class="search-courses" type="text" placeholder="Search Courses and Schools" />
+        <div class="small-12 large-9 columns">
+          <span><input class="search adelle-sans" type="text" placeholder="Search Courses and Schools" />
+          <i class="fa fa-search inline search-icon"></i></span>
         </div>
-        <div class="large-4 columns show-for-large-up">
-          <div id="course-sort-wrapper">
-            Sort By
-            <select class="course-sort">
-              <option value="0">Date</option>
-              <option value="1">Number of Notes</option>
-              <option value="2" selected>Popularity</option>
-              <option value="3">School</option>
-            </select>
-          </div>
+      </div>
+    </div>
+
+    <div class="row filter-options show-for-large-up">
+      <div class="large-3 columns">
+        <div class="sort-label">Sort By</div>
+        <div class="select-wrapper">
+          <select id="sort-by">
+            <option value="0">Date Added</option>
+            <option value="1">Number of Notes</option>
+            <option value="2" selected>Popularity</option>
+          </select>
+        </div>
+      </div>
+      <div class="large-3 columns show-for-large-up end">
+        <div class="sort-label">School</div>
+        <div class="select-wrapper">
+          <select id="school-filter">
+            <option value="ALL" selected>All Schools</option>
+            {% for school in schools %}
+              <option value="{{ school.name }}">{{ school.name }}</option>
+            {% endfor %}
+          </select>
         </div>
       </div>
     </div>

diff --git a/karmaworld/templates/courses/course_list_entry.html b/karmaworld/templates/courses/course_list_entry.html
index 9950563a21a3078abb5220883bf7fc172a9eb2ee..21edc779f65b1db43b0e82bac61e01f45780882e 100644 (file)
--- a/karmaworld/templates/courses/course_list_entry.html
+++ b/karmaworld/templates/courses/course_list_entry.html
@@ -8,7 +8,7 @@
     <td class="hide">{{ course.department.school.name }}</td>
   {% endif %}
 
-  <td class="small-12 columns">
+  <td class="small-12 columns data-table-entry-wrapper">
     <div class="data-table-entry">
       <div class="table-entry-first-line">
         <span class="table-school">

diff --git a/karmaworld/templates/footer.html b/karmaworld/templates/footer.html
index 480093a234a7f15cbf0a9151f74fc1014a5f8965..ba45c07fc8d627847ed25caefc8176f99ab6b16d 100644 (file)
--- a/karmaworld/templates/footer.html
+++ b/karmaworld/templates/footer.html
@@ -3,7 +3,7 @@
 <footer id="global_footer" class="underline inherit-color">
   <div class="row">
     <div class="small-12 columns text-center footer-row">
-      <img src="{{ STATIC_URL }}img/global_header_logo.png" alt="KarmaNotes" />
+      <img src="{{ STATIC_URL }}img/karmanotes_logo_small.png" alt="KarmaNotes" />
     </div>
   </div>
 

diff --git a/karmaworld/templates/header.html b/karmaworld/templates/header.html
index d59f09470260091f05a3eeba9a71d37172a2d0d2..162fc34275ee14e995fe91ca21674aab457e559b 100644 (file)
--- a/karmaworld/templates/header.html
+++ b/karmaworld/templates/header.html
@@ -3,17 +3,19 @@
 
 <header id="global-header">
 
-  <div id="header-login-nav" class="show-for-large-up">
-    {% if request.user.is_authenticated %}
-      <div class="row nav-list">
-        <div class="large-12 columns">
-          <ul>
+  <div id="header-login-nav" class="show-for-medium-up">
+    <div class="row nav-list">
+      <div class="large-12 columns">
+        <ul>
+          {% if request.user.is_authenticated %}
             <li><a href="{% url 'accounts_profile' %}" class="inherit-color">{{ request.user.get_profile.get_points }} Karma Points</a></li>
             <li><a href="{% url 'account_logout' %}" class="inherit-color">Log Out</a></li>
-          </ul>
-        </div>
+          {% else %}
+            <li><a href="{% url 'account_login' %}" class="inherit-color">Log In</a></li>
+          {% endif %}
+        </ul>
       </div>
-    {% endif %}
+    </div>
   </div>
 
 
@@ -21,7 +23,7 @@
     <nav id="main-header" class="top-bar" data-topbar>
       <ul class="title-area">
         <li class="name">
-          <h1 class="museo700"><a href="/"><img src="{{ STATIC_URL }}img/global_header_logo.png" alt="KarmaNotes" /></a></h1>
+          <h1 class="museo700"><a href="/"><img src="{{ STATIC_URL }}img/karmanotes_logo_small.png" alt="KarmaNotes" /></a></h1>
         </li>
         <li class="toggle-topbar menu-icon">
           <a href="#">Menu</a>
@@ -35,7 +37,6 @@
             <li class="hide-for-large-up"><a href="{% url 'accounts_profile' %}#control_panel">My Account</a></li>
             <li class="hide-for-large-up"><a href="{% url 'account_logout' %}">Log Out</a></li>
           {% else %}
-            <li><a href="{% url 'account_login' %}">Log In</a></li>
             <li><a href="{% url 'account_signup' %}">Sign Up</a></li>
           {% endif %}
         </ul>

diff --git a/karmaworld/templates/notes/note_detail.html b/karmaworld/templates/notes/note_detail.html
index c341d4bd7c05282a99f0732d283c0d2b85868912..186a631215d1392578c15fe90218466dfd1eb3e7 100644 (file)
--- a/karmaworld/templates/notes/note_detail.html
+++ b/karmaworld/templates/notes/note_detail.html
@@ -224,7 +224,7 @@
 
     <div class="row">
       <div id="tabs" class="small-12 columns">
-        <dl class="tabs show-for-large-up">
+        <dl class="tabs">
           <dd id="note-tab-button" class="{% if show_note_container %}active{% endif %}">
             <a href="{{ note.get_absolute_url }}">Note</a>
           </dd>
@@ -280,7 +280,7 @@
           <div id="keywords" class="content">
             <div class="row">
               <div class="small-12 columns">
-                <p>These key terms and definitions have been defined by KarmaNotes users.
+                <p id="keyword-intro">These key terms and definitions have been defined by KarmaNotes users.
                 You can edit them for accuracy and add more if you like.</p>
                 <p><button id="edit-keywords-button" class="museo700"><i class="fa fa-edit"></i> Edit Key Terms & Definitions</button></p>
                 <table id="keywords-data-table">

diff --git a/karmaworld/templates/notes/note_list_entry.html b/karmaworld/templates/notes/note_list_entry.html
index 39efb3c533f1ac995a3999e8ffdccc4f8499e14b..2675858d5de0494d2c25f4d6ee3140a5a3997a8d 100644 (file)
--- a/karmaworld/templates/notes/note_list_entry.html
+++ b/karmaworld/templates/notes/note_list_entry.html
@@ -1,8 +1,8 @@
-<tr>
+<tr class="table-row">
   <td class="hide">{{ note.uploaded_at|date:"U" }}</td>
   <td class="hide">{{ note.thanks|stringformat:"010g" }}</td>
 
-  <td>
+  <td class="data-table-entry-wrapper">
     <div class="data-table-entry">
       <div class="note-date adelle-sans">{{ note.uploaded_at|date:"l, F j, Y" }}</div>
       <div class="note-name-line">
@@ -20,7 +20,7 @@
       {% else %}
         <div class="note-text show-for-large-up">{{ note.text|slice:":500" }} &hellip;</div>
       {% endif %}
-      <div class="note-tags">
+      <div class="note-tags show-for-large-up">
         {% if note.tags.count > 0 %}
           <span class="activity_details_context"><strong>Tags:</strong>
             {% for tag in note.tags.all %}

diff --git a/karmaworld/templates/notes/search_results.html b/karmaworld/templates/notes/search_results.html
index dc82ec04f5dfb29026d818d44c6b3eed0e6346dc..fa557f7a913f17bf6a3a757b1f78df92225e091b 100644 (file)
--- a/karmaworld/templates/notes/search_results.html
+++ b/karmaworld/templates/notes/search_results.html
@@ -49,23 +49,27 @@
   </div>
 
   <div id="note-search-bar" class="row">
-    <div class="small-12 large-8 columns">
+    <div class="small-12 columns">
       <form class="search-notes" action="{% url 'note_search' %}" method="GET">
         <span>
         <input type="hidden" name="course_id" value="{{ course.id }}" />
         {% if course %}
-          <input name="query" class="search-notes" type="text" placeholder="Search Notes in {{ course.name }}" />
+          <input name="query" class="search" type="text" placeholder="Search Notes in {{ course.name }}" />
         {% else %}
-          <input name="query" class="search-notes" type="text" placeholder="Search All Notes" />
+          <input name="query" class="search" type="text" placeholder="Search All Notes" />
         {% endif %}
+        <button type="submit" class="search-icon"><i class="fa fa-search inline"></i></button>
         </span>
       </form>
     </div>
-    <div class="large-4 columns show-for-large-up">
-      <div id="note-sort-wrapper">
-        Sort By
+  </div>
+
+  <div class="row filter-options show-for-large-up">
+    <div class="large-3 columns end">
+      <div class="sort-label">Sort By</div>
+      <div class="select-wrapper">
         <select class="note-sort">
-          <option value="0">Date</option>
+          <option value="0">Date Added</option>
           <option value="1" selected>Popularity</option>
         </select>
       </div>

diff --git a/karmaworld/templates/user_profile.html b/karmaworld/templates/user_profile.html
index 2c35480aa2862d282da58f8adb306232c609a0d4..13c72a81f7d15fddd99676b34141309201014ace 100644 (file)
--- a/karmaworld/templates/user_profile.html
+++ b/karmaworld/templates/user_profile.html
@@ -18,18 +18,20 @@
   <section id="dashboard_content">
     <div id="stats-container">
       <div class="row museo700">
-        <div id="user-name" class="small-12 large-3 columns">
-          {% user_display user %}
-        </div>
-        <div class="small-12 large-3 columns stat-container">
-          <span class="stat-count">{{ user.get_profile.get_points }}</span>
-          <br/>
-          Karma Points
-        </div>
-        <div class="small-12 large-3 columns end stat-container">
-          <span class="stat-count">{{ user.note_set.count }}</span>
-          <br/>
-          Notes Uploaded
+        <div class="small-12 columns">
+          <div id="user-name" class="stat-container">
+            {% user_display user %}
+          </div>
+          <div class="stat-container">
+            <span class="stat-count">{{ user.get_profile.get_points }}</span>
+            <br/>
+            Karma Points
+          </div>
+          <div class="stat-container">
+            <span class="stat-count">{{ user.note_set.count }}</span>
+            <br/>
+            Notes Uploaded
+          </div>
         </div>
       </div>