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

Fix demo rendering with the new header

Browse Source
This commit is contained in:
sabaimran
2023-07-10 21:16:19 -07:00
parent 55f5be7b03
commit effb52f859
3 changed files with 55 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -85,6 +85,21 @@ img.khoj-logo {
justify-self: center; justify-self: center;
} }
a.khoj-banner {
color: black;
text-decoration: none;
}
p.khoj-banner {
font-size: medium;
margin: 0;
padding: 10px;
}
p#khoj-banner {
display: inline;
}
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {
div.khoj-header { div.khoj-header {
display: grid; display: grid;

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

@@ -166,20 +166,20 @@
} }
</script> </script>
<body> <body>
<div id="khoj-banner-container" class="khoj-banner-container">
{% if demo %}
<!-- Banner linking to https://khoj.dev -->
<a class="khoj-banner" href="https://khoj.dev" target="_blank">
<p id="khoj-banner" class="khoj-banner">
Enroll in Khoj cloud to get your own assistant
</p>
</a>
<input type="text" id="khoj-banner-email" placeholder="email" class="khoj-banner-email"></input>
<button id="khoj-banner-submit" class="khoj-banner-button">Submit</button>
{% endif %}
</div>
<!--Add Header Logo and Nav Pane--> <!--Add Header Logo and Nav Pane-->
<div class="khoj-header"> <div class="khoj-header">
{% if demo %}
<!-- Banner linking to https://khoj.dev -->
<div class="khoj-banner-container">
<a class="khoj-banner" href="https://khoj.dev" target="_blank">
<p id="khoj-banner" class="khoj-banner">
Enroll in Khoj cloud to get your own Github assistant
</p>
</a>
<input type="text" id="khoj-banner-email" placeholder="email" class="khoj-banner-email"></input>
<button id="khoj-banner-submit" class="khoj-banner-button">Submit</button>
</div>
{% endif %}
{% if demo %} {% if demo %}
<a class="khoj-logo" 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>
@@ -351,7 +351,7 @@
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {
body { body {
grid-template-columns: 1fr; grid-template-columns: 1fr;
grid-template-rows: auto minmax(80px, 100%) auto; grid-template-rows: auto auto minmax(80px, 100%) auto;
} }
body > * { body > * {
grid-column: 1; grid-column: 1;
@@ -364,11 +364,14 @@
a.khoj-banner { a.khoj-banner {
display: block; display: block;
} }
p.khoj-banner {
padding: 0;
}
} }
@media only screen and (min-width: 600px) { @media only screen and (min-width: 600px) {
body { body {
grid-template-columns: auto min(70vw, 100%) auto; grid-template-columns: auto min(70vw, 100%) auto;
grid-template-rows: auto minmax(80px, 100%) auto; grid-template-rows: auto auto minmax(80px, 100%) auto;
} }
body > * { body > * {
grid-column: 2; grid-column: 2;
@@ -395,19 +398,10 @@
} }
} }
a.khoj-banner {
color: black;
}
a.khoj-logo { a.khoj-logo {
text-align: center; text-align: center;
} }
p.khoj-banner {
margin: 0;
padding: 10px;
}
button#khoj-banner-submit, button#khoj-banner-submit,
input#khoj-banner-email { input#khoj-banner-email {
padding: 10px; padding: 10px;
@@ -420,17 +414,17 @@
input#khoj-banner-email:hover { input#khoj-banner-email:hover {
box-shadow: 0 0 11px #aaa; box-shadow: 0 0 11px #aaa;
} }
div.khoj-banner-container-hidden {
p#khoj-banner { margin: 0px;
display: inline; padding: 0px;
}
a.khoj-banner {
color: black;
text-decoration: none;
} }
</style> </style>
<script> <script>
if ("{{demo}}" === "False") {
document.getElementById("khoj-banner-container").classList.remove("khoj-banner-container");
document.getElementById("khoj-banner-container").classList.add("khoj-banner-container-hidden");
}
var khojBannerSubmit = document.getElementById("khoj-banner-submit"); var khojBannerSubmit = document.getElementById("khoj-banner-submit");
khojBannerSubmit?.addEventListener("click", function(event) { khojBannerSubmit?.addEventListener("click", function(event) {

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

@@ -216,19 +216,21 @@
</script> </script>
<body> <body>
{% if demo %}
<!-- Banner linking to https://khoj.dev -->
<div class="khoj-banner-container">
<a class="khoj-banner" href="https://khoj.dev" target="_blank">
<p id="khoj-banner" class="khoj-banner">
Enroll in Khoj cloud to get your own assistant
</p>
</a>
<input type="text" id="khoj-banner-email" placeholder="email" class="khoj-banner-email"></input>
<button id="khoj-banner-submit" class="khoj-banner-button">Submit</button>
</div>
{% endif %}
<!--Add Header Logo and Nav Pane--> <!--Add Header Logo and Nav Pane-->
<div class="khoj-header"> <div class="khoj-header">
{% if demo %} {% if demo %}
<!-- Banner linking to https://khoj.dev -->
<div class="khoj-banner-container">
<a class="khoj-banner" href="https://khoj.dev" target="_blank">
<p id="khoj-banner" class="khoj-banner">
Enroll in Khoj cloud to get your own Github assistant
</p>
</a>
<input type="text" id="khoj-banner-email" placeholder="email" class="khoj-banner-email"></input>
<button id="khoj-banner-submit" class="khoj-banner-button">Submit</button>
</div>
<a class="khoj-logo" 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>
@@ -447,19 +449,10 @@
} }
} }
a.khoj-banner {
color: black;
}
a.khoj-logo { a.khoj-logo {
text-align: center; text-align: center;
} }
p.khoj-banner {
margin: 0;
padding: 10px;
}
button#khoj-banner-submit, button#khoj-banner-submit,
input#khoj-banner-email { input#khoj-banner-email {
padding: 10px; padding: 10px;
@@ -473,14 +466,13 @@
box-shadow: 0 0 11px #aaa; box-shadow: 0 0 11px #aaa;
} }
p#khoj-banner {
display: inline;
}
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {
a.khoj-banner { a.khoj-banner {
display: block; display: block;
} }
p.khoj-banner {
padding: 0;
}
} }
</style> </style>