klbr/khoj
1
0
Fork 0
mirror of https://github.com/khoaliber/khoj.git synced 2026-03-09 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 { .khoj-header {
display: grid; display: grid;
grid-auto-flow: row; grid-auto-flow: column;
gap: 20px; gap: 20px;
padding: 16px 0; padding: 16px 0;
margin: 0 0 16px 0; margin: 0 0 16px 0;
} }
.khoj-nav {
nav.khoj-nav {
display: grid; display: grid;
grid-auto-flow: column; grid-auto-flow: column;
grid-gap: 32px; 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 { .khoj-nav a {
color: #333; color: #333;
text-decoration: none; text-decoration: none;
@@ -68,6 +79,6 @@
background-color: var(--primary); background-color: var(--primary);
} }
img.khoj-logo { img.khoj-logo {
width: min(60vw, 150px); width: min(60vw, 100px);
justify-self: center; 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"> <link rel="stylesheet" href="/static/assets/khoj.css">
</head> </head>
<body class="khoj-configure"> <body class="khoj-configure">
<div class="khoj-header"> <div class="khoj-header-wrapper">
<img class="khoj-logo" src="/static/assets/icons/khoj-logo-sideways.svg" alt="Khoj"></img> <div class="filler"></div>
<nav class="khoj-nav"> <div class="khoj-header">
<a href="/chat">Chat</a> <a class="khoj-logo" href="https://lantern.khoj.dev" target="_blank">
<a href="/">Search</a> <img class="khoj-logo" src="/static/assets/icons/khoj-logo-sideways.svg" alt="Khoj"></img>
<a class="khoj-nav-selected" href="/config">Settings</a> </a>
</nav> <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>
<div class=”content”> <div class=”content”>
{% block content %} {% block content %}
@@ -28,6 +34,41 @@
margin: 0; margin: 0;
padding: 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 { .page {
display: grid; display: grid;
grid-auto-flow: row; grid-auto-flow: row;

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

@@ -181,19 +181,19 @@
</div> </div>
{% endif %} {% endif %}
{% if demo %} {% 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> <img class="khoj-logo" src="/static/assets/icons/khoj-logo-sideways.svg" alt="Khoj"></img>
</a> </a>
{% else %} {% 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> <img class="khoj-logo" src="/static/assets/icons/khoj-logo-sideways.svg" alt="Khoj"></img>
</a> </a>
{% endif %} {% endif %}
<nav class="khoj-nav"> <nav class="khoj-nav">
<a class="khoj-nav-selected" href="/chat">Chat</a> <a class="khoj-nav khoj-nav-selected" href="/chat">Chat</a>
<a href="/">Search</a> <a class="khoj-nav" href="/">Search</a>
{% if not demo %} {% if not demo %}
<a href="/config">Settings</a> <a class="khoj-nav" href="/config">Settings</a>
{% endif %} {% endif %}
</nav> </nav>
</div> </div>
@@ -364,6 +364,18 @@
a.khoj-banner { a.khoj-banner {
display: block; 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) { @media only screen and (min-width: 600px) {
body { body {

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

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