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,120 @@
+<!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="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"
+  ]
+}
diff --git a/instantsearch.js/responsive-filtering/src/app.css b/instantsearch.js/responsive-filtering/src/app.css
@@ -0,0 +1,164 @@
+/* Global */
+body,
+h1 {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
+    Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+}
+
+em {
+  background: cyan;
+  font-style: normal;
+}
+
+mark {
+  padding: 0;
+}
+
+#root {
+  overflow: hidden;
+}
+
+/* Header */
+.header {
+  display: flex;
+  align-items: center;
+  min-height: 50px;
+  padding: 0.5rem 1rem;
+  background-image: linear-gradient(to right, #8e43e7, #00aeff);
+  color: #fff;
+  margin-bottom: 1rem;
+}
+
+.header a {
+  color: #fff;
+  text-decoration: none;
+}
+
+.header-title {
+  font-size: 1.2rem;
+  font-weight: normal;
+}
+
+.header-title::after {
+  content: ' ▸ ';
+  padding: 0 0.5rem;
+}
+
+.header-subtitle {
+  font-size: 1.2rem;
+}
+
+.ais-ClearRefinements-button {
+  height: 40px;
+}
+
+/* Container */
+.search-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 1rem;
+}
+
+/* Search */
+.search-panel {
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+  gap: 1em;
+}
+
+.search-panel__filters {
+  grid-row: 1 / 3;
+}
+
+.search-panel__pagination {
+  margin: 2rem auto;
+  text-align: center;
+}
+
+.responsive-filters-buttons {
+  display: none;
+  gap: 1em;
+}
+
+#sort-by {
+  width: 100%;
+}
+
+.responsive-filters-footer {
+  position: sticky;
+  margin-top: auto;
+  bottom: 0;
+  border-top: 1px solid #ccc;
+  background-color: white;
+  padding: 1em;
+  display: flex;
+  justify-content: space-evenly;
+  gap: 1em;
+  flex-wrap: nowrap;
+}
+
+#apply-filters,
+#open-filters {
+  width: 100%;
+  font-size: 14px;
+  line-height: 1.25rem;
+  padding: 0 1rem;
+  color: #ffffff;
+  background-color: #3c4fe0;
+  background-image: linear-gradient(-180deg, #3c4fe0 0%, #2b3cbb 100%);
+  border: 1px solid #2b3cbb;
+  box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 6%),
+    0 1px 0 0 rgb(35 38 59 / 10%);
+  height: 32px;
+  border-radius: 3px;
+  height: 40px;
+}
+
+#apply-filters:hover,
+#open-filter:hover {
+  border-color: #1e2b8f;
+  background-image: linear-gradient(0deg, #1e2b8f, #2b3cbb);
+}
+
+#apply-filters:active,
+#open-filter:active {
+  background-image: linear-gradient(0deg, #3c4fe0, #2b3cbb);
+  border-color: #1e2b8f;
+  box-shadow: inset 0 1px 0 0 hsl(0deg 0% 100% / 6%), 0 0 0 1px #1e2b8f,
+    0 2px 0 1px rgb(35 38 59 / 10%);
+}
+
+#open-filters svg {
+  margin-bottom: 2px;
+  width: 16px;
+  height: 14px;
+  padding-right: 4px;
+  box-sizing: content-box;
+}
+
+#clear-refinements {
+  width: 100%;
+}
+
+@media (max-width: 650px) {
+  .search-panel {
+    grid-template-columns: auto;
+  }
+
+  .search-panel__filters {
+    grid-row: 2 / 3;
+  }
+
+  .responsive-filters-buttons {
+    display: flex;
+  }
+
+  #filters-desktop {
+    display: none;
+  }
+}