Telegram-Market/telegram-shop
1
1
Fork 0
Code Issues 40 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

fix(admin): button icon visibility and text wrapping

Browse Source 
- Add CSS for svg.sa-icon fill on all button variants
- white-space: nowrap + inline-flex + gap for icon buttons
- Quick Actions: d-grid → d-flex flex-wrap for horizontal layout
- btn-secondary → btn-dark for Settings button (icon visibility)
This commit is contained in:
NW
2026-07-06 19:00:25 +01:00
parent 10f8138ce2
commit 2a34b40411
2 changed files with 38 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/admin/views/dashboard.ejs
View File

@@ -163,11 +163,11 @@
</div>
<div class="panel-container show">
<div class="panel-content">
<div class="d-grid gap-2">
<div class="d-flex flex-wrap gap-2">
<a href="/products" class="btn btn-primary"><svg class="sa-icon me-2"><use href="/icons/sprite.svg#plus"></use></svg> Add Product</a>
<a href="/users" class="btn btn-success"><svg class="sa-icon me-2"><use href="/icons/sprite.svg#user-plus"></use></svg> Add User</a>
<a href="/catalog" class="btn btn-info text-white"><svg class="sa-icon me-2"><use href="/icons/sprite.svg#list"></use></svg> View Catalog</a>
<a href="/settings" class="btn btn-secondary"><svg class="sa-icon me-2"><use href="/icons/sprite.svg#settings"></use></svg> Settings</a>
<a href="/settings" class="btn btn-dark"><svg class="sa-icon me-2"><use href="/icons/sprite.svg#settings"></use></svg> Settings</a>
</div>
</div>
</div>

36
src/admin/views/layout.ejs
View File

@@ -39,6 +39,42 @@
.main-content td form + form {
margin-left: 0.5rem;
}
/* Button icon visibility */
.btn svg.sa-icon {
fill: currentColor;
flex-shrink: 0;
}
/* Ensure icons are visible on all button variants */
.btn-primary svg.sa-icon,
.btn-success svg.sa-icon,
.btn-info svg.sa-icon,
.btn-danger svg.sa-icon,
.btn-warning svg.sa-icon,
.btn-dark svg.sa-icon {
fill: #fff;
}
/* Icon on light buttons */
.btn-outline-primary svg.sa-icon,
.btn-outline-secondary svg.sa-icon,
.btn-outline-success svg.sa-icon,
.btn-outline-info svg.sa-icon,
.btn-outline-warning svg.sa-icon,
.btn-outline-danger svg.sa-icon,
.btn-secondary svg.sa-icon,
.btn-light svg.sa-icon {
fill: currentColor;
}
/* Prevent text wrapping in icon buttons */
.btn {
white-space: nowrap;
}
/* Better alignment for icon+text buttons */
a.btn, button.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
}
</style>
</head>