Skip to content

Commit

Permalink
More optimization wip
Browse files Browse the repository at this point in the history
  • Loading branch information
@bengtmagnus
bengtmagnus committed Dec 9, 2024
1 parent 0ff873d commit 6d35650
Show file tree
Hide file tree
Showing 13 changed files with 877 additions and 912 deletions.
98 changes: 45 additions & 53 deletions static/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,10 +74,6 @@ a:hover {
margin-bottom: 1rem;
}

.field-label {
color: var(--font-color-light);
}

textarea {
font-family: monospace;
}
Expand All @@ -104,17 +100,7 @@ input[type='file']:focus {
outline: 1px auto -webkit-focus-ring-color;
}

input.regular-text {
padding: 0.75rem 1rem;
border-radius: 0.375rem;
border: none;
box-shadow: none;
background: #2D2C2C;
border: 1px solid #414040;
color: #f7f5f2;
}

input[type="text"], input[type="number"] {
input[type="text"], input[type="number"], input[type="password"] {
padding: 0.75rem 1rem;
border-radius: 0.375rem;
border: none;
Expand All @@ -124,20 +110,14 @@ input[type="text"], input[type="number"] {
color: #f7f5f2;
}

textarea.regular-textarea {
border-radius: 0.375rem;
background: #2D2C2C;
border: 1px solid #414040;
color: #f7f5f2;
}

select.dropdown {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23f7f5f2' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
background-position: right .5rem center;
background-repeat: no-repeat;
background-size: 1.5em 1.5em;
padding-right: 2.5rem;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
Expand Down Expand Up @@ -185,11 +165,6 @@ main.main-grid {
grid-auto-rows: max-content;
min-height: calc(100vh - 140px);
margin-bottom: 80px;

footer {
grid-column: 1 / span 12;
margin: 0;
}
}
/* Grid end */

Expand Down Expand Up @@ -540,15 +515,6 @@ body.login main {
.card {
grid-column: 1 / span 12;
position: relative;
}

.chart-card {
padding: 1rem 1.5rem 1.5rem;
border-radius: 0.75rem;
background-color: var(--bg-color-dark);
}

.regular-card {
padding: 1rem 1.5rem 1.5rem;
border-radius: 0.75rem;
background-color: var(--bg-color-dark);
Expand Down Expand Up @@ -587,7 +553,7 @@ body.login main {
font-size: 1.125rem;
line-height: 1.75rem;
font-weight: 600;
margin-bottom: 2rem;
margin-bottom: 1rem;

&.form-card-title {
font-size: 1rem;
Expand All @@ -596,26 +562,35 @@ body.login main {
border-bottom: 1px solid var(--border-color-light);
margin-bottom: 0;
}
}

.form-card-inner {
padding: 1rem 1.5rem;
&.has-badge {
display: flex;
flex-direction: row;
align-items: center;
}

&.with-desc {
margin-bottom: 0.5rem;
}
}

.chart-card h3 {
margin-bottom: 1rem;
.form h3 {
margin-bottom: 2rem;
}

.title-m.has-badge {
display: flex;
flex-direction: row;
align-items: center;
.form-card-inner {
padding: 1rem 1.5rem;
}

.card-desc {
color: var(--font-color-darker);
font-size: 0.875rem;
line-height: 1.25rem;

&.pre-form {
margin-bottom: 2rem;
margin-top: 0;
}
}

.form-card-title {
Expand Down Expand Up @@ -766,16 +741,29 @@ body.login main {
}

footer {
margin: 0;
background-color: var(--bg-color-dark);
color: var(--font-color-darker);
padding: 20px 40px;
grid-row: 4;
text-align: right;
margin: 0 auto;
text-align: center;
width: calc(100% - 80px);
padding-left: 320px;

p {
background-color: var(--bg-color-dark);
color: var(--font-color-darker);
padding: 20px 40px;
height: 100%;
width: 100%;
display: block;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
border-top-left-radius: 0.75rem;
border-top-right-radius: 0.75rem;
}
}

footer .logo {
vertical-align: sub;
margin-left: 4px;
height: 20px;
}

Expand Down Expand Up @@ -1541,6 +1529,10 @@ textarea {
height: 100px;
width: calc(100% - 160px);
max-width: 400px;
border-radius: 0.375rem;
background: #2D2C2C;
border: 1px solid #414040;
color: #f7f5f2;
}

fieldset {
Expand Down
4 changes: 2 additions & 2 deletions views/channel.ecr
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,12 +49,12 @@
</tr>
</table>
</section>
<section class="card chart-card regular-card">
<section class="card regular-card">
<h3>Message rates</h3>
<div class="chart-container" id="chart"></div>
</section>
<section class="card regular-card">
<h3 class="title-m has-badge">
<h3 class="has-badge">
Consumers
<small class="tiny-badge" id="consumer-count"></small>
</h3>
Expand Down
50 changes: 24 additions & 26 deletions views/channels.ecr
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,32 +7,30 @@
</head>
<body>
<% render "partials/header" %>
<div class="grid-content">
<main>
<div id="breadcrumbs">
<h2 class="page-title"><%=pagename%><div class="tiny-badge" id="pagename-label"></div></h2>
<main class="main-grid">
<div id="breadcrumbs">
<h2 class="page-title"><%=pagename%><div class="tiny-badge" id="pagename-label"></div></h2>
</div>
<section class="card regular-card">
<div class="table-wrapper">
<div id="table-error"></div>
<table id="table" class="table">
<thead>
<tr>
<th data-sort-key="name">Name</th>
<th data-sort-key="vhost" class="left">Virtual host</th>
<th data-sort-key="username" class="left">User</th>
<th>Mode</th>
<th data-sort-key="consumer_count">Consumers</th>
<th data-sort-key="prefetch_count">Prefetch limit</th>
<th data-sort-key="messages_unacknowledged">Unacked messages</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<section class="card regular-card">
<div class="table-wrapper">
<div id="table-error"></div>
<table id="table" class="table">
<thead>
<tr>
<th data-sort-key="name">Name</th>
<th data-sort-key="vhost" class="left">Virtual host</th>
<th data-sort-key="username" class="left">User</th>
<th>Mode</th>
<th data-sort-key="consumer_count">Consumers</th>
<th data-sort-key="prefetch_count">Prefetch limit</th>
<th data-sort-key="messages_unacknowledged">Unacked messages</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</section>
</main>
<% render "partials/footer" %>
</div>
</section>
</main>
<% render "partials/footer" %>
</body>
</html>
6 changes: 3 additions & 3 deletions views/connection.ecr
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
<h2 class="page-title"><%=pagename%><div id="pagename-label" class="subpage-title"></div></h2>
</div>
<section class="card cols-6 regular-card">
<h3 class="title-m">Details</h3>
<h3>Details</h3>
<table class="details-table">
<tr>
<th>Username</th>
Expand Down Expand Up @@ -69,12 +69,12 @@
</tr>
</table>
</section>
<section class="card chart-card regular-card">
<section class="card">
<h3>Rates</h3>
<div class="chart-container" id="chart"></div>
</section>
<section class="card regular-card">
<h3 class="title-m has-badge">
<h3 class="has-badge">
Channels
<small class="tiny-badge" id="table-count"></small>
</h3>
Expand Down
66 changes: 32 additions & 34 deletions views/connections.ecr
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,40 +7,38 @@
</head>
<body>
<% render "partials/header" %>
<div class="grid-content">
<main>
<div id="breadcrumbs">
<h2 class="page-title"><%=pagename%><div class="tiny-badge" id="pagename-label"></div></h2>
<main class="main-grid">
<div id="breadcrumbs">
<h2 class="page-title"><%=pagename%><div class="tiny-badge" id="pagename-label"></div></h2>
</div>
<section class="card regular-card">
<div class="table-wrapper">
<div id="table-error"></div>
<table id="table" class="table">
<thead>
<tr>
<th data-sort-key="vhost">Virtual host</th>
<th data-sort-key="name" class="left">Name</th>
<th data-sort-key="user" class="left">User</th>
<th data-sort-key="state">State</th>
<th data-sort-key="ssl">TLS</th>
<th data-sort-key="tls_version">TLS Version</th>
<th data-sort-key="cipher">Cipher</th>
<th data-sort-key="protocol">Protocol</th>
<th data-sort-key="channels">Channels</th>
<th data-sort-key="channel_max">Channel max</th>
<th data-sort-key="timeout">Heartbeat</th>
<th>Client</th>
<th data-sort-key="connected_at">Connected at</th>
<th data-sort-key="recv_oct">Received bytes</th>
<th data-sort-key="send_oct">Sent bytes</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<section class="card regular-card">
<div class="table-wrapper">
<div id="table-error"></div>
<table id="table" class="table">
<thead>
<tr>
<th data-sort-key="vhost">Virtual host</th>
<th data-sort-key="name" class="left">Name</th>
<th data-sort-key="user" class="left">User</th>
<th data-sort-key="state">State</th>
<th data-sort-key="ssl">TLS</th>
<th data-sort-key="tls_version">TLS Version</th>
<th data-sort-key="cipher">Cipher</th>
<th data-sort-key="protocol">Protocol</th>
<th data-sort-key="channels">Channels</th>
<th data-sort-key="channel_max">Channel max</th>
<th data-sort-key="timeout">Heartbeat</th>
<th>Client</th>
<th data-sort-key="connected_at">Connected at</th>
<th data-sort-key="recv_oct">Received bytes</th>
<th data-sort-key="send_oct">Sent bytes</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</section>
</main>
<% render "partials/footer" %>
</div>
</section>
</main>
<% render "partials/footer" %>
</body>
</html>
Loading

0 comments on commit 6d35650

Please sign in to comment.