Search previews (#1884)

Co-authored-by: Zach Daniel <[email protected]> Co-authored-by: TJ <[email protected]> Co-authored-by: arathunku <[email protected]>
elixir-lang · Apr 8, 2024 · 0e076ca · 0e076ca
1 parent e7ba368
commit 0e076ca
Show file tree

Hide file tree

Showing 38 changed files with 815 additions and 448 deletions.
diff --git a/assets/css/_html.css b/assets/css/_html.css
@@ -37,6 +37,7 @@
 @import "print-cheatsheet.css";
 @import "makeup.css";
 @import "tabset.css";
+@import "preview.css";
 
 body:not(.dark) .content-inner img[src*="#gh-dark-mode-only"],
 body.dark .content-inner img[src*="#gh-light-mode-only"] {

diff --git a/assets/css/autocomplete.css b/assets/css/autocomplete.css
@@ -10,7 +10,7 @@
   height: 0;
   border-left: 12px solid transparent;
   border-right: 12px solid transparent;
-  border-bottom: 12px solid var(--autocompleBackground);
+  border-bottom: 12px solid var(--autocompleteBackground);
   position: absolute;
   top: 8px;
   left: 26px;
@@ -19,6 +19,58 @@
   background-color: transparent;
 }
 
+.autocomplete-preview {
+  width: 100%;
+  margin: 0;
+  height: 100%;
+  line-height: 20px;
+  background-color: var(--background);
+  font-family: var(--sansFontFamily);
+  border: 4px solid var(--autocompleteBorder);
+  padding: 12px 16px;
+}
+
+.autocomplete-preview div, .autocomplete-preview span {
+  display: none;
+}
+
+.autocomplete-preview.loading div {
+  float: left;
+  display: block;
+  border: 5px solid var(--autocompleteBorder);
+  border-radius: 50%;
+  border-top: 5px solid var(--textDetailAccent);
+  width: 20px;
+  height: 20px;
+  animation: spinner 4s linear infinite;
+}
+
+.autocomplete-preview.loading span {
+  color: var(--autocompleteResults);
+  display: inline;
+  margin-left: 6px;
+}
+
+.autocomplete-preview.loading span:after {
+  color: var(--autocompleteResults);
+  content: "Loading";
+}
+
+@keyframes spinner {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.autocomplete-preview.loading iframe {
+  height: 0;
+}
+
+.autocomplete-preview iframe {
+  width: 100%;
+  height: 100%;
+  border: 0;
+}
+
 .autocomplete-results {
   list-style: none;
   margin: 0;
@@ -40,43 +92,97 @@
   display: block;
 }
 
-.autocomplete-suggestions {
-  background-color: var(--autocompleBackground);
-  border-radius: 8px;
+.autocomplete-container {
   position: absolute;
   top: 15px;
   width: 100%;
   z-index: 200;
+}
+
+.autocomplete-suggestions {
+  background-color: var(--autocompleteBackground);
+  border-radius: 8px;
   box-shadow: 0px 15px 99px 0px var(--autocompleteBorder);
   overflow-y: auto;
   max-height: 450px;
   white-space: normal;
   overflow-x: hidden;
 }
 
+.autocomplete-suggestions.previewing:has(.selected) {
+  max-height: 900px;
+}
+
+.autocomplete-suggestions.previewing:has(.selected) .autocomplete-suggestion:not(.selected) {
+  display: none;
+}
+
+.autocomplete-suggestions.previewing:not(:has(.selected)) .autocomplete-preview {
+  display: none;
+}
+
+.autocomplete-suggestions:not(.previewing) .autocomplete-preview {
+  display: none;
+}
+
 .autocomplete-suggestion {
   color: inherit;
   display: block;
   padding: 12px 20px;
   text-decoration: none;
   transition: background-color 0.3s ease-in-out;
-  border-bottom: 1px solid var(--suggestionBorder);
+  border-top: 1px solid var(--suggestionBorder);
   font-size: 0.9rem;
 }
 
-.autocomplete-suggestion:first-child {
-  border-top: 1px solid var(--suggestionBorder);
+.autocomplete-suggestion:hover,
+.autocomplete-suggestion.selected {
+  background-color: var(--autocompleteHover);
 }
 
-.autocomplete-suggestion:last-child {
-  border-bottom: 0;
+.autocomplete-suggestion:not(.selected) .autocomplete-preview-indicator {
+  display: none;
 }
 
-.autocomplete-suggestion:hover,
-.autocomplete-suggestion.selected {
+.autocomplete-preview-indicator {
+  float: right;
+}
+
+.autocomplete-preview-indicator button {
+  color: var(--iconAction);
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  border: 1px solid var(--suggestionBorder);
+  border-radius: 8px;
+  transition: color .3s ease-in-out;
+  background-color: var(--autocompletePreview);
+  cursor: pointer;
+  padding: 4px 8px;
+  font-size: 14px;
+}
+
+.autocomplete-preview-indicator button:hover {
+  color: var(--iconActionHover);
   background-color: var(--autocompleteHover);
 }
 
+.autocomplete-preview-indicator button i {
+  margin-right: 4px;
+}
+
+.autocomplete-suggestions.previewing .autocomplete-preview-indicator-closed {
+  display: none;
+}
+
+.autocomplete-suggestions:not(.previewing) .autocomplete-preview-indicator-open {
+  display: none;
+}
+
+.autocomplete-suggestion:hover:not(.selected) .autocomplete-preview-indicator-closed {
+  display: block;
+}
+
 .autocomplete-suggestion em {
   font-style: normal;
   font-weight: bold;
@@ -117,8 +223,10 @@
 
 /* Style the scrollbar track (the area behind the thumb) */
 .autocomplete-suggestions::-webkit-scrollbar {
-  width: 5px; /* Set the width of the scrollbar */
-  border-radius: 7px; /* Add rounded corners to the thumb */
+  width: 5px;
+  /* Set the width of the scrollbar */
+  border-radius: 7px;
+  /* Add rounded corners to the thumb */
   flex-shrink: 0;
 }
 
@@ -137,4 +245,4 @@
   .autocomplete-results .press-return {
     display: none;
   }
-}
+}
diff --git a/assets/css/content/functions.css b/assets/css/content/functions.css
@@ -2,21 +2,22 @@
   from {
     background-color: var(--textDetailBackground);
   }
+
   to {
     background-color: var(--blink);
   }
 }
 
 .content-inner .detail:target .detail-header {
-  animation-duration: .55s;
+  animation-duration: 0.55s;
   animation-name: blink-background;
   animation-iteration-count: 1;
   animation-timing-function: ease-in-out;
 }
 
 .content-inner .detail-header {
-  margin: 2.0em 0 1.0em;
-  padding: .5em 1em;
+  margin: 2 0 1em;
+  padding: 0.5em 1em;
   background-color: var(--textDetailBackground);
   border-left: 3px solid var(--textDetailAccent);
   font-size: 1em;
@@ -42,13 +43,13 @@
 }
 
 .content-inner .detail-header a.detail-link {
-  transition: opacity .3s ease-in-out;
+  transition: opacity 0.3s ease-in-out;
   position: absolute;
   top: 0;
   left: 0;
   display: block;
   opacity: 0;
-  padding: .6em;
+  padding: 0.6em;
   line-height: 1.5em;
   margin-left: -2.5em;
   text-decoration: none;
@@ -63,7 +64,7 @@
 
 .content-inner .specs pre {
   font-family: var(--monoFontFamily);
-  font-size: .9em;
+  font-size: 0.9em;
   font-style: normal;
   line-height: 24px;
   white-space: pre-wrap;
@@ -88,17 +89,21 @@
 .content-inner .docstring:is(h2, h3, h4, h5) {
   font-weight: 700;
 }
+
 .content-inner .docstring h2 {
   font-size: 1.1em;
 }
+
 .content-inner .docstring h3 {
-  font-size: 1.0em;
+  font-size: 1em;
 }
+
 .content-inner .docstring h4 {
-  font-size: .95em;
+  font-size: 0.95em;
 }
+
 .content-inner .docstring h5 {
-  font-size: .9em;
+  font-size: 0.9em;
 }
 
 .content-inner div.deprecated {

diff --git a/assets/css/content/general.css b/assets/css/content/general.css
@@ -17,7 +17,7 @@
 
 .content-inner h1 {
   font-size: 2em;
-  margin: 0.8em 0 0.5em;
+  margin: 0.5em 0;
 }
 
 .content-inner h1.signature {

diff --git a/assets/css/custom-props/theme-dark.css b/assets/css/custom-props/theme-dark.css
@@ -91,9 +91,10 @@ body.dark {
   --searchBarBorder:             var(--gray500);
   --searchAccentMain:            var(--gray300);
   --searchSearch:                var(--gray900);
-  --autocompleteBorder:          rgba(0,0,0,.25);
+  --autocompleteBorder:          rgba(28,42,60,.75);
+  --autocompletePreview:         var(--gray750);
   --autocompleteHover:           var(--gray700);
-  --autocompleBackground:        var(--gray800);
+  --autocompleteBackground:      var(--gray800);
   --suggestionBorder:            var(--gray600);
   --autocompleteResults:         var(--gray200);
   --autocompleteResultsBold:     var(--gray100);

diff --git a/assets/css/custom-props/theme-light.css b/assets/css/custom-props/theme-light.css
@@ -93,8 +93,9 @@
   --searchLanguageAccentBar:     var(--main);
   --searchSearch:                var(--white);
   --autocompleteBorder:          rgba(3, 9, 19, 0.10);
+  --autocompletePreview:         var(--gray25);
   --autocompleteHover:           var(--grey50, #F0F5F9);
-  --autocompleBackground:        var(--white); 
+  --autocompleteBackground:      var(--white);
   --suggestionBorder:            var(--gray200);
   --autocompleteResults:         var(--gray600);
   --autocompleteResultsBold:     var(--gray800);

diff --git a/assets/css/icons.css b/assets/css/icons.css
@@ -1,3 +1,9 @@
+/*
+* Only used icons are included in the font
+* Icons can be generated at https://remixicon.com/
+* In assets/fonts/RemixIconCollection.remixicon there's easy to import on website list of icons
+*/
+
 @font-face {
   font-family: 'remixicon';
   src: url('../fonts/remixicon.woff2') format('woff2');
@@ -47,4 +53,4 @@
 .ri-information-line:before { content: var(--icon-information); }
 .ri-alert-line:before { content: var(--icon-alert); }
 .ri-double-quotes-l:before { content: var(--icon-double-quotes-l); }
-.ri-printer-line:before { content: var(--icon-printer-line); }
+.ri-printer-line:before { content: var(--icon-printer-line); }
diff --git a/assets/css/layout.css b/assets/css/layout.css
@@ -22,7 +22,7 @@ body {
   box-sizing: inherit;
 }
 
-.main {
+.body-wrapper {
   display: flex;
   height: 100%;
 }
@@ -60,7 +60,7 @@ body {
   position: absolute;
 }
 
-.content-inner {
+.content .content-inner {
   max-width: var(--content-width);
   min-height: 100%;
   margin: 0 auto;

diff --git a/assets/css/preview.css b/assets/css/preview.css
@@ -0,0 +1,23 @@
+body.preview {
+  --sidebarWidth: 0px;
+}
+
+body.preview .content {
+  height: auto;
+}
+
+body.preview .content-inner {
+  padding: 0;
+}
+
+body.preview .sidebar, body.preview #sidebar-menu {
+  display: none;
+}
+
+body.preview .hover-link, body.preview .detail-link {
+  display: none;
+}
+
+body.preview :is(h1, h2, h3):first-of-type {
+  margin-top: 0;
+}
diff --git a/assets/css/print.css b/assets/css/print.css
@@ -1,5 +1,5 @@
 @media print {
-  .main {
+  .body-wrapper {
     display: block;
   }
 

diff --git a/assets/fonts/RemixIconCollection.remixicon b/assets/fonts/RemixIconCollection.remixicon
@@ -0,0 +1 @@
+settings-3-line,add-line,subtract-line,arrow-up-s-line,arrow-down-s-line,arrow-right-s-line,search-2-line,menu-line,close-line,link-m,code-s-slash-line,error-warning-line,information-line,alert-line,double-quotes-l,printer-line