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

New Search Bar Look #1085

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

New Search Bar Look #1085

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bec9772
New Search Bar Look
Apr 15, 2024
632cd35
Merge branch 'tlienart:master' into master
shravanngoswamii Apr 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 44 additions & 3 deletions docs/_css/jtd.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -609,9 +609,50 @@ ul.menu-list-child-list a.menu-list-link {
color: #808080;
}

/* .search-input {
width: 250px;
} */
/* Search Bar */
.search-container {
width: 170px;
display: flex;
align-items: center;
border: 1px solid #f4f4f4;
border-radius: 5px;
background-color: #f5f6fa;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
height: 30px;
padding-right: 15px;
}

.search-input {
flex: 1;
border: none;
background: none;
padding: 5px;
margin-left: 2px;
color: #000;
outline: none;
font-size: 13px;
}

.search-button {
background: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 -960 960 960" width="20"><path d="M760.385-177.846 522.923-415.307q-30 23.538-65.792 36.038-35.792 12.5-71.558 12.5-87.135 0-148.2-61.029-61.066-61.029-61.066-148.077t61.029-148.202q61.029-61.154 148.077-61.154 87.049 0 148.202 61.065 61.154 61.065 61.154 148.201 0 38.073-13.269 73.865-13.269 35.792-35.269 63.485l237.462 237.461-23.308 23.308ZM385.538-398.769q74.616 0 125.923-51.308Q562.769-501.385 562.769-576q0-74.615-51.308-125.923-51.307-51.308-125.923-51.308-74.615 0-125.923 51.308Q208.308-650.615 208.308-576q0 74.615 51.307 125.923 51.308 51.308 125.923 51.308Z" /></svg>');
background-repeat: no-repeat;
height: 20px;
width: 20px;
background-color: none;
border: none;
border-radius: 5px;
fill: #000;
margin-right: -15px;
cursor: pointer;
}

.search-button:hover {
background-color: #cbcbcf;
}

.search-container:focus-within {
border-color: #0e39b0;
}

