Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Search styling refactoring, and fix for offline search #1279

Merged
merged 4 commits into from
Oct 13, 2022
Merged

Search styling refactoring, and fix for offline search #1279

merged 4 commits into from
Oct 13, 2022

Conversation

chalin
Copy link
Collaborator

@chalin chalin commented Oct 13, 2022 •
edited
Loading

@geriom @LisaFC @mkruskal-google - if y'all could double check via the preview that the styling for online search hasn't changed, that would be grand.

/cc @tekezo for the offline search changes.

Screenshots for offline search

Base styling for offline search is just like online search:

Screen Shot 2022-10-13 at 06 35 44

Side-nav offline search results:

Screen Shot 2022-10-13 at 06 35 22

Top-nav offline search results:

Screen Shot 2022-10-13 at 06 34 56

I created the screenshots shown above by enabling offline search in the user guide through these config edits:

--- a/userguide/config.yaml
+++ b/userguide/config.yaml
@@ -58,9 +58,9 @@ params:
   time_format_blog: Monday, January 02, 2006
   time_format_default: January 2, 2006
   rss_sections: [blog] # TODO: drop since this is the default
-  gcs_engine_id: 011217106833237091527:la2vtv2emlw
+  # gcs_engine_id: 011217106833237091527:la2vtv2emlw
   algolia_docsearch: false
-  offlineSearch: false
+  offlineSearch: true
   offlineSearchSummaryLength: 70
   offlineSearchMaxResults: 10
   prism_syntax_highlighting: false

@chalin chalin requested review from LisaFC and geriom October 13, 2022 10:59
@chalin chalin force-pushed the chalin-im-refactor-search-styles-2022-10-13 branch from 93f72a5 to 1151dba Compare October 13, 2022 11:00
@chalin
Copy link
Collaborator Author

chalin commented Oct 13, 2022

Thanks for the feedback @mkruskal-google!

geriom
geriom approved these changes Oct 13, 2022
View reviewed changes
Copy link
Collaborator

@geriom geriom left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks! Looks good to me.

