mirrors/dozzle
1
0
Fork 0
mirror of https://github.com/amir20/dozzle.git synced 2025-12-21 21:33:18 +01:00
Code Issues Projects Releases Wiki Activity

Fixes error position to use flex instead (#2019)

Browse Source
This commit is contained in:
Amir Raminfar
2023-01-27 11:03:22 -08:00
committed by GitHub
parent 143246237d
commit 36a03d91fc
4 changed files with 22 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
assets/components/LogViewer/ComplexLogItem.vue
View File

@@ -3,7 +3,7 @@
<div class="column is-narrow" v-if="showTimestamp">
<log-date :date="logEntry.date"></log-date>
</div>
<div class="column is-narrow">
<div class="column is-narrow is-flex">
<log-level :level="logEntry.level"></log-level>
</div>
<div class="column">

24
assets/components/LogViewer/LogLevel.vue
View File

@@ -16,23 +16,27 @@ div {
width: 0.7em;
height: 0.7em;
border-radius: 0.5em;
&[data-position="middle"] {
border-radius: 0;
height: 2em;
margin: -0.5em 0;
}
align-self: center;
&[data-position="start"] {
border-radius: 0.5em 0.5em 0 0;
height: 1.2em;
margin-bottom: -0.4em;
height: 70%;
margin-bottom: -0.2em;
align-self: flex-end;
}
&[data-position="middle"] {
border-radius: 0;
height: auto;
margin: -0.2em 0;
align-self: auto;
}
&[data-position="end"] {
border-radius: 0 0 0.5em 0.5em;
height: 1.4em;
margin-top: -0.4em;
height: 70%;
margin-top: -0.2em;
align-self: flex-start;
}
&.debug,

2
assets/components/LogViewer/SimpleLogItem.vue
View File

@@ -3,7 +3,7 @@
<div class="column is-narrow" v-if="showTimestamp">
<log-date :date="logEntry.date"></log-date>
</div>
<div class="column is-narrow">
<div class="column is-narrow is-flex">
<log-level :level="logEntry.level" :position="logEntry.position"></log-level>
</div>
<div class="text column" v-html="colorize(logEntry.message)"></div>

12
assets/components/LogViewer/__snapshots__/LogEventSource.spec.ts.snap
View File

@@ -25,7 +25,7 @@ exports[`<LogEventSource /> > render html correctly > should render dates with 1
</div>
<div class=\\"columns is-1 is-variable is-mobile\\" visible-keys=\\"\\" data-v-a49e52d4=\\"\\" data-v-2e92daca=\\"\\">
<div class=\\"column is-narrow\\" data-v-a49e52d4=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"date\\" data-v-de513450=\\"\\" data-v-a49e52d4=\\"\\">06/12/2019 10:55:42 AM</time></div>
<div class=\\"column is-narrow\\" data-v-a49e52d4=\\"\\">
<div class=\\"column is-narrow is-flex\\" data-v-a49e52d4=\\"\\">
<div class=\\"\\" data-v-e625cddd=\\"\\" data-v-a49e52d4=\\"\\"></div>
</div>
<div class=\\"text column\\" data-v-a49e52d4=\\"\\">&lt;test&gt;foo bar&lt;/test&gt;</div>
@@ -59,7 +59,7 @@ exports[`<LogEventSource /> > render html correctly > should render dates with 2
</div>
<div class=\\"columns is-1 is-variable is-mobile\\" visible-keys=\\"\\" data-v-a49e52d4=\\"\\" data-v-2e92daca=\\"\\">
<div class=\\"column is-narrow\\" data-v-a49e52d4=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"date\\" data-v-de513450=\\"\\" data-v-a49e52d4=\\"\\">06/12/2019 10:55:42</time></div>
<div class=\\"column is-narrow\\" data-v-a49e52d4=\\"\\">
<div class=\\"column is-narrow is-flex\\" data-v-a49e52d4=\\"\\">
<div class=\\"\\" data-v-e625cddd=\\"\\" data-v-a49e52d4=\\"\\"></div>
</div>
<div class=\\"text column\\" data-v-a49e52d4=\\"\\">&lt;test&gt;foo bar&lt;/test&gt;</div>
@@ -93,7 +93,7 @@ exports[`<LogEventSource /> > render html correctly > should render messages 1`]
</div>
<div class=\\"columns is-1 is-variable is-mobile\\" visible-keys=\\"\\" data-v-a49e52d4=\\"\\" data-v-2e92daca=\\"\\">
<div class=\\"column is-narrow\\" data-v-a49e52d4=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"date\\" data-v-de513450=\\"\\" data-v-a49e52d4=\\"\\">06/12/2019 10:55:42 AM</time></div>
<div class=\\"column is-narrow\\" data-v-a49e52d4=\\"\\">
<div class=\\"column is-narrow is-flex\\" data-v-a49e52d4=\\"\\">
<div class=\\"\\" data-v-e625cddd=\\"\\" data-v-a49e52d4=\\"\\"></div>
</div>
<div class=\\"text column\\" data-v-a49e52d4=\\"\\">This is a message.</div>
@@ -127,7 +127,7 @@ exports[`<LogEventSource /> > render html correctly > should render messages wit
</div>
<div class=\\"columns is-1 is-variable is-mobile\\" visible-keys=\\"\\" data-v-a49e52d4=\\"\\" data-v-2e92daca=\\"\\">
<div class=\\"column is-narrow\\" data-v-a49e52d4=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"date\\" data-v-de513450=\\"\\" data-v-a49e52d4=\\"\\">06/12/2019 10:55:42 AM</time></div>
<div class=\\"column is-narrow\\" data-v-a49e52d4=\\"\\">
<div class=\\"column is-narrow is-flex\\" data-v-a49e52d4=\\"\\">
<div class=\\"\\" data-v-e625cddd=\\"\\" data-v-a49e52d4=\\"\\"></div>
</div>
<div class=\\"text column\\" data-v-a49e52d4=\\"\\"><span style=\\"color:#000\\">black<span style=\\"color:#AAA\\">white</span></span></div>
@@ -161,7 +161,7 @@ exports[`<LogEventSource /> > render html correctly > should render messages wit
</div>
<div class=\\"columns is-1 is-variable is-mobile\\" visible-keys=\\"\\" data-v-a49e52d4=\\"\\" data-v-2e92daca=\\"\\">
<div class=\\"column is-narrow\\" data-v-a49e52d4=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"date\\" data-v-de513450=\\"\\" data-v-a49e52d4=\\"\\">06/12/2019 10:55:42 AM</time></div>
<div class=\\"column is-narrow\\" data-v-a49e52d4=\\"\\">
<div class=\\"column is-narrow is-flex\\" data-v-a49e52d4=\\"\\">
<div class=\\"\\" data-v-e625cddd=\\"\\" data-v-a49e52d4=\\"\\"></div>
</div>
<div class=\\"text column\\" data-v-a49e52d4=\\"\\"><mark>test</mark> bar</div>
@@ -195,7 +195,7 @@ exports[`<LogEventSource /> > render html correctly > should render messages wit
</div>
<div class=\\"columns is-1 is-variable is-mobile\\" visible-keys=\\"\\" data-v-a49e52d4=\\"\\" data-v-2e92daca=\\"\\">
<div class=\\"column is-narrow\\" data-v-a49e52d4=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"date\\" data-v-de513450=\\"\\" data-v-a49e52d4=\\"\\">06/12/2019 10:55:42 AM</time></div>
<div class=\\"column is-narrow\\" data-v-a49e52d4=\\"\\">
<div class=\\"column is-narrow is-flex\\" data-v-a49e52d4=\\"\\">
<div class=\\"\\" data-v-e625cddd=\\"\\" data-v-a49e52d4=\\"\\"></div>
</div>
<div class=\\"text column\\" data-v-a49e52d4=\\"\\">&lt;test&gt;foo bar&lt;/test&gt;</div>