.resultCount {
color: #808080;
Expand Down
209 changes: 128 additions & 81 deletions docs/_layout/head.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
<!doctype html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
{{if hasmath}} {{insert head_katex.html }} {{end}}
{{if hascode}} {{insert head_highlight.html }} {{end}}
{{if hasmath}} {{insert head_katex.html }} {{end}}
{{if hascode}} {{insert head_highlight.html }} {{end}}
<link rel="stylesheet" href="/css/jtd.css">
<link rel="icon" href="/assets/infra/logoF_square.gif">
{{isdef title}} <title>{{fill title}}</title> {{end}}
{{isdef title}} <title>{{fill title}}</title> {{end}}

<!-- LUNR -->
<script src="/libs/lunr/lunr.min.js"></script>
Expand All @@ -16,53 +17,67 @@

<!-- PLOTLY -->
{{if hasplotly}}
<script src="/libs/plotly/plotly.min.js"></script>
<script src="/libs/plotly/plotly.min.js"></script>
<script>
const PlotlyJS_json = async (div, url) => {
response = await fetch(url); // get file
fig = await response.json(); // convert it to json
// Make the plot fit the screen responsively. See the documentation of plotly.js. https://plotly.com/javascript/responsive-fluid-layout/
if (typeof fig.config === 'undefined') { fig["config"]={} }
delete fig.layout.width
delete fig.layout.height
fig["layout"]["autosize"] = true
fig["config"]["autosizable"] = true
fig["config"]["responsive"] = true
const PlotlyJS_json = async (div, url) => {
response = await fetch(url); // get file
fig = await response.json(); // convert it to json
// Make the plot fit the screen responsively. See the documentation of plotly.js. https://plotly.com/javascript/responsive-fluid-layout/
if (typeof fig.config === 'undefined') { fig["config"] = {} }
delete fig.layout.width
delete fig.layout.height
fig["layout"]["autosize"] = true
fig["config"]["autosizable"] = true
fig["config"]["responsive"] = true

// make it easier to scroll throught the website rather than being blocked by a figure.
fig.config["scrollZoom"] = false
// make it easier to scroll throught the website rather than being blocked by a figure.
fig.config["scrollZoom"] = false

// PlotlyJS.savefig by default add the some more attribute to make a static plot.
// Disable them to make the website fancier.
delete fig.config.staticPlot
delete fig.config.displayModeBar
delete fig.config.doubleClick
delete fig.config.showTips
// PlotlyJS.savefig by default add the some more attribute to make a static plot.
// Disable them to make the website fancier.
delete fig.config.staticPlot
delete fig.config.displayModeBar
delete fig.config.doubleClick
delete fig.config.showTips

Plotly.newPlot(div, fig);
Plotly.newPlot(div, fig);
};
</script>
{{end}}

</head>
<body> <!-- closed in foot.html -->
<div class="page-wrap"> <!-- closed in foot.html -->

<body> <!-- closed in foot.html -->
<div class="page-wrap"> <!-- closed in foot.html -->
<!-- SIDE BAR -->
<div class="side-bar">
<div class="header">
<a href="/" class="title">
<img style="height:60px;" src="/assets/infra/franklin.svg" alt="franklin" />
<style>
@media (max-width: 31.25rem){
.side-bar .show-menu {height:30px;}
}
@media (max-width: 50rem) {
.side-bar .header .title {padding-top:0; padding-bottom: 0;}
.header .title img {height:60px; max-width: 100px !important;}
}
@media (min-width: 66.5rem){
.header .title img {max-width: 140px !important;}
}
@media (max-width: 31.25rem) {
.side-bar .show-menu {
height: 30px;
}
}

@media (max-width: 50rem) {
.side-bar .header .title {
padding-top: 0;
padding-bottom: 0;
}

.header .title img {
height: 60px;
max-width: 100px !important;
}
}

@media (min-width: 66.5rem) {
.header .title img {
max-width: 140px !important;
}
}
</style>
</a>
</div>
Expand All @@ -72,71 +87,103 @@
<ul class="menu-list">
<!-- HOME -->
<li class="menu-list-item {{ispage index}}active{{end}}"><a href="/" class="menu-list-link">• Home</a>
<!-- WORKFLOW -->
<li class="menu-list-parent {{ispage workflow/*}}active{{end}}"><a href="/workflow/" class="menu-list-link">• Workflow</a>
<ul class="menu-list-child-list ">
<li class="menu-list-item {{ispage workflow/index.html}}active{{end}}"><a href="/workflow/" class="menu-list-link">Create and edit</a>
<li class="menu-list-item {{ispage workflow/structure}}active{{end}}"><a href="/workflow/structure/" class="menu-list-link">Page structure</a>
<li class="menu-list-item {{ispage workflow/deploy}}active{{end}}"><a href="/workflow/deploy/" class="menu-list-link">Deploy</a>
<li class="menu-list-item {{ispage workflow/sitemap-rss}}active{{end}}"><a href="/workflow/sitemap-rss/" class="menu-list-link">Sitemap and RSS</a>
</ul>
<!-- SYNTAX -->
<!-- NOTE: if adding a menu item, add ref to first item! -->
<li class="menu-list-parent {{ispage syntax/*}}active{{end}}"><a href="/syntax/markdown/" class="menu-list-link">• Syntax</a>
<!-- WORKFLOW -->
<li class="menu-list-parent {{ispage workflow/*}}active{{end}}"><a href="/workflow/" class="menu-list-link">•
Workflow</a>
<ul class="menu-list-child-list ">
<li class="menu-list-item {{ispage syntax/markdown}}active{{end}}"><a href="/syntax/markdown/" class="menu-list-link">Markdown</a>
<li class="menu-list-item {{ispage syntax/divs-commands}}active{{end}}"><a href="/syntax/divs-commands/" class="menu-list-link">Divs and Commands</a>
<li class="menu-list-item {{ispage syntax/page-variables}}active{{end}}"><a href="/syntax/page-variables/" class="menu-list-link">Page Variables</a>
<li class="menu-list-item {{ispage syntax/rss}}active{{end}}"><a href="/syntax/rss/" class="menu-list-link">RSS</a>
<li class="menu-list-item {{ispage syntax/utils}}active{{end}}"><a href="/syntax/utils/" class="menu-list-link">Utils</a>
<li class="menu-list-item {{ispage workflow/index.html}}active{{end}}"><a href="/workflow/"
class="menu-list-link">Create and edit</a>
<li class="menu-list-item {{ispage workflow/structure}}active{{end}}"><a href="/workflow/structure/"
class="menu-list-link">Page structure</a>
<li class="menu-list-item {{ispage workflow/deploy}}active{{end}}"><a href="/workflow/deploy/"
class="menu-list-link">Deploy</a>
<li class="menu-list-item {{ispage workflow/sitemap-rss}}active{{end}}"><a href="/workflow/sitemap-rss/"
class="menu-list-link">Sitemap and RSS</a>
</ul>
<!-- STYLING -->
<li class="menu-list-parent {{ispage styling/*}}active{{end}}"><a href="/styling/templates/" class="menu-list-link">• Styling</a>
<!-- SYNTAX -->
<!-- NOTE: if adding a menu item, add ref to first item! -->
<li class="menu-list-parent {{ispage syntax/*}}active{{end}}"><a href="/syntax/markdown/"
class="menu-list-link">• Syntax</a>
<ul class="menu-list-child-list ">
<li class="menu-list-item {{ispage styling/templates}}active{{end}}"><a href="/styling/templates/" class="menu-list-link">Templates</a>
<li class="menu-list-item {{ispage styling/classes}}active{{end}}"><a href="/styling/classes/" class="menu-list-link">Classes</a>
<li class="menu-list-item {{ispage syntax/markdown}}active{{end}}"><a href="/syntax/markdown/"
class="menu-list-link">Markdown</a>
<li class="menu-list-item {{ispage syntax/divs-commands}}active{{end}}"><a href="/syntax/divs-commands/"
class="menu-list-link">Divs and Commands</a>
<li class="menu-list-item {{ispage syntax/page-variables}}active{{end}}"><a href="/syntax/page-variables/"
class="menu-list-link">Page Variables</a>
<li class="menu-list-item {{ispage syntax/rss}}active{{end}}"><a href="/syntax/rss/"
class="menu-list-link">RSS</a>
<li class="menu-list-item {{ispage syntax/utils}}active{{end}}"><a href="/syntax/utils/"
class="menu-list-link">Utils</a>
</ul>
<!-- CODE -->
<!-- STYLING -->
<li class="menu-list-parent {{ispage styling/*}}active{{end}}"><a href="/styling/templates/"
class="menu-list-link">• Styling</a>
<ul class="menu-list-child-list ">
<li class="menu-list-item {{ispage styling/templates}}active{{end}}"><a href="/styling/templates/"
class="menu-list-link">Templates</a>
<li class="menu-list-item {{ispage styling/classes}}active{{end}}"><a href="/styling/classes/"
class="menu-list-link">Classes</a>
</ul>
<!-- CODE -->
<li class="menu-list-parent {{ispage code/*}}active{{end}}"><a href="/code/" class="menu-list-link">• Code</a>
<ul class="menu-list-child-list ">
<li class="menu-list-item {{ispage code/index.html}}active{{end}}"><a href="/code/" class="menu-list-link">Inserting code</a>
<li class="menu-list-item {{ispage code/eval-tricks}}active{{end}}"><a href="/code/eval-tricks/" class="menu-list-link">Code tricks</a>
<li class="menu-list-item {{ispage code/literate}}active{{end}}"><a href="/code/literate/" class="menu-list-link">Literate.jl</a>
<li class="menu-list-item {{ispage code/index.html}}active{{end}}"><a href="/code/"
class="menu-list-link">Inserting code</a>
<li class="menu-list-item {{ispage code/eval-tricks}}active{{end}}"><a href="/code/eval-tricks/"
class="menu-list-link">Code tricks</a>
<li class="menu-list-item {{ispage code/literate}}active{{end}}"><a href="/code/literate/"
class="menu-list-link">Literate.jl</a>
</ul>
<!-- EXTRAs -->
<li class="menu-list-parent {{ispage extras/*}}active{{end}}"><a href="/extras/" class="menu-list-link">•
Extras</a>
<ul class="menu-list-child-list ">
<li class="menu-list-item {{ispage extras/index.html}}active{{end}}"><a href="/extras/"
class="menu-list-link">Overview</a>
<li class="menu-list-item {{ispage extras/lunr}}active{{end}}"><a href="/extras/lunr/"
class="menu-list-link">Search with Lunr</a>
<li class="menu-list-item {{ispage extras/utterances}}active{{end}}"><a href="/extras/utterances/"
class="menu-list-link">Comments with Utterances</a>
<li class="menu-list-item {{ispage extras/literate}}active{{end}}"><a href="/extras/literate/"
class="menu-list-link">Literate</a>
<li class="menu-list-item {{ispage extras/plotly}}active{{end}}"><a href="/extras/plotly/"
class="menu-list-link">Plotly</a>
</ul>
<!-- EXTRAs -->
<li class="menu-list-parent {{ispage extras/*}}active{{end}}"><a href="/extras/" class="menu-list-link">• Extras</a>
<ul class="menu-list-child-list ">
<li class="menu-list-item {{ispage extras/index.html}}active{{end}}"><a href="/extras/" class="menu-list-link">Overview</a>
<li class="menu-list-item {{ispage extras/lunr}}active{{end}}"><a href="/extras/lunr/" class="menu-list-link">Search with Lunr</a>
<li class="menu-list-item {{ispage extras/utterances}}active{{end}}"><a href="/extras/utterances/" class="menu-list-link">Comments with Utterances</a>
<li class="menu-list-item {{ispage extras/literate}}active{{end}}"><a href="/extras/literate/" class="menu-list-link">Literate</a>
<li class="menu-list-item {{ispage extras/plotly}}active{{end}}"><a href="/extras/plotly/" class="menu-list-link">Plotly</a>
</ul>
<!-- FAQ -->
<li class="menu-list-parent {{ispage faq/*}}active{{end}}"><a href="/faq/technical/" class="menu-list-link">• FAQ</a>
<!-- FAQ -->
<li class="menu-list-parent {{ispage faq/*}}active{{end}}"><a href="/faq/technical/" class="menu-list-link">•
FAQ</a>
<ul class="menu-list-child-list ">
<li class="menu-list-item {{ispage faq/technical}}active{{end}}"><a href="/faq/technical/" class="menu-list-link">Technical</a>
<li class="menu-list-item {{ispage faq/troubleshooting}}active{{end}}"><a href="/faq/troubleshooting/" class="menu-list-link">Troubleshooting</a>
<li class="menu-list-item {{ispage faq/why-o-why}}active{{end}}"><a href="/faq/why-o-why/" class="menu-list-link">Meta</a>
<li class="menu-list-item {{ispage faq/technical}}active{{end}}"><a href="/faq/technical/"
class="menu-list-link">Technical</a>
<li class="menu-list-item {{ispage faq/troubleshooting}}active{{end}}"><a href="/faq/troubleshooting/"
class="menu-list-link">Troubleshooting</a>
<li class="menu-list-item {{ispage faq/why-o-why}}active{{end}}"><a href="/faq/why-o-why/"
class="menu-list-link">Meta</a>
</ul>
</ul>
<form id="lunrSearchForm" name="lunrSearchForm">
<input class="search-input" name="q" placeholder="Enter search term" type="text"> <input type="submit" value="Search" formaction="/search/index.html">
</form>

<!-- Search Bar -->
<form id="lunrSearchForm" name="lunrSearchForm" class="search-container">
<input class="search-input" name="q" placeholder="Enter search term" type="text">
<input class="search-button" type="submit" value=" " formaction="/search/index.html">
</form>

</div>
<div class="footer">
<a href="/faq/why-o-why/"><img style="width:40%;padding-left:10px;margin-bottom:15px;" src="/assets/infra/logoF2.svg" alt="Franklin Logo" /></a>
<a href="/faq/why-o-why/"><img style="width:40%;padding-left:10px;margin-bottom:15px;"
src="/assets/infra/logoF2.svg" alt="Franklin Logo" /></a>
</div>
</div>
<!-- CONTENT -->
<div class="main-content-wrap"> <!-- closed in foot.html -->
<div class="main-content" id="focus" tabindex="-1" style="outline:0;"> <!-- closed in foot.html -->
<div class="main-content" id="focus" tabindex="-1" style="outline:0;"> <!-- closed in foot.html -->
<div class="main-header">
<a name="pagetop"></a>

<a id="github" href="https://github.com/tlienart/Franklin.jl/blob/master/docs/{{fd_rpath}}">Page source</a>
<span style="width:30px; text-align: center;color:lightgray;">|</span>
<a id="github" href="https://github.com/tlienart/Franklin.jl">GitHub Repository</a>
<span style="width:30px; text-align: center;color:lightgray;">|</span>
<a id="github" href="https://github.com/tlienart/Franklin.jl">GitHub Repository</a>
</div>

<!-- Content appended here (in class franklin-content) -->
<!-- Content appended here (in class franklin-content) -->