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 */
-}
\ No newline at end of file
+}
+
+#global_footer {
+ line-height: 1.5em;
+ margin: 10px 0 20px 0;
+}
+
+#footer-links-container {
+ border-top: 1px dashed grey;
+}
+
margin-right: 0;
}
-button.search-courses {
- display: inline;
- border: 1px solid grey;
- padding: 5px;
- margin: 0;
- background: white;
- color: grey;
-}
-
#course-sort-wrapper {
float: right;
display: inline;
padding: 10px 0 0 0;
}
+span.table-school,
+span.table-note-count,
+span.table-quiz-count,
+span.table-thanks-count {
+ font-weight: bold;
+}
+
+span.table-course-name {
+ font-size: 2em;
+ font-weight: bold;
+}
+
+table.dataTable tbody tr {
+ height: 8em;
+ border-bottom: 1px solid grey;
+}
+
+td.last-td {
+ border-bottom: 1px solid grey;
+}
+
+#add-course-btn {
+ text-transform: uppercase;
+ font-size: 2.5em;
+ text-align: center;
+}
--- /dev/null
+$(function() {
+
+ if (jump_to_form) {
+ $("#add-course-form").show();
+ $('#add-course-btn').hide();
+ document.getElementById('add-course-form').scrollIntoView(true);
+ }
+
+ // load dataTable for course data
+ var dataTable = $('#data_table_list').dataTable({
+ // we will set column widths explicitly
+ 'bAutoWidth': false,
+ // don't provide a option for the user to change the table page length
+ 'bLengthChange': false,
+ // sepcify the number of rows in a page
+ 'iDisplayLength': 20,
+ // Position the filter bar at the top
+ 'sDom': '<"top">rt<"bottom"p><"clear">',
+ // Specify options for each column
+ "aoColumnDefs": [
+ {
+ // 3rd element: thanks
+ "aTargets": [ 2 ],
+ "bSortable": true,
+ "bVisible": true
+ },
+ {
+ // 2nd element: notes
+ "aTargets": [ 1 ],
+ "bSortable": true,
+ "bVisible": true
+ },
+ {
+ // 1st element: date
+ "aTargets": [ 0 ],
+ "bSortable": true,
+ "bVisible": true
+ }
+ ],
+ // Initial sorting
+ 'aaSorting': [[2,'desc']]
+ });
+
+ // wire up search box
+ $('input.search-courses').keyup(function() {
+ dataTable.fnFilter($(this).val());
+ });
+
+ // wire up sort chooser
+ $('select.course-sort').change(function() {
+ dataTable.fnSort([[$(this).val(), 'desc']]);
+ });
+
+ // sort by current value of sort chooser, since
+ // the browser may change this from our default
+ dataTable.fnSort([[$('select.course-sort').val(), 'desc']]);
+
+});
+
{% endblock %}
{% block pagestyle %}
-<link rel="stylesheet" type="text/css" media="all" href="{{ STATIC_URL }}css/home.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">
+ <link rel="stylesheet" type="text/css" media="all" href="{{ STATIC_URL }}css/home.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 %}
{% block pagescripts %}
-<script src="{{ STATIC_URL }}js/jquery.dataTables.min.js"></script>
-
-<script>
-$(document).ready(function() {
- // If there were form errors, open the form and jump to it
- var jump_to_form = {% if jump_to_form %}true{% else%}false{% endif %};
- if (jump_to_form) {
- $("#add-course-form").show();
- $('#add-course-btn').hide();
- document.getElementById('add-course-form').scrollIntoView(true);
- }
-
- // load dataTable for course data
- $('#data_table_list').dataTable({
- // remove the default filter label
- 'oLanguage': {
- 'sSearch': '',
- },
- // we will set column widths explicitly
- 'bAutoWidth': false,
- // don't provide a option for the user to change the table page length
- 'bLengthChange': false,
- // sepcify the number of rows in a page
- 'iDisplayLength': 20,
- // Position the filter bar at the top
- 'sDom': '<"top"f>rt<"bottom"p><"clear">',
- // Specify options for each column
- "aoColumnDefs": [
- {
- // 4th element: thanks
- "aTargets": [ 3 ],
- "bSortable": true,
- "bVisible": true
- },
- {
- // 3rd element: notes
- "aTargets": [ 2 ],
- "bSortable": true,
- "bVisible": true
- },
- {
- // 2nd element: date
- "aTargets": [ 1 ],
- "bSortable": true,
- "bVisible": true
- },
- {
- // 1st element: "sort by" label
- "aTargets": [ 0 ],
- "bSortable": false,
- "bVisible": true
- }
- ],
- // Initial sorting
- 'aaSorting': [[2,'desc']]
- });
- $('.dataTables_filter input').attr("placeholder", "search courses");
- // TODO: can't prepend html to .dataTables_filter input html for fontawesome search icon
-});
-</script>
+ <script>
+ // If there were form errors, open the form and jump to it
+ var jump_to_form = {% if jump_to_form %} true {% else%} false {% endif %};
+ </script>
+ <script src="{{ STATIC_URL }}js/jquery.dataTables.min.js"></script>
+ <script src="{{ STATIC_URL }}js/course-list.js"></script>
{% endblock %}
{% block content %}
<div id="course-search-bar" class="row">
<div class="small-12 columns">
- <button class="add-course">Add a Course</button>
+ <button class="add-course" onclick="$('#add-course-btn').click();">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>
+ <option value="0">Date</option>
+ <option value="1">Number of Notes</option>
+ <option value="2" selected>Popularity</option>
</select>
</div>
</div>
<div class="small-12 columns">
<!-- Main course table -->
<table id="data_table_list">
- <thead>
+ <thead class="hide">
<tr>
- <th id="data-table-sort-by"> Sort by: </th>
- <th id="data-table-date"> Date </th>
- <th id="data-table-note-count"> #Notes </th>
- <th id="data-table-thanks"> Popularity </th>
- <th class="no-display" id="data-table-upload"> Upload </th>
+ <th class="no-display" id="data-table-date"> Date </th>
+ <th class="no-display" id="data-table-note-count"> # Notes </th>
+ <th class="no-display" id="data-table-thanks"> Popularity </th>
+ <th class="no-display" id="data-table-upload"> School & Instructor </th>
<th class="no-display" id="data-table-course-name"> Course Name </th>
- <th class="no-display" id="data-table-school-name"> Institution </th>
- <th class="no-display" id="data-table-instructor-name"> Instructor </th>
+ <th class="no-display" id="data-table-school-name"> Stats </th>
</tr>
</thead>
<tbody>
<div id="add-course-btn">
<i class="fa fa-arrow-circle-o-up"></i> add a course
</div>
- {% include 'partial/add_course.html' %}
+ {% include 'partial/add_course.html' %}
</div><!-- .ten columns -->
</div> <!-- .row -->
-<tr>
- <td class="no-display"><!-- this spot solely for the Sort By header --></td>
- <td class="small-8 columns large-4 slim"><span>Updated {{ course.updated_at|date:"b d, o"|capfirst }}</span></td>
- <td class="small-4 columns large-2 large-offset-2 slim"><span>{{ course.file_count }} Notes</span></td>
- <td class="small-4 columns large-2 large-offset-1 slim"><span>{{ course.get_popularity }} Thanks</span></td>
+<tr class="table-row">
+ <td class="hide">{{ course.updated_at|date:"U" }}</td>
+ <td class="hide">{{ course.file_count }}</td>
+ <td class="hide">{{ course.get_popularity }}</td>
- <td class="small-12 large-5 columns">
- <a href="{{ course.get_absolute_url }}">{% if course.department %}{{course.department.name}}: {% endif %}{{ course.name }}</a>
+ <td class="small-12 columns">
+ <span class="table-school">{{ course.school.name }}</span> •
+ {% if course.department %}<span class="table-department">{{ course.department.name }}</span> • {% endif %}
+ <span class="table-instructor">{{ course.instructor_name }}</span>
</td>
- <td class="hide-for-small large-1 column">
- <div class="upload">
- <a href="{{ course.get_absolute_url }}#upload-note">
- <i
- data-ot="Upload directly to this course"
- data-ot-target="true"
- data-ot-tip-joint="top center"
- data-ot-target-joint="bottom center"
- data-ot-background="white"
- data-ot-border-color="black"
- class="fa fa-arrow-circle-o-up opentip"></i>
- </a>
- </div>
+
+ <td class="small-12 columns">
+ <span class="table-course-name"><a href="{{ course.get_absolute_url }}">{{ course.name }}</a></span>
+ </td>
+
+ <td class="small-12 columns last-td">
+ <span class="table-note-count">{{ course.file_count }} Notes</span> •
+ <span class="table-quiz-count">{{ course.quiz_count }} Quizzes </span> •
+ <span class="table-thanks-count">{{ course.get_popularity }} Thanks </span> •
+ <span>Updated {{ course.updated_at|date:"b d, o"|capfirst }}</span>
</td>
- <td class="small-6 large-3 columns"><span class="table-font">{{ course.school.name }}</span></td>
- <td class="small-6 large-3 columns"><span class="table-font">{{ course.instructor_name }}</span></td>
+
</tr>
<footer id="global_footer">
<div class="row">
- <div id="footer_links_container" class="small-10 columns small-offset-1">
+ <div id="footer-links-container" class="small-10 columns small-offset-1">
<a href="{% url 'about' %}">About</a> | <a href="{% url 'terms' %}">Terms</a> | <a href="https://github.com/FinalsClub/karmaworld">Code</a> | <a href="http://www.reddit.com/r/KarmaNotes/">Discussion</a> <!--| <a href="#">Donate</a>-->
</div><!--/footer_links_container-->
</div>
<script src="{{ STATIC_URL }}js/course.js"></script>
<script src="{{ STATIC_URL }}js/add-course.js"></script>
-<section id="add-course-form">
+<section id="add-course-form" class="hide">
<form method="POST" action="{% url 'home' %}">
{% csrf_token %}
<div class="row">
<div class="small-12 columns">
- <legend>
+ <label for="str_school">
School
{% for error in course_form.school.errors %}
<span style="color:red">
{{ error }}
</span>
{% endfor %}
- </legend>
+ </label>
<div>
<input id="str_school" class="" type="text" name="str_school" placeholder="Select a school"/>
<input id="id_school" name="school" type='hidden'/>
<div class="row">
<div class="small-12 columns">
- <legend>Course Name:
+ <label for="id_name">Course Name:
{% if course_form.name.errors %}
<span style="color:red">
{{ course_form.name.errors }}
</span>
{% endif %}
- </legend>
+ </label>
<input id="id_name" class="" type="text" name="name" maxlength="255" />
</div>
</div> <!-- .row -->
<div class="row">
<div class="small-12 columns">
- <legend>Do not fill in this field:
+ <label>Do not fill in this field:
{% for error in honeypot_errors %}
<span style="color:red">
{{ error }}
</span>
{% endfor %}
- </legend>
+ </label>
<input type="text" name="{{HONEYPOT_FIELD_NAME}}" value="{{HONEYPOT_VALUE}}" />
</div>
</div>
<div class="row">
<div class="small-12 columns large-6">
- <legend class="">
+ <label for="id_instructor_name">
Instructor Name:
{% for error in course_form.instructor_name.errors %}
<span style="color:red">
{{ error }}
</span>
{% endfor %}
- </legend><!-- -->
+ </label><!-- -->
<input id="id_instructor_name" class="" type="text" name="instructor_name" maxlength="75" />
</div>
<div class="small-12 columns large-6">
- <legend class="">
+ <label for="id_instructor_email">
Instructor Email:
{% for error in course_form.instructor_email.errors %}
<span style="color:red">
{{ error }}
</span>
{% endfor %}
- </legend>
+ </label>
<input id="id_instructor_email" class="" type="text" name="instructor_email" maxlength="75" />
</div><!-- -->
</div> <!-- .row -->
<div class="row">
<div class="small-12 columns">
- <legend>Course url:
+ <label for="id_url">Course url:
{% for error in course_form.url.errors %}
<span style="color:red">
{{ error }}
</span>
{% endfor %}
- </legend>
+ </label>
<input id="id_url" class="" type="text" name="url" maxlength="255" />
</div>
</div> <!-- .row -->
projects / oweals / karmaworld.git / commitdiff