From 20a37697de0d36e07e56e73ac557982c63e5b2de Mon Sep 17 00:00:00 2001 From: Debanjum Singh Solanky Date: Wed, 21 Jun 2023 23:23:09 -0700 Subject: [PATCH] Add Khoj header with navigation pane to Search and Chat Interfaces --- src/khoj/interface/web/chat.html | 41 +++++++++++++++++++++++----- src/khoj/interface/web/index.html | 44 +++++++++++++++++++++++++------ 2 files changed, 70 insertions(+), 15 deletions(-) diff --git a/src/khoj/interface/web/chat.html b/src/khoj/interface/web/chat.html index bb581ab1..29b38acb 100644 --- a/src/khoj/interface/web/chat.html +++ b/src/khoj/interface/web/chat.html @@ -103,10 +103,15 @@ } - -

- -

+ +
+ + +
@@ -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 { diff --git a/src/khoj/interface/web/index.html b/src/khoj/interface/web/index.html index 8b9c5307..084a7cd4 100644 --- a/src/khoj/interface/web/index.html +++ b/src/khoj/interface/web/index.html @@ -188,9 +188,15 @@ -

- -

+ +
+ + +
@@ -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 {