Amélioration UI: header fixe et ajustement layout chat
- Header fixe positionné à côté du menu hamburger (80px de gauche) - Suppression du sous-titre "Visualiseur de base Weaviate" - Fix variable CSS: var(--color-bg-primary) → var(--color-bg-main) - Ajustement hauteur chat: fenêtres RAG descendent jusqu'en bas - Barres de conversation touchent le bas de l'écran 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -56,11 +56,15 @@
|
|||||||
max-width: var(--max-content-width);
|
max-width: var(--max-content-width);
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 1.5rem 1.5rem;
|
padding: 1.5rem 1.5rem;
|
||||||
|
padding-top: 90px; /* Espace pour le header fixe */
|
||||||
|
padding-left: calc(1rem + 48px + 1rem); /* Aligner avec le header */
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 992px) {
|
@media (min-width: 992px) {
|
||||||
.wrapper {
|
.wrapper {
|
||||||
padding: 2.5rem 3rem;
|
padding: 2.5rem 3rem;
|
||||||
|
padding-top: 90px; /* Conserver l'espace pour le header fixe */
|
||||||
|
padding-left: calc(1rem + 48px + 1rem); /* Aligner avec le header */
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -322,10 +326,15 @@
|
|||||||
|
|
||||||
/* Header */
|
/* Header */
|
||||||
.site-header {
|
.site-header {
|
||||||
padding: 1.5rem 0;
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
padding: 1.5rem 1.5rem;
|
||||||
|
padding-left: calc(1rem + 48px + 1rem); /* left menu (1rem) + width (48px) + marge (1rem) = 80px */
|
||||||
border-bottom: 1px solid rgba(0, 0, 0, 0.04);
|
border-bottom: 1px solid rgba(0, 0, 0, 0.04);
|
||||||
margin-bottom: 1.5rem;
|
background-color: var(--color-bg-main);
|
||||||
margin-left: 64px; /* Space for hamburger button */
|
z-index: 100;
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-title {
|
.site-title {
|
||||||
@@ -712,14 +721,12 @@
|
|||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<div class="wrapper">
|
|
||||||
<!-- Header -->
|
<!-- Header -->
|
||||||
<header class="site-header">
|
<header class="site-header">
|
||||||
<div class="header-inner">
|
<div class="header-inner">
|
||||||
<div>
|
<div>
|
||||||
<a href="/" style="text-decoration: none;">
|
<a href="/" style="text-decoration: none;">
|
||||||
<div class="site-title">Philosophia</div>
|
<div class="site-title">Philosophia</div>
|
||||||
<div class="site-subtitle">Visualiseur de base Weaviate</div>
|
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<nav class="nav-links">
|
<nav class="nav-links">
|
||||||
@@ -733,6 +740,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
<div class="wrapper">
|
||||||
<!-- Main Content -->
|
<!-- Main Content -->
|
||||||
<main>
|
<main>
|
||||||
{% block content %}{% endblock %}
|
{% block content %}{% endblock %}
|
||||||
|
|||||||
@@ -18,9 +18,15 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Remove header margin for full-width layout */
|
/* Keep header fixed but adjust for chat full-width layout */
|
||||||
.site-header {
|
.site-header {
|
||||||
margin-left: 0 !important;
|
padding-left: calc(1rem + 48px + 1rem) !important; /* Clear hamburger menu */
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
.site-header {
|
||||||
|
padding-left: calc(1rem + 48px + 1rem) !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Chat-specific styles */
|
/* Chat-specific styles */
|
||||||
@@ -28,7 +34,7 @@
|
|||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 60% 40%;
|
grid-template-columns: 60% 40%;
|
||||||
gap: 1.5rem;
|
gap: 1.5rem;
|
||||||
height: calc(100vh - 300px);
|
height: calc(100vh - 90px - 1.5rem);
|
||||||
min-height: 600px;
|
min-height: 600px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
@@ -49,6 +55,7 @@
|
|||||||
.chat-main {
|
.chat-main {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
background-color: rgba(255, 255, 255, 0.06);
|
background-color: rgba(255, 255, 255, 0.06);
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
border: 1px solid rgba(125, 110, 88, 0.25);
|
border: 1px solid rgba(125, 110, 88, 0.25);
|
||||||
@@ -258,6 +265,7 @@
|
|||||||
.context-sidebar {
|
.context-sidebar {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
background-color: rgba(255, 255, 255, 0.06);
|
background-color: rgba(255, 255, 255, 0.06);
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
border: 1px solid rgba(125, 110, 88, 0.25);
|
border: 1px solid rgba(125, 110, 88, 0.25);
|
||||||
|
|||||||
Reference in New Issue
Block a user