@pocketping/widget 1.5.0 → 1.5.1
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/dist/index.cjs +10 -1
- package/dist/index.js +10 -1
- package/dist/pocketping.min.global.js +10 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -151,6 +151,7 @@ function styles(primaryColor, theme) {
|
|
|
151
151
|
flex-direction: column;
|
|
152
152
|
overflow: hidden;
|
|
153
153
|
z-index: 9998;
|
|
154
|
+
transition: max-height 0.2s ease, bottom 0.2s ease;
|
|
154
155
|
}
|
|
155
156
|
|
|
156
157
|
.pp-window.pp-bottom-right {
|
|
@@ -167,13 +168,21 @@ function styles(primaryColor, theme) {
|
|
|
167
168
|
.pp-window {
|
|
168
169
|
width: calc(100vw - 20px);
|
|
169
170
|
height: auto;
|
|
171
|
+
min-height: 300px;
|
|
170
172
|
max-height: calc(100vh - 100px);
|
|
171
|
-
max-height: calc(
|
|
173
|
+
max-height: calc(100svh - 100px); /* svh = small viewport, excludes keyboard */
|
|
172
174
|
bottom: 80px;
|
|
173
175
|
right: 10px;
|
|
174
176
|
left: 10px;
|
|
175
177
|
border-radius: 12px;
|
|
176
178
|
}
|
|
179
|
+
|
|
180
|
+
/* When keyboard is likely open (input focused), reduce height */
|
|
181
|
+
.pp-window:has(.pp-input:focus) {
|
|
182
|
+
max-height: calc(50vh - 20px);
|
|
183
|
+
max-height: calc(50svh - 20px);
|
|
184
|
+
bottom: 10px;
|
|
185
|
+
}
|
|
177
186
|
}
|
|
178
187
|
|
|
179
188
|
.pp-header {
|
package/dist/index.js
CHANGED
|
@@ -110,6 +110,7 @@ function styles(primaryColor, theme) {
|
|
|
110
110
|
flex-direction: column;
|
|
111
111
|
overflow: hidden;
|
|
112
112
|
z-index: 9998;
|
|
113
|
+
transition: max-height 0.2s ease, bottom 0.2s ease;
|
|
113
114
|
}
|
|
114
115
|
|
|
115
116
|
.pp-window.pp-bottom-right {
|
|
@@ -126,13 +127,21 @@ function styles(primaryColor, theme) {
|
|
|
126
127
|
.pp-window {
|
|
127
128
|
width: calc(100vw - 20px);
|
|
128
129
|
height: auto;
|
|
130
|
+
min-height: 300px;
|
|
129
131
|
max-height: calc(100vh - 100px);
|
|
130
|
-
max-height: calc(
|
|
132
|
+
max-height: calc(100svh - 100px); /* svh = small viewport, excludes keyboard */
|
|
131
133
|
bottom: 80px;
|
|
132
134
|
right: 10px;
|
|
133
135
|
left: 10px;
|
|
134
136
|
border-radius: 12px;
|
|
135
137
|
}
|
|
138
|
+
|
|
139
|
+
/* When keyboard is likely open (input focused), reduce height */
|
|
140
|
+
.pp-window:has(.pp-input:focus) {
|
|
141
|
+
max-height: calc(50vh - 20px);
|
|
142
|
+
max-height: calc(50svh - 20px);
|
|
143
|
+
bottom: 10px;
|
|
144
|
+
}
|
|
136
145
|
}
|
|
137
146
|
|
|
138
147
|
.pp-header {
|
|
@@ -92,6 +92,7 @@
|
|
|
92
92
|
flex-direction: column;
|
|
93
93
|
overflow: hidden;
|
|
94
94
|
z-index: 9998;
|
|
95
|
+
transition: max-height 0.2s ease, bottom 0.2s ease;
|
|
95
96
|
}
|
|
96
97
|
|
|
97
98
|
.pp-window.pp-bottom-right {
|
|
@@ -108,13 +109,21 @@
|
|
|
108
109
|
.pp-window {
|
|
109
110
|
width: calc(100vw - 20px);
|
|
110
111
|
height: auto;
|
|
112
|
+
min-height: 300px;
|
|
111
113
|
max-height: calc(100vh - 100px);
|
|
112
|
-
max-height: calc(
|
|
114
|
+
max-height: calc(100svh - 100px); /* svh = small viewport, excludes keyboard */
|
|
113
115
|
bottom: 80px;
|
|
114
116
|
right: 10px;
|
|
115
117
|
left: 10px;
|
|
116
118
|
border-radius: 12px;
|
|
117
119
|
}
|
|
120
|
+
|
|
121
|
+
/* When keyboard is likely open (input focused), reduce height */
|
|
122
|
+
.pp-window:has(.pp-input:focus) {
|
|
123
|
+
max-height: calc(50vh - 20px);
|
|
124
|
+
max-height: calc(50svh - 20px);
|
|
125
|
+
bottom: 10px;
|
|
126
|
+
}
|
|
118
127
|
}
|
|
119
128
|
|
|
120
129
|
.pp-header {
|