rahix/openflexure-microscope-server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Clamp log summary to two lines with elipsis

Browse source
This commit is contained in:
Joe Knapper 2026-06-18 14:30:18 +01:00
parent 816dad79fa
commit 4c835d7be5
1 changed files with 20 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

27
webapp/src/components/labThingsComponents/actionLogDisplay.vue
View file

@ -14,15 +14,20 @@
<!-- Header always shows latest message--> <!-- Header always shows latest message-->
<div class="log-summary"> <div class="log-summary">
<div v-if="latestMessage"> <div v-if="latestMessage" class="log-summary-text">
{{ latestMessage }} {{ latestMessage }}
</div> </div>
<div v-else-if="taskStatus === 'error'"> <div v-else-if="taskStatus === 'error'" class="log-summary-text">
<p>The task failed due to an error:</p> <p>The task failed due to an error:</p>
<p>{{ errorMessage }}</p> <p>{{ errorMessage }}</p>
<p>{{ errorMessage }}</p>
</div>
<div v-else-if="taskStatus == 'cancelled'" class="log-summary-text">
The task was cancelled.
</div>
<div v-else-if="taskStatus == 'completed'" class="log-summary-text">
The task completed successfully.
</div> </div>
<div v-else-if="taskStatus == 'cancelled'">The task was cancelled.</div>
<div v-else-if="taskStatus == 'completed'">The task completed successfully.</div>
</div> </div>
<!-- Expanded view shows log --> <!-- Expanded view shows log -->
@ -182,12 +187,20 @@ export default {
.log-summary { .log-summary {
padding: 2px; padding: 2px;
padding-right: 30px; /* reserve room for the toggle button, prevents overlap */ padding-right: 30px; /* reserve room for the toggle button, prevents overlap */
display: flex; display: block;
align-items: center; align-items: center;
justify-content: center; }
.log-summary-text {
text-align: center; text-align: center;
font-size: large; font-size: large;
box-sizing: border-box; min-height: calc(2 * 1.4em); /* ALWAYS reserve 2 lines */
line-height: 1.4em;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2; /* Future version of webkit-line-clamp, not fully supported yet */
} }
.log-container { .log-container {