Merge branch 'buscador'

lanacioncom · Jan 7, 2019 · d89bb84 · d89bb84
2 parents 074d8d3 + 07c5879
commit d89bb84
Show file tree

Hide file tree

Showing 5 changed files with 156 additions and 3 deletions.
diff --git a/less/app.less b/less/app.less
@@ -1694,6 +1694,17 @@ footer {
 // Media queries
 
 @media screen and (max-width: @screen-xs-max){
+    select.select2 {
+        width: 100%;
+
+
+     }
+
+    .select2.select2-container {
+
+         margin-bottom: 20px;
+    }
+
     #mobile-filters {
 
         margin: 20px 0 0 0;

diff --git a/less/select2custom.ln.less b/less/select2custom.ln.less
@@ -0,0 +1,102 @@
+.select2-container {
+    margin-right: 10px;
+    text-align: left;
+    z-index: 4000;
+    font-size: 11px;
+}
+
+.select2-container--default .select2-selection--single .select2-selection__rendered{
+    font-family: Arial, Georgia;
+    color: #000;
+    text-align: center;
+    line-height: 30px;
+    padding-left: 20px;
+    padding-right: 30px;
+    font-size: 12px;
+
+}
+
+.select2-selection__placeholder{
+    color:black !important;
+    font-size: 12px;
+}
+
+.select2-container--default .select2-selection--single {
+    border: 1px solid #000;
+    border-radius: 100px;
+    height: 30px;
+}
+
+.select2-container--default.select2-container--open.select2-container--below .select2-selection--single, .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
+    border-top-left-radius: 18px;
+    border-top-right-radius: 18px;
+}
+
+.select2-container--default .select2-selection--single .select2-selection__arrow{
+    top: 2px;
+    right: 9px;
+}
+
+.select2-dropdown{
+    font-family: 'Suecaslabmedium', Georgia;
+}
+
+.select2-results__option {
+    padding: 9px 6px;
+}
+
+/* multiple */
+
+
+.select2-container--default .select2-selection--multiple{
+    border: 1px solid #dadada;
+    border-radius: 20px;
+    min-height: 34px;
+
+}
+
+.select2-container--default .select2-search--inline .select2-search__field{
+    font-family: 'Suecaslabmedium', Georgia;
+    color:#000;
+}
+
+.select2-container--default .select2-selection--multiple .select2-selection__rendered{
+    padding: 0 15px;
+}
+
+.select2-container--default .select2-selection--multiple .select2-selection__choice {
+    background-color: #EDFAFF;
+    border: 0px solid #aaa;
+    border-radius: 15px;
+    cursor: default;
+    float: left;
+    margin-right: 5px;
+    margin-top: 3px;
+    padding: 6px 10px;
+    font-family: 'Suecaslabmedium';
+    font-size: 15px;
+}
+
+.select2-container--default.select2-container--focus .select2-selection--multiple {
+    border: solid #0084b4 1px;
+    outline: 0;
+        overflow: hidden;
+}
+
+.select2-results__option {
+    padding: 9px 6px;
+    color: #000;
+    font-family: Arial;
+    font-size: 13px;
+    text-align: center;
+}
+
+.select2-container--default .select2-selection--multiple .select2-selection__choice{
+    max-width: 220px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.select2-container--default .select2-results__option--highlighted[aria-selected]{
+    background-color: #000;
+}
diff --git a/templates/_base.html b/templates/_base.html
@@ -14,6 +14,8 @@
     <link rel="stylesheet" type="text/css" href="http://especiales.lanacion.com.ar/multimedia/proyectos/fonts/font.css">
 
     <!-- <link rel="stylesheet" type="text/css" href="http://especiales.lanacion.com.ar/interactivos/base/estilos.css"> -->
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css">
 
     <!-- CHARTBEAT -->
     <script type="text/javascript">var _sf_startpt=(new Date()).getTime()</script>
@@ -95,7 +97,8 @@
     {{ JS.push('js/templates.js') }}
     {{ JS.push('js/app.js') }}
     {{ JS.render('js/app-footer.min.js') }}
-
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
+
     {% block extra_foot %}
     {% endblock extra_foot %}
 

diff --git a/templates/index.html b/templates/index.html
@@ -114,6 +114,9 @@ <h3 class="current-tag"><span id="showing-span"></span><span id="tag-span"></spa
 
 
                 </ul>
+                <select class="select2" name="state">
+                   <!-- <option value="WY">museos</option> -->
+                </select>
             </div>
             <!-- Book Cards Grid -->
 

diff --git a/www/js/app.js b/www/js/app.js
@@ -42,6 +42,7 @@ var touchFactor = 1;
 var swipeDetected = null;
 
 var bodyPosition = 0;
+var $search;
 
 /*
  * Scroll to a given element.
@@ -415,6 +416,8 @@ var on_book_modal_closed = function() {
         $('body').scrollTo(bodyPosition, { duration:1000 });
     }
 
+    clear_select2_search();
+
     return true;
 
 };
@@ -515,9 +518,16 @@ var resize = function() {
     $large_ad.height(height);
 }
 
+var clear_select2_search = function() {
+
+     $search.val(null);
+    $search.trigger("change");
+};
+
+
 $(function() {
- console.log('get data');
- var api_url = [window.API_URL, "/", window.PROJECT_SLUG].join("");
+ // console.log('get data');
+ var api_url = [window.API_URL, "/", window.PROJECT_SLUG, "/"].join("");
  $.get(api_url, function(data) {
     console.log('get data done');
     window.BOOKS = data;
@@ -546,6 +556,7 @@ function init() {
     $share_modal = $('#share-modal');
     $large_ad = $('#largeVersion');
     $header = $('#top');
+
     window.BOOKS = _.shuffle(window.BOOKS);
     _.each(window.BOOKS, function(book, i) {
         var book_grid_content = window.JST["book_grid_item"]({
@@ -565,14 +576,37 @@ function init() {
         }
         return book;
     }), 'sort_title');
+
+    var selectData = [];
     _.each(window.BOOKS_SORTED, function(book, i) {
         var book_list_content = window.JST["book_list_item"]({
             book: book,
             loop_index: i
         });
         $books_list.append(book_list_content);
+        selectData.push({id: book.slug, text: book.title})
     });
 
+    /** statrt select2 */
+    $search = $(".select2");
+    $search.select2({
+        data: selectData,
+        placeholder: "Buscar",
+        allowClear: true,
+        width: '100%'
+    })
+    .on("change", function(){
+        // console.log(this.value);
+        if(this.value){
+            hasher.setHash('book', this.value);
+            ANALYTICS.trackEvent('view-from-search-select', this.value);
+
+        }
+    });
+    clear_select2_search();
+    /** --statrt select2 */
+
+
     // Event handlers.
     $body.on('click', '.filter .tag', on_tag_clicked);
     $content.on('click', '.back-to-top', back_to_top);