feat(css): support Detached mode (#438)

Co-authored-by: François Chalifour <[email protected]>
algolia · Feb 10, 2021 · 82747d5 · 82747d5
1 parent 8a50e90
commit 82747d5
Show file tree

Hide file tree

Showing 2 changed files with 103 additions and 48 deletions.
diff --git a/packages/autocomplete-js/src/getDefaultOptions.ts b/packages/autocomplete-js/src/getDefaultOptions.ts
@@ -103,7 +103,10 @@ export function getDefaultOptions<TItem extends BaseItem>(
       renderEmpty,
       renderer: renderer ?? defaultRenderer,
       detachedMediaQuery:
-        detachedMediaQuery ?? '(hover: none) and (pointer: coarse)',
+        detachedMediaQuery ??
+        getComputedStyle(document.documentElement).getPropertyValue(
+          '--aa-detached-media-query'
+        ),
     },
     core,
   };

diff --git a/packages/autocomplete-theme-classic/src/theme.scss b/packages/autocomplete-theme-classic/src/theme.scss
@@ -16,8 +16,11 @@
   --aa-text-color: rgb(38, 38, 39);
   --aa-content-text-color: rgb(38, 38, 39, 0.7);
   --aa-background-color: rgb(255, 255, 255);
+  --aa-background-color-alpha-0: rgba(255, 255, 255, 0);
   --aa-panel-shadow: 0 0 0 1px rgba(35, 38, 59, 0.1),
     0 6px 16px -4px rgba(35, 38, 59, 0.15);
+  --aa-panel-max-height: 500px;
+  --aa-detached-media-query: (max-width: 500px);
 }
 
 // ----------------
