@pageboard/html 0.10.17 → 0.10.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/ui/menu.css +18 -12
- package/ui/menu.js +4 -4
package/package.json
CHANGED
package/ui/menu.css
CHANGED
|
@@ -46,16 +46,18 @@
|
|
|
46
46
|
flex-direction: column;
|
|
47
47
|
}
|
|
48
48
|
.right.burger .popup.item > .placer {
|
|
49
|
-
left:
|
|
49
|
+
left: 0;
|
|
50
50
|
right:0;
|
|
51
51
|
}
|
|
52
52
|
.right.popup.item > .placer > div {
|
|
53
53
|
left:auto;
|
|
54
54
|
right:0;
|
|
55
55
|
}
|
|
56
|
+
.fixed.popup.item {
|
|
57
|
+
position:static !important;
|
|
58
|
+
}
|
|
56
59
|
.fixed.popup.item > .placer > div {
|
|
57
60
|
max-width: 100vw;
|
|
58
|
-
max-height: 100vh;
|
|
59
61
|
}
|
|
60
62
|
.center.popup.item > .placer > div {
|
|
61
63
|
transform: translateX(-50%);
|
|
@@ -82,7 +84,6 @@
|
|
|
82
84
|
|
|
83
85
|
/* menu_group */
|
|
84
86
|
element-menu {
|
|
85
|
-
position: relative;
|
|
86
87
|
flex-shrink: 1;
|
|
87
88
|
}
|
|
88
89
|
.ui.menu:not(.vertical) > element-menu {
|
|
@@ -99,12 +100,12 @@ element-menu > [block-content="items"] {
|
|
|
99
100
|
display:flex;
|
|
100
101
|
}
|
|
101
102
|
element-menu.burger > [block-content="items"] {
|
|
102
|
-
position: fixed;
|
|
103
103
|
left:0;
|
|
104
104
|
}
|
|
105
105
|
element-menu.burger.right > [block-content="items"] {
|
|
106
|
-
|
|
107
|
-
|
|
106
|
+
position: absolute;
|
|
107
|
+
pointer-events: none;
|
|
108
|
+
height: 0;
|
|
108
109
|
}
|
|
109
110
|
|
|
110
111
|
element-menu:not(.burger) > .item {
|
|
@@ -117,6 +118,9 @@ element-menu.burger .placer .title {
|
|
|
117
118
|
element-menu.burger > .item .popup.item {
|
|
118
119
|
display:block;
|
|
119
120
|
}
|
|
121
|
+
.ui.menu [block-type="menu_item_popup"] {
|
|
122
|
+
position:initial !important;
|
|
123
|
+
}
|
|
120
124
|
element-menu.burger .placer .popup.active .title {
|
|
121
125
|
margin-bottom:0.5em;
|
|
122
126
|
}
|
|
@@ -126,6 +130,10 @@ element-menu.burger > [block-content="items"] > * {
|
|
|
126
130
|
element-menu.burger .popup.item.active > .placer > div {
|
|
127
131
|
display:block;
|
|
128
132
|
}
|
|
133
|
+
element-menu.burger .popup.item > .placer > div {
|
|
134
|
+
left: 0 !important;
|
|
135
|
+
right: 0 !important;
|
|
136
|
+
}
|
|
129
137
|
element-menu.burger > .item .dropdown.item:hover > .menu,
|
|
130
138
|
element-menu.burger > .item .popup.item:hover > .placer > div {
|
|
131
139
|
display:none !important;
|
|
@@ -138,8 +146,8 @@ element-menu.burger > .item .dropdown.item.active > .menu {
|
|
|
138
146
|
}
|
|
139
147
|
|
|
140
148
|
element-menu.burger > .item .popup.item.active > .placer > div {
|
|
141
|
-
display:block !important;
|
|
142
|
-
position:relative;
|
|
149
|
+
display: block !important;
|
|
150
|
+
position: relative;
|
|
143
151
|
}
|
|
144
152
|
element-menu.burger > .item:hover > .popup.item {
|
|
145
153
|
display:block;
|
|
@@ -150,7 +158,7 @@ element-menu.burger > .item .placer .menu .ui.dropdown {
|
|
|
150
158
|
}
|
|
151
159
|
|
|
152
160
|
element-menu.burger > .item .popup.item > .placer {
|
|
153
|
-
position:relative;
|
|
161
|
+
position: relative;
|
|
154
162
|
}
|
|
155
163
|
element-menu.burger > .item .popup.item > .placer > div > .grid {
|
|
156
164
|
border:0 !important;
|
|
@@ -162,9 +170,7 @@ element-menu.burger > .popup > .icon {
|
|
|
162
170
|
font-weight: bold;
|
|
163
171
|
font-family: sans-serif;
|
|
164
172
|
}
|
|
165
|
-
|
|
166
|
-
right:auto; /* disables the right:0 given by .popup > .placer > div */
|
|
167
|
-
}
|
|
173
|
+
|
|
168
174
|
|
|
169
175
|
@media screen and (max-width: 768px) {
|
|
170
176
|
.ui.menu [block-type="menu_item_text"] {
|
package/ui/menu.js
CHANGED
|
@@ -33,7 +33,7 @@ class HTMLElementMenu extends VirtualHTMLElement {
|
|
|
33
33
|
const styles = window.getComputedStyle(this);
|
|
34
34
|
const parentWidth = parseFloat(styles.marginLeft) + parseFloat(styles.marginRight) + this.offsetWidth;
|
|
35
35
|
const menuWidth = menu.offsetWidth;
|
|
36
|
-
this.classList.toggle('burger',
|
|
36
|
+
this.classList.toggle('burger', menuWidth >= parentWidth);
|
|
37
37
|
});
|
|
38
38
|
});
|
|
39
39
|
this.observer.observe(this.parentNode);
|
|
@@ -55,9 +55,9 @@ class HTMLElementMenu extends VirtualHTMLElement {
|
|
|
55
55
|
tosser.classList.add('inactive');
|
|
56
56
|
tosser.blur();
|
|
57
57
|
} else {
|
|
58
|
-
const
|
|
59
|
-
const
|
|
60
|
-
|
|
58
|
+
const placer = tosser.lastElementChild;
|
|
59
|
+
const padding = placer.offsetTop;
|
|
60
|
+
placer.lastElementChild.style.maxHeight = `calc(100vh - ${padding}px)`;
|
|
61
61
|
}
|
|
62
62
|
} else if (item) {
|
|
63
63
|
this.active = item != this.active ? item : null;
|