@metricinsights/pp-dev 0.0.2 → 0.0.3

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.
Files changed (5) hide show
  1. package/dist/client/client.css +65 -5
  2. package/dist/client/client.js +9 -0
  3. package/dist/client/client.js.map +1 -1
  4. package/dist/client/index.html +9 -4
  5. package/package.json +2 -1
package/dist/client/client.css CHANGED
@@ -1,18 +1,51 @@
1
1
  .pp-dev-info {
2
2
  position: fixed;
3
3
  z-index: 10000;
4
- min-width: 800px;
4
+ white-space: nowrap;
5
5
  width: fit-content;
6
- height: 30px;
7
- top: calc(100% - 30px);
6
+ height: 25px;
7
+ top: calc(100% - 25px);
8
8
  right: 0;
9
9
  text-align: center;
10
- padding: 5px 20px;
11
- background-color: #f0f0f0;
10
+ padding: 3px 8px 3px 0;
11
+ background-color: #ffffff;
12
12
  border-radius: 3px 0 0 0;
13
13
  color: #333;
14
14
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
15
+ box-sizing: border-box;
15
16
  display: flex;
17
+ transition: all 0.3s;
18
+ }
19
+ .pp-dev-info__wrap-btn {
20
+ box-sizing: content-box;
21
+ display: flex;
22
+ align-items: center;
23
+ max-width: 13px;
24
+ width: 100%;
25
+ margin-right: 10px;
26
+ padding-left: 10px;
27
+ cursor: pointer;
28
+ }
29
+ .pp-dev-info__wrap-btn:hover {
30
+ animation: arrowHover 0.8s linear infinite;
31
+ }
32
+ .pp-dev-info__wrap-btn-arrow {
33
+ width: 13px;
34
+ }
35
+ .pp-dev-info.closed {
36
+ transform: translateX(calc(100% - 27px));
37
+ height: 20px;
38
+ top: calc(100% - 20px);
39
+ }
40
+ .pp-dev-info.closed .pp-dev-info__wrap-btn:hover {
41
+ animation: arrowHover 1.2s linear infinite;
42
+ }
43
+ .pp-dev-info.closed .pp-dev-info__wrap-btn .pp-dev-info__wrap-btn-arrow {
44
+ transform: rotate(180deg);
45
+ max-width: 12px;
46
+ }
47
+ .pp-dev-info.closed .pp-dev-info__wrap-btn {
48
+ margin-left: -2px;
16
49
  }
