diff --git a/DrSousan.Api/Pages/Blog/Post.cshtml b/DrSousan.Api/Pages/Blog/Post.cshtml index add8842..d25d814 100644 --- a/DrSousan.Api/Pages/Blog/Post.cshtml +++ b/DrSousan.Api/Pages/Blog/Post.cshtml @@ -72,6 +72,18 @@ .article-content a{color:var(--gold);border-bottom:1px solid var(--gold-pale)} .article-content blockquote{border-right:4px solid var(--gold);padding:.8rem 1.2rem;background:var(--gold-pale);border-radius:0 8px 8px 0;margin:1.2rem 0;font-style:italic;color:var(--mid)} .article-content img{max-width:100%;height:auto;border-radius:12px;margin:1.2rem 0;display:block} + /* ─── In-content image carousel ───────────────────────────────── */ + .post-carousel{position:relative;margin:1.5rem 0;border-radius:14px;overflow:hidden;background:#111} + .post-carousel .pc-track{display:flex;direction:ltr;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none} + .post-carousel .pc-track::-webkit-scrollbar{display:none} + .post-carousel .pc-track img{flex:0 0 100%;width:100%;max-height:480px;object-fit:cover;scroll-snap-align:center;display:block;margin:0 !important;border-radius:0 !important} + .post-carousel .pc-prev,.post-carousel .pc-next{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.45);color:#fff;border:none;width:40px;height:40px;border-radius:50%;font-size:1.5rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2;transition:background .2s} + .post-carousel .pc-prev:hover,.post-carousel .pc-next:hover{background:rgba(0,0,0,.72)} + .post-carousel .pc-prev{left:10px} + .post-carousel .pc-next{right:10px} + .post-carousel .pc-dots{position:absolute;bottom:10px;left:0;right:0;display:flex;gap:6px;justify-content:center;z-index:2} + .post-carousel .pc-dots span{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.5);cursor:pointer;transition:background .2s} + .post-carousel .pc-dots span.active{background:#fff;width:20px;border-radius:4px} /* ─── Tags ─────────────────────────────────────────────────────── */ .article-tags{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--border);display:flex;gap:.5rem;flex-wrap:wrap} .tag{background:var(--bg);border:1px solid var(--border);padding:.25rem .75rem;border-radius:50px;font-size:.78rem;color:var(--mid)} @@ -300,3 +312,31 @@ + +@section Scripts { + +} diff --git a/DrSousan.Api/wwwroot/admin/index.html b/DrSousan.Api/wwwroot/admin/index.html index 1b765ae..290316f 100644 --- a/DrSousan.Api/wwwroot/admin/index.html +++ b/DrSousan.Api/wwwroot/admin/index.html @@ -184,6 +184,12 @@ tr:hover td{background:#FAFBFC} .editor-toolbar button{background:none;border:none;padding:.3rem .5rem;border-radius:4px;cursor:pointer;font-size:.82rem;font-family:inherit;color:var(--mid)} .editor-toolbar button:hover{background:var(--gold-pale);color:var(--gold)} .editor-content{border:1.5px solid var(--border);border-radius:0 0 8px 8px;padding:.8rem 1rem;min-height:250px;outline:none;font-size:.9rem;line-height:1.8;direction:rtl} +.editor-content img{max-width:100%;height:auto;border-radius:8px;margin:.6rem 0} +/* Carousel preview inside the editor: tidy filmstrip, controls hidden */ +.editor-content .post-carousel{border:1px dashed var(--gold);border-radius:10px;padding:5px;background:#faf7f0;margin:.8rem 0} +.editor-content .post-carousel .pc-track{display:flex;gap:6px;overflow-x:auto} +.editor-content .post-carousel .pc-track img{flex:0 0 46%;max-height:170px;object-fit:cover;border-radius:6px;margin:0} +.editor-content .post-carousel .pc-prev,.editor-content .post-carousel .pc-next,.editor-content .post-carousel .pc-dots{display:none} /* ── Pages ── */ .page{display:none} @@ -1028,6 +1034,7 @@ tr:hover td{background:#FAFBFC} +
@@ -2270,6 +2277,38 @@ function insImage(){ }; fileInput.click(); } +// Insert a multi-image carousel/slider into the post content +function insCarousel(){ + const editor=document.getElementById('post-content'); + editor.focus(); + const sel=window.getSelection(); + const savedRange=sel.rangeCount?sel.getRangeAt(0):null; + const fileInput=document.createElement('input'); + fileInput.type='file'; + fileInput.accept='image/jpeg,image/png,image/webp,image/gif'; + fileInput.multiple=true; + fileInput.onchange=async()=>{ + const files=[...fileInput.files];if(!files.length)return; + if(files.length<2){toast('برای اسلایدر حداقل ۲ تصویر انتخاب کنید','error');return;} + toast(`در حال آپلود ${files.length} تصویر...`); + try{ + const urls=[]; + for(const file of files){ + const fd=new FormData();fd.append('file',file); + const r=await fetch('/api/upload',{method:'POST',headers:{'Authorization':`Bearer ${token}`},body:fd}); + if(!r.ok)throw new Error(await r.text()); + const {url}=await r.json();urls.push(url); + } + const imgs=urls.map(u=>`