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

- Adaptation of the form message layout, in such a way that labels are shown on top of their values iso left, allowing a decent rendering on mobile devices

Browse Source 
- refactoring message-content CSS
This commit is contained in:
Josako
2025-09-22 22:24:46 +02:00
parent b6512b2d8c
commit 61ae9c3174
7 changed files with 164 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -547,6 +547,8 @@ export default {
border-radius: 8px;
padding: 15px;
box-shadow: 0 2px 15px rgba(0,0,0,0.1);
box-sizing: border-box;
max-width: 100%;
}
.form-header {
@@ -558,7 +560,9 @@ export default {
}
.dynamic-form.readonly .form-header {
border-bottom: 1px solid #777;
border-bottom: none; /* alle borders weg in readonly */
padding-bottom: 0;
margin-bottom: 8px;
}
.form-icon {
@@ -722,34 +726,86 @@ export default {
/* Read-only form styling */
.form-readonly {
padding: 10px 0;
padding: 8px 0; /* compacter binnen bubble */
box-sizing: border-box;
max-width: 100%;
}
.form-field-readonly {
display: flex;
margin-bottom: 8px;
padding-bottom: 8px;
align-items: flex-start;
gap: 8px;
margin-bottom: 6px; /* compacter */
padding-bottom: 6px;
line-height: 1.3; /* iets compacter */
box-sizing: border-box;
max-width: 100%;
}
.dynamic-form.readonly .form-field-readonly {
border-bottom: 1px solid #777;
border-bottom: none; /* alle borders weg in readonly */
}
.field-label {
flex: 0 0 30%;
font-weight: 500;
padding-right: 10px;
padding-right: 8px;
box-sizing: border-box;
max-width: 100%;
}
.field-value {
flex: 1;
word-break: break-word;
overflow-wrap: anywhere; /* desktop: meerregelig zonder overflow */
box-sizing: border-box;
max-width: 100%;
}
.text-value {
white-space: pre-wrap;
}
/* Responsive aanpassingen voor read-only binnen message bubbles */
@media (min-width: 768px) {
/* Desktop en groter: geen ellipsis, laat tekst wrappen */
.dynamic-form.readonly .field-label,
.dynamic-form.readonly .field-value {
white-space: normal;
overflow: visible;
text-overflow: clip;
}
}
@media (max-width: 767.98px) {
/* Mobiel: label boven waarde, vet label, ellipsis op één regel */
.dynamic-form.readonly .form-field-readonly {
display: block;
border-bottom: none; /* alle borders weg in readonly */
}
.dynamic-form.readonly .field-label {
display: block;
font-weight: 600;
margin-bottom: 3px; /* kleine afstand tussen label en waarde */
padding-right: 0;
flex: none;
}
.dynamic-form.readonly .field-value {
display: block;
}
.dynamic-form.readonly .field-label,
.dynamic-form.readonly .field-value {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Specifieke override voor text-value die anders pre-wrap afdwingt */
.dynamic-form.readonly .field-value.text-value {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
/* Boolean icon styling */
.boolean-icon {
font-size: 20px;