17
50
  .pp-dev-info .sync-button {
18
51
  background-color: transparent;
@@ -26,6 +59,22 @@
26
59
  .pp-dev-info .sync-button.syncing svg {
27
60
  animation: rotation 2s linear infinite;
28
61
  }
62
+ .pp-dev-info .margin-5 {
63
+ margin-right: 5px;
64
+ }
65
+ .pp-dev-info .margin-10 {
66
+ margin-right: 10px;
67
+ }
68
+ .pp-dev-info .custom-font {
69
+ font-family: sans-serif;
70
+ font-size: 13px;
71
+ font-weight: 300;
72
+ vertical-align: middle;
73
+ line-height: 1.5;
74
+ }
75
+ .pp-dev-info .custom-font:not(.not-colored) a {
76
+ color: rgb(0, 123, 255);
77
+ }
29
78
  @keyframes rotation {
30
79
  0% {
31
80
  transform: rotate(0deg) matrix(1, 0, 0, -1, 0, 0);
@@ -33,4 +82,15 @@
33
82
  100% {
34
83
  transform: rotate(360deg) matrix(1, 0, 0, -1, 0, 0);
35
84
  }
85
+ }
86
+ @keyframes arrowHover {
87
+ 0% {
88
+ transform: translateX(2px);
89
+ }
90
+ 50% {
91
+ transform: translateX(-2px);
92
+ }
93
+ 100% {
94
+ transform: translateX(2px);
95
+ }
36
96
  }
package/dist/client/client.js CHANGED
@@ -4,6 +4,15 @@ if (import.meta.hot) {
4
4
  window.location.href = data.url;
5
5
  });
6
6
  const syncButton = document.getElementById('sync-template');
7
+ const clientWrapButton = document.querySelector('.pp-dev-info__wrap-btn svg');
8
+ const bottomInfoPanel = document.querySelector('.pp-dev-info');
9
+ if (clientWrapButton && bottomInfoPanel) {
10
+ clientWrapButton.addEventListener('click', (e) => {
11
+ e.preventDefault();
12
+ bottomInfoPanel.classList.toggle('closed');
13
+ clientWrapButton.classList.toggle('closed');
14
+ });
15
+ }
7
16
  if (syncButton) {
8
17
  hot.on('template:sync:response', (payload) => {
9
18
  syncButton.classList.remove('syncing');
package/dist/client/client.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"client.js","sources":["index.ts"],"sourcesContent":[null],"names":[],"mappings":"AAIA,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE;AACnB,IAAA,MAAM,EAAE,GAAG,EAAE,GAAG,MAAM,CAAC,IAAI,CAAC;IAE5B,GAAG,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC,IAAqB,KAAI;QAC3C,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC;AAClC,KAAC,CAAC,CAAC;IAEH,MAAM,UAAU,GAAG,QAAQ,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC;AAE5D,IAAA,IAAI,UAAU,EAAE;QACd,GAAG,CAAC,EAAE,CAAC,wBAAwB,EAAE,CAAC,OAAO,KAAI;AAC3C,YAAA,UAAU,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;AAEvC,YAAA,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;AACvB,SAAC,CAAC,CAAC;QAEH,UAAU,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,EAAE,KAAI;YAC1C,EAAE,CAAC,cAAc,EAAE,CAAC;AAEpB,YAAA,UAAU,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;AAEpC,YAAA,GAAG,CAAC,IAAI,CAAC,eAAe,EAAE,EAAE,CAAC,CAAC;AAChC,SAAC,CAAC,CAAC;AACJ,KAAA;AACF","x_google_ignoreList":[0]}
1
+ {"version":3,"file":"client.js","sources":["index.ts"],"sourcesContent":[null],"names":[],"mappings":"AAIA,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE;AACnB,IAAA,MAAM,EAAE,GAAG,EAAE,GAAG,MAAM,CAAC,IAAI,CAAC;IAE5B,GAAG,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC,IAAqB,KAAI;QAC3C,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC;AAClC,KAAC,CAAC,CAAC;IAEH,MAAM,UAAU,GAAG,QAAQ,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC;IAE5D,MAAM,gBAAgB,GAAG,QAAQ,CAAC,aAAa,CAAC,4BAA4B,CAAC,CAAC;IAC9E,MAAM,eAAe,GAAG,QAAQ,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;IAE/D,IAAI,gBAAgB,IAAI,eAAe,EAAE;QACvC,gBAAgB,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,CAAC,KAAI;YAC/C,CAAC,CAAC,cAAc,EAAE,CAAC;AAEnB,YAAA,eAAe,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;AAC3C,YAAA,gBAAgB,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;AAC9C,SAAC,CAAC,CAAC;AACJ,KAAA;AAED,IAAA,IAAI,UAAU,EAAE;QACd,GAAG,CAAC,EAAE,CAAC,wBAAwB,EAAE,CAAC,OAAO,KAAI;AAC3C,YAAA,UAAU,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;AAEvC,YAAA,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;AACvB,SAAC,CAAC,CAAC;QAEH,UAAU,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,EAAE,KAAI;YAC1C,EAAE,CAAC,cAAc,EAAE,CAAC;AAEpB,YAAA,UAAU,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;AAEpC,YAAA,GAAG,CAAC,IAAI,CAAC,eAAe,EAAE,EAAE,CAAC,CAAC;AAChC,SAAC,CAAC,CAAC;AACJ,KAAA;AACF","x_google_ignoreList":[0]}
package/dist/client/index.html CHANGED
@@ -1,21 +1,26 @@
1
1
  {%# This is EJS template. Parameters: openDelimiter: "{", closeDelimiter="}" %}
2
2
  <div class="pp-dev-info">
3
+
4
+ <div class="pp-dev-info__wrap-btn">
5
+ <svg class="pp-dev-info__wrap-btn-arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M218.101 38.101L198.302 57.9c-4.686 4.686-4.686 12.284 0 16.971L353.432 230H12c-6.627 0-12 5.373-12 12v28c0 6.627 5.373 12 12 12h341.432l-155.13 155.13c-4.686 4.686-4.686 12.284 0 16.971l19.799 19.799c4.686 4.686 12.284 4.686 16.971 0l209.414-209.414c4.686-4.686 4.686-12.284 0-16.971L235.071 38.101c-4.686-4.687-12.284-4.687-16.97 0z"/></svg>
6
+ </div>
7
+
3
8
  <span>
4
- <span
9
+ <span class="margin-5 custom-font not-colored"
5
10
  ><a href="https://www.npmjs.com/package/{%= PACKAGE_NAME %}/v/{%= VERSION %}" target="_blank">
6
11
  <b>{%= PACKAGE_NAME %}</b>: <b style="color: orange">{%= VERSION %}</b></a
7
12
  >;
8
13
  </span>
9
14
  {% if (backendBaseURL) { %}
10
- <span> Backend URL: <a href="!!{%= backendBaseURL %}" target="_blank">!!{%= backendBaseURL %}</a>; </span>
15
+ <span class="margin-5 custom-font"> Backend URL: <a href="!!{%= backendBaseURL %}" target="_blank">!!{%= backendBaseURL %}</a>; </span>
11
16
  {% } %}
12
- <span>
17
+ <span class="margin-5 custom-font">
13
18
  <span>Template mode: </span>
14
19
  {% if (templateLess || !backendBaseURL || Number.isNaN(+portalPageId)) { %}
15
20
  <b style="color: red">Disabled</b>; {% } else { %} <b style="color: green">Enabled</b>; {% } %}
16
21
  </span>
17
22
  {% if (backendBaseURL && !Number.isNaN(+portalPageId)) { %}
18
- <span
23
+ <span class="margin-5 custom-font"
19
24
  >Portal page ID:
20
25
  <a href="!!{%= backendBaseURL %}/admin/page/edit/id/{%= portalPageId %}" target="_blank">{%= portalPageId %}</a>;
21
26
  </span>
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@metricinsights/pp-dev",
3
3
  "type": "module",
4
- "version": "0.0.2",
4
+ "version": "0.0.3",
5
5
  "description": "Portal Page dev build tool",
6
6
  "bin": {
7
7
  "pp-dev": "bin/pp-dev.js"
@@ -52,6 +52,7 @@
52
52
  "@types/ejs": "^3.1.2",
53
53
  "@types/express": "^4.17.17",
54
54
  "@types/jsdom": "^21.1.1",
55
+ "prettier": "^2.8.8",
55
56
  "rimraf": "^5.0.1",
56
57
  "rollup": "^3.23.0",
57
58
  "rollup-plugin-scss": "^3.0.0",