Skip to content

Commit 7273ea4

Browse files
marle3003marle3003
committed
improve responsiveness
1 parent 75b082d commit 7273ea4

File tree

13 files changed

+71
-70
lines changed

13 files changed

+71
-70
lines changed

‎webui/src/assets/dashboard.css‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,13 +86,26 @@
8686
width: 90%;
8787
margin: 0 auto auto;
8888
}
89+
.header-demo {
90+
position: fixed;
91+
top: 4rem;
92+
z-index: 10;
93+
width: 100%;
94+
padding-top: 15px;
95+
padding-left: 8px;
96+
padding-bottom: 30px;
97+
background-color: var(--color-background);
98+
}
8999
.dashboard-tabs {
90100
background-color: var(--color-background);
91101
width: 100%;
92102
position: fixed;
93103
top: 4rem;
94104
z-index: 10;
95105
}
106+
.dashboard-tabs.demo {
107+
top: 10rem;
108+
}
96109
.dashboard-tabs nav > div {
97110
border-bottom: 2px solid;
98111
border-bottom-color: var(--dashboard-nav-border);
@@ -121,6 +134,9 @@
121134
.dashboard-content {
122135
margin-top: 4rem;
123136
}
137+
.dashboard-content.demo {
138+
margin-top: 10rem;
139+
}
124140
.dashboard a {
125141
text-decoration: none;
126142
}
@@ -159,4 +175,13 @@
159175
}
160176
.tooltip.bs-tooltip-end .tooltip-arrow::before {
161177
border-right-color: #f8f9fa;
178+
}
179+
180+
@media only screen and (max-width: 450px) {
181+
.dashboard-tabs.demo {
182+
top: 10.8rem;
183+
}
184+
.dashboard-content.demo {
185+
margin-top: 10.8rem;
186+
}
162187
}

