Fix styling of properties window when narrow

This commit is contained in:
Ryan Huffman 2018-11-19 13:50:56 -08:00
parent 556aec9412
commit 193b9752b8
2 changed files with 16 additions and 11 deletions
scripts/system/html

View file

@ -590,9 +590,6 @@ div.section[collapsed="true"], div.section[collapsed="true"] > .section-header {
background-color: #373737;
}
.section-header {
cursor: pointer;
}
.section-header span {
font-size: 30px;
@ -948,12 +945,12 @@ div.refresh input[type="button"] {
}
.draggable-number.left-arrow {
top: -5px;
right: 106px;
left: 0px;
transform: rotate(180deg);
}
.draggable-number.right-arrow {
top: -5px;
left: 106px;
right: 0px;
}
.draggable-number input[type=number] {
position: absolute;
@ -1123,7 +1120,7 @@ textarea:enabled[scrolling="true"]::-webkit-resizer {
}
body#entity-list-body {
div#grid-section, body#entity-list-body {
padding-bottom: 0;
margin: 16px;
}
@ -1552,7 +1549,6 @@ input.rename-entity {
.container {
display: flex;
flex-flow: row nowrap;
justify-content: space-around;
margin-bottom: 8px;
min-height: 28px;
}
@ -1602,6 +1598,8 @@ input.rename-entity {
.xyz.fstuple, .pyr.fstuple {
position: relative;
left: -12px;
min-width: 50px;
width: 100px;
}
.rgb.fstuple .tuple {
@ -1660,3 +1658,7 @@ input.number-slider {
#placeholder-property-type {
min-width: 0px;
}
.collapse-icon {
cursor: pointer;
}

View file

@ -1158,18 +1158,21 @@ const GROUPS = [
label: "Link",
type: "string",
propertyID: "href",
placeholder: "URL",
},
{
label: "Script",
type: "string",
buttons: [ { id: "reload", label: "F", className: "glyph", onClick: reloadScripts } ],
propertyID: "script",
placeholder: "URL",
},
{
label: "Server Script",
type: "string",
buttons: [ { id: "reload", label: "F", className: "glyph", onClick: reloadServerScripts } ],
propertyID: "serverScripts",
placeholder: "URL",
},
{
label: "Server Script Status",
@ -2771,7 +2774,7 @@ function loaded() {
elLegend.appendChild(createElementFromHTML(`<div class="label">${group.label}</div>`));
let elSpan = document.createElement('span');
elSpan.className = ".collapse-icon";
elSpan.className = "collapse-icon";
elSpan.innerText = "M";
elLegend.appendChild(elSpan);
elGroup.appendChild(elLegend);
@ -3311,14 +3314,14 @@ function loaded() {
getPropertyInputElement("image").addEventListener('change', createImageURLUpdateFunction('textures', false));
// Collapsible sections
let elCollapsible = document.getElementsByClassName("section-header");
let elCollapsible = document.getElementsByClassName("collapse-icon");
let toggleCollapsedEvent = function(event) {
let element = this.parentNode;
let element = this.parentNode.parentNode;
let isCollapsed = element.dataset.collapsed !== "true";
element.dataset.collapsed = isCollapsed ? "true" : false;
element.setAttribute("collapsed", isCollapsed ? "true" : "false");
element.getElementsByClassName(".collapse-icon")[0].textContent = isCollapsed ? "L" : "M";
this.textContent = isCollapsed ? "L" : "M";
};
for (let collapseIndex = 0, numCollapsibles = elCollapsible.length; collapseIndex < numCollapsibles; ++collapseIndex) {