sij/khoj
1
0
Fork 0
mirror of https://github.com/khoj-ai/khoj.git synced 2024-11-24 07:55:07 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 33

Add Khoj header with navigation pane to Search and Chat Interfaces

Browse source
This commit is contained in:
Debanjum Singh Solanky 2023-06-21 23:23:09 -07:00
parent c467a0cbb0
commit 20a37697de
2 changed files with 70 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
src/khoj/interface/web/chat.html
View file

@ -103,10 +103,15 @@
} }
</script> </script>
<body> <body>
<!-- Chat Header --> <!--Add Header Logo and Nav Pane-->
<h1> <div class="khoj-header">
<img class="khoj-logo" src="static/assets/icons/khoj-logo-sideways.svg" alt="Khoj"></img> <img class="khoj-logo" src="/static/assets/icons/khoj-logo-sideways.svg" alt="Khoj"></img>
</h1> <nav class="khoj-nav">
<a href="/chat">Chat</a>
<a href="/">Search</a>
<a href="/config">Settings</a>
</nav>
</div>
<!-- Chat Body --> <!-- Chat Body -->
<div id="chat-body"></div> <div id="chat-body"></div>
@ -142,12 +147,34 @@
padding: 10px; padding: 10px;
margin: 10px; margin: 10px;
} }
h1 { .khoj-header {
margin: 8px 0; display: grid;
padding: 0; grid-auto-flow: row;
gap: 20px;
padding: 16px 0;
margin: 0;
}
.khoj-nav {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 32px;
justify-self: center;
}
.khoj-nav a {
color: #333;
text-decoration: none;
font-size: 20px;
font-weight: normal;
padding: 8px;
border-radius: 4px;
justify-self: center;
}
.khoj-nav a:hover {
background-color: var(--evening-sun);
} }
img.khoj-logo { img.khoj-logo {
width: min(60vw, 150px); width: min(60vw, 150px);
justify-self: center;
} }
#chat-body { #chat-body {

44
src/khoj/interface/web/index.html
View file

@ -188,9 +188,15 @@
</script> </script>
<body> <body>
<h1> <!--Add Header Logo and Nav Pane-->
<img class="khoj-logo" src="static/assets/icons/khoj-logo-sideways.svg" alt="Khoj"></img> <div class="khoj-header">
</h1> <img class="khoj-logo" src="/static/assets/icons/khoj-logo-sideways.svg" alt="Khoj"></img>
<nav class="khoj-nav">
<a href="/chat">Chat</a>
<a href="/">Search</a>
<a href="/config">Settings</a>
</nav>
</div>
<!--Add Text Box To Enter Query, Trigger Incremental Search OnChange --> <!--Add Text Box To Enter Query, Trigger Incremental Search OnChange -->
<input type="text" id="query" class="option" onkeyup=incrementalSearch(event) autofocus="autofocus" placeholder="What is the meaning of life?"> <input type="text" id="query" class="option" onkeyup=incrementalSearch(event) autofocus="autofocus" placeholder="What is the meaning of life?">
@ -215,7 +221,7 @@
body { body {
display: grid; display: grid;
grid-template-columns: 1fr; grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr minmax(80px, 100%); grid-template-rows: 1fr auto auto minmax(80px, 100%);
} }
body > * { body > * {
grid-column: 1; grid-column: 1;
@ -225,7 +231,7 @@
body { body {
display: grid; display: grid;
grid-template-columns: 1fr min(70vw, 100%) 1fr; grid-template-columns: 1fr min(70vw, 100%) 1fr;
grid-template-rows: 1fr 1fr 1fr minmax(80px, 100%); grid-template-rows: 1fr auto auto minmax(80px, 100%);
padding-top: 60vw; padding-top: 60vw;
} }
body > * { body > * {
@ -248,12 +254,34 @@
padding: 10px; padding: 10px;
margin: 10px; margin: 10px;
} }
h1 { .khoj-header {
margin: 8px 0; display: grid;
padding: 0; grid-auto-flow: row;
gap: 20px;
padding: 16px 0;
margin: 0;
}
.khoj-nav {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 32px;
justify-self: center;
}
.khoj-nav a {
color: #333;
text-decoration: none;
font-size: 20px;
font-weight: normal;
padding: 8px;
border-radius: 4px;
justify-self: center;
}
.khoj-nav a:hover {
background-color: var(--evening-sun);
} }
img.khoj-logo { img.khoj-logo {
width: min(60vw, 150px); width: min(60vw, 150px);
justify-self: center;
} }
#options { #options {