Skip to content

Commit b5ed155

Browse files
TerrtiaTerrtia
committed
chg: [dashboard] improve UI
1 parent 816ae98 commit b5ed155

3 files changed

Lines changed: 106 additions & 15 deletions

File tree

‎var/www/templates/dashboard/dashboard.html‎

Lines changed: 74 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -21,16 +21,70 @@
2121
max-width: none;
2222
width: 500px;
2323
}
24-
.icon-button {
24+
.dashboard-main {
25+
padding-top: 0.25rem;
26+
color: #1f2937;
27+
}
28+
.dashboard-heading {
29+
color: #111827;
30+
font-weight: 600;
31+
letter-spacing: 0.01em;
32+
margin-bottom: 1rem;
33+
}
34+
.search-panel {
35+
background: #f8fafc;
36+
border: 1px solid #dbe4ef;
37+
border-radius: 0.75rem;
38+
padding: 0.85rem;
39+
margin: 0.35rem 0 0.8rem;
40+
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
41+
}
42+
.dashboard-main .form-control {
43+
min-height: 2.4rem;
44+
}
45+
.chart-panel {
46+
border: 1px solid #dbe4ef;
47+
border-radius: 0.75rem;
48+
background: #ffffff;
49+
padding: 0.25rem;
50+
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
51+
}
52+
.crawler-panel-label {
53+
font-size: 0.82rem;
54+
letter-spacing: 0.04em;
55+
text-transform: uppercase;
56+
color: #4b5563;
57+
margin: 0 0 0.45rem 0.1rem;
58+
font-weight: 600;
59+
}
60+
.icon-button {
2561
position: relative;
2662
display: inline-block;
27-
border: none;
28-
background: none;
63+
border: 1px solid transparent;
64+
background: transparent;
2965
{#padding: 0;#}
3066
margin: 0;
3167
cursor: pointer;
3268
outline: inherit;
3369
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
70+
border-radius: 0.6rem;
71+
padding: 0.3rem 0.25rem 0.2rem;
72+
color: #1f2937;
73+
text-decoration: none;
74+
box-shadow: none;
75+
}
76+
.icon-button:hover {
77+
background: #f8fafc;
78+
border-color: #dbe4ef;
79+
box-shadow: none;
80+
text-decoration: none;
81+
color: #1f2937;
82+
}
83+
.icon-button:focus,
84+
.icon-button:focus-visible {
85+
outline: 3px solid #2563eb;
86+
outline-offset: 2px;
87+
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
3488
}
3589

3690
.icon-wrapper {
@@ -45,20 +99,27 @@
4599
font-size: 14px;
46100
background: forestgreen;
47101
}
102+
.icon-button .h4 {
103+
font-size: 0.98rem;
104+
margin-top: 0.35rem;
105+
margin-bottom: 0;
106+
font-weight: 600;
107+
line-height: 1.25;
108+
}
48109
</style>
49110

50111
</head>
51112
<body>
52113

53114
{% include 'nav_bar.html' %}
54115

55-
<div class="container-fluid">
116+
<div class="container-fluid dashboard-main">
56117

57118

58119
<div class="row">
59120

60121
<div class="col-12 col-xl-6">
61-
<div class="mt-2 mb-2">
122+
<div class="search-panel">
62123
<form method="GET" action="{{ url_for('search_b.search_dashboard') }}">
63124
<div class="input-group">
64125
<input type="text"
@@ -78,9 +139,13 @@
78139
</div>
79140
</form>
80141
</div>
81-
<div id="feeders_dashboard" style="width: 100%; height:600px;"></div>
142+
<div class="chart-panel">
143+
<div id="feeders_dashboard" style="width: 100%; height:600px;"></div>
144+
</div>
82145

83-
<div class="card mt-1 mb-4">
146+
<div class="mt-3">
147+
<p class="crawler-panel-label">Crawler status overview</p>
148+
<div class="card mt-1 mb-4">
84149
<div class="card-header text-white bg-dark">
85150
<div class="row">
86151
<div class="col-1">
@@ -132,10 +197,11 @@
132197
</div>
133198
</div>
134199
</div>
200+
</div>
135201
</div>
136202

137203
<div class="col-12 col-xl-6">
138-
<h3 class="text-center mt-1 mb-4" id="current_date"></h3>
204+
<h3 class="text-center mt-1 mb-3 dashboard-heading" id="current_date"></h3>
139205

140206
<div class="row">
141207

‎var/www/templates/dashboard/objects_dashboard.html‎

Lines changed: 30 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,14 +23,40 @@
2323
.icon-button {
2424
position: relative;
2525
display: inline-block;
26-
border: none;
27-
background: none;
26+
border: 1px solid transparent;
27+
background: transparent;
2828
{#padding: 0;#}
2929
margin: 0;
3030
cursor: pointer;
3131
outline: inherit;
3232
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
33+
border-radius: 0.6rem;
34+
padding: 0.3rem 0.25rem 0.2rem;
35+
color: #1f2937;
36+
text-decoration: none;
37+
box-shadow: none;
3338
}
39+
.icon-button:hover {
40+
background: #f8fafc;
41+
border-color: #dbe4ef;
42+
box-shadow: none;
43+
text-decoration: none;
44+
color: #1f2937;
45+
}
46+
.icon-button:focus,
47+
.icon-button:focus-visible {
48+
outline: 3px solid #2563eb;
49+
outline-offset: 2px;
50+
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
51+
}
52+
.icon-button .h4 {
53+
font-size: 0.95rem;
54+
margin-top: 0.35rem;
55+
margin-bottom: 0;
56+
font-weight: 600;
57+
line-height: 1.25;
58+
}
59+
3460

3561
.icon-wrapper {
3662
position: relative;
@@ -94,10 +120,9 @@ <h3 class="text-center mt-1 mb-4" id="current_date"></h3>
94120
</div>
95121
</div>
96122

123+
</div>
97124
</div>
98-
99-
100-
125+
101126
</div>
102127

103128
<script>

‎var/www/templates/objects/block_obj_button.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
<a class="icon-button btn-outline-dark px-2" href="{{ url }}">
1+
<a class="icon-button btn-outline-dark px-2" href="{{ url }}" aria-label="{{ name }}: {{ nb }}">
22
<div class="icon-wrapper text-center">
33
<i class="fas fa-{{ icon }} fa-4x"></i>
44
<span class="badge badge-pill badge-danger notification-badge" id="obj_btn_{{ type }}">
55
{{ nb }}
66
</span>
77
</div>
88
<div class="h4"><b>{{ name }}</b></div>
9-
</a>
9+
</a>

0 commit comments

Comments
 (0)