home/links
2
0
Fork 0
mirror of https://github.com/wahyd4/links.git synced 2026-08-08 21:04:53 +10:00
Code Issues Packages Projects Releases Wiki Activity

fix: tag detail mobile — tabs no longer wrap to a lonely second row

Browse Source 
- seg-tabs: single-row horizontal scroll (scrollbar hidden) as fallback,
  mobile-tuned padding/font/badge so all 4 tabs fit on 390px without clipping
- soft Delete button shadow (was visually louder than every other control)
- empty states: icon + centered text instead of the 'box-in-box' dashed frame
This commit is contained in:
OpenClaw Sub-agent
2026-08-03 18:25:56 +10:00
parent 3f0a0c393f
commit 44ca5b0aa4
1 changed files with 37 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
links/templates/links/tag_detail.html
+37 -11
View File
@@ -44,18 +44,20 @@
}
.apple-btn-secondary { background: #fff; color: var(--apple-text); border: 1px solid rgba(0, 0, 0, 0.12); }
.apple-btn-secondary:hover { background: #f0f0f3; }
.apple-btn-danger { background: var(--apple-red); color: #fff; box-shadow: 0 8px 22px rgba(255, 59, 48, 0.3); }
.apple-btn-danger { background: var(--apple-red); color: #fff; box-shadow: 0 4px 14px rgba(255, 59, 48, 0.18); }
.apple-btn-danger:hover { background: #ff5147; }
.apple-btn:active { transform: scale(0.96); }
/* ── Segmented tabs ── */
.seg-tabs {
display: inline-flex; padding: 3px; gap: 2px;
background: rgba(0, 0, 0, 0.055); border-radius: 12px;
margin-bottom: 1.4rem; flex-wrap: wrap;
display: flex; align-items: center; gap: 2px;
padding: 3px; background: rgba(0, 0, 0, 0.055); border-radius: 12px;
margin-bottom: 1.4rem;
overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.seg-tabs::-webkit-scrollbar { display: none; }
.seg-tab {
display: inline-flex; align-items: center; gap: 0.4rem;
display: inline-flex; align-items: center; gap: 0.4rem; flex: none; white-space: nowrap;
padding: 0.45rem 0.95rem; border-radius: 9px; border: none; cursor: pointer;
background: transparent; font-size: 0.82rem; font-weight: 600; color: var(--apple-text);
transition: background 0.2s ease, box-shadow 0.2s ease;
@@ -89,14 +91,18 @@
.res-card .res-meta { font-size: 0.72rem; color: var(--apple-gray); display: flex; align-items: center; gap: 0.3rem; }
.res-card .res-meta svg { width: 0.85rem; height: 0.85rem; flex: none; }
.res-empty {
padding: 2.5rem 1rem; text-align: center; color: var(--apple-gray); font-size: 0.9rem;
background: #fff; border: 1px dashed rgba(0, 0, 0, 0.12); border-radius: 16px;
display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
padding: 2.2rem 1rem; text-align: center; color: var(--apple-gray); font-size: 0.88rem;
background: rgba(0, 0, 0, 0.022); border-radius: 14px;
}
.res-empty svg { width: 1.9rem; height: 1.9rem; color: rgba(0, 0, 0, 0.18); }
@media (max-width: 640px) {
.tags-page { padding: 1.35rem 1rem 2.5rem; }
.tag-header h1 { font-size: 1.6rem; }
.res-grid { grid-template-columns: 1fr; }
.seg-tab { padding: 0.38rem 0.45rem; font-size: 0.76rem; gap: 0.3rem; }
.seg-tab .tab-count { min-width: 1.1rem; height: 1rem; padding: 0 0.28rem; font-size: 0.62rem; }
}
</style>
@@ -166,7 +172,12 @@
{% endfor %}
</div>
{% else %}
<div class="res-empty">{% trans "No links found with this tag." %}</div>
<div class="res-empty">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244"/>
</svg>
{% trans "No links found with this tag." %}
</div>
{% endif %}
</div>
@@ -189,7 +200,12 @@
{% endfor %}
</div>
{% else %}
<div class="res-empty">{% trans "No posts found with this tag." %}</div>
<div class="res-empty">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25"/>
</svg>
{% trans "No posts found with this tag." %}
</div>
{% endif %}
</div>
@@ -212,7 +228,12 @@
{% endfor %}
</div>
{% else %}
<div class="res-empty">{% trans "No pages found with this tag." %}</div>
<div class="res-empty">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 12h16.5m-16.5 3.75h16.5M3.75 19.5h16.5M5.625 4.5h12.75a1.875 1.875 0 010 3.75H5.625a1.875 1.875 0 010-3.75z"/>
</svg>
{% trans "No pages found with this tag." %}
</div>
{% endif %}
</div>
@@ -235,7 +256,12 @@
{% endfor %}
</div>
{% else %}
<div class="res-empty">{% trans "No image collections found with this tag." %}</div>
<div class="res-empty">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A1.5 1.5 0 0021.75 19.5V4.5A1.5 1.5 0 0020.25 3H3.75A1.5 1.5 0 002.25 4.5v15A1.5 1.5 0 003.75 21z"/>
</svg>
{% trans "No image collections found with this tag." %}
</div>
{% endif %}
</div>
</div>