move position of screen nav item menu
This commit is contained in:
parent
4175ccbffb
commit
23f5941bf5
7 changed files with 25 additions and 5 deletions
|
@ -166,9 +166,10 @@
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: var(--spacing-xs);
|
gap: var(--spacing-xs);
|
||||||
width: max-content;
|
width: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
padding-left: var(--spacing-l);
|
padding-left: var(--spacing-l);
|
||||||
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Needed to fully display the actions icon */
|
/* Needed to fully display the actions icon */
|
||||||
|
@ -266,6 +267,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.right {
|
.right {
|
||||||
|
margin-left: auto;
|
||||||
order: 10;
|
order: 10;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -66,6 +66,7 @@
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.panel {
|
.panel {
|
||||||
|
min-width: 260px;
|
||||||
width: 260px;
|
width: 260px;
|
||||||
flex: 0 0 260px;
|
flex: 0 0 260px;
|
||||||
background: var(--background);
|
background: var(--background);
|
||||||
|
@ -83,6 +84,7 @@
|
||||||
border-right: var(--border-light);
|
border-right: var(--border-light);
|
||||||
}
|
}
|
||||||
.panel.wide {
|
.panel.wide {
|
||||||
|
min-width: 310px;
|
||||||
width: 310px;
|
width: 310px;
|
||||||
flex: 0 0 310px;
|
flex: 0 0 310px;
|
||||||
}
|
}
|
||||||
|
|
|
@ -25,6 +25,7 @@
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.app-panel {
|
.app-panel {
|
||||||
|
min-width: 410px;
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
|
@ -24,13 +24,13 @@
|
||||||
<style>
|
<style>
|
||||||
.panel {
|
.panel {
|
||||||
display: flex;
|
display: flex;
|
||||||
min-width: 250px;
|
min-width: 270px;
|
||||||
width: 310px;
|
width: 310px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
overflow: scroll;
|
overflow: hidden;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
|
@ -94,6 +94,7 @@
|
||||||
{#if filteredScreens?.length}
|
{#if filteredScreens?.length}
|
||||||
{#each filteredScreens as screen (screen._id)}
|
{#each filteredScreens as screen (screen._id)}
|
||||||
<NavItem
|
<NavItem
|
||||||
|
scrollable
|
||||||
icon={screen.routing.homeScreen ? "Home" : null}
|
icon={screen.routing.homeScreen ? "Home" : null}
|
||||||
indentLevel={0}
|
indentLevel={0}
|
||||||
selected={$store.selectedScreenId === screen._id}
|
selected={$store.selectedScreenId === screen._id}
|
||||||
|
@ -168,7 +169,7 @@
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
border: none;
|
border: none;
|
||||||
font-size: var(--spectrum-alias-font-size-default);
|
font-size: var(--spectrum-alias-font-size-default);
|
||||||
width: 260px;
|
flex: 1;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
|
@ -25,10 +25,16 @@ const getResizeActions = (cssProperty, mouseMoveEventProperty, elementProperty,
|
||||||
element.style[cssProperty] = `${startProperty + change}px`
|
element.style[cssProperty] = `${startProperty + change}px`
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleMouseUp = () => {
|
const handleMouseUp = (e) => {
|
||||||
|
e.preventDefault(); // Prevent highlighting while dragging
|
||||||
window.removeEventListener("mousemove", handleMouseMove);
|
window.removeEventListener("mousemove", handleMouseMove);
|
||||||
window.removeEventListener("mouseup", handleMouseUp);
|
window.removeEventListener("mouseup", handleMouseUp);
|
||||||
|
|
||||||
element.style.removeProperty('transition'); // remove temporary transition override
|
element.style.removeProperty('transition'); // remove temporary transition override
|
||||||
|
for (let item of document.getElementsByTagName("iframe")) {
|
||||||
|
item.style.removeProperty("pointer-events");
|
||||||
|
}
|
||||||
|
|
||||||
setValue(element[elementProperty]);
|
setValue(element[elementProperty]);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -48,6 +54,13 @@ const getResizeActions = (cssProperty, mouseMoveEventProperty, elementProperty,
|
||||||
}
|
}
|
||||||
|
|
||||||
element.style.transition = `${cssProperty} 0ms`; // temporarily override any height transitions
|
element.style.transition = `${cssProperty} 0ms`; // temporarily override any height transitions
|
||||||
|
|
||||||
|
// iframes swallow mouseup events if your cursor ends up over it during a drag, so make them
|
||||||
|
// temporarily non-interactive
|
||||||
|
for (let item of document.getElementsByTagName("iframe")) {
|
||||||
|
item.style.pointerEvents = "none";
|
||||||
|
}
|
||||||
|
|
||||||
startProperty = element[elementProperty];
|
startProperty = element[elementProperty];
|
||||||
startPosition = e[mouseMoveEventProperty];
|
startPosition = e[mouseMoveEventProperty];
|
||||||
|
|
||||||
|
|
|
@ -40,6 +40,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
|
width: 100vw;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
|
|
Loading…
Reference in a new issue