revert: remove search bar and credentials collapsible
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
+2
-89
@@ -410,60 +410,18 @@ button {
|
|||||||
position: relative;
|
position: relative;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
.svc-cred-toggle {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
width: 100%;
|
|
||||||
background: rgba(42,140,214,0.1);
|
|
||||||
border: 1px solid rgba(42,140,214,0.22);
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 0.32rem 0.65rem;
|
|
||||||
margin: 0 0 0rem;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 0.76rem;
|
|
||||||
font-weight: 700;
|
|
||||||
color: #1a5a8a;
|
|
||||||
letter-spacing: 0.03em;
|
|
||||||
text-transform: uppercase;
|
|
||||||
pointer-events: auto;
|
|
||||||
transition: background 0.15s ease, border-color 0.15s ease;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
.svc-cred-toggle:hover {
|
|
||||||
background: rgba(42,140,214,0.18);
|
|
||||||
border-color: rgba(42,140,214,0.38);
|
|
||||||
}
|
|
||||||
.svc-cred-chevron {
|
|
||||||
width: 14px; height: 14px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
transition: transform 0.2s ease;
|
|
||||||
color: #2a8cd6;
|
|
||||||
}
|
|
||||||
.svc-credentials-wrap.open .svc-cred-chevron {
|
|
||||||
transform: rotate(180deg);
|
|
||||||
}
|
|
||||||
.svc-credentials-wrap.open .svc-cred-toggle {
|
|
||||||
border-bottom-left-radius: 0;
|
|
||||||
border-bottom-right-radius: 0;
|
|
||||||
border-bottom-color: transparent;
|
|
||||||
}
|
|
||||||
.svc-credentials {
|
.svc-credentials {
|
||||||
background: linear-gradient(135deg, #edf5fc 0%, #e2eff8 100%);
|
background: linear-gradient(135deg, #edf5fc 0%, #e2eff8 100%);
|
||||||
border: 1px solid #c7d9ea;
|
border: 1px solid #c7d9ea;
|
||||||
border-top: none;
|
border-radius: 8px;
|
||||||
border-radius: 0 0 8px 8px;
|
|
||||||
padding: 0.5rem 0.75rem 0.55rem;
|
padding: 0.5rem 0.75rem 0.55rem;
|
||||||
margin: 0 0 0.5rem;
|
margin: 0 0 0.5rem;
|
||||||
display: none;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 0.3rem;
|
gap: 0.3rem;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
pointer-events: auto;
|
pointer-events: auto;
|
||||||
}
|
}
|
||||||
.svc-credentials-wrap.open .svc-credentials {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
.svc-cred-row {
|
.svc-cred-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -926,14 +884,6 @@ button {
|
|||||||
background: linear-gradient(135deg, rgba(220,238,255,0.55) 0%, rgba(200,225,248,0.5) 100%) !important;
|
background: linear-gradient(135deg, rgba(220,238,255,0.55) 0%, rgba(200,225,248,0.5) 100%) !important;
|
||||||
border-color: rgba(180, 215, 240, 0.6) !important;
|
border-color: rgba(180, 215, 240, 0.6) !important;
|
||||||
}
|
}
|
||||||
.dashboard-page .svc-cred-toggle {
|
|
||||||
background: rgba(42,140,214,0.12) !important;
|
|
||||||
border-color: rgba(42,140,214,0.25) !important;
|
|
||||||
color: #0c2e4a !important;
|
|
||||||
}
|
|
||||||
.dashboard-page .svc-cred-toggle:hover {
|
|
||||||
background: rgba(42,140,214,0.2) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Category badges on tile */
|
/* Category badges on tile */
|
||||||
.dashboard-page .service-cat-badge {
|
.dashboard-page .service-cat-badge {
|
||||||
@@ -964,43 +914,6 @@ button {
|
|||||||
letter-spacing: 0.01em !important;
|
letter-spacing: 0.01em !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Search bar */
|
|
||||||
.svc-search-wrap {
|
|
||||||
padding: 0.6rem 0 0;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.svc-search-wrap::before {
|
|
||||||
content: ;
|
|
||||||
position: absolute;
|
|
||||||
left: 0.9rem;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-25%);
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
background: url(data:image/svg+xml,%3Csvg xmlns=http://www.w3.org/2000/svg viewBox=0 0 24 24 fill=none stroke=%235a8aaa stroke-width=2.2 stroke-linecap=round stroke-linejoin=round%3E%3Ccircle cx=11 cy=11 r=8/%3E%3Cpath d=M21 21l-4.35-4.35/%3E%3C/svg%3E) center/contain no-repeat;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
.svc-search {
|
|
||||||
width: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
background: rgba(255, 255, 255, 0.3);
|
|
||||||
backdrop-filter: blur(12px);
|
|
||||||
-webkit-backdrop-filter: blur(12px);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.5);
|
|
||||||
border-radius: 12px;
|
|
||||||
padding: 0.6rem 1rem 0.6rem 2.5rem;
|
|
||||||
font-size: 0.95rem;
|
|
||||||
color: #0c1e2f;
|
|
||||||
outline: none;
|
|
||||||
transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
|
|
||||||
box-shadow: 0 2px 8px rgba(15,64,103,0.08), inset 0 1px 0 rgba(255,255,255,0.6);
|
|
||||||
}
|
|
||||||
.svc-search::placeholder { color: rgba(12,30,47,0.45); }
|
|
||||||
.svc-search:focus {
|
|
||||||
background: rgba(255, 255, 255, 0.45);
|
|
||||||
border-color: rgba(42,140,214,0.55);
|
|
||||||
box-shadow: 0 4px 16px rgba(15,64,103,0.14), 0 0 0 3px rgba(42,140,214,0.12), inset 0 1px 0 rgba(255,255,255,0.7);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Suppress transitions on non-tile elements */
|
/* Suppress transitions on non-tile elements */
|
||||||
.category-chip,
|
.category-chip,
|
||||||
|
|||||||
@@ -88,14 +88,11 @@
|
|||||||
{% endfor %}
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<div class="svc-search-wrap">
|
|
||||||
<input type="search" id="svc-search" class="svc-search" placeholder="Поиск сервиса..." autocomplete="off" />
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
<section class="grid service-grid">
|
<section class="grid service-grid">
|
||||||
{% for service in services %}
|
{% for service in services %}
|
||||||
{% set svc_cats = service_categories.get(service.id, []) %}
|
{% set svc_cats = service_categories.get(service.id, []) %}
|
||||||
<div class="tile-wrap" data-name="{{ service.name|lower }}">
|
<div class="tile-wrap">
|
||||||
<a class="tile-link" href="/go/{{ service.slug }}" aria-label="{{ service.name }}"></a>
|
<a class="tile-link" href="/go/{{ service.slug }}" aria-label="{{ service.name }}"></a>
|
||||||
<div class="tile">
|
<div class="tile">
|
||||||
<div class="tile-icon-box">
|
<div class="tile-icon-box">
|
||||||
@@ -104,28 +101,22 @@
|
|||||||
<h3>{{ service.name }}</h3>
|
<h3>{{ service.name }}</h3>
|
||||||
<div class="tile-info-area">
|
<div class="tile-info-area">
|
||||||
{% if service.svc_login or service.svc_password %}
|
{% if service.svc_login or service.svc_password %}
|
||||||
<div class="svc-credentials-wrap">
|
<div class="svc-credentials">
|
||||||
<button type="button" class="svc-cred-toggle" onclick="this.closest('.svc-credentials-wrap').classList.toggle('open')">
|
{% if service.svc_login %}
|
||||||
<span>Данные входа</span>
|
<div class="svc-cred-row">
|
||||||
<svg class="svc-cred-chevron" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.17l3.71-3.94a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd"/></svg>
|
<span class="svc-cred-label">Логин</span>
|
||||||
</button>
|
<span class="svc-cred-value">{{ service.svc_login }}</span>
|
||||||
<div class="svc-credentials">
|
|
||||||
{% if service.svc_login %}
|
|
||||||
<div class="svc-cred-row">
|
|
||||||
<span class="svc-cred-label">Логин</span>
|
|
||||||
<span class="svc-cred-value">{{ service.svc_login }}</span>
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
{% if service.svc_password %}
|
|
||||||
<div class="svc-cred-row">
|
|
||||||
<span class="svc-cred-label">Пароль</span>
|
|
||||||
<span class="svc-cred-value svc-cred-masked">{{ service.svc_password }}</span>
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
{% if service.svc_cred_hint %}
|
|
||||||
<p class="svc-cred-hint">{{ service.svc_cred_hint }}</p>
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
{% if service.svc_password %}
|
||||||
|
<div class="svc-cred-row">
|
||||||
|
<span class="svc-cred-label">Пароль</span>
|
||||||
|
<span class="svc-cred-value svc-cred-masked">{{ service.svc_password }}</span>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
{% if service.svc_cred_hint %}
|
||||||
|
<p class="svc-cred-hint">{{ service.svc_cred_hint }}</p>
|
||||||
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% if service.comment %}
|
{% if service.comment %}
|
||||||
@@ -241,16 +232,6 @@
|
|||||||
});
|
});
|
||||||
})();
|
})();
|
||||||
|
|
||||||
(function () {
|
|
||||||
const input = document.getElementById('svc-search');
|
|
||||||
if (!input) return;
|
|
||||||
input.addEventListener('input', function () {
|
|
||||||
const q = this.value.trim().toLowerCase();
|
|
||||||
document.querySelectorAll('.tile-wrap[data-name]').forEach(function (wrap) {
|
|
||||||
wrap.style.display = (!q || wrap.dataset.name.includes(q)) ? '' : 'none';
|
|
||||||
});
|
|
||||||
});
|
|
||||||
})();
|
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user