added many images in post

2026-07-01 00:23:27 +03:00
parent e9183fd165
commit 139621be0a
5 changed files with 256 additions and 112 deletions
--- a/src/styles/modal.css
+++ b/src/styles/modal.css
@@ -76,17 +76,113 @@
 .f-img-upload-label:hover { border-color: var(--teal); background: rgba(var(--teal-rgb), .05); color: var(--teal); }
 .f-img-input { display: none; }

-/* Image Preview */
-.f-img-preview-wrap { position: relative; display: block; width: 100%; }
-.f-img-preview { width: 100%; height: 200px; object-fit: cover; object-position: center; border-radius: 12px; display: block; }
-.f-img-remove {
-  position: absolute; top: 8px; right: 8px;
-  background: rgba(0,0,0,0.55); border: none; border-radius: 50%;
-  width: 28px; height: 28px;
-  display: flex; align-items: center; justify-content: center;
-  cursor: pointer; color: #fff; padding: 0; transition: background .2s;
+/* Multi-image Grid */
+.f-img-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 8px;
+  margin-bottom: 10px;
+}
+.f-img-grid-item {
+  position: relative;
+  aspect-ratio: 1;
+  border-radius: 10px;
+  overflow: hidden;
+}
+.f-img-grid-preview {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+.f-img-grid-item .f-img-remove {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 22px;
+  height: 22px;
+  background: rgba(0,0,0,0.55);
+  border: none;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: #fff;
+  padding: 0;
+  transition: background .2s;
+}
+.f-img-grid-item .f-img-remove:hover { background: rgba(0,0,0,0.8); }
+.f-img-grid-item .f-img-remove svg {
+  width: 12px;
+  height: 12px;
+}
+
+/* ── Image Viewer Modal ── */
+.f-viewer-bg {
+  position: fixed; inset: 0;
+  background: rgba(0,0,0,.85);
+  z-index: 200;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: mfadeIn .2s ease;
+}
+.f-viewer {
+  position: relative;
+  max-width: 90vw;
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  user-select: none;
+}
+.f-viewer-img {
+  max-width: 90vw;
+  max-height: 80vh;
+  border-radius: 12px;
+  object-fit: contain;
+  cursor: pointer;
+  box-shadow: 0 8px 40px rgba(0,0,0,.5);
+}
+.f-viewer-close {
+  position: fixed;
+  top: 16px;
+  right: 16px;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: rgba(255,255,255,.12);
+  border: 1px solid rgba(255,255,255,.2);
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  z-index: 210;
+  transition: background .2s;
+}
+.f-viewer-close:hover {
+  background: rgba(255,255,255,.25);
+}
+.f-viewer-dots {
+  display: flex;
+  gap: 8px;
+  margin-top: 16px;
+}
+.f-viewer-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: rgba(255,255,255,.3);
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  transition: background .2s;
+}
+.f-viewer-dot.active {
+  background: #fff;
 }
-.f-img-remove:hover { background: rgba(0,0,0,0.8); }

 /* Hints & Errors */
 .f-hint    { font-size: .72rem; color: var(--muted); margin-top: 4px; }