algolia · aymeric-giraudet · Nov 2, 2022 · Nov 2, 2022 · Nov 3, 2022 · Nov 3, 2022
diff --git a/instantsearch.js/responsive-filtering/.editorconfig b/instantsearch.js/responsive-filtering/.editorconfig
@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
diff --git a/instantsearch.js/responsive-filtering/.eslintignore b/instantsearch.js/responsive-filtering/.eslintignore
@@ -0,0 +1,3 @@
+/node_modules
+/dist
+/.cache
diff --git a/instantsearch.js/responsive-filtering/.eslintrc.js b/instantsearch.js/responsive-filtering/.eslintrc.js
@@ -0,0 +1,3 @@
+module.exports = {
+  extends: 'algolia',
+};
diff --git a/instantsearch.js/responsive-filtering/.gitignore b/instantsearch.js/responsive-filtering/.gitignore
@@ -0,0 +1,22 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/dist
+/.cache
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/instantsearch.js/responsive-filtering/.prettierrc b/instantsearch.js/responsive-filtering/.prettierrc
@@ -0,0 +1,5 @@
+{
+  "singleQuote": true,
+  "proseWrap": "never",
+  "trailingComma": "es5"
+}
diff --git a/instantsearch.js/responsive-filtering/README.md b/instantsearch.js/responsive-filtering/README.md
@@ -0,0 +1,21 @@
+# responsive-filtering
+
+_This project was generated with [create-instantsearch-app](https://github.com/algolia/create-instantsearch-app) by [Algolia](https://algolia.com)._
+
+## Get started
+
+To run this project locally, install the dependencies and run the local server:
+
+```sh
+npm install
+npm start
+```
+
+Alternatively, you may use [Yarn](https://http://yarnpkg.com/):
+
+```sh
+yarn
+yarn start
+```
+
+Open http://localhost:3000 to see your app.
diff --git a/instantsearch.js/responsive-filtering/favicon.png b/instantsearch.js/responsive-filtering/favicon.png
diff --git a/instantsearch.js/responsive-filtering/index.html b/instantsearch.js/responsive-filtering/index.html
@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta name="theme-color" content="#000000" />
+
+    <link rel="manifest" href="./manifest.webmanifest" />
+    <link rel="shortcut icon" href="./favicon.png" />
+
+    <link
+      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi"
+      crossorigin="anonymous"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/satellite-min.css"
+    />
+    <link rel="stylesheet" href="./src/app.css" />
+
+    <title>responsive-filtering</title>
+  </head>
+
+  <body>
+    <header class="header">
+      <h1 class="header-title">
+        <a href="/">responsive-filtering</a>
+      </h1>
+      <p class="header-subtitle">
+        using
+        <a href="https://github.com/algolia/instantsearch.js">
+          InstantSearch.js
+        </a>
+      </p>
+    </header>
+
+    <div class="search-container">
+      <div class="search-panel">
+        <div id="searchbox"></div>
+
+        <div class="search-panel__filters">
+          <div id="filters-desktop">
+            <div id="current-refinements"></div>
+            <div id="category"></div>
+            <div id="brand"></div>
+            <div id="free-shipping"></div>
+          </div>
+
+          <div class="responsive-filters-buttons">
+            <div id="sort-by"></div>
+
+            <button id="open-filters">
+              <svg xmlns="http://www.w3.org/2000/svg">
+                <path
+                  d="M15 1H1l5.6 6.3v4.37L9.4 13V7.3z"
+                  stroke="#fff"
+                  stroke-width="1.29"
+                  fill="none"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                ></path>
+              </svg>
+              <span id="filters-count"></span>
+            </button>
+          </div>
+        </div>
+
+        <div id="hits"></div>
+      </div>
+    </div>
+
+    <div
+      class="modal"
+      tabindex="-1"
+      id="filters-modal"
+      role="dialog"
+      aria-labelledby="modal-title"
+      aria-hidden="true"
+    >
+      <div class="modal-dialog modal-fullscreen">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title" id="modal-title">Filters</h5>
+            <button
+              type="button"
+              class="btn-close"
+              data-bs-dismiss="modal"
+              aria-label="Close"
+            ></button>
+          </div>
+          <div class="modal-body" id="modal-body"></div>
+          <div id="modal-footer">
+            <div class="responsive-filters-footer">
+              <div id="clear-refinements"></div>
+
+              <button id="apply-filters">
+                <span id="hits-count"></span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
+
+    <script
+      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+      integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
+      crossorigin="anonymous"
+    ></script>
+
+    <script src="./src/app.js"></script>
+  </body>
+</html>
diff --git a/instantsearch.js/responsive-filtering/manifest.webmanifest b/instantsearch.js/responsive-filtering/manifest.webmanifest
@@ -0,0 +1,15 @@
+{
+  "short_name": "InstantSearch",
+  "name": "instantsearch.js Responsive Filtering Example",
+  "icons": [
+    {
+      "src": "favicon.png",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": "./index.html",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/instantsearch.js/responsive-filtering/package.json b/instantsearch.js/responsive-filtering/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "responsive-filtering",
+  "version": "1.0.0",
+  "private": true,
+  "main": "src/app.js",
+  "scripts": {
+    "start": "parcel index.html --port 3000",
+    "build": "parcel build index.html",
+    "lint": "eslint .",
+    "lint:fix": "npm run lint -- --fix"
+  },
+  "devDependencies": {
+    "babel-eslint": "10.0.3",
+    "eslint": "5.7.0",
+    "eslint-config-algolia": "13.2.3",
+    "eslint-config-prettier": "3.6.0",
+    "eslint-plugin-import": "2.19.1",
+    "eslint-plugin-prettier": "3.1.2",
+    "parcel-bundler": "1.12.4",
+    "prettier": "1.19.1"
+  },
+  "keywords": [
+    "algolia",
+    "InstantSearch",
+    "Vanilla",
+    "instantsearch.js"
+  ]
+}