admin/nahodka-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added post modal for feed on map

Browse Source
This commit is contained in:
SlimusMinus
2026-08-27 01:30:03 +03:00
parent 69e929efbf
commit 408a97e5b2
11 changed files with 512 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/styles/card.css
View File

@@ -219,15 +219,15 @@
/* ── Footer (phone + owner actions) ── */
.f-card-foot {
display: flex; align-items: center; justify-content: space-between;
gap: 8px; padding: 10px 16px 12px;
flex-wrap: wrap;
display: flex; flex-direction: row; align-items: center; justify-content: center;
gap: 10px; padding: 10px 16px 12px;
}
.f-card-foot-left { display: flex; align-items: center; min-width: 0; }
.f-card-foot-right { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.f-card-foot-left { display: flex; align-items: center; }
.f-card-foot-right { display: flex; align-items: center; }
.f-card-phone {
color: var(--teal); font-size: .85rem; font-weight: 700;
text-decoration: none; display: flex; align-items: center; gap: 6px;
color: var(--teal); font-size: .75rem; font-weight: 700;
text-decoration: none; display: flex; align-items: center; gap: 4px;
white-space: nowrap;
}
.f-card-date { color: var(--muted2); font-size: .75rem; }
@@ -235,10 +235,11 @@
display: flex; align-items: center; gap: 5px;
background: rgba(var(--teal-rgb), .1);
border: 1px solid rgba(var(--teal-rgb), .3);
border-radius: 999px; padding: 12px 36px;
border-radius: 999px; padding: 6px 20px;
cursor: pointer; font-family: var(--font);
font-size: 1.05rem; font-weight: 700;
font-size: .75rem; font-weight: 700;
color: var(--teal); transition: all .2s;
white-space: nowrap;
}
.f-card-contact:hover {
background: rgba(var(--teal-rgb), .18);
@@ -389,8 +390,7 @@
@media (max-width: 600px) {
.f-card-contact {
padding: 10px 40px;
font-size: .95rem;
white-space: nowrap;
padding: 5px 16px;
font-size: .7rem;
}
}

2
src/styles/chat.css
View File

@@ -3,7 +3,7 @@
display: flex;
flex-direction: column;
flex: 1;
height: 100vh;
height: 100vh; height: 100dvh;
background: var(--bg-app);
}

8
src/styles/layout.css
View File

@@ -1,6 +1,6 @@
/* ── App Shell (Instagram-style) ── */
.f-app {
display: flex; height: 100vh;
display: flex; height: 100vh; height: 100dvh;
background: var(--bg-app);
overflow: hidden; font-family: var(--font); position: relative;
}
@@ -15,7 +15,7 @@
/* ── Main Column ── */
.f-main {
flex: 1; display: flex; flex-direction: column;
min-width: 0; height: 100vh; overflow: hidden;
min-width: 0; height: 100vh; height: 100dvh; overflow: hidden;
}
/* ── Topbar (mobile only; desktop uses the nav sidebar) ── */
@@ -24,7 +24,7 @@
padding: 8px 16px;
border-bottom: 1px solid var(--border);
background: var(--bg-surface);
position: sticky; top: 0; z-index: 10;
z-index: 10;
}
.f-menu-btn {
background: none; border: none; cursor: pointer;
@@ -126,7 +126,7 @@
position: relative;
}
.f-topbar-dropdown-wrap .f-topbar {
position: sticky; top: 0; z-index: 10;
z-index: 10;
}
.f-topbar-dropdown-btn {
display: inline-flex; align-items: center; gap: 4px;

63
src/styles/modal.css
View File

@@ -274,6 +274,10 @@
align-items: flex-end;
}
.f-modal-bg:has(.f-post-detail-modal) {
align-items: center;
}
.f-modal-bg.auth-modal-bg {
align-items: center;
}
@@ -391,4 +395,63 @@
.f-modal-sm {
width: 420px;
}
.f-post-detail-modal {
width: 480px;
max-width: 95vw;
padding: 0;
overflow: hidden;
border-radius: 24px;
}
.f-post-detail-modal .f-card {
border: none;
border-radius: 24px;
box-shadow: none;
}
.f-post-detail-modal .f-card-head {
border-radius: 24px 24px 0 0;
}
.f-post-detail-modal .f-card-head {
padding: 10px 14px;
}
.f-post-detail-modal .f-card-img {
max-height: none;
overflow: visible;
}
.f-post-detail-modal .f-card-img img {
width: 100%;
height: auto;
object-fit: contain;
}
.f-post-detail-modal .f-card-caption {
padding: 8px 14px;
}
.f-post-detail-modal .f-card-foot {
padding: 8px 14px;
}
.f-post-detail-close {
position: absolute;
top: 12px;
right: 12px;
z-index: 10;
}
.f-post-detail-status {
display: flex;
align-items: center;
justify-content: center;
padding: 60px 0;
}
.f-post-detail-error {
color: var(--err);
font-size: 0.9rem;
}
@media (max-width: 600px) {
.f-modal.f-post-detail-modal {
width: 67%;
max-height: 100vh;
border-radius: 24px;
padding: 0;
margin: auto;
}
}