sij/khoj
1
0
Fork 0
mirror of https://github.com/khoj-ai/khoj.git synced 2025-02-17 16:14:21 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

Default to profile picture with Initial if user has no profile picture

Browse source
This commit is contained in:
Debanjum Singh Solanky 2023-11-01 16:26:39 -07:00
parent d92a2d03a7
commit 6a0adfbfbb
3 changed files with 28 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/khoj/interface/web/assets/khoj.css
View file

@ -107,6 +107,10 @@ p#khoj-banner {
} }
/* Dropdown in navigation menu*/ /* Dropdown in navigation menu*/
#khoj-nav-menu-container {
display: flex;
align-items: center;
}
.khoj-nav-dropdown-content { .khoj-nav-dropdown-content {
display: block; display: block;
grid-auto-flow: row; grid-auto-flow: row;
@ -115,6 +119,7 @@ p#khoj-banner {
min-width: 160px; min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
right: 15vw; right: 15vw;
top: 64px;
z-index: 1; z-index: 1;
opacity: 0; opacity: 0;
transition: opacity 0.1s ease-in-out; transition: opacity 0.1s ease-in-out;
@ -140,13 +145,26 @@ p#khoj-banner {
display: block; display: block;
font-weight: bold; font-weight: bold;
} }
img.circle { .circle {
border-radius: 50%; border-radius: 50%;
border: 2px solid var(--primary-hover); border: 2px solid var(--primary-inverse);
width: 40px; width: 40px;
height: 40px; height: 40px;
vertical-align: text-top; vertical-align: text-top;
padding: 3px; padding: 3px;
cursor: pointer;
}
.circle:hover {
background-color: var(--primary-hover);
}
.user-initial {
background-color: white;
color: black;
display: grid;
justify-content: center;
align-items: center;
font-size: 20px;
box-sizing: unset;
} }
@media screen and (max-width: 700px) { @media screen and (max-width: 700px) {

11
src/khoj/interface/web/base_config.html
View file

@ -34,13 +34,10 @@
img.khoj-logo { img.khoj-logo {
max-width: none!important; max-width: none!important;
} }
div.khoj-header-wrapper{ div.khoj-header-wrapper {
display: grid; display: grid;
grid-template-columns: 1fr min(70vw, 100%) 1fr; grid-template-columns: 1fr min(70vw, 100%) 1fr;
} }
.khoj-header {
padding: 14px 0;
}
img.circle { img.circle {
width: 49px; width: 49px;
height: 49px; height: 49px;
@ -268,13 +265,9 @@
width: 320px; width: 320px;
} }
div.khoj-header-wrapper{ div.khoj-header-wrapper {
grid-template-columns: auto; grid-template-columns: auto;
} }
div.khoj-header {
padding: 14px 10px;
}
} }
</style> </style>
</html> </html>

8
src/khoj/interface/web/utils.html
View file

@ -1,4 +1,4 @@
{% macro heading_pane(user_photo="/static/assets/icons/anon.png", username="Anon") -%} {% macro heading_pane(user_photo, username) -%}
<div class="khoj-header"> <div class="khoj-header">
<a class="khoj-logo" href="/" target="_blank"> <a class="khoj-logo" href="/" target="_blank">
<img class="khoj-logo" src="/static/assets/icons/khoj-logo-sideways-500.png" alt="Khoj"></img> <img class="khoj-logo" src="/static/assets/icons/khoj-logo-sideways-500.png" alt="Khoj"></img>
@ -8,7 +8,11 @@
<a class="khoj-nav" href="/">🔎 Search</a> <a class="khoj-nav" href="/">🔎 Search</a>
<!-- Dropdown Menu --> <!-- Dropdown Menu -->
<div id="khoj-nav-menu-container" class="khoj-nav dropdown"> <div id="khoj-nav-menu-container" class="khoj-nav dropdown">
<img class="circle" src="{{ user_photo }}" alt="{{ username[0].upper() }}" onclick="toggleMenu()" referrerpolicy="no-referrer"> {% if user_photo and user_photo != "None" %}
<img class="circle" src="{{ user_photo }}" alt="{{ username[0].upper() }}" onclick="toggleMenu()" referrerpolicy="no-referrer">
{% else %}
<div class="circle user-initial" alt="{{ username[0].upper() }}" onclick="toggleMenu()">{{ username[0].upper() }}</div>
{% endif %}
<div id="khoj-nav-menu" class="khoj-nav-dropdown-content"> <div id="khoj-nav-menu" class="khoj-nav-dropdown-content">
<div class="khoj-nav-username"> {{ username }} </div> <div class="khoj-nav-username"> {{ username }} </div>
<a class="khoj-nav khoj-nav-selected" href="/config">⚙️ Settings</a> <a class="khoj-nav khoj-nav-selected" href="/config">⚙️ Settings</a>