sij/khoj
1
0
Fork 0
mirror of https://github.com/khoj-ai/khoj.git synced 2024-11-23 23:48:56 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 16

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>
<body>
<!-- Chat Header -->
<h1>
<img class="khoj-logo" src="static/assets/icons/khoj-logo-sideways.svg" alt="Khoj"></img>
</h1>
<!--Add Header Logo and Nav Pane-->
<div class="khoj-header">
<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>
<!-- Chat Body -->
<div id="chat-body"></div>
@ -142,12 +147,34 @@
padding: 10px;
margin: 10px;
}
h1 {
margin: 8px 0;
padding: 0;
.khoj-header {
display: grid;
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 {
width: min(60vw, 150px);
justify-self: center;
}
#chat-body {

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

@ -188,9 +188,15 @@
</script>
<body>
<h1>
<img class="khoj-logo" src="static/assets/icons/khoj-logo-sideways.svg" alt="Khoj"></img>
</h1>
<!--Add Header Logo and Nav Pane-->
<div class="khoj-header">
<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 -->
<input type="text" id="query" class="option" onkeyup=incrementalSearch(event) autofocus="autofocus" placeholder="What is the meaning of life?">
@ -215,7 +221,7 @@
body {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr minmax(80px, 100%);
grid-template-rows: 1fr auto auto minmax(80px, 100%);
}
body > * {
grid-column: 1;
@ -225,7 +231,7 @@
body {
display: grid;
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;
}
body > * {
@ -248,12 +254,34 @@
padding: 10px;
margin: 10px;
}
h1 {
margin: 8px 0;
padding: 0;
.khoj-header {
display: grid;
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 {
width: min(60vw, 150px);
justify-self: center;
}
#options {