diff --git a/webapp/src/components/labThingsComponents/actionLogDisplay.vue b/webapp/src/components/labThingsComponents/actionLogDisplay.vue index 364a8bfb..11236c76 100644 --- a/webapp/src/components/labThingsComponents/actionLogDisplay.vue +++ b/webapp/src/components/labThingsComponents/actionLogDisplay.vue @@ -2,7 +2,6 @@
- +
- - {{ latestMessage }} - +
+ + + + + + + + + +
@@ -175,14 +196,23 @@ export default { } .log-summary { - padding: 0.6em; - padding-right: 2.5em; /* reserve room for the toggle button, prevents overlap */ - display: flex; + padding: 2px; + padding-right: 30px; /* reserve room for the toggle button, prevents overlap */ + display: block; align-items: center; - justify-content: center; +} + +.log-summary-text { text-align: center; font-size: large; - box-sizing: border-box; + height: calc(2 * 1.4em); /* height of element is 2 lines */ + line-height: 1.4em; + padding: 0 5px; /* Give some padding so there's room for ... to not expand too far */ + 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 { @@ -215,8 +245,8 @@ export default { /* Toggle button */ .log-toggle { position: absolute; - top: 6px; - right: 6px; + top: 0; + right: 2px; background: transparent; border: none; padding: 4px; diff --git a/webapp/src/components/labThingsComponents/actionStatusModal.vue b/webapp/src/components/labThingsComponents/actionStatusModal.vue index 899a793b..c890303b 100644 --- a/webapp/src/components/labThingsComponents/actionStatusModal.vue +++ b/webapp/src/components/labThingsComponents/actionStatusModal.vue @@ -125,29 +125,7 @@ export default { margin-right: 5px; } -#status-modal { - max-height: 90vh; // never exceed 90% of viewport height - display: flex; - flex-direction: column; -} - #status-modal h2 { flex: 0 0 auto; // title never shrinks } - -#status-modal .action-log-display { - flex: 1 1 auto; - min-height: 0; -} - -#status-modal .log-wrapper { - flex: 1 1 200px; // prefer 200px, shrink only under pressure - min-height: 2.6em; // floor: one line -} - -#status-modal .log-container { - height: auto; - flex: 1 1 auto; - min-height: 2.6em; -} diff --git a/webapp/src/components/tabContentComponents/loggingContent.vue b/webapp/src/components/tabContentComponents/loggingContent.vue index 56cb3ee3..deaffe4d 100644 --- a/webapp/src/components/tabContentComponents/loggingContent.vue +++ b/webapp/src/components/tabContentComponents/loggingContent.vue @@ -37,6 +37,16 @@
+
+
+

+ No log entries found at the current filter level ({{ filterLevel }} or + higher). +

+

You can include lower levels using the dropdown in the top left.

+
+
+