From: Charles Connell <charles@connells.org>
Date: Sat, 29 Mar 2014 21:16:35 +0000 (-0400)
Subject: Switch to foundation modals
X-Git-Tag: release-20150131~144^2~24
X-Git-Url: https://git.librecmc.org/?a=commitdiff_plain;h=f7de4b44c56d14d2711b31c926e5019be58d093f;p=oweals%2Fkarmaworld.git

Switch to foundation modals
---

diff --git a/karmaworld/assets/css/global.css b/karmaworld/assets/css/global.css
index 6515429..c3521f0 100644
--- a/karmaworld/assets/css/global.css
+++ b/karmaworld/assets/css/global.css
@@ -171,3 +171,8 @@ table.dataTable tr.even {
   border-top: 2px solid #f0f0f0;
   border-bottom: 2px solid #f0f0f0;
 }
+
+ul.ui-autocomplete {
+  z-index: 1000;
+}
+
diff --git a/karmaworld/assets/css/note_course_pages.css b/karmaworld/assets/css/note_course_pages.css
index ec86d76..0efa0da 100644
--- a/karmaworld/assets/css/note_course_pages.css
+++ b/karmaworld/assets/css/note_course_pages.css
@@ -1,5 +1,5 @@
 
-span.course-header-school
+#course-header-school
 {
   font-weight: bold;
 }
