diff --git a/src/TestPanel.js b/src/TestPanel.js index 83f5128..1cf3555 100644 --- a/src/TestPanel.js +++ b/src/TestPanel.js @@ -101,12 +101,15 @@ function ClassSelector(p){ const CLASSES = p.GetData("class") const wrapperRef = useRef(null); useOutsideAlerter(wrapperRef,p.setEdit); - return
- Class Selector
- {Object.keys(CLASSES).map((cl,i)=>{ - return - })} -
+ return <>
+ Class Selector
+
+ {Object.keys(CLASSES).map((cl,i)=>{ + return + })} +
+
+ } function EditableClass(p){ @@ -119,7 +122,7 @@ function EditableClass(p){ function PopupWindow(p) { return {p.setModalOpen(false)}} shouldFocusAfterRender={true} shouldCloseOnOverlayClick={true} shouldCloseOnEsc={true} className="modal" overlayClassName="modalOverlay"> -
+

{p.title}

{p.showCloseButton&&
{p.setModalOpen(false)}}>
} diff --git a/src/style.css b/src/style.css index b7a00a6..ef2fcc5 100644 --- a/src/style.css +++ b/src/style.css @@ -549,17 +549,17 @@ li.r4 { clear: both; } .itemlistcontainer { - max-height: 400px; +/* max-height: 400px;*/ overflow-y: scroll; overflow-x: hidden; margin: 10px 5px 0 0; padding: 2px; -} +}/* @media screen and (min-width:390px) and (max-width:860px) { .itemlistcontainer { max-height: 300px; } -} +}*/ .itemlist li:hover, .treeList li:hover { background-color: rgba(113,169,189,0.33); outline: 2px solid rgba(54,255,255,0.66); @@ -890,12 +890,16 @@ input#editBoxInput { outline: 2px solid #30cdef; } .popup{ + display: flex; + flex-wrap: wrap; +} +.popup2{ + z-index:5; position: absolute; background-color: rgba(128,128,128,0.9); max-width: 250px; min-width: 100px; padding: 20px; - } .popup button{ margin:5px; @@ -942,16 +946,10 @@ button{ padding: 4px; } .modal { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: papayawhip; + flex-grow: 1; + flex-basis: 200px; + max-width: 580px; outline: 0; - display: flex; - flex-flow: row wrap; - justify-content: center; } .modalOverlay { position: fixed; @@ -959,7 +957,14 @@ button{ left: 0; right: 0; bottom: 0; - background: rgba(0,0,0,.33); + background: rgba(0,0,0,.80); + + display: flex; + flex-flow: row wrap; + justify-content: center; +} +.boxModal { + } .webicon{ color:maroon;