Project

General

Profile

Desarrollo #1660

Agregar búsqueda en los cursos del open

Added by Federico Vera 5 months ago. Updated 5 months ago.

Status:
Resuelto
Priority:
Normal
Assignee:
Riddler
Start date:
2020-05-21
Due date:
% Done:

100%

Estimated time:
Dificultad:
Desconocido
Tags:
#1

Updated by Federico Vera 5 months ago

--- courseware/courses.html.old 2020-05-21 23:27:54.960055264 -0300
+++ courseware/courses.html 2020-05-22 00:09:57.770996027 -0300
@@ -31,7 +31,7 @@
 <%block name="pagetitle">${_("Courses")}</%block>

 <main id="main" aria-label="Content" tabindex="-1">
-    <section class="find-courses" style="background-image:url(https://edx.campusvirtual.unc.edu.ar/static/images/Mosaico_chico_unafila.png); background-blend-mode:overlay">    
+    <section class="find-courses" id="background_section">    
       <section class="courses-container">
         % if course_discovery_enabled:
         <div id="discovery-form" role="search" aria-label="course" class="wrapper-search-context">
@@ -54,15 +54,57 @@
         <div id="filter-bar" class="filters hide-phone is-collapsed">
         </div>
         % endif
+<style>
+*,::after,::before{box-sizing:border-box}.form-control{display:block;width:100%;height:calc(1.5em + 0.75rem + 2px);padding:0.375rem 0.75rem;font-size:1rem;font-weight:400;line-height:1.5;color:#495057;background-color:#fff;background-clip:padding-box;border:1px solid #ced4da;border-radius:0.25rem;transition:border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out}@media (prefers-reduced-motion: reduce){.form-control{transition:none}}.mb-3,.my-3{margin-bottom:1rem !important}.mt-4,.my-4{margin-top:1.5rem !important}.row{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-15px;margin-left:-15px}.no-gutters{margin-right:0;margin-left:0}.no-gutters > .col,.no-gutters > [class*="col-"]{padding-right:0;padding-left:0}.col,.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-auto,.col-lg,.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-auto,.col-md,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-auto,.col-sm,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-auto,.col-xl,.col-xl-1,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xl-auto{position:relative;width:100%;padding-right:15px;padding-left:15px}.col{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;min-width:0;max-width:100%}.row-cols-1 > *{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-2 > *{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-3 > *{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-4 > *{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-5 > *{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-6 > *{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-auto{-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:100%}.col-1{-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}.col-2{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-3{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-4{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.col-5{-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}.col-6{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-7{-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}.col-8{-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}.col-9{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.col-10{-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}.col-11{-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}.col-12{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}@media (min-width: 576px){.col-sm{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;min-width:0;max-width:100%}.row-cols-sm-1 > *{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-sm-2 > *{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-sm-3 > *{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-sm-4 > *{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-sm-5 > *{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-sm-6 > *{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-sm-auto{-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:100%}.col-sm-1{-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}.col-sm-2{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-sm-3{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-sm-4{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.col-sm-5{-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}.col-sm-6{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-sm-7{-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}.col-sm-8{-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}.col-sm-9{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.col-sm-10{-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}.col-sm-11{-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}.col-sm-12{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}}@media (min-width: 768px){.col-md{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;min-width:0;max-width:100%}.row-cols-md-1 > *{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-md-2 > *{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-md-3 > *{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-md-4 > *{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-md-5 > *{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-md-6 > *{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-md-auto{-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:100%}.col-md-1{-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}.col-md-2{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-md-3{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-md-4{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.col-md-5{-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}.col-md-6{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-md-7{-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}.col-md-8{-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}.col-md-9{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.col-md-10{-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}.col-md-11{-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}.col-md-12{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}}@media (min-width: 992px){.col-lg{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;min-width:0;max-width:100%}.row-cols-lg-1 > *{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-lg-2 > *{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-lg-3 > *{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-lg-4 > *{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-lg-5 > *{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-lg-6 > *{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-lg-auto{-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:100%}.col-lg-1{-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}.col-lg-2{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-lg-3{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-lg-4{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.col-lg-5{-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}.col-lg-6{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-lg-7{-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}.col-lg-8{-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}.col-lg-9{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.col-lg-10{-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}.col-lg-11{-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}.col-lg-12{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}}@media (min-width: 1200px){.col-xl{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;min-width:0;max-width:100%}.row-cols-xl-1 > *{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-xl-2 > *{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-xl-3 > *{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-xl-4 > *{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-xl-5 > *{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-xl-6 > *{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-xl-auto{-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:100%}.col-xl-1{-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}.col-xl-2{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-xl-3{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-xl-4{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.col-xl-5{-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}.col-xl-6{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-xl-7{-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}.col-xl-8{-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}.col-xl-9{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.col-xl-10{-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}.col-xl-11{-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}.col-xl-12{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}}
+</style>
+<script>
+function findCourse() {
+    let input = document.getElementById("myFilter");
+    let totC  = document.getElementById("totCursos");
+    let tot   = 0;
+
+    let filter = input.value.trim()
+                      .toLowerCase()
+                      .normalize("NFD")
+                      .replace(/[\u0300-\u036f]/g, "");
+
+    let cards = document.getElementsByClassName("course");
+
+    for (let i = 0; i < cards.length; i++) {
+        let title = cards[i].ariaLabel;
+        if (typeof(title) == "undefined") continue;
+        if (title.toLowerCase()
+                           .normalize("NFD")
+                           .replace(/[\u0300-\u036f]/g, "")
+                           .includes(filter)) {
+            cards[i].parentNode.parentElement.style = "";
+            cards[i].style = "display:block";
+            tot++;
+        } else {
+            cards[i].parentNode.parentElement.style = "list-style:none;display:none";
+            cards[i].style = "list-style:none;display:none";
+        }
+    }
+
+    totC.innerText = tot;
+}
+</script>
+
+    <div class="col-sm-12 mb-3" style="padding:0px">
+        <input type="" id="myFilter" class="form-control" onkeyup="findCourse();" placeholder="Busca el curso aquí">
+        <small>Mostrando <span id="totCursos">0</span> cursos</small>
+    </div>

-        <div class="courses${'' if course_discovery_enabled else ' no-course-discovery'}" role="region" aria-label="${_('List of Courses')}">
-          <ul class="courses-listing">
+       <div class="courses${'' if course_discovery_enabled else ' no-course-discovery'}" role="region" aria-label="${_('List of Courses')}">
+          <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4">
             %for course in courses:
-            <li class="courses-listing-item">
-              <%include file="../course.html" args="course=course" />
-            </li>
+
+              
+              <%include file="../course_edu.html" args="course=course" />
+          
+           
             %endfor
-          </ul>
+          </div>
         </div>


@@ -77,3 +119,13 @@
       </section>
     </section>
 </main>
+<script>
+    let totC  = document.getElementById("totCursos");
+    totC.innerText = document.getElementsByClassName("course").length;
+    if (!isMobile()) {
+        let model = document.getElementById("background_section");
+        model.style = "background-image:url(https://edx.campusvirtual.unc.edu.ar/static/images/Mosaico_chico_unafila.png); background-blend-mode:overlay";
+    }
+
+</script>
+


#2

Updated by Federico Vera 5 months ago

Además creamos un nuevo archivo course_edu.html:

<%def name="online_help_token()"><% return "course" %></%def>
<%namespace name='static' file='static_content.html'/>
<%!
from django.utils.translation import ugettext as _
from django.core.urlresolvers import reverse
%>
<%page args="course" expression_filter="h"/>
<div class="col mt-4">
<div class="card">
<article class="course" id="${course.id}" role="region" aria-label="${course.display_name_with_default}">
  <a href="${reverse('about_course', args=[course.id.to_deprecated_string()])}">
    <header class="course-image">
      <div class="cover-image">
        <img src="${course.course_image_url}" alt="${course.display_name_with_default} ${course.display_number_with_default}" />
        <div class="learn-more" aria-hidden="true">${_("LEARN MORE")}</div>
      </div>
    </header>
    <div class="course-info" aria-hidden="true">
      <h2 class="course-name">
        <span class="course-organization">${course.display_org_with_default}</span>
        <span class="course-code">${course.display_number_with_default}</span>
        <span class="course-title">${course.display_name_with_default}</span>
      </h2>
      <%
      if course.start is not None:
          course_date_string = course.start.strftime('%Y-%m-%dT%H:%M:%S%z')
      else:
          course_date_string = ''
      %>
      % if course.advertised_start is not None:
          <div class="course-date" aria-hidden="true">${_("Starts")}: ${course.advertised_start}</div>
      % else:
          <div class="course-date localized_datetime" aria-hidden="true" data-format="shortDate" data-datetime="${course_date_string}" data-string="${_("Starts: {date}")}"></div>
      % endif
    </div>
    <div class="sr">
      <ul>
        <li>${course.display_org_with_default}</li>
        <li>${course.display_number_with_default}</li>
        % if course.advertised_start is not None:
            <li>${_("Starts")}: <time itemprop="startDate">${course.advertised_start}</time></li>
        % else:
            <li>${_("Starts")}: <time class="localized_datetime" itemprop="startDate" data-format="shortDate" data-datetime="${course_date_string}"></time></li>
        % endif
      </ul>
    </div>
  </a>
 <script>
      if ("${course.display_name_with_default}".toLowerCase().includes("ocultar")) {
           let model = document.getElementById("${course.id}");
           model.style = "display:none";   
           model.parentNode.parentNode.style = "display:none";
           model.parentNode.parentNode.removeChild(model.parentNode);
      }
  </script>
</article>


<%static:require_module_async module_name="js/dateutil_factory" class_name="DateUtilFactory">
    DateUtilFactory.transform(iterationKey=".localized_datetime");
</%static:require_module_async>
</div>
</div>
#3

Updated by Federico Vera 5 months ago

  • Tags set to Búsqueda
  • Status changed from Nuevo to Resuelto
  • Assignee set to Riddler
  • % Done changed from 0 to 100

Also available in: Atom PDF

Go to top