Upgrade Materialize [closes #8, closes #7]

chadokruse · Mar 22, 2018 · b9b90b0 · b9b90b0
1 parent a1ddca0
commit b9b90b0
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 57 deletions.
diff --git a/_includes/algolia-template-refinement-item.html b/_includes/algolia-template-refinement-item.html
@@ -1,15 +1,9 @@
 {% raw %}
-  <div class="temp-fix-materialize-bug truncate">
-      <label for="{{cssId}}" title="{{label}}">
-        <input type="checkbox" class="filled-in" id="{{cssId}}" {{#isRefined}}checked="checked"{{/isRefined}} />
-        {{value}}
-      </label>
-      <span class="right small text-muted-max">{{count}}</span>
+  <div>
+    <label for="{{cssId}}" title="{{label}}">
+      <input type="checkbox" class="filled-in" id="{{cssId}}" {{#isRefined}}checked="checked"{{/isRefined}} />
+      <span>{{value}}</span>
+    </label>
+    <span class="refinement-count right small text-muted-max">{{count}}</span>
   </div>
-{% endraw %}
-{% comment %}
-  Note, the code above uses a non-standard method to get around a known Materialize bug.
-  Reproducible Codepen: https://codepen.io/anon/pen/GMBzjX
-  Github Issue: https://github.com/Dogfalo/materialize/issues/5062
-  May require refactor as APIs likely to change in v1.0 release of Materialize
-{% endcomment %}
+{% endraw %}
diff --git a/_layouts/search.html b/_layouts/search.html
@@ -18,18 +18,19 @@
     <meta name="description" content="Boilerplate for a simple Jekyll site that uses Materialize for design and Algolia for search">
 
     <!-- Fonts -->
-    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700">
 
     <!-- Styles -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.4/css/materialize.min.css">
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.2.1/dist/instantsearch.min.css">
     <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/search.css">    
 
     <!-- JavaScript -->
-    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
-    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
+    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.4/js/materialize.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@2.2.1/dist/instantsearch.min.js"></script>
-    <script type="text/javascript" src="{{ site.baseurl }}/assets/js/search.js"></script>
+    <script src="{{ site.baseurl }}/assets/js/search.js"></script>
   </head>
   <body>
 
@@ -96,7 +97,6 @@ <h1>Search Our Grants</h1>
             </div>
             <div class="divider hide-on-med-and-down"></div>
             <div class="section section-refinements hide-on-med-and-down">
-              <!-- Filters / Refinements -->
               <div class="row">
                 <div class="col s12">
                   <div class="card">

diff --git a/assets/css/search.scss b/assets/css/search.scss
@@ -1,5 +1,9 @@
 ---
 ---
+body {
+  font-family: 'Roboto', sans-serif;
+}
+
 /* Override Materialize defaults */
 input[type=text],
 input[type=text]:not(.browser-default),
@@ -190,27 +194,21 @@ nav.nav-center ul.ul-center li .ais-search-box {
 #ais-widget-sort-by {
   .input-field {
     margin-top: 0px !important;
+    margin-bottom: 0px !important;
   }
-  select {
-    // Necessary without select plugin
-    display: inline-block;
-    padding: 0;
-  }
-  select, input, .caret { // Can remove 'select' if select plugin initiated
+  input, .caret {
     color: $text-muted !important; 
   }
   select, input {
     margin-bottom: 0 !important;
     border-bottom: 0 !important;
     line-height: 1.5rem !important;
     height: 1.5rem !important;
-    // If using Materialize plugin, can remove all below
-    background-color: transparent !important; // Necessary without select plugin
-    border: none !important; // Necessary without select plugin
-    outline: none !important; // Necessary without select plugin
-    line-height: 1.4rem !important;
-    height: 1.4rem !important;
-
+    font-size: 15px;
+    font-family: 'Roboto';
+  }
+  .dropdown-content li>a, .dropdown-content li>span {
+    color: $accent-color;
   }
 }
 .divider {
@@ -226,29 +224,20 @@ nav.nav-center ul.ul-center li .ais-search-box {
   }
 }
 .section-refinements {
-  .temp-fix-materialize-bug {
+  [type="checkbox"].filled-in:checked+span:not(.lever):after {
+    border: 2px solid $accent-color;
+    background-color: $accent-color;
+  }
+  label {
+    // TODO Eliminate truncate hack
+    width: 78%;
+    display: inline-block;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+  span.refinement-count {
     line-height: 25px;
-    margin-bottom: 8px;
-    cursor: pointer;
-    label {
-      font-size: 1rem;
-      cursor: pointer;
-      // TODO Eliminate truncate hack
-      width: 78%;
-      display: inline-block;
-      text-overflow: ellipsis;
-      overflow: hidden;
-    }
-    label:after, label:before {
-      display: none;
-    }
-    [type="checkbox"] {
-      margin-right: 8px;
-      position: inherit !important;
-      opacity: 1 !important;
-      pointer-events: auto !important;
-      cursor: pointer;
-    }
+    height: 25px;
   }
   .ais-root__collapsed {
     .ais-header {

diff --git a/assets/js/search.js b/assets/js/search.js
@@ -2,11 +2,11 @@
 ---
 $(document).ready(function(){
   // Initialize Materialize components
-  // Note: if the element is create dynamically via Instantsearch widget,
+  // Note: if the element is created dynamically via Instantsearch widget,
   // the plugin needs to be initialized in the normal Instantsearch workflow
-  // See https://github.com/chadokruse/algolia-materialize-jekyll/issues/8
+  // using the render method (e.g. search.once('render'...)
   $('.parallax').parallax();
-  $('.button-collapse').sideNav();
+  $('.button-collapse').sidenav();
   $('.nav-search nav').pushpin({
     top: $('.nav-search nav').offset().top
   });
@@ -409,6 +409,12 @@ $(document).ready(function(){
     })
   );
 
+  // Initialize Materialize JS components
+  search.once('render', function(){
+    $('select').formSelect();
+  });
+
+  // Initialize search
   search.start();
 
   // Scroll to top upon input change