@chalin chalin merged commit 19ec7be into google:main Oct 13, 2022
@chalin chalin deleted the chalin-im-refactor-search-styles-2022-10-13 branch October 13, 2022 20:15
marshalc added a commit to ouhft/docsy that referenced this pull request Dec 23, 2022
@marshalc
Squashed commit of the following:
71f8fa6 
commit 324942a
Author: Patrice Chalin <[email protected]>
Date:   Mon Dec 19 12:15:42 2022 -0500

    Docsy examples: drop private-repo (google#1338)

commit 799fc54
Author: Andreas Deininger <[email protected]>
Date:   Thu Dec 8 14:36:44 2022 +0100

    Bump Font-Awesome to latest version 6.2.1 (google#1325)

commit 8924f28
Author: Geri Ochoa <[email protected]>
Date:   Mon Dec 5 13:45:54 2022 -0500

    Update post-release changelog links

commit 5597d43
Author: Geri Ochoa <[email protected]>
Date:   Mon Dec 5 11:18:13 2022 -0500

    Release v0.6.0 preparation

commit 2c11f53
Author: Andreas Deininger <[email protected]>
Date:   Fri Oct 14 17:23:14 2022 +0200

    Add render hook for 'chem' code blocks
    Auto activation of `math' and 'chem' blocks
    Add ability to enable KateX and/or mhchem for individual pages only
    Upgrade to KaTeX 0.16.3

commit 1fb0e23
Author: Victor "multun" Collod <[email protected]>
Date:   Fri Nov 25 22:36:26 2022 +0100

    prevent navbar text wrapping

    When a navbar item has multiple words, and there are enough navbar item to
    cause the flexbox to be full at reduced window widths without transitioning
    through the lower media breakpoint, the navbar link name can wrap, which causes
    the alignment of all navbar items to break.

    This change forbids navbar text wrapping even at bigger screen sizes.

commit 33f3dfe
Author: Andreas Deininger <[email protected]>
Date:   Wed Nov 23 08:48:12 2022 +0100

    Fix: mermaid diagrams with parameters in site config

commit b4d66f7
Merge: f0a06ef 9cc0cd0
Author: Erin McKean <[email protected]>
Date:   Mon Nov 21 09:07:08 2022 -0800

    Merge pull request google#1314 from google/LisaFC-fontawesome

    Add FontAwesome info to logos and images page

commit 9cc0cd0
Merge: f18a4e8 f0a06ef
Author: LisaFC <[email protected]>
Date:   Mon Nov 21 17:04:42 2022 +0000

    Merge branch 'main' into LisaFC-fontawesome

commit f0a06ef
Author: copy rogers <[email protected]>
Date:   Fri Nov 18 20:17:34 2022 +0800

    Add etcd, CloudWeGo and Dapr website to examples (google#1315)

    Signed-off-by: rogerogers <[email protected]>

    Signed-off-by: rogerogers <[email protected]>

commit 1c9e125
Author: LisaFC <[email protected]>
Date:   Thu Nov 17 16:17:25 2022 +0000

    Updated to better "mostly docs" example

commit c6f138a
Author: Robert Pająk <[email protected]>
Date:   Thu Nov 17 17:09:41 2022 +0100

    Add OpenTelemetry webpage to examples (google#1312)

commit f18a4e8
Author: LisaFC <[email protected]>
Date:   Thu Nov 17 16:05:11 2022 +0000

    Update iconsimages.md

commit 0cc3704
Author: LisaFC <[email protected]>
Date:   Thu Nov 17 16:01:23 2022 +0000

    Add FontAwesome info to logos and images page

    Currently only mention FontAwesome in the context of menus, which has confused some users

commit 246a2e1
Author: Geri Ochoa <[email protected]>
Date:   Tue Nov 8 11:34:43 2022 -0500

    Fix readfile not rendering html code

commit 90ee481
Author: Patrice Chalin <[email protected]>
Date:   Wed Nov 9 11:14:17 2022 -0500

    Update CHANGELOG.md

commit e6a44df
Author: Takayama Fumihiko <[email protected]>
Date:   Thu Nov 3 21:48:20 2022 +0900

    Fix offline search popover (google#1305)

commit 42f6ef8
Author: LisaFC <[email protected]>
Date:   Thu Nov 3 11:56:22 2022 +0000

    Algolia updates (google#1270)

    Updates for google#1250

commit aa7c0ae
Author: erwin-faceit <[email protected]>
Date:   Wed Nov 2 21:15:29 2022 +0100

    Update nl (google#1301)

    I18N: update nl.toml

commit 33fd6ea
Author: mboukhalfa <[email protected]>
Date:   Sun Oct 23 23:53:13 2022 +0300

    Add more translation to ar.toml

commit d9bf98b
Author: Andreas Deininger <[email protected]>
Date:   Fri Oct 28 17:22:30 2022 +0200

    CHANGELOG: add breaking change (tabbed panes, text display)

commit 90843e3
Author: Stephan Lachnit <[email protected]>
Date:   Thu Oct 27 17:00:08 2022 +0200

    Auto activation of mermaid diagrams (via use of hugo render hook) (google#990)

commit f27daed
Author: Geri Ochoa <[email protected]>
Date:   Fri Oct 21 13:46:19 2022 -0400

    Release v0.5.1 preparation

commit dd2e2b9
Author: Andreas Deininger <[email protected]>
Date:   Wed Oct 19 16:27:39 2022 +0200

    Tabbed pane, fix: avoid duplicate html id if content is pulled in via readfile shortcode (google#1289)

commit a2f7ecd
Author: Andreas Deininger <[email protected]>
Date:   Fri Oct 14 08:41:24 2022 +0200

    User guide: fix invalid html by adding alt attribute to image

    Remove trailing whitespace in a few .md files

commit cfa70e3
Author: Andreas Deininger <[email protected]>
Date:   Fri Oct 14 08:35:51 2022 +0200

    Fix: Tabpane shows multiple tabs at the same time google#1271

commit abb7307
Author: Andreas Deininger <[email protected]>
Date:   Thu Oct 13 12:30:22 2022 +0200

    Shortcodes for tabbed panes: improved whitespace handling

commit 99eacb0
Author: Andreas Deininger <[email protected]>
Date:   Sat Oct 15 12:49:29 2022 +0200

    Module setup: update docsy/dependencies to tip of main

commit 123800f
Author: Stephan Lachnit <[email protected]>
Date:   Sun Oct 16 17:32:02 2022 +0200

    feature: add support for GLFM math blocks (google#987)

    * feature: add support for GLFM math blocks

    This add supports for GLFM's math blocks [1] using hugo's Markdown
    render hooks [2].

    [1]: https://docs.gitlab.com/ee/user/markdown.html#math
    [2]: https://gohugo.io/templates/render-hooks/#render-hooks-for-code-blocks

    Signed-off-by: Stephan Lachnit <[email protected]>

commit be5da07
Author: Andreas Deininger <[email protected]>
Date:   Fri Oct 14 18:16:17 2022 +0200

    Fix: hugo serve does not serve Font Awesome anymore (google#1282)

commit 1e7e329
Author: the-kraljica <[email protected]>
Date:   Wed Oct 5 17:14:26 2022 +0200

    Remove > selector from elements

commit 19ec7be
Author: Patrice Chalin <[email protected]>
Date:   Thu Oct 13 16:15:01 2022 -0400

    Search styling refactoring, and fix for offline search (google#1279)

commit ba4ed72
Author: Mike Kruskal <[email protected]>
Date:   Thu Oct 13 00:37:57 2022 -0700

    Fixing FontAwesome icon handling in search placeholder (google#1247)

commit 7489c35
Author: Patrice Chalin <[email protected]>
Date:   Mon Oct 10 13:08:44 2022 -0400

    CHANGELOG adjustments

commit ded6a0d
Author: Patrice Chalin <[email protected]>
Date:   Mon Oct 10 12:22:25 2022 -0400

    Revert google#1200 to recover desc blog post order (google#1269)

commit 14cee5a
Author: Patrice Chalin <[email protected]>
Date:   Sat Oct 8 11:25:31 2022 -0400

    Scripts: one more whitespace tweak

commit 0e79123
Author: Patrice Chalin <[email protected]>
Date:   Sat Oct 8 11:18:56 2022 -0400

    Scripts: get Popper from Bootstrap bundle (google#1268)

commit 0204dd9
Author: Patrice Chalin <[email protected]>
Date:   Sat Oct 8 11:02:03 2022 -0400

    Revert to Popper v1 so tooltips work (google#1266)

commit c4216a8
Author: Patrice Chalin <[email protected]>
Date:   Sat Oct 8 10:32:08 2022 -0400

    More whitespace cleanup - partials/scripts.html

commit 20b0c70
Author: Patrice Chalin <[email protected]>
Date:   Sat Oct 8 09:45:52 2022 -0400

    Scripts tweak to cleanup whitespace etc (google#1262)

commit 25b0205
Author: Patrice Chalin <[email protected]>
Date:   Sat Oct 8 09:03:57 2022 -0400

    CHANGELOG: adjust prose since FA was further upgraded (google#1261)

commit 264566c
Author: Andreas Deininger <[email protected]>
Date:   Sat Oct 8 12:57:30 2022 +0200

    Upgrade to Bootstrap 4.6.2 (module install) (google#1218)

commit 3147661
Author: Andreas Deininger <[email protected]>
Date:   Fri Oct 7 22:35:35 2022 +0200

    User guide, conversion to modules: fixing config.yaml (google#1209)

commit 326b0f1
Author: Patrice Chalin <[email protected]>
Date:   Fri Oct 7 12:13:39 2022 -0400

    Navbar-brand: define classes for the logo and name (google#1190)

commit 646ef44
Author: Geri Ochoa <[email protected]>
Date:   Thu Oct 6 18:24:29 2022 -0400

    Release v0.5.0 prep, fix module dependency

commit 0c183ef
Author: Geri Ochoa <[email protected]>
Date:   Fri Sep 30 10:12:08 2022 -0400

    Release v0.5.0 preparation

commit de7048f
Author: Geri Ochoa <[email protected]>
Date:   Wed Sep 28 15:45:24 2022 -0400

    Add click to copy button

    Adds a click to copy button to code samples that don't use the Prism
    highlighter.

commit 5c4662c
Author: Geri Ochoa <[email protected]>
Date:   Wed Sep 28 17:47:10 2022 -0400

    Fix importing wrong drawio script

commit bd991a5
Author: Patrice Chalin <[email protected]>
Date:   Tue Oct 4 19:20:55 2022 -0400

    Update CHANGELOG.md

commit 7f9dc28
Author: Patrice Chalin <[email protected]>
Date:   Wed Aug 17 15:57:38 2022 -0400

    Use gtag.js analytics library for all site tags

commit c937bcd
Author: Andreas Deininger <[email protected]>
Date:   Wed Oct 5 01:47:21 2022 +0200

    Userguide, installation via npm: correct themes directory (google#1213)

commit 07ff9a5
Author: Patrice Chalin <[email protected]>
Date:   Tue Oct 4 19:18:04 2022 -0400

    CHANGELOG: mention FA font-glyph width changes (google#1251)

commit 01bf2a2
Author: Patrice Chalin <[email protected]>
Date:   Tue Oct 4 18:40:27 2022 -0400

    Mention inadvertent style leakage in CHANGELOG (google#1167)
@chalin chalin mentioned this pull request Jan 10, 2023
Open
6 tasks
@chalin chalin added the design/style Front-end site design / styling label Jan 11, 2023
dseynaev pushed a commit to openanalytics/docsy that referenced this pull request Jan 30, 2023
@chalin @dseynaev
Search styling refactoring, and fix for offline search (google#1279)
ee44312
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@mkruskal-google mkruskal-google mkruskal-google approved these changes

@geriom geriom geriom approved these changes

@LisaFC LisaFC Awaiting requested review from LisaFC

Assignees
No one assigned
Labels
design/style Front-end site design / styling
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Search icon (magnifying glass) is not rendered properly in FF
3 participants
@chalin @geriom @mkruskal-google