fix(css): Renaming all ads- prefix to algolia-docsearch-

algolia · Dec 21, 2015 · c6fc53f · c6fc53f
1 parent 1f5d817
commit c6fc53f
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 45 deletions.
diff --git a/dev/docsearch-styling.css b/dev/docsearch-styling.css
@@ -1,35 +1,35 @@
 /* Bottom border of each suggestion */
-.ads-suggestion {
+.algolia-docsearch-suggestion {
   border-bottom-color: #3A3DD1;
 }
 /* Main category headers */
-.ads-suggestion--category-header {
+.algolia-docsearch-suggestion--category-header {
   background-color: #4B54DE;
 }
 /* Highlighted search terms */
-.ads-suggestion--highlight {
+.algolia-docsearch-suggestion--highlight {
   color: #3A33D1;
 }
 /* Highligted search terms in the main category headers */
-.ads-suggestion--category-header .ads-suggestion--highlight  {
+.algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--highlight  {
   background-color: #4D47D5;
 }
 /* Currently selected suggestion */
-.aa-cursor .ads-suggestion--content {
+.aa-cursor .algolia-docsearch-suggestion--content {
   color: #272296;
 }
-.aa-cursor .ads-suggestion {
+.aa-cursor .algolia-docsearch-suggestion {
   background: #EBEBFB;
 }
 
 /* For bigger screens, when displaying results in two columns */
 @media (min-width: 768px) {
   /* Bottom border of each suggestion */
-  .ads-suggestion {
+  .algolia-docsearch-suggestion {
     border-bottom-color: #7671df;
   }
   /* Left column, with secondary category header */
-  .ads-suggestion--subcategory-column {
+  .algolia-docsearch-suggestion--subcategory-column {
     border-right-color: #7671df;
     background-color: #F2F2FF;
     color: #4E4726;

diff --git a/src/lib/DocSearch.js b/src/lib/DocSearch.js
@@ -50,11 +50,7 @@ class DocSearch {
       source: this.getAutocompleteSource(),
       templates: {
         suggestion: this.getSuggestionTemplate(),
-        footer: `
-          <div class="ads-footer">
-            Search by <a class="ads-footer--logo" href="https://www.algolia.com/docsearch">Algolia</a>
-          </div>
-        `
+        footer: templates.footer
       }
     }]);
     this.autocomplete.on('autocomplete:selected', this.handleSelected);

diff --git a/src/lib/templates.js b/src/lib/templates.js
@@ -1,21 +1,28 @@
-let prefix = 'ads-suggestion';
+let prefix = 'algolia-docsearch';
+let suggestionPrefix = `${prefix}-suggestion`;
+let footerPrefix = `${prefix}-footer`;
 
 let templates = {
   suggestion: `
-  <div class="${prefix}
-    {{#isCategoryHeader}}${prefix}__main{{/isCategoryHeader}}
-    {{#isSubcategoryHeader}}${prefix}__secondary{{/isSubcategoryHeader}}
+  <div class="${suggestionPrefix}
+    {{#isCategoryHeader}}${suggestionPrefix}__main{{/isCategoryHeader}}
+    {{#isSubcategoryHeader}}${suggestionPrefix}__secondary{{/isSubcategoryHeader}}
   ">
-    <div class="${prefix}--category-header">{{{category}}}</div>
-    <div class="${prefix}--wrapper">
-      <div class="${prefix}--subcategory-column">{{{subcategory}}}</div>
-      <div class="${prefix}--content">
-        <div class="${prefix}--subcategory-inline">{{{subcategory}}}</div>
-        <div class="${prefix}--title">{{{title}}}</div>
-        <div class="${prefix}--text">{{{text}}}</div>
+    <div class="${suggestionPrefix}--category-header">{{{category}}}</div>
+    <div class="${suggestionPrefix}--wrapper">
+      <div class="${suggestionPrefix}--subcategory-column">{{{subcategory}}}</div>
+      <div class="${suggestionPrefix}--content">
+        <div class="${suggestionPrefix}--subcategory-inline">{{{subcategory}}}</div>
+        <div class="${suggestionPrefix}--title">{{{title}}}</div>
+        <div class="${suggestionPrefix}--text">{{{text}}}</div>
       </div>
     </div>
   </div>
+  `,
+  footer: `
+    <div class="${footerPrefix}">
+      Search by <a class="${footerPrefix}--logo" href="https://www.algolia.com/docsearch">Algolia</a>
+    </div>
   `
 };
 

diff --git a/src/styles/main.scss b/src/styles/main.scss
@@ -19,82 +19,82 @@
 }
 
 // Each suggestion
-.ads-suggestion {
+.algolia-docsearch-suggestion {
   color: #333;
   cursor: pointer;
   overflow: hidden;
   border-bottom: 1px solid $color-border;
 }
 
 // Main category headers
-.ads-suggestion--category-header {
+.algolia-docsearch-suggestion--category-header {
   display: none;
   background: $color-category-header-background;
   color: white;
   font-weight: 600;
   padding: 5px 10px;
   text-align: left;
   // Only show it when flaggued as "__main"
-  .ads-suggestion__main & {
+  .algolia-docsearch-suggestion__main & {
     display: block;
   }
 }
 
 // Highlight
-.ads-suggestion--highlight {
+.algolia-docsearch-suggestion--highlight {
   padding: 0;
   color: $color-highlight-text;
   background: none;
   font-weight: 600;
   // Highlight the background in header
-  .ads-suggestion--category-header & {
+  .algolia-docsearch-suggestion--category-header & {
     color: inherit;
     background: $color-highlight-header-background;
   }
 }
 
 // Selected suggestion
-.aa-cursor .ads-suggestion--content {
+.aa-cursor .algolia-docsearch-suggestion--content {
   color: $color-selected-text;
 }
-.aa-cursor .ads-suggestion {
+.aa-cursor .algolia-docsearch-suggestion {
   background: $color-selected-background;
 }
 
 // The secondary column is hidden on small screens
-.ads-suggestion--subcategory-column {
+.algolia-docsearch-suggestion--subcategory-column {
   display: none;
 }
 // The text snippet is hidden on small screens
-.ads-suggestion--text {
+.algolia-docsearch-suggestion--text {
   display: none;
 }
 
-.ads-suggestion--content {
+.algolia-docsearch-suggestion--content {
   padding: 3px 5px;
 }
 
-.ads-suggestion--subcategory-inline {
+.algolia-docsearch-suggestion--subcategory-inline {
   display: inline-block;
   font-weight: bold;
   &:after {
     content: " › ";
   }
 }
-.ads-suggestion--title {
+.algolia-docsearch-suggestion--title {
   display: inline;
 }
 
 // Footer
 
-.ads-footer {
+.algolia-docsearch-footer {
   border-top: 1px solid $color-border-light;
   text-align: right;
   font-size: 12px;
   padding: 4px 2px 0 0;
   color: #333;
 
-  .ads-footer--logo {
+  .algolia-docsearch-footer--logo {
     display: inline-block !important;
     width: 45px;
     height: 16px;
@@ -111,7 +111,7 @@
 // BREAKPOINT 1:
 // Screen is big enough to display the text snippets
 @media (min-width: $breakpoint-medium) {
-  .ads-suggestion--text {
+  .algolia-docsearch-suggestion--text {
     display: block;
     font-size: .9em;
     padding: 2px 0;
@@ -121,12 +121,12 @@
 // BREAKPOINT 2:
 // Screen is big enough to display results in two columns
 @media (min-width: $breakpoint-large) {
-  .ads-suggestion {
+  .algolia-docsearch-suggestion {
     display: table;
     width: 100%;
     border-bottom: 1px solid $color-border-light;
   }
-  .ads-suggestion--subcategory-column {
+  .algolia-docsearch-suggestion--subcategory-column {
     border-right: 1px solid $color-border-light;
     background: $color-left-column-bg;
     color: $color-left-column;
@@ -141,17 +141,17 @@
     max-width: 135px; // Hardcoded
     min-width: 135px; // Hardcoded
   }
-  .ads-suggestion--content {
+  .algolia-docsearch-suggestion--content {
     display: table-cell;
     padding: 5px 10px;
   }
-  .ads-suggestion--subcategory-inline {
+  .algolia-docsearch-suggestion--subcategory-inline {
     display: none;
   }
-  .ads-suggestion--title {
+  .algolia-docsearch-suggestion--title {
     font-weight: 600;
   }
-  .ads-suggestion--text {
+  .algolia-docsearch-suggestion--text {
     display: block;
     font-weight: normal;
     padding: 2px;