mirror of
https://github.com/Casvt/MIND.git
synced 2026-04-03 03:00:22 -04:00
Improved table sizing
This commit is contained in:
CasVT
@@ -5,7 +5,6 @@
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
#add-service-button {
|
||||
@@ -18,66 +17,63 @@
|
||||
width: 1rem;
|
||||
}
|
||||
|
||||
.table-container > table {
|
||||
.overflow-container {
|
||||
margin-inline: auto;
|
||||
|
||||
width: 100%;
|
||||
max-width: 50rem;
|
||||
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.overflow-container > table {
|
||||
border-spacing: 0px;
|
||||
}
|
||||
|
||||
.table-container > table th,
|
||||
.table-container > table td {
|
||||
.overflow-container > table th,
|
||||
.overflow-container > table td {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.table-container > table th {
|
||||
padding-block: .5rem;
|
||||
.overflow-container > table th {
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
#services-list > tr > td {
|
||||
border-top: 1px solid var(--color-gray);
|
||||
}
|
||||
|
||||
#services-list > tr.edit > td {
|
||||
padding-block: .5rem;
|
||||
padding: .25rem;
|
||||
}
|
||||
|
||||
.title-column {
|
||||
width: 8rem;
|
||||
min-width: 9.5rem;
|
||||
width: 25%;
|
||||
|
||||
padding-left: 1.5rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.url-column {
|
||||
width: 21rem;
|
||||
min-width: 26rem;
|
||||
width: 65%;
|
||||
}
|
||||
|
||||
#services-list input {
|
||||
min-width: 6rem;
|
||||
|
||||
border-radius: 2px;
|
||||
padding: .5rem;
|
||||
padding: .25rem;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.url-column > input {
|
||||
min-width: 10rem;
|
||||
}
|
||||
|
||||
#services-list input:read-only {
|
||||
border-color: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#services-list > tr.edit > td.action-column {
|
||||
padding-block: 1rem;
|
||||
}
|
||||
|
||||
.action-column {
|
||||
#services-list > tr > td.action-column {
|
||||
min-width: 4rem;
|
||||
width: 20%;
|
||||
|
||||
display: flex;
|
||||
gap: .5rem;
|
||||
|
||||
padding: .5rem;
|
||||
padding: calc(.5rem + 2px);
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
|
||||
|
||||
@@ -160,40 +160,42 @@
|
||||
</g>
|
||||
</svg>
|
||||
</button>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="title-column">Title</th>
|
||||
<th class="url-column">Apprise URL</th>
|
||||
<th title="Actions" aria-label="Actions" class="action-column">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="256" height="256" x="0" y="0" viewBox="0 0 24 24" style="enable-background:new 0 0 512 512" xml:space="preserve">
|
||||
<g>
|
||||
<path d="M11.24,24a2.262,2.262,0,0,1-.948-.212,2.18,2.18,0,0,1-1.2-2.622L10.653,16H6.975A3,3,0,0,1,4.1,12.131l3.024-10A2.983,2.983,0,0,1,10,0h3.693a2.6,2.6,0,0,1,2.433,3.511L14.443,8H17a3,3,0,0,1,2.483,4.684l-6.4,10.3A2.2,2.2,0,0,1,11.24,24ZM10,2a1,1,0,0,0-.958.71l-3.024,10A1,1,0,0,0,6.975,14H12a1,1,0,0,1,.957,1.29L11.01,21.732a.183.183,0,0,0,.121.241A.188.188,0,0,0,11.4,21.9l6.4-10.3a1,1,0,0,0,.078-1.063A.979.979,0,0,0,17,10H13a1,1,0,0,1-.937-1.351l2.19-5.84A.6.6,0,0,0,13.693,2Z"></path>
|
||||
</g>
|
||||
</svg>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="services-list">
|
||||
<tr id="add-row" class="hidden">
|
||||
<td class="title-column">
|
||||
<input type="text">
|
||||
</td>
|
||||
<td class="url-column">
|
||||
<input type="text">
|
||||
</td>
|
||||
<td class="action-column">
|
||||
<button data-type="save" title="Add" aria-label="Add">
|
||||
<div class="overflow-container">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="title-column">Title</th>
|
||||
<th class="url-column">Apprise URL</th>
|
||||
<th title="Actions" aria-label="Actions" class="action-column">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="256" height="256" x="0" y="0" viewBox="0 0 24 24" style="enable-background:new 0 0 512 512" xml:space="preserve">
|
||||
<g>
|
||||
<path d="M12,10a4,4,0,1,0,4,4A4,4,0,0,0,12,10Zm0,6a2,2,0,1,1,2-2A2,2,0,0,1,12,16Z"></path><path d="M22.536,4.122,19.878,1.464A4.966,4.966,0,0,0,16.343,0H5A5.006,5.006,0,0,0,0,5V19a5.006,5.006,0,0,0,5,5H19a5.006,5.006,0,0,0,5-5V7.657A4.966,4.966,0,0,0,22.536,4.122ZM17,2.08V3a3,3,0,0,1-3,3H10A3,3,0,0,1,7,3V2h9.343A2.953,2.953,0,0,1,17,2.08ZM22,19a3,3,0,0,1-3,3H5a3,3,0,0,1-3-3V5A3,3,0,0,1,5,2V3a5.006,5.006,0,0,0,5,5h4a4.991,4.991,0,0,0,4.962-4.624l2.16,2.16A3.02,3.02,0,0,1,22,7.657Z"></path>
|
||||
<path d="M11.24,24a2.262,2.262,0,0,1-.948-.212,2.18,2.18,0,0,1-1.2-2.622L10.653,16H6.975A3,3,0,0,1,4.1,12.131l3.024-10A2.983,2.983,0,0,1,10,0h3.693a2.6,2.6,0,0,1,2.433,3.511L14.443,8H17a3,3,0,0,1,2.483,4.684l-6.4,10.3A2.2,2.2,0,0,1,11.24,24ZM10,2a1,1,0,0,0-.958.71l-3.024,10A1,1,0,0,0,6.975,14H12a1,1,0,0,1,.957,1.29L11.01,21.732a.183.183,0,0,0,.121.241A.188.188,0,0,0,11.4,21.9l6.4-10.3a1,1,0,0,0,.078-1.063A.979.979,0,0,0,17,10H13a1,1,0,0,1-.937-1.351l2.19-5.84A.6.6,0,0,0,13.693,2Z"></path>
|
||||
</g>
|
||||
</svg>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="services-list">
|
||||
<tr id="add-row" class="hidden">
|
||||
<td class="title-column">
|
||||
<input type="text">
|
||||
</td>
|
||||
<td class="url-column">
|
||||
<input type="text">
|
||||
</td>
|
||||
<td class="action-column">
|
||||
<button data-type="save" title="Add" aria-label="Add">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="256" height="256" x="0" y="0" viewBox="0 0 24 24" style="enable-background:new 0 0 512 512" xml:space="preserve">
|
||||
<g>
|
||||
<path d="M12,10a4,4,0,1,0,4,4A4,4,0,0,0,12,10Zm0,6a2,2,0,1,1,2-2A2,2,0,0,1,12,16Z"></path><path d="M22.536,4.122,19.878,1.464A4.966,4.966,0,0,0,16.343,0H5A5.006,5.006,0,0,0,0,5V19a5.006,5.006,0,0,0,5,5H19a5.006,5.006,0,0,0,5-5V7.657A4.966,4.966,0,0,0,22.536,4.122ZM17,2.08V3a3,3,0,0,1-3,3H10A3,3,0,0,1,7,3V2h9.343A2.953,2.953,0,0,1,17,2.08ZM22,19a3,3,0,0,1-3,3H5a3,3,0,0,1-3-3V5A3,3,0,0,1,5,2V3a5.006,5.006,0,0,0,5,5h4a4.991,4.991,0,0,0,4.962-4.624l2.16,2.16A3.02,3.02,0,0,1,22,7.657Z"></path>
|
||||
</g>
|
||||
</svg>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="settings">
|
||||
|
||||
Reference in New Issue
Block a user