Transitioning to new design, starting with the homepage

diff --git a/karmaworld/apps/courses/views.py b/karmaworld/apps/courses/views.py
index a48ac8d5b8d8d1f4c659ef24d6d55e35dbe70779..211471ed07cb95fb7cedd68daea005a018958628 100644 (file)
--- a/karmaworld/apps/courses/views.py
+++ b/karmaworld/apps/courses/views.py
@@ -47,9 +47,6 @@ class CourseListView(ListView, ModelFormMixin, ProcessFormView):
             # if there was an error in the form
             context['jump_to_form'] = True
 
-        # Include "Add Course" button in header
-        context['display_add_course'] = True
-
         # Include settings constants for honeypot
         for key in ('HONEYPOT_FIELD_NAME', 'HONEYPOT_VALUE'):
             context[key] = getattr(settings, key)
@@ -84,9 +81,6 @@ class CourseDetailView(DetailView):
         kwargs = super(CourseDetailView, self).get_context_data()
         kwargs['note_set'] = self.object.note_set.filter(is_hidden=False)
 
-        # Include "Add Note" button in header
-        kwargs['display_add_note'] = True
-
         # For the Filepicker Partial template
         kwargs['file_upload_form'] = FileUploadForm()
 

diff --git a/karmaworld/assets/css/global.css b/karmaworld/assets/css/global.css
index 6f5f02c13130aa393a6ac1737cbe0997a246eb69..e5e3e7bbc4d66e9e19c24f9caea90b7693415def 100644 (file)
--- a/karmaworld/assets/css/global.css
+++ b/karmaworld/assets/css/global.css
@@ -1,946 +1,44 @@
-/* GLOBAL */
-
-body
-{
-  font-family: "MuseoSlab-300";
-}
-
-time
-{
-  font: 12px/2em "MuseoSlab-300";
-}
-
-.intext, input[type="text"], textarea
-{
-  height: 30px;
-  line-height: 24px;
-  padding: 7px 0 0 6px;
-
-  font-family: "MuseoSlab-300", serif;
-  font-size: 16px;
-  color: black;
-  border-color: black;
-  border-radius: 0;
-}
-
-small.form
-{
-  color: #f1592a;
-}
-
-input[type="text"]:focus, textarea:focus
-{
-  color: black;
-  background-color: white;
-  border-color: black;
-  border-radius: 0;
-}
-
-.half-padding
-{
-  padding-left: 5px;
-  padding-right: 5px;
-}
-
-.no-padding
-{
-  padding-left: 0;
-  padding-right: 0;
-}
-
-/* GLOBAL HEADER */
-
-#global_header
-{
-  background-color: black;
-  height: 46px;
-  width: 100%;
-  position: fixed;
-  z-index: 100;
-}
-
-#logo_container
-{
-  padding-top: 4px;
-}
-
-#logo_container img
-{
-  margin-top: 10px;
-  height: 17px;
-}
-
-#browse_container
-{
-  padding-top: 19px;
-  font-family: "MuseoSlab-700";
-  font-size: 13px;
-  color: #FFF;
-}
-
-#search_container
-{
-  margin-top: 7px;
-  background: url(../img/global_header_search.png);
-  width: 227px;
-  height: 25px;
-}
-
-#search_txt
-{
-  width: 200px;
-  height: 25px;
-  font-size: 12px;
-  background: none;
-  border: none;
-  margin-left: 27px;
-  margin-top: 5px;
-}
-
-#login_container
-{
-  color: #FFF;
-  padding-top: 18px;
-  font-size: 14px;
-  cursor: pointer;
-  padding-bottom: 16px;
-}
-
-#login_container > a,
-#login_container > i
-{
-  float: right;
-  padding-left: 15px;
-}
-
-#login_container.clicked
-{
-  background-color: black;
-  color: #f05a28;
-}
-
-#user_dropdown_container
-{
-  position: relative;
-  top: 4px;
-  display: none;
-  z-index: 5;
+.nav-list ul {
+  list-style-type: none;
+  margin: 0;
 }
 
-#user_dropdown
-{
-  list-style: none;
-  background-color: #424446;
-  padding: 10px;
-  margin: 10px;
+.nav-list li {
+  display: inline;
+  padding: 0 5px 0 5px;
 }
 
-#user_dropdown li
-{
+#header-nav {
   text-align: right;
-  font-size: 17px;
-  font-family: "MuseoSlab-500";
+  font-size: 1.3em;
 }
 
-#user_dropdown li:hover
-{
+#header-login-nav {
   text-align: right;
-  font-size: 17px;
-  font-family: "MuseoSlab-500";
-  background-color: #909499;
-}
-
-#user_dropdown li a
-{
-  color: inherit;
-}
-
-#login_box
-{
-  margin-top: 15px;
-  cursor: default;
-}
-
-#login_fb
-{
-  background: url(../img/global_header_login_fbbg.png);
-  cursor: pointer;
-  padding-top: 5px;
-}
-
-#login_form
-{
-  background: url(../img/global_header_login_formbg.png);
 }
 
-#login_form input
-{
-  height: 34px;
-  font-size: 20px;
-  margin-top: 15px;
+#logo-container {
+  padding: 5px 5px 5px 5px;
 }
 
-#login_form .columns
-{
-  font-size: 14px;
+#main-header {
+  border: 1px solid grey;
+  border-radius: 0.2em;
 }
 
-#login_submit, #login_signup
-{
-  background-color: #f05a28;
-  padding-top: 10px;
-  padding-bottom: 10px;
-  cursor: pointer;
-}
-
-#login_submit .columns, #login_signup .columns
-{
-  font-size: 14px;
-  text-align: center;
-}
-
-/* LOGGED IN */
-
-#global_header_logged_in_content
-{
-  width: 320px;
-}
-
-#global_header_addnote
-{
-  text-align: right;
-}
-
-#global_header_mycourses
-{
-  padding-top: 15px;
-  cursor: pointer;
-  padding-bottom: 16px;
-}
-
-#global_header_mycourses_copy
-{
-  font-size: 15px;
-  color: #fff;
-}
-
-#global_header_mycourses_copy.clicked
-{
-  background-color: black;
-  color: #f05a28;
-}
-
-#global_header_mycourses_list
-{
-  margin-top: 16px;
-  width: 223px;
-  background: url(../img/home_video_screen_60opacity.png);
-}
-
-#global_header_mycourses_list ul
-{
-  margin: 0;
-}
-
-#global_header_mycourses_list li
-{
-  padding-top: 16px;
-  padding-bottom: 14px;
-  border-bottom: 1px solid #fff;
-  color: #fff;
-  list-style: none;
-  font-family: "MuseoSlab-500";
-  font-size: 17px;
-}
-
-#global_header_mycourses_list li:last-child
-{
-  border: none;
-}
-
-#global_header_add_course
-{
-  background-color: #f05a28;
-  width: 223px;
-  padding-top: 10px;
-  padding-bottom: 10px;
-  padding-left: 10px;
-}
-
-#global_header_avatar_menu
-{
-  cursor: pointer;
-  height: 33px;
-  width: 82px;
-  margin-top: 6px;
-}
-
-#global_header_avatar_container
-{
-  height: 33px!important;
-  width: 31px!important;
-  overflow: hidden;
-}
-
-#global_header_note_count
-{
-  color: #FFF;
-  background-color: #f05a28;
-  font-size: 12px;
-  height: 33px;
-  padding: 12px 0;
-  text-align: center;
-}
-
-#global_header_arrow_container
-{
-  width: 9px!important;
-}
-
-#global_header_arrow_container img
-{
-  padding-bottom: 6px;
-}
-
-#global_header_avatar_moreinfo_content
-{
-  background: url(../img/home_video_screen_60opacity.png);
-}
-
-#global_header_avatar_moreinfo
-{
-  width: 203px;
-}
-
-#global_header_avatar_moreinfo_name a, #global_header_avatar_moreinfo_mynotes a
-{
-  padding-top: 20px;
-  font-size: 17px;
-  font-family: "MuseoSlab-500";
-  color: #FFF;
-}
-
-#global_header_avatar_moreinfo_school a
-{
-  padding-top: 5px;
-  padding-bottom: 20px;
-  font-size: 12px;
-  font-family: "MuseoSans-700";
-  color: #FFF;
-  text-transform: uppercase;
-}
-
-#global_header_avatar_moreinfo_gear
-{
-  padding-top: 16px;
-  text-align: left;
-}
-
-#global_header_avatar_moreinfo_mynotes
-{
-  background-color: #f05a28;
-  padding-bottom: 3px;
-}
-
-#note_content, #course_content, #school_content, #results_content
-{
-  padding-top: 46px;
+#global-header {
+  margin-top: 20px;
 }
 
-
-/* INTERFACE ELEMENTS */
-
-.hero_gradient_bar
+.gradient-bar
 {
   background-color: #ffffff;
   background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#e8e8e8)); /* Safari 4+, Chrome */
   background-image: -webkit-linear-gradient(top, #ffffff, #e8e8e8); /* Chrome 10+, Safari 5.1+, iOS 5+ */
-  background-image:    -moz-linear-gradient(top, #ffffff, #e8e8e8); /* Firefox 3.6-15 */
-  background-image:      -o-linear-gradient(top, #ffffff, #e8e8e8); /* Opera 11.10-12.00 */
-  background-image:         linear-gradient(to bottom, #ffffff, #e8e8e8); /* Firefox 16+, IE10, Opera 12.50+ */
+  background-image: -moz-linear-gradient(top, #ffffff, #e8e8e8); /* Firefox 3.6-15 */
+  background-image: -o-linear-gradient(top, #ffffff, #e8e8e8); /* Opera 11.10-12.00 */
+  background-image: linear-gradient(to bottom, #ffffff, #e8e8e8); /* Firefox 16+, IE10, Opera 12.50+ */
   border-bottom: solid 1px #bdbcbd;
   -webkit-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, .35); /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
           box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, .35); /* Opera 10.5, IE9+, Firefox 4+, Chrome 6+, iOS 5 */
-  width: 100%;
-}
-
-.button_bevel
-{
-  -webkit-border-radius: 10px; /* Safari 3-4, iOS 1-3.2, Android ≤1.6 */
-          border-radius: 10px; /* Opera 10.5, IE9+, Safari 5, Chrome, Firefox 4+, iOS 4, Android 2.1+ */
-
-  /* useful if you don't want a bg color from leaking outside the border: */
-  -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
-  background-color: #eff0ef;
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#eff0ef), to(#a4a5a5)); /* Safari 4+, Chrome */
-  background-image: -webkit-linear-gradient(top, #eff0ef, #a4a5a5); /* Chrome 10+, Safari 5.1+, iOS 5+ */
-  background-image:    -moz-linear-gradient(top, #eff0ef, #a4a5a5); /* Firefox 3.6-15 */
-  background-image:      -o-linear-gradient(top, #eff0ef, #a4a5a5); /* Opera 11.10-12.00 */
-  background-image:         linear-gradient(to bottom, #eff0ef, #a4a5a5); /* Firefox 16+, IE10, Opera 12.50+ */
-  border: solid 1px #eff0ef;
-  cursor: pointer;
-}
-
-.button_interior
-{
-  -webkit-border-radius: 8px; /* Safari 3-4, iOS 1-3.2, Android ≤1.6 */
-          border-radius: 8px; /* Opera 10.5, IE9+, Safari 5, Chrome, Firefox 4+, iOS 4, Android 2.1+ */
-
-  /* useful if you don't want a bg color from leaking outside the border: */
-  -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
-  background-color: #f05a28;
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#f05a28), to(#c73e11)); /* Safari 4+, Chrome */
-  background-image: -webkit-linear-gradient(top, #f05a28, #c73e11); /* Chrome 10+, Safari 5.1+, iOS 5+ */
-  background-image:    -moz-linear-gradient(top, #f05a28, #c73e11); /* Firefox 3.6-15 */
-  background-image:      -o-linear-gradient(top, #f05a28, #c73e11); /* Opera 11.10-12.00 */
-  background-image:         linear-gradient(to bottom, #f05a28, #c73e11); /* Firefox 16+, IE10, Opera 12.50+ */
-}
-
-.inverted_button
-{
-  -webkit-border-radius: 8px; /* Safari 3-4, iOS 1-3.2, Android ≤1.6 */
-          border-radius: 8px; /* Opera 10.5, IE9+, Safari 5, Chrome, Firefox 4+, iOS 4, Android 2.1+ */
-
-  /* useful if you don't want a bg color from leaking outside the border: */
-  -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
-  background-color: #dadada;
-  /*border-top: solid 1px #fefefe;*/
-  color: #000000;
-  font-family: "MuseoSlab-300";
-  font-size: 16px;
-  text-align: center;
-  padding: 13px 19px 7px;
-  cursor: pointer;
-  border: 1px solid black;
-}
-.inverted_button:hover
-{
-  color:#f1592a;
-}
-
-.button_arrow
-{
-  padding-bottom: 2px;
-}
-
-.column_header
-{
-  font-family: "MuseoSlab-900";
-  font-size: 10px;
-  color: #8e8e8e;
-  border-bottom: 1px solid #8e8e8e;
-  text-transform: uppercase;
-  margin-bottom: 20px;
-  padding-left: 0px;
-}
-
-/* GLOBAL ACTIVITY ITEMS */
-a.course_link, a.course_link:hover, a.school_link, a.school_link:hover, a.prof_link, a.prof_link:hover
-{
-  text-decoration: underline;
-  color: #555555;
-}
-
-.activity_timestamp
-{
-  font-family: "MuseoSlab-500";
-  font-size: 10px;
-  text-transform: uppercase;
-  padding: 5px 0;
-}
-
-.row_alt_on
-{
-  background: url(../img/dashboard_activity_alt_on_bg.gif);
-}
-
-.activity_details_action, .activity_details_action a
-{
-  font-family: "MuseoSlab-300";
-  font-size: 22px;
-  line-height: 1.4em;
-  padding: 5px 0;
-}
-
-.activity_details_points, .activity_details_points a
-{
-  font-family: "MuseoSlab-300";
-  font-size: 25px;
-  line-height: 1.4em;
-  padding: 5px 0;
-}
-
-.activity_details_points_positive
-{
-  color: green;
-}
-
-.activity_details_points_negative
-{
-  color: red;
-}
-
-.note_name, .note_name a
-{
-  font-family: "MuseoSlab-300";
-  font-size: 22px;
-  line-height: 1.4em;
-}
-
-a.activity_actor, a.activity_actor:hover
-{
-  color: #f1592a;
-  text-decoration: underline;
-}
-
-a.activity_target
-{
-  color: black;
-  text-decoration: underline;
-}
-
-a.activity_target:hover
-{
-  color: #f1592a;
-}
-
-.course_details
-{
-  font-size: 14px;
-  line-height: 2em;
-}
-
-.activity_details_context, .activity_details_context a
-{
-  font-family: "MuseoSlab-900";
-  font-size: 11px;
-  text-transform: uppercase;
-  line-height: 200%;
-  padding: 5px 0;
-}
-
-.activity_details_callout
-{
-  padding: 20px 25px;
-  margin: 15px 0 13px;
-}
-
-.note_preview
-{
-  margin-bottom: 2em;
-  line-height: 125%;
-  font: 14px/1.4em "Georga", Serif;
-  font-style: italic;
-}
-
-.activity_details_callout_copy
-{
-  line-height: 125%;
-  font: 14px/1.4em "Georga", Serif;
-  font-style: italic;
-}
-
-.activity_details_status
-{
-  font-size: 13px;
-  font-family: "MuseoSans-500";
-  color: #232323;
-}
-
-.activity_details_status_number
-{
-  color: #f1592a;
-  font-family: "MuseoSans-900";
-}
-
-.activity_details_status_secondary_number
-{
-  font-family: "MuseoSlab-900";
-}
-
-.badge
-{
-  background: none repeat scroll 0 0 #FFFFCD;
-  border-top-color: rgb(238, 238, 238);
-  border-right-color: rgb(204, 204, 204);
-  border-bottom-color: rgb(204, 204, 204);
-  border-left-color: rgb(238, 238, 238);
-  border-style: solid;
-  border-width: 1px;
-  font-size: 14px;
-  padding: 4px 6px 4px 6px;
-  font-weight: bold;
-  line-height: 250%;
-}
-
-.course_meta_action
-{
-  height: 36px;
-  width: 39px;
-  font-family: "MuseoSlab-900";
-  font-size: 9px;
-  color: #FFF;
-  text-align: center;
-  padding-top: 13px;
-  margin-top: 20px; /* POSITION WITH JAVASCRIPT */
-}
-
-.course_meta_join
-{
-  background: url(../img/course_meta_join_bg.png) no-repeat;
-  text-transform: uppercase;
-}
-
-.course_meta_drop
-{
-  background: url(../img/course_meta_drop_bg.png) no-repeat;
-  text-transform: uppercase;
-}
-
-.add-note-btn:before {
-  content="<i class='fa fa-arrow-circle-o-up'></i>";
-}
-.add-note-btn:hover {
-  background-color: white;
-  color: #f05a28;
-}
-.add-note-btn {
-  padding:0;
-  margin: 0 auto;
-}
-
-.add-note-btn,
-#add-note-btn,
-#add-course-btn,
-#existing-course-btn,
-#save-btn,
-#save_note_tags,
-#edit-save-btn
-{
-  border: none;
-  background-color: transparent;
-  color: #f05a28;
-  cursor: pointer;
-  font: 30px/1.2em "MuseoSlab-300", serif;
-  margin: 1px;
-  text-align: center;
-  text-transform: uppercase;
-  /* transition: ease-out ? ? ? */
-}
-
-#existing-course-btn,
-#save-btn,
-#edit-save-btn {
-  margin-top: 13px;
-}
-
-#existing-course-btn.disabled,
-#save-btn.disabled,
-#edit-save-btn.disabled
-{
-  color: #afafaf;
-  cursor: auto;
-}
-
-.validation_error {
-  color:red;
-}
-
-#add-note-form, #add-course-form, #edit-course-form
-{
-  display: none;
-}
-
-.progress
-{
-  border: solid 1px black;
-  height: 10px;
-}
-
-#progress-fill
-{
-  height: 100%;
-  width: 0;
-  background-color: #f1592a;
-}
-
-/* COPY */
-
-.body_copy h1
-{
-  font-family: "MuseoSlab-700";
-  font-size: 15px;
-  text-transform: uppercase;
-  margin-top: 18px;
-  margin-bottom: 10px;
-}
-
-.body_copy p
-{
-  font-family: "MuseoSlab-500";
-  font-size: 15px;
-  margin-top: 8px;
-  margin-bottom: 8px;
-}
-
-/* GLOBAL FOOTER */
-
-footer#global_footer
-{
-  width: 100%;
-  min-height: 164px;
-  color: #FFF;
-  padding-top: 36px;
-  background-color: #000;
-}
-
-footer#global_footer a
-{
-  color: #FFF;
-}
-
-#footer_links_container
-{
-  font-size: 13px;
-  padding-bottom: 54px;
-}
-
-#colophon
-{
-  font-family: "MuseoSlab-500";
-  font-size: 11px;
-  line-height: 175%;
-}
-
-#colophon a
-{
-  color: #FFF;
-  text-decoration: underline;
-}
-
-#cc_logo
-{
-  margin-right: 5px;
-  margin-top: 3px;
-}
-
-/* EDITS POST DESIGN */
-ul#course_menu li a
-{
-  color: white;
-}
-
-/* New course-list homepage css */
-
-#subhead span
-{
-  /*margin-left: 2em;*/
-  font-family: "MuseoSlab-300";
-  font-size: 19px;
-}
-
-.subhead-spacer {
-  height: 42px;
-}
-
-.header_subhead
-{
-  font-family: "MuseoSans-900";
-  font-size: 10px;
-  text-align: center;
-  text-transform: uppercase;
-  padding-top: 20px;
-  padding-bottom: 1px;
-}
-
-.center
-{
-  text-align: center;
-}
-
-#page_instruction
-{
-  font-family: "MuseoSlab-700";
-  font-size: 12px;
-}
-/* end new course-list homepage css */
-
-a.white
-{
-  color: white;
-}
-
-a.white:hover
-{
-  color: #FFF;
-  cursor: pointer;
-  text-decoration: underline;
-}
-
-/* post-designers css hacks */
-.button_disabled img
-{
-  opacity: 0.4;
-  filter: alpha(opacity=40); /* msie */
-}
-
-.voted_message
-{
-  cursor: pointer;
-  font-size: 13px;
-  font-family: "MuseoSans-500";
-  color: #232323;
-}
-
-.voted_message:hover
-{
-  cursor: pointer;
-  text-decoration: underline;
-}
-
-/* new form submit */
-.submit_upload
-{
-  background: none;
-  border: none;
-  color: white;
-  cursor: pointer;
-  font-family: "MuseoSlab-300";
-  font-size: 32px;
-}
-
-/* GAAAH, random body p copy should be readable text */
-p.text
-{
-  font-family: "MuseoSlab-500";
-  font-size: 17px;
-  margin: 20px 0 0;
-  line-height: 150%;
-}
-p.text a
-{
-  color: #f05a28;
-  text-decoration: underline;
-}
-
-#thankyou
-{
-  margin: 60px 20px;
-  padding: 20px;
-}
-
-#thankyou p
-{
-  font-family: "MuseoSlab-300";
-  font-size: 22px;
-  margin: 0px;
-}
-
-/* Nick redesign for course page */
-#breadcrumbs, #breadcrumbs a
-{
-  font-family: "MuseoSans-300";
-  font-size: 12px;
-  padding-top: 10px;
-  color: black;
-}
-
-#breadcrumbs > .breadcrumbs {
-  /* override foundation 4 panel and outline for breadcrumbs */
-  border-style: none;
-  background-color: white;
-}
-
-.header_title
-{
-  margin-top: 1em;
-  text-align: center;
-  font-family: "MuseoSlab-500";
-  font-size: 24px;
-}
-
-
-#course_name a {
-  color: black;
-}
-
-#course_name:hover a{
-  text-decoration: underline;
-}
-
-.doubleline
-{
-  border: dotted black;
-  border-width: 1px 0 0;
-
-}
-
-.doubleline hr
-{
-  
-}
-
-hr.midrule
-{
-  border: dotted black;
-  border-width: 1px 0 0;
-  width: 140px;
-  margin: 2em auto;
-}
-
-legend
-{
-  font: 12px/2em "MuseoSlab-300";
-  margin-top: 20px;
-}
-
-.qq-upload-button {
-  margin-bottom:12px;
-}
-
-/* Turning font awesome icons into buttons */
-.awesome-action:hover {
-  /* For awesome icons with clickstates */
-  color: #f05a28;
-  cursor: pointer;
-}
-
-#drpbx-btn {
-  color: #3d9ae8;
-  cursor: pointer;
-}
-
-/* Filepicker integration */
-.fp_dropzone {
-  width: 100%;
-  height: 50px;
-  text-align: center;
-
-  background-color: #F6F6F6;
-  border: 1px dashed #666;
-  border-radius: 6px;
-  padding: 20px;
-}
-.dragdrop {
-  text-align: center;
-}
-
-.inline-form {
-  border-bottom: 1px dashed #666;
-}
-
-/* Social account integration */
-
-ul.socialaccount_providers li {
-  list-style: none;
-  margin: 10px 0 5px 0;
-}
-
-
-/* FOR LARGE SCREENS ONLY */
-@media only screen and (min-width: 768px) {
-  /* Front page intro text, large on wide, resize on small */
-  #subhead span {
-    font-size: 22px;
-  }
-}
+}
\ No newline at end of file

diff --git a/karmaworld/assets/css/home.css b/karmaworld/assets/css/home.css
index 41c0199878f7692e7ce9fdea775939f4f4d29620..e19b66b9c9b0f972997c834fd83025e19bacc898 100644 (file)
--- a/karmaworld/assets/css/home.css
+++ b/karmaworld/assets/css/home.css
@@ -1,125 +1,49 @@
-/* HOME */
-
-#home_content
-{
-  padding-top: 46px;
-}
-
-/* VIDEO */
-
-#home_video
-{
-  margin-left: -10px;
+#splash {
+  font-size: 2.5em;
+  padding: 20vh 15vw 20vh 15vw;
+  background: grey;
+  margin: 20px 0 20px 0;
+  border-radius: 0.2em;
+  color: white;
+  text-align: center;
 }
 
-#home_video_overlay
-{
-  background-image: url(../img/home_video_screen_80opacity.png);
-  position: absolute;
-  top: -574px;
-  height: 575px;
-  width: 1020px;
-  color: #FFF;
-  cursor: pointer;
+button.add-course {
+  background: grey;
+  color: white;
+  border: none;
+  padding: 5px;
+  border-radius: 0.3em;
+  display: inline;
 }
 
-#home_video_overlay_headline
-{
-  padding-top: 76px;
-  font-size: 60px;
+input.search-courses {
+  width: 15em;
+  display: inline;
+  margin-right: 0;
 }
 
-#home_video_overlay_more
-{
-  padding-top: 164px;
-  font-size: 28px;
-  text-transform: uppercase;
+button.search-courses {
+  display: inline;
+  border: 1px solid grey;
+  padding: 5px;
+  margin: 0;
+  background: white;
+  color: grey;
 }
 
-#home_video_overlay_more_arrow
-{
-  margin-top: -20px;
+#course-sort-wrapper {
+  float: right;
+  display: inline;
 }
 
-/* HOMEPAGE RECENT */
-
-#recent_uploaded_container
-{
-  background-color: #000;
+select.course-sort {
+  width: 10em;
 }
 
-#recent_uploaded_headline
-{
-  text-transform: uppercase;
-  font-size: 10px;
-  color: #c0c0c0;
-  padding-top: 12px;
-  padding-bottom: 12px;
-  width: 170px!important;
+#course-search-bar {
+  border: 1px solid grey;
+  padding: 10px 0 0 0;
 }
 
-#recent_uploaded_scroller_screen
-{
-  position: absolute;
-  height: 34px;
-  width: 140px;
-  background: url(../img/home_recent_uploaded_scroller_screen.png) repeat-y;
-  z-index: 2;
-}
 
-#recent_uploaded_scroller_screen_right
-{
-  position: absolute;
-  height: 34px;
-  width: 140px;
-  background: url(../img/home_recent_uploaded_scroller_screen_right.png) repeat-y;
-  z-index: 2;
-  margin-left: 475px;
-}
-
-#recent_uploaded_scroller_sled
-{
-  position: absolute;
-  top: -15px;
-  color: #FFF;
-  overflow-x: hidden;
-  white-space: nowrap;
-  width: 613px;
-}
-
-#recent_uploaded_scroller_sled ul li.recent_upload_note_name, #recent_uploaded_scroller_sled ul li.recent_upload_note_school
-{
-  list-style: none;
-  font-size: 13px;
-  display: inline-block;
-  margin: 0 5px;
-}
-
-#recent_uploaded_scroller_sled ul li.recent_upload_note_name
-{
-  color: #f1592a;
-  font-size: 13px;
-}
-
-#recent_uploaded_scroller_sled ul li.recent_upload_note_school
-{
-  color: #fff;
-  text-transform: uppercase;
-  font-size: 11px;
-  padding-top: 2px;
-}
-
-
-/* HOMEPAGE COPY */
-
-#home_copy p
-{
-  font-family: "MuseoSlab-700";
-  font-size: 25px;
-  margin: 40px 0;
-}
-
-/* override jquery ui autocomplete styles */
-.ui-menu .ui-menu-item a {
-  font-size: 18px;
-}

diff --git a/karmaworld/templates/courses/course_list.html b/karmaworld/templates/courses/course_list.html
index c7d16ed7c5ce4085a93bf25ef33f82c982e9ee22..e9e797290bff06162d1417a9cbace0e39bd3b80e 100644 (file)
--- a/karmaworld/templates/courses/course_list.html
+++ b/karmaworld/templates/courses/course_list.html
@@ -7,7 +7,6 @@
 
 {% block pagestyle %}
 <link rel="stylesheet" type="text/css" media="all" href="{{ STATIC_URL }}css/home.css">
-<!-- <link rel="stylesheet" href="{{ STATIC_URL }}css/responsive-tables.css"> -->
 <link rel="stylesheet" type="text/css" media="all" href="{{ STATIC_URL }}css/data_table_list.css">
 <link rel="stylesheet" type="text/css" media="all" href="{{ STATIC_URL }}css/datatables-css/jquery.dataTables.css">
 {% endblock %}
@@ -79,15 +78,29 @@ $(document).ready(function() {
 <section id="home_content">
   <div id="page_header" class="">
     <div id="subhead" class="row">
-      <div class="small-3 large-2 columns">
-        <img src='{{ STATIC_URL }}img/noun_project_6858.svg' alt="A depiction of books">
+      <div id="splash">
+        Browse and contribute lecture notes and quizzes from over 100 college courses.
       </div>
-      <div class="small-9 large-10 columns">
-        <div class="row subhead-spacer hide-for-small"> </div>
-        <span>Access a growing database of <span style="color: #f05a28;">{{ note_count }}</span> college lecture notes</span>
+    </div>
+  </div>
+
+  <div id="course-search-bar" class="row">
+    <div class="small-12 columns">
+      <button class="add-course">Add a Course</button>
+      <input class="search-courses" type="text" placeholder="Search Courses" />
+      <button class="search-courses">Search</button>
+      <div id="course-sort-wrapper">
+        Sort By
+        <select class="course-sort">
+          <option value="date" selected>Date</option>
+          <option value="notes">Number of Notes</option>
+          <option value="popularity">Popularity</option>
+        </select>
       </div>
     </div>
   </div>
+
+
   <div class="row">
     <div class="small-12 columns">
       <!-- Main course table -->

diff --git a/karmaworld/templates/header.html b/karmaworld/templates/header.html
index 23b12509892dd696fa3b9f41001616810252590a..edaec5c650a2d9d8654eaaad3c3dcd1b0cf9d3f7 100644 (file)
--- a/karmaworld/templates/header.html
+++ b/karmaworld/templates/header.html
@@ -1,60 +1,43 @@
 {% load url from future %}
 
-<header id="global_header">
-  <div class="row">
-    <div id="logo_container" class="small-7 medium-5 large-5 columns">
-      <div class="row">
-        <div class="small-12 medium-5 large-5 columns">
-          <a href="/">
-            <img src="{{ STATIC_URL }}img/global_header_logo.png" alt="global_header_logo" width="144" height="17" />
-          </a>
-        </div>
-        <div class="medium-7 large-7 columns show-for-medium-up">
-          {% if course.id %}
-            <div id="search_container">
-              <form action="{% url 'note_search' %}" method="GET">
-                <input type="text" id="search_txt" name="query" placeholder="Search in this course">
-                <input type="hidden" name="course_id" value="{{ course.id }}">
-              </form>
-            </div>
-          {% endif %}
-        </div>
-      </div>
-    </div><!--/logo container-->
 
-    {% if display_add_course %}
-      <div class="small-2 columns small-offset-3 show-for-medium-up">
-        <a id="add_course_header_button" href="#"><img src="{{ STATIC_URL }}img/global_header_pluscourse.png" /></a>
-      </div>
-    {% endif %}
+<header id="global-header">
+  {% if request.user.is_authenticated %}
+  <div id="header-login-nav" class="row nav-list">
+    <div class="small-12 columns">
+      <ul>
+        <li><a href="{% url 'accounts_profile' %}">{{ request.user.get_profile.get_points }} Karma Points</a></li>
+        <li><a href="{% url 'control_panel' %}">My Account</a></li>
+        <li><a href="{% url 'account_logout' %}">Log Out</a></li>
+      </ul>
+    </div>
+  </div>
+  {% endif %}
 
-    {% if display_add_note %}
-      <div class="small-2 columns small-offset-3 show-for-medium-up">
-        <a id="add_note_header_button" href="#" onclick="$('.add-note-btn').click();">
-          <img src="{{ STATIC_URL }}img/global_header_plusnote.png" /></a>
-      </div>
-    {% endif %}
+  <div id="main-header" class="row gradient-bar">
+    <div id="logo-container" class="small-12 large-4 columns">
+      <a href="/">
+        <img src="{{ STATIC_URL }}img/global_header_logo.png" alt="global_header_logo" width="144" height="17" />
+      </a>
+    </div><!--/logo container-->
 
-    <div id="login_container" class="small-4 medium-2 large-2 columns">
+    <div id="header-nav" class="small-12 large-8 columns nav-list">
       {% if request.user.is_authenticated %}
-        <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 'control_panel' %}">Control Panel</a></li>
-            <li><a href="{% url 'account_logout' %}">Log Out</a></li>
-          </ul>
-        </div>
-        <script>
-         $('#user_settings').click(function() {
-           $('#user_dropdown_container').toggle();
-         });
-        </script>
+        <ul>
+          <li>Courses</li>
+          <li>My Courses</li>
+          <li>My Notes</li>
+          <li>My Quizzes</li>
+        </ul>
       {% else %}
-        <a class="white" href="{% url 'account_login' %}">Log In</a>
+        <ul>
+          <li>Courses</li>
+          <li><a href="{% url 'account_login' %}">Log In</a></li>
+          <li><a href="{% url 'account_signup' %}">Sign Up</a></li>
+        </ul>
       {% endif %}
-      <a class="white show-for-large-up" href="{% url 'about' %}">About</a>
+      <!--/header-nav-->
     </div>
-
   </div>
+
 </header><!--/global header-->