diff --git a/karmaworld/assets/js/add-course.js b/karmaworld/assets/js/add-course.js
index 8a438f0..3b7be38 100644
--- a/karmaworld/assets/js/add-course.js
+++ b/karmaworld/assets/js/add-course.js
@@ -20,8 +20,6 @@ $(function() {
   };
 
   addCourse = function() {
-    // Show the add a course form
-    $('#add-course-form').dialog("open");
     // Put focus in first input field
     $('#str_school').focus();
   };
@@ -30,15 +28,8 @@ $(function() {
   // of page
   $('#add-course-btn').click(addCourse);
 
-  $('#add-course-form').dialog({
-    autoOpen: false,
-    modal: true,
-    show: { effect: 'fade', duration: 500 },
-    width: dialogWidth()
-  });
-
   if (jump_to_form) {
-    $("#add-course-form").dialog("open");
+    $("#add-course-form").foundation('reveal', 'open');
   }
 
   $("#str_school").autocomplete({
diff --git a/karmaworld/assets/js/course-detail.js b/karmaworld/assets/js/course-detail.js
index b3f9941..1e9d5e7 100644
--- a/karmaworld/assets/js/course-detail.js
+++ b/karmaworld/assets/js/course-detail.js
@@ -20,17 +20,6 @@ $(function() {
     }
   });
 
-  $('#edit-course-form').dialog({
-    autoOpen: false,
-    modal: true,
-    show: { effect: 'fade', duration: 500 },
-    width: dialogWidth()
-  });
-
-  $('#edit-button').click(function(event) {
-    $('#edit-course-form').dialog("open");
-  });
-
   $('#edit-save-btn').click(function(event) {
     $.ajax({
       url: course_edit_url,
@@ -46,8 +35,8 @@ $(function() {
         // on both the client and server side
         $('.validation_error').remove()
         $('#course_form_errors').empty();
-        $('#course_name').text(data.fields.name);
-        $('#course_instructor_name').text(data.fields.instructor_name);
+        $('#course-header-name').text(data.fields.name);
+        $('#course-header-instructor').text(data.fields.instructor_name);
 
         var $externalLinkSquare = $('<i>', {'class': 'fa fa-external-link-square'});
         $('#course_url').text(data.fields.url.slice(0, 50) + ' ');
@@ -58,6 +47,8 @@ $(function() {
         } else {
           $('#course_link').parent().show();
         }
+
+        $('#edit-course-form').foundation('reveal', 'close');
       },
       error: function(resp) {
         var json;
diff --git a/karmaworld/assets/js/note-detail.js b/karmaworld/assets/js/note-detail.js
index df60c53..67da534 100644
--- a/karmaworld/assets/js/note-detail.js
+++ b/karmaworld/assets/js/note-detail.js
@@ -117,18 +117,6 @@ $(function() {
     }
   });
 
-  $('#note-tag-dialog').dialog({
-    title: "Edit note tags",
-    autoOpen: false,
-    modal: true,
-    show: { effect: 'fade', duration: 500 },
-    width: dialogWidth()
-  });
-
-  $('#edit-note-tags').click(function(event) {
-    $('#note-tag-dialog').dialog("open");
-  });
-
   $('#save_note_tags').click(function(event) {
     $.ajax({
       url: edit_note_tags_url,
@@ -141,7 +129,7 @@ $(function() {
         $.each(data.fields.tags, function(index, tag) {
           $('.tags').append($('<span>', { class: 'tag-span', text: tag }));
         });
-        $('#note-tag-dialog').dialog("close");
+        $('#note-tag-dialog').foundation('reveal', 'close');
       }
     });
   });
diff --git a/karmaworld/assets/js/utils.js b/karmaworld/assets/js/utils.js
deleted file mode 100644
index d621c2a..0000000
--- a/karmaworld/assets/js/utils.js
+++ /dev/null
@@ -1,9 +0,0 @@
-
-function dialogWidth() {
-  var bodyWidth = $('body').width();
-  if (bodyWidth < 700) {
-    return bodyWidth;
-  } else {
-    return 700;
-  }
-}
diff --git a/karmaworld/templates/base.html b/karmaworld/templates/base.html
index c0f5d1b..b2df969 100644
--- a/karmaworld/templates/base.html
+++ b/karmaworld/templates/base.html
@@ -56,7 +56,6 @@
     {% block bodyscripts %}
     {% endblock %}
     <!-- end block bodyscripts -->
-    <script src="{{ STATIC_URL }}js/utils.js"></script>
     <script src="{{ STATIC_URL }}js/opentip-jquery-excanvas.min.js"></script>
     <script src="{{ STATIC_URL }}js/foundation.min.js"></script>
     <script src="{{ STATIC_URL }}js/foundation.offcanvas.js"></script>
diff --git a/karmaworld/templates/courses/course_detail.html b/karmaworld/templates/courses/course_detail.html
index ea074d5..32a71ed 100644
--- a/karmaworld/templates/courses/course_detail.html
+++ b/karmaworld/templates/courses/course_detail.html
@@ -36,9 +36,9 @@
     <div id="course-header">
       <div class="row header-byline">
         <div class="small-12 columns">
-          <span class="course-header-school">{{ course.school.name }}</span>&nbsp;&nbsp;&bull;&nbsp;&nbsp;
+          <span id="course-header-school">{{ course.school.name }}</span>&nbsp;&nbsp;&bull;&nbsp;&nbsp;
           {% if course.department %}<span class="course-header-department">{{ course.department.name }}</span>&nbsp;&nbsp;&bull;&nbsp;&nbsp;{% endif %}
-          <span class="course-header-instructor">{{ course.instructor_name }}</span>
+          <span id="course-header-instructor">{{ course.instructor_name }}</span>
         </div>
       </div>
 
@@ -53,7 +53,7 @@
             <span class="show-for-large-up">
               {% if user.is_authenticated %}
                 {% if user.get_profile.can_edit_items %}
-                  <button id="edit-button" class="modify-button"> <i class="fa fa-edit"></i> Edit this course</button>&nbsp;&nbsp;
+                  <button id="edit-button" data-reveal-id="edit-course-form" class="modify-button"> <i class="fa fa-edit"></i> Edit this course</button>&nbsp;&nbsp;
                 {% endif %}
 
                 {% if already_flagged %}
@@ -88,7 +88,8 @@
     </div><!-- /course_header -->
 
     {% if user.get_profile.can_edit_items %}
-      <section id="edit-course-form" class="hide">
+      <section id="edit-course-form" class="reveal-modal" data-reveal>
+        <a class="close-reveal-modal">&#215;</a>
         <form>
           {% csrf_token %}
 
@@ -147,10 +148,11 @@
         {{ file_upload_form.fp_file }}
       </div>
       <div class="small-12 large-6 columns">
-        <form class="search-notes" action="{% url 'note_search' %}" method="GET">
+        <form style="display: inline" class="search-notes" action="{% url 'note_search' %}" method="GET">
+          <span>
+          <input style="display: inline;" type="hidden" name="course_id" value="{{ course.id }}" />
           <input name="query" class="search-notes" type="text" placeholder="Search Notes" />
-          <input type="hidden" name="course_id" value="{{ course.id }}" />
-          <button type="submit" class="inline-button"><i class="fa fa-search"></i></button>
+          </span>
         </form>
       </div>
       <div class="large-4 columns show-for-large-up">
diff --git a/karmaworld/templates/courses/course_list.html b/karmaworld/templates/courses/course_list.html
index c2cdd87..515c8de 100644
--- a/karmaworld/templates/courses/course_list.html
+++ b/karmaworld/templates/courses/course_list.html
@@ -55,7 +55,7 @@
   <div id="course-search-bar">
     <div class="row">
       <div class="large-2 columns show-for-large-up">
-        <button id="add-course-btn" class="inline-button important">Add a Course</button>
+        <button id="add-course-btn" class="inline-button important" 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" />
diff --git a/karmaworld/templates/notes/note_detail.html b/karmaworld/templates/notes/note_detail.html
index 8408475..c47f50d 100644
--- a/karmaworld/templates/notes/note_detail.html
+++ b/karmaworld/templates/notes/note_detail.html
@@ -116,7 +116,7 @@
               {% endif %}
 
               {% if user.get_profile.can_edit_items %}
-                <button id="edit-note-tags" class="modify-button">
+                <button id="edit-note-tags" class="modify-button" data-reveal-id="note-tag-dialog">
                   <i class="fa fa-pencil-square-o"></i> Edit Tags
                 </button>
               {% endif %}
@@ -136,10 +136,14 @@
         </div><!-- /note_tags -->
       </div>
 
-      <div id="note-tag-dialog" class="row">
-        <div class="small-12 columns">
-          <input id="note_tags_input" type="text" value="{% for tag in note.tags.all %}{{ tag.name }}{% if not forloop.last %}, {% endif %}{% endfor %}">
-          <button id="save_note_tags" type=button><i class="fa fa-save"></i> Save</button>
+      <div id="note-tag-dialog" class="reveal-modal" data-reveal>
+        <a class="close-reveal-modal">&#215;</a>
+        <div class="row">
+          <div class="small-12 columns">
+            <p>Edit this note's tags:
+            <input id="note_tags_input" type="text" value="{% for tag in note.tags.all %}{{ tag.name }}{% if not forloop.last %}, {% endif %}{% endfor %}"></p>
+            <button id="save_note_tags" type=button><i class="fa fa-save"></i> Save</button>
+          </div>
         </div>
       </div>
 
diff --git a/karmaworld/templates/partial/add_course.html b/karmaworld/templates/partial/add_course.html
index ed560e0..70298ff 100644
--- a/karmaworld/templates/partial/add_course.html
+++ b/karmaworld/templates/partial/add_course.html
@@ -1,6 +1,7 @@
 {% load url from future %}
 
-<section id="add-course-form" class="hide">
+<section id="add-course-form" class="reveal-modal" data-reveal>
+  <a class="close-reveal-modal">&#215;</a>
   <form method="POST" action="{% url 'home' %}">
   {% csrf_token %}