pieter/eveAI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- Introduce cache busting (to circumvent aggressive caching on iOS - but ideal in other contexts as well)

Browse Source 
- Change the build process to allow cache busting
- Optimisations to the build process
- Several improvements of UI geared towards mobile experience
-
This commit is contained in:
Josako
2025-09-25 17:28:01 +02:00
parent cc47ce2d32
commit 16ce59ae98
32 changed files with 1538 additions and 899 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
eveai_chat_client/static/assets/css/chat-components.css
View File

@@ -79,6 +79,16 @@
.chat-input-area {
max-width: 100%; /* Op mobiel volledige breedte gebruiken */
/* Respect safe-area at bottom */
padding-bottom: env(safe-area-inset-bottom, 0);
}
/* Prevent iOS focus zoom by ensuring form controls are >= 16px */
input, textarea, select, button,
.chat-input input, .chat-input textarea, .chat-input select, .chat-input button,
.mobile-language-selector :is(select, input, button) {
font-size: 16px;
line-height: 1.4;
}
.chat-input {
@@ -97,6 +107,11 @@
}
}
/* When keyboard is open, allow a bit more space below */
body.keyboard-open .chat-input-area {
padding-bottom: calc(env(safe-area-inset-bottom, 0) + 8px);
}
/* Extra small screens */
@media (max-width: 480px) {
.chat-app-container {
@@ -251,15 +266,6 @@
margin: 20px 0;
}
.form-message .message-content {
max-width: 90%;
background: white;
border: 1px solid #e9ecef;
border-radius: 12px;
padding: 20px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
/* System messages */
.system-message {
text-align: center;
@@ -437,24 +443,6 @@
opacity: 0.8;
}
/* Mobile responsiveness */
@media (max-width: 768px) {
.message {
padding: 0 15px;
}
/* moved to ChatMessage.vue scoped styles */
.message.user .message-content {
margin-left: 40px;
}
.message.ai .message-content,
.message.bot .message-content {
margin-right: 40px;
}
}
@media (max-width: 480px) {
.message {
padding: 0 10px;

7
eveai_chat_client/static/assets/css/chat-input.css
View File

@@ -63,13 +63,6 @@
margin-top: 10px;
}
/* Dynamic form container transitions */
.dynamic-form-container {
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
transform: translateY(0);
opacity: 1;
}
/* Chat input transitions */
.chat-input {
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;

5
eveai_chat_client/static/assets/css/chat-message.css
View File

@@ -146,11 +146,6 @@
font-size: 14px;
}
/* Ensure forms in messages use full available width */
.message .dynamic-form-container {
width: 100%;
max-width: none;
}
.message .dynamic-form {
width: 100%;

25
eveai_chat_client/static/assets/css/chat.css
View File

@@ -14,8 +14,9 @@
/* App container layout */
.app-container {
display: flex;
height: 100vh; /* fallback */
height: 100dvh; /* prefer dynamic viewport unit */
/* Use visual viewport variable when available */
min-height: 0;
height: calc(var(--vvh, 1vh) * 100);
width: 100%;
}
@@ -85,8 +86,7 @@
display: flex;
flex-direction: column;
min-height: 0;
height: 100vh; /* fallback for desktop */
height: 100dvh; /* prefer dynamic viewport on desktop */
height: auto; /* prefer dynamic viewport on desktop */
}
.chat-container {
@@ -97,16 +97,19 @@
}
html, body {
height: 100%;
height: calc(var(--vvh, 1vh) * 100); min-height: 0;
}
/* Base reset & overflow control */
* { box-sizing: border-box; }
html { overflow-x: hidden; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
line-height: 1.6;
color: var(--text-color);
background-color: var(--background-color);
height: 100vh;
overflow: hidden;
overflow: hidden; /* prevent double scroll; inner containers handle scrolling */
}
.container {
@@ -281,14 +284,6 @@ body {
}
:root { --mobile-header-height: 60px; } /* default/minimum */
/* Content area takes remaining space */
.content-area {
flex: 1;
height: calc(100vh - var(--mobile-header-height)); /* fallback */
height: calc(100dvh - var(--mobile-header-height)); /* prefer dynamic viewport */
min-height: 0;
}
}
/* Responsieve design regels worden nu gedefinieerd in chat-components.css */

4
eveai_chat_client/static/assets/css/form.css
View File

@@ -1,9 +1,5 @@
/* Dynamisch formulier stijlen */
.dynamic-form {
padding: 15px;
}
.form-header {
display: flex;
align-items: center;

12
eveai_chat_client/static/assets/vue-components/ChatInput.vue
View File

@@ -434,13 +434,13 @@ export default {
.chat-input-container {
width: 100%;
max-width: 1000px;
padding: 20px;
padding: 10px;
box-sizing: border-box;
background-color: var(--active-background-color);
color: var(--human-message-text-color);
border-top: 1px solid #e0e0e0;
font-family: Arial, sans-serif;
font-size: 14px;
font-size: 16px;
transition: opacity 0.2s ease-in-out;
margin-left: auto;
margin-right: auto;
@@ -470,7 +470,7 @@ export default {
outline: none;
transition: border-color 0.2s;
font-family: Arial, sans-serif;
font-size: 14px;
font-size: 16px;
/* Transparante achtergrond in plaats van wit */
background-color: var(--human-message-background);
color: var(--human-message-text-color);
@@ -534,14 +534,14 @@ export default {
/* Active AI Message Area - positioned at top of ChatInput */
.active-ai-message-area {
margin-bottom: 15px;
padding: 12px;
margin-bottom: 10px;
background-color: var(--ai-message-background);
color: var(--ai-message-text-color);
border-radius: 8px;
font-family: Arial, sans-serif;
font-size: 14px;
font-size: 16px;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
padding: 5px;
}
/* Ensure the active AI message integrates well with ChatInput styling */

18
eveai_chat_client/static/assets/vue-components/ChatMessage.vue
View File

@@ -432,7 +432,7 @@ export default {
.message-content {
font-family: Arial, sans-serif;
font-size: 12px;
max-width: 90%;
max-width: 100%;
padding: 8px;
border-radius: 10px;
word-wrap: break-word;
@@ -663,8 +663,7 @@ export default {
.message.bot .message-content {
background: var(--ai-message-background);
color: var(--ai-message-text-color);
border-bottom-left-radius: 4px;
margin-right: 60px;
margin-right: 20px;
}
/* Hover effects for message bubbles */
@@ -692,27 +691,18 @@ export default {
}
.message.ai .message-content,
.message.bot .message-content {
margin-right: 40px;
margin-right: 5px;
}
/* Mobile: place logo inside bubble and prevent overlap with text */
.message.ai .ai-message-logo {
top: -12px;
left: 8px;
width: 24px;
height: 24px;
}
.message.ai .message-content {
/* Reserve space for the in-bubble logo */
padding-top: 1px; /* 24px logo + margins */
padding-left: 1px;
}
}
@media (max-width: 480px) {
.message-content {
max-width: 90%;
margin-left: 20px !important;
margin-right: 20px !important;
padding-left: 10px;
}
}

10
eveai_chat_client/static/assets/vue-components/DynamicForm.vue
View File

@@ -538,14 +538,20 @@ export default {
<style scoped>
/* Dynamisch formulier stijlen */
.dynamic-form-container {
margin-bottom: 15px;
overflow: hidden;
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
transform: translateY(0);
opacity: 1;
}
.message .dynamic-form-container {
width: 100%;
max-width: none;
}
.dynamic-form {
background: var(--human-message-background);
border-radius: 8px;
padding: 15px;
box-shadow: 0 2px 15px rgba(0,0,0,0.1);
box-sizing: border-box;
max-width: 100%;

2
eveai_chat_client/static/assets/vue-components/FormMessage.vue
View File

@@ -294,7 +294,7 @@ export default {
border-bottom: 2px solid #000;
}
}
/* migrated from global css: message-content within form-message */
.form-message .message-content {
max-width: 90%;
background: white;

20
eveai_chat_client/static/assets/vue-components/MobileHeader.vue
View File

@@ -80,21 +80,24 @@ const handleLanguageChange = (newLanguage) => {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap; /* allow wrapping to next line on narrow screens */
padding: 10px 15px;
background: var(--sidebar-background);
color: var(--sidebar-color);
border-bottom: 1px solid rgba(0,0,0,0.1);
min-height: 60px;
max-width: 100%; /* never exceed viewport width */
overflow: hidden; /* clip any accidental overflow */
}
/* Mobile logo container - meer specifieke styling */
.mobile-logo {
flex-shrink: 0;
flex-shrink: 1; /* allow logo area to shrink */
min-width: 0; /* allow shrinking below intrinsic width */
display: flex !important;
align-items: center;
justify-content: flex-start;
height: 50px; /* Vaste hoogte voor consistentie */
min-width: 120px; /* Minimale breedte */
}
/* Diepere styling voor het logo component */
@@ -105,6 +108,7 @@ const handleLanguageChange = (newLanguage) => {
align-items: center !important;
justify-content: flex-start !important;
height: 100% !important;
min-width: 0 !important; /* allow inner content to shrink */
}
.mobile-logo :deep(.logo-image) {
@@ -128,7 +132,7 @@ const handleLanguageChange = (newLanguage) => {
/* Mobile language selector styling */
.mobile-language-selector {
flex-shrink: 1;
min-width: 140px;
min-width: 0; /* allow selector area to shrink */
}
.mobile-language-selector :deep(.language-selector) {
@@ -142,10 +146,18 @@ const handleLanguageChange = (newLanguage) => {
.mobile-language-selector :deep(.language-select) {
padding: 6px 10px;
font-size: 0.85rem;
min-width: 120px;
min-width: 0; /* allow the select to shrink */
max-width: 100%; /* never exceed container width */
margin: 0;
}
/* Extra constraints on ultra-small screens */
@media (max-width: 360px) {
.mobile-language-selector :deep(.language-select) {
max-width: 60vw; /* avoid pushing beyond viewport */
}
}
/* Media queries voor responsiviteit */
@media (max-width: 768px) {
.mobile-header {