@@ -61,7 +64,6 @@ body {
     border: 1px solid var(--aa-muted-color);
     border-radius: 3px;
     display: flex;
-    line-height: 1em;
     padding: 0 var(--aa-spacing) 0 var(--aa-spacing-half);
     position: relative;
     width: 100%;
@@ -162,6 +164,7 @@ body {
 // ----------------
 // Panel
 // ----------------
+
 .aa-Panel {
   position: absolute;
   // reset
@@ -175,44 +178,47 @@ body {
     background: none;
     border: 0;
   }
-  &.aa-Panel--desktop {
-    .aa-PanelLayout {
-      background-color: var(--aa-background-color);
-      border-radius: 3px;
-      box-shadow: var(--aa-panel-shadow);
-      margin-top: var(--aa-spacing-half);
-      overflow: hidden;
-      padding-bottom: var(--aa-spacing-half);
-      padding-top: var(--aa-spacing-half);
-      text-align: left;
-      .aa-PanelLayoutResults {
-        overflow-y: scroll;
-        width: 50%;
-      }
-      .aa-PanelLayoutPreview {
-        border-left: solid 1px var(--aa-selected-color);
-        flex-shrink: 1;
-        max-width: 50%;
-        overflow: hidden;
-      }
-    }
+
+  &::after {
+    background-image: linear-gradient(
+      var(--aa-background-color-alpha-0),
+      var(--aa-background-color)
+    );
+    border-radius: 3px;
+    bottom: 0;
+    content: '';
+    height: 0.75em;
+    pointer-events: none;
+    position: absolute;
+    width: 100%;
+    z-index: 99;
   }
-  &.aa-Panel--touch {
-    left: var(--aa-spacing-half);
+  .aa-PanelLayout {
+    background-color: var(--aa-background-color);
+    border-radius: 3px;
+    box-shadow: var(--aa-panel-shadow);
+    height: 100%;
+    margin-top: var(--aa-spacing-half);
+    max-height: var(--aa-panel-max-height);
+    overflow-y: auto;
+    padding-bottom: var(--aa-spacing-half);
     padding-top: var(--aa-spacing-half);
-    right: var(--aa-spacing-half);
+    position: relative;
+    text-align: left;
 
-    .aa-TouchOnly {
-      display: none;
-    }
-    .aa-Item {
-      border-radius: 3px;
-      padding: 0;
+    .aa-PanelLayoutResults {
+      overflow-x: hidden;
+      overflow-y: auto;
+      width: 50%;
     }
-    .aa-SourceHeader {
-      margin: var(--aa-spacing-half) 0 var(--aa-spacing-half) 2px;
+    .aa-PanelLayoutPreview {
+      border-left: solid 1px var(--aa-selected-color);
+      flex-shrink: 1;
+      max-width: 50%;
+      overflow: hidden;
     }
   }
+
   // when a query isn't resolved yet
   &.aa-Panel--stalled {
     filter: grayscale(1);
@@ -228,6 +234,7 @@ body {
 // Each source can be styled independently
 // ----------------
 .aa-Source {
+  position: relative;
   width: 100%;
   // source title
   .aa-SourceHeader {
@@ -272,6 +279,7 @@ body {
     list-style: none;
     margin: 0;
     padding: 0;
+    position: relative;
   }
 }
 
@@ -283,17 +291,15 @@ body {
   color: var(--aa-text-color);
   cursor: pointer;
   display: flex;
-  height: 100%;
+  //height: 100%;
   line-height: 1.1em;
   padding: 0 var(--aa-spacing-half);
-
   .aa-ActiveOnly {
     visibility: hidden;
   }
   // when the result is active
   &[aria-selected='true'] {
     background-color: var(--aa-selected-color);
-
     .aa-ItemActionButton,
     .aa-ActiveOnly {
       visibility: visible;
@@ -303,7 +309,9 @@ body {
   .aa-ItemWrapper,
   .aa-ItemLink {
     align-items: center;
+    color: inherit;
     display: flex;
+    text-decoration: none;
     width: 100%;
   }
   .aa-ItemLink {
@@ -313,6 +321,7 @@ body {
   // the result type icon inlined svg or img
   .aa-ItemIcon {
     align-items: center;
+    align-self: flex-start;
     background: #fff;
     border-radius: 3px;
     box-shadow: inset 0 0 0 1px var(--aa-selected-color);
@@ -356,7 +365,7 @@ body {
     .aa-ItemContentTitle {
       display: inline-block;
       max-width: 100%;
-      overflow-x: hidden;
+      overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
     }
@@ -468,25 +477,68 @@ body {
 }
 
 .aa-TouchOverlay {
-  backdrop-filter: blur(16px);
   background: var(--aa-background-color);
   bottom: 0;
   left: 0;
-  padding: var(--aa-spacing-half);
+  padding: var(--aa-spacing-half) 0 var(--aa-spacing-half)
+    var(--aa-spacing-half);
   position: fixed;
   right: 0;
   top: 0;
   .aa-TouchFormContainer {
+    border-bottom: solid 1px var(--aa-selected-color);
     display: flex;
     justify-content: space-between;
+    margin-right: var(--aa-spacing-half);
+    padding-bottom: var(--aa-spacing-half);
+    .aa-Form {
+      padding: 0 var(--aa-spacing-half) 0 0;
+    }
+    .aa-TouchCancelButton {
+      background: none;
+      border: 0;
+      color: inherit;
+      cursor: pointer;
+      font: inherit;
+      padding: 0 0 0 var(--aa-spacing-half);
+    }
   }
-  .aa-TouchCancelButton {
-    background: none;
-    border: 0;
-    color: inherit;
-    cursor: pointer;
-    font-size: inherit;
-    padding: 0;
-    padding-left: var(--aa-spacing-half);
+  .aa-Panel {
+    background-color: var(--aa-background-color);
+    height: 100vh; // TODO: compute with js
+    left: var(--aa-spacing-half);
+    overflow-y: auto;
+    padding-bottom: var(--aa-spacing);
+    padding-right: var(--aa-spacing-half);
+    padding-top: var(--aa-spacing-half);
+    right: 0;
+    .aa-PanelLayout {
+      box-shadow: none;
+      margin: 0;
+      max-height: none;
+      padding: 0;
+    }
+    .aa-Item {
+      border-radius: 3px;
+      padding: 0;
+    }
+    .aa-SourceHeader {
+      margin: var(--aa-spacing-half) 0 var(--aa-spacing-half) 2px;
+    }
+  }
+  &::after {
+    height: 32px;
+  }
+}
+
+// remove scroll for body
+.aa-Detached {
+  height: 100vh;
+  overflow: hidden;
+}
+
+@media (hover: none) and (pointer: coarse) {
+  .aa-TouchOnly {
+    display: none !important; // TODO: fix specificity issue
   }
 }