‎webui/src/assets/datatable.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ table.dataTable {
44
color:var(--datatable-color);
55
font-size: 0.9rem;
66
background-color: var(--datatable-background);
7-
table-layout: fixed;
87
}
98
table.dataTable th {
109
background-color: var(--datatable-background);

‎webui/src/components/dashboard/Actions.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -79,9 +79,9 @@ function getStatus(action: Action) {
7979
<thead>
8080
<tr>
8181
<th scope="col" class="text-left" style="width: 30px;"></th>
82-
<th scope="col" class="text-left" style="width: 80px;">Status</th>
83-
<th scope="col" class="text-left">Name</th>
84-
<th scope="col" class="text-center" style="width: 10%">Duration</th>
82+
<th scope="col" class="text-left col-1">Status</th>
83+
<th scope="col" class="text-left col">Name</th>
84+
<th scope="col" class="text-center col-1">Duration</th>
8585
</tr>
8686
</thead>
8787
<tbody>

‎webui/src/components/dashboard/http/EndpointsCard.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -209,10 +209,10 @@ function toggleTag(name: string) {
209209
<tr>
210210
<th v-if="hasDeprecated" scope="col" class="text-center" style="width: 5px"></th>
211211
<th scope="col" class="text-left">Path</th>
212-
<th scope="col" class="text-left" style="width: 20%;">Summary</th>
213-
<th scope="col" class="text-left" style="width: 10%">Operations</th>
214-
<th scope="col" class="text-center" style="width: 15%">Last Request</th>
215-
<th scope="col" class="text-center" style="width: 10%">Requests / Errors</th>
212+
<th scope="col" class="text-left col-3">Summary</th>
213+
<th scope="col" class="text-left col-1">Operations</th>
214+
<th scope="col" class="text-center col-2">Last Request</th>
215+
<th scope="col" class="text-center col-1">Requests / Errors</th>
216216
</tr>
217217
</thead>
218218
<tbody>

‎webui/src/components/dashboard/http/HttpEventHeader.vue‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@ defineProps({
1111
<table class="table dataTable">
1212
<thead>
1313
<tr>
14-
<th scope="col" class="text-left w-25">Name</th>
15-
<th scope="col" class="text-left">Value</th>
14+
<th scope="col" class="text-left col-3">Name</th>
15+
<th scope="col" class="text-left col">Value</th>
1616
</tr>
1717
</thead>
1818
<tbody>
@@ -22,10 +22,4 @@ defineProps({
2222
</tr>
2323
</tbody>
2424
</table>
25-
</template>
26-
27-
<style scoped>
28-
.w-10{
29-
width: 10%;
30-
}
31-
</style>
25+
</template>

‎webui/src/components/dashboard/http/HttpEventParameters.vue‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
<script setup lang="ts">
22
import { Modal } from 'bootstrap';
33
import { computed, ref, useTemplateRef, type PropType } from 'vue';
4-
import SourceView from '../SourceView.vue';
54
65
const props = defineProps({
76
parameters: { type: Object as PropType<HttpEventParameter[]>, required: true },
@@ -63,10 +62,10 @@ function openDialog(p: HttpEventParameter) {
6362
<thead>
6463
<tr>
6564
<th scope="col" style="width:40px" v-if="useValueSwitcher"></th>
66-
<th scope="col" class="text-left w-20">Name</th>
67-
<th scope="col" class="text-left" style="width:100px;">Type</th>
68-
<th scope="col" class="text-center" style="width: 130px;">OpenAPI</th>
69-
<th scope="col" class="text-left" style="width:70%">Value</th>
65+
<th scope="col" class="text-left col-1">Type</th>
66+
<th scope="col" class="text-left col-3">Name</th>
67+
<th scope="col" class="text-left col">Value</th>
68+
<th scope="col" class="text-center col-2">OpenAPI Defined</th>
7069
</tr>
7170
</thead>
7271
<tbody>
@@ -78,10 +77,10 @@ function openDialog(p: HttpEventParameter) {
7877
<i v-else class="bi bi-code" title="Show raw value"></i>
7978
</button>
8079
</td>
81-
<td class="align-middle">{{ p.name }}</td>
8280
<td class="align-middle">{{ p.type }}</td>
83-
<td class="text-center align-middle">{{ p.value ? 'yes' : 'no' }}</td>
81+
<td class="align-middle">{{ p.name }}</td>
8482
<td class="align-middle text-truncate">{{ p.value ? (showRaw[p.name] ? p.raw : p.rendered) : p.raw }}</td>
83+
<td class="text-center align-middle">{{ p.value ? 'true' : 'false' }}</td>
8584
</tr>
8685
</tbody>
8786
</table>

‎webui/src/components/dashboard/http/Requests.vue‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -589,11 +589,11 @@ function mergeDeep<T>(target: T, source: Partial<T>): T {
589589
<thead>
590590
<tr>
591591
<th v-if="hasDeprecatedRequests" scope="col" class="text-center" style="width: 5px;"></th>
592-
<th scope="col" class="text-left" style="width: 80px;">Method</th>
593-
<th scope="col" class="text-left">URL</th>
594-
<th scope="col" class="text-center">Status Code</th>
595-
<th scope="col" class="text-center">Time</th>
596-
<th scope="col" class="text-center">Duration</th>
592+
<th scope="col" class="text-left col-1">Method</th>
593+
<th scope="col" class="text-left col">URL</th>
594+
<th scope="col" class="text-center col-1">Status Code</th>
595+
<th scope="col" class="text-center col-2">Time</th>
596+
<th scope="col" class="text-center col-1">Duration</th>
597597
</tr>
598598
</thead>
599599
<tbody>

‎webui/src/components/dashboard/kafka/KafkaTopicsCard.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -53,10 +53,10 @@ function goToTopic(topic: KafkaTopic, openInNewTab = false){
5353
<table class="table dataTable selectable" aria-labelledby="topics">
5454
<thead>
5555
<tr>
56-
<th scope="col" class="text-left" style="width: 30%">Name</th>
57-
<th scope="col" class="text-left" style="width: 30%">Description</th>
58-
<th scope="col" class="text-center" style="width: 10%">Last Message</th>
59-
<th scope="col" class="text-center" style="width: 10%">Messages</th>
56+
<th scope="col" class="text-left col-4">Name</th>
57+
<th scope="col" class="text-left col-4">Description</th>
58+
<th scope="col" class="text-center col-2">Last Message</th>
59+
<th scope="col" class="text-center col-1">Messages</th>
6060
</tr>
6161
</thead>
6262
<tbody>

‎webui/src/components/dashboard/kafka/Servers.vue‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -38,16 +38,17 @@ const servers = computed(() => {
3838
<table class="table dataTable" aria-labelledby="servers">
3939
<thead>
4040
<tr>
41-
<th scope="col" class="text-left" style="width: 20%">Name</th>
42-
<th scope="col" class="text-left" style="width: 20%">Host</th>
43-
<th scope="col" class="text-left" style="width: 20%">Tags</th>
44-
<th scope="col" class="text-left w-50" style="width: 40%">Description</th>
41+
<th scope="col" class="text-left col-2">Name</th>
42+
<th scope="col" class="text-left col-2">Host</th>
43+
<th scope="col" class="text-left col">Description</th>
44+
<th scope="col" class="text-left col-1">Tags</th>
4545
</tr>
4646
</thead>
4747
<tbody>
4848
<tr v-for="server in servers" :key="server.host">
4949
<td>{{ server.name }}</td>
5050
<td>{{ server.host }}</td>
51+
<td><markdown :source="server.description" class="description" :html="true"></markdown></td>
5152
<td>
5253
<ul class="tags">
5354
<li v-for="tag in server.tags" class="has-popover">
@@ -57,7 +58,6 @@ const servers = computed(() => {
5758

5859
</ul>
5960
</td>
60-
<td><markdown :source="server.description" class="description" :html="true"></markdown></td>
6161
</tr>
6262
</tbody>
6363
</table>

‎webui/src/components/dashboard/ldap/Requests.vue‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -85,12 +85,12 @@ onUnmounted(() => {
8585
<table class="table dataTable selectable" aria-labelledby="requests">
8686
<thead>
8787
<tr>
88-
<th scope="col" class="text-left" style="width: 10%">Operation</th>
89-
<th scope="col" class="text-left" style="width: 25%">DN</th>
90-
<th scope="col" class="text-left" style="width: 30%">Criteria</th>
91-
<th scope="col" class="text-center" style="width: 10%">Status</th>
92-
<th scope="col" class="text-center" style="width:15%">Time</th>
93-
<th scope="col" class="text-center" style="width: 10%">Duration</th>
88+
<th scope="col" class="text-left col-1">Operation</th>
89+
<th scope="col" class="text-left col">DN</th>
90+
<th scope="col" class="text-left col">Criteria</th>
91+
<th scope="col" class="text-center col-1">Status</th>
92+
<th scope="col" class="text-center col-2">Time</th>
93+
<th scope="col" class="text-center col-1">Duration</th>
9494
</tr>
9595
</thead>
9696
<tbody>

0 commit comments

Comments
 (0)