mirror of
https://github.com/mediacms-io/mediacms.git
synced 2025-12-25 12:52:30 -05:00
replace media, shared state, better category options
This commit is contained in:
1
static/css/category_modal.css
Normal file
1
static/css/category_modal.css
Normal file
@@ -0,0 +1 @@
|
||||
.category-widget{margin:10px 0}.category-content{display:flex;gap:20px}.category-panel{flex:1;display:flex;flex-direction:column;min-width:0}.category-panel h3{margin:0 0 12px;font-size:16px;font-weight:normal;color:#333}.category-search{width:100%;padding:8px 12px;margin-bottom:12px;border:1px solid #ddd;border-radius:4px;font-size:14px;box-sizing:border-box}.category-list{border:1px solid #ddd;border-radius:4px;padding:8px;background:#f9f9f9;min-height:120px;max-height:200px}.category-list.scrollable{overflow-y:auto}.category-list::-webkit-scrollbar{width:8px}.category-list::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.category-list::-webkit-scrollbar-thumb{background:#ccc;border-radius:4px}.category-list::-webkit-scrollbar-thumb:hover{background:#aaa}.category-item{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;margin-bottom:4px;background:#fff;border:1px solid #e0e0e0;border-radius:4px;font-size:14px;cursor:pointer;transition:all .2s}.category-item:hover{background:#f0f7ff;border-color:#007bff}.category-item span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.category-item button{background:none;border:none;font-size:18px;font-weight:bold;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .2s}.category-item .add-btn{color:#28a745}.category-item .add-btn:hover{background:rgba(40,167,69,.1)}.category-item .remove-btn{color:#dc3545}.category-item .remove-btn:hover{background:rgba(220,53,69,.1)}.empty-message{padding:30px 15px;text-align:center;color:#999;font-size:13px;font-style:italic}@media (max-width:768px){.category-content{flex-direction:column;gap:16px}.category-list{max-height:150px}}
|
||||
File diff suppressed because one or more lines are too long
1
static/js/category_modal.js
Normal file
1
static/js/category_modal.js
Normal file
@@ -0,0 +1 @@
|
||||
document.addEventListener('DOMContentLoaded',()=>{document.querySelectorAll('.category-widget').forEach(w=>{const d=JSON.parse(w.querySelector('.category-data').textContent),all=d.all,sel=new Set(d.selected),name=w.dataset.name,srch=w.querySelector('.category-search'),left=w.querySelector('[data-panel="left"]'),right=w.querySelector('[data-panel="right"]'),inputs=w.querySelector('.hidden-inputs');const upd=()=>{left.innerHTML=all.filter(c=>!sel.has(c.id)&&(!srch.value||c.title.toLowerCase().includes(srch.value.toLowerCase()))).map(c=>`<div class="category-item" data-id="${c.id}"><span>${c.title}</span><button class="add-btn" type="button">+</button></div>`).join('')||'<div class="empty-message">No categories available</div>';right.innerHTML=[...sel].map(id=>all.find(c=>c.id==id)).filter(Boolean).map(c=>`<div class="category-item" data-id="${c.id}"><span>${c.title}</span><button class="remove-btn" type="button">×</button></div>`).join('')||'<div class="empty-message">No categories selected</div>';inputs.innerHTML=[...sel].map(id=>`<input type="hidden" name="${name}" value="${id}">`).join('')};srch.oninput=upd;left.onclick=e=>{const item=e.target.closest('.category-item');if(item){sel.add(item.dataset.id);upd()}};right.onclick=e=>{const item=e.target.closest('.category-item');if(item){sel.delete(item.dataset.id);upd()}};upd()})});
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user