klbr/khoj
1
0
Fork 0
mirror of https://github.com/khoaliber/khoj.git synced 2026-03-06 05:39:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Make the header take up less space

Browse Source 
- Use a single row for the header
- Needed custom styling for each page because each of them are different in subtle ways, unfortunately
This commit is contained in:
sabaimran
2023-07-09 22:31:37 -07:00
parent 62704cac09
commit 7364bac8ae
4 changed files with 97 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/khoj/interface/web/assets/khoj.css
View File

@@ -41,17 +41,28 @@
}
.khoj-header {
display: grid;
grid-auto-flow: row;
grid-auto-flow: column;
gap: 20px;
padding: 16px 0;
margin: 0 0 16px 0;
}
.khoj-nav {
nav.khoj-nav {
display: grid;
grid-auto-flow: column;
grid-gap: 32px;
justify-self: center;
justify-self: right;
}
a.khoj-nav {
display: flex;
align-items: center;
}
a.khoj-logo {
justify-self: left;
}
.khoj-nav a {
color: #333;
text-decoration: none;
@@ -68,6 +79,6 @@
background-color: var(--primary);
}
img.khoj-logo {
width: min(60vw, 150px);
width: min(60vw, 100px);
justify-self: center;
}

55
src/khoj/interface/web/base_config.html
View File

@@ -9,13 +9,19 @@
<link rel="stylesheet" href="/static/assets/khoj.css">
</head>
<body class="khoj-configure">
<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 class="khoj-nav-selected" href="/config">Settings</a>
</nav>
<div class="khoj-header-wrapper">
<div class="filler"></div>
<div class="khoj-header">
<a class="khoj-logo" href="https://lantern.khoj.dev" target="_blank">
<img class="khoj-logo" src="/static/assets/icons/khoj-logo-sideways.svg" alt="Khoj"></img>
</a>
<nav class="khoj-nav">
<a class="khoj-nav" href="/chat">Chat</a>
<a class="khoj-nav" href="/">Search</a>
<a class="khoj-nav khoj-nav-selected" href="/config">Settings</a>
</nav>
</div>
<div class="filler"></div>
</div>
<div class=”content”>
{% block content %}
@@ -28,6 +34,41 @@
margin: 0;
padding: 0;
}
@media only screen and (max-width: 600px) {
body {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr auto auto auto minmax(80px, 100%);
}
body > * {
grid-column: 1;
}
div.filler {
display: none;
}
div.khoj-header {
display: grid;
grid-template-columns: 1fr 1fr;
padding: 0;
margin-bottom: 8px;
margin-top: 8px;
padding-top: 8px;
}
body.khoj-configure {
padding: 0;
}
}
img.khoj-logo {
max-width: none!important;
}
div.khoj-header-wrapper{
display: grid;
grid-template-columns: 1fr min(70vw, 100%) 1fr;
}
.page {
display: grid;
grid-auto-flow: row;

22
src/khoj/interface/web/chat.html
View File

@@ -181,19 +181,19 @@
</div>
{% endif %}
{% if demo %}
<a href="https://khoj.dev" target="_blank">
<a class="khoj-logo" href="https://khoj.dev" target="_blank">
<img class="khoj-logo" src="/static/assets/icons/khoj-logo-sideways.svg" alt="Khoj"></img>
</a>
{% else %}
<a href="https://lantern.khoj.dev" target="_blank">
<a class="khoj-logo" href="https://lantern.khoj.dev" target="_blank">
<img class="khoj-logo" src="/static/assets/icons/khoj-logo-sideways.svg" alt="Khoj"></img>
</a>
{% endif %}
<nav class="khoj-nav">
<a class="khoj-nav-selected" href="/chat">Chat</a>
<a href="/">Search</a>
<a class="khoj-nav khoj-nav-selected" href="/chat">Chat</a>
<a class="khoj-nav" href="/">Search</a>
{% if not demo %}
<a href="/config">Settings</a>
<a class="khoj-nav" href="/config">Settings</a>
{% endif %}
</nav>
</div>
@@ -364,6 +364,18 @@
a.khoj-banner {
display: block;
}
div.khoj-header {
display: grid;
grid-template-columns: 1fr 1fr;
padding: 0;
margin-bottom: 8px;
margin-top: 8px;
}
nav.khoj-nav {
grid-gap: 0px;
}
}
@media only screen and (min-width: 600px) {
body {

20
src/khoj/interface/web/index.html
View File

@@ -238,10 +238,10 @@
</a>
{% endif %}
<nav class="khoj-nav">
<a href="/chat">Chat</a>
<a class="khoj-nav-selected" href="/">Search</a>
<a class="khoj-nav" href="/chat">Chat</a>
<a class="khoj-nav khoj-nav-selected" href="/">Search</a>
{% if not demo %}
<a href="/config">Settings</a>
<a class="khoj-nav" href="/config">Settings</a>
{% endif %}
</nav>
</div>
@@ -270,10 +270,24 @@
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr auto auto auto minmax(80px, 100%);
font-size: small!important;
}
body > * {
grid-column: 1;
}
div.khoj-header {
display: grid;
grid-template-columns: 1fr 1fr;
padding: 0;
margin-bottom: 8px;
margin-top: 8px;
}
nav.khoj-nav {
grid-gap: 0px;
}
}
@media only screen and (min-width: 600px) {
body {