perfect-gui 3.5.3 → 3.5.4

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/README.md +1 -1
  2. package/package.json +1 -1
  3. package/test/src/index.html +17 -7
  4. package/test/src/index.js +1 -1
  5. package/test/src/styles/{main.scss → styles.css} +73 -14
package/README.md CHANGED
@@ -9,7 +9,7 @@ Features:
9
9
 
10
10
  <img src="https://raw.githubusercontent.com/thibka/thibka.github.io/master/perfect-gui/_data/capture.png" width="580"/>
11
11
 
12
- ## Demo
12
+ ## API
13
13
  https://thibka.github.io/perfect-gui/public/
14
14
 
15
15
  ## Install
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "perfect-gui",
3
- "version": "3.5.3",
3
+ "version": "3.5.4",
4
4
  "description": "Nice and simple GUI for JavaScript.",
5
5
  "main": "src/index.js",
6
6
  "directories": {
package/test/src/index.html CHANGED
@@ -9,10 +9,19 @@
9
9
  </head>
10
10
 
11
11
  <body>
12
- <div class="wrapper">
12
+ <div class="wrapper">
13
+ <div class="sidebar">
14
+ <a class="sidebar__item" href="#basics">Basics</a>
15
+ <a class="sidebar__item" href="#vectors">Vectors</a>
16
+ <a class="sidebar__item" href="#positioning">Positioning</a>
17
+ <a class="sidebar__item" href="#folders">Folders</a>
18
+ <a class="sidebar__item" href="#other-options">Other options</a>
19
+ <a class="sidebar__item" href="#killing-creating">Killing and creating dynamically</a>
20
+ </div>
21
+ <div class="main">
13
22
  <h1>Perfect GUI API</h1>
14
23
 
15
- <h2>Basics</h2>
24
+ <h2 id="basics">Basics</h2>
16
25
 
17
26
  <div id="container-1" class="container">
18
27
  <div class="element"></div>
@@ -73,7 +82,7 @@
73
82
 
74
83
  </div>
75
84
 
76
- <h2>Vectors</h2>
85
+ <h2 id="vectors">Vectors</h2>
77
86
 
78
87
  <div id="container-vectors" class="container">
79
88
  <div class="element"></div>
@@ -105,7 +114,7 @@
105
114
  </pre></div>
106
115
  </div>
107
116
 
108
- <h2>Positioning</h2>
117
+ <h2 id="positioning">Positioning</h2>
109
118
 
110
119
  <p>GUI instances can be positioned in any corner of the screen / container.</p>
111
120
  <p>When multiple instances share the same position (like GUI 1 and GUI 2 in the example below), they are stacked next to each other.</p>
@@ -149,7 +158,7 @@
149
158
  </div>
150
159
 
151
160
 
152
- <h2>Folders</h2>
161
+ <h2 id="folders">Folders</h2>
153
162
 
154
163
  <p>Folders can be closed by default by setting the <i>closed</i> option to <span class="code-inline">true</span>.</p>
155
164
  <p>Each folder can have a different color with the <span class="code-inline">color</span> option.</p>
@@ -184,7 +193,7 @@
184
193
 
185
194
  </div>
186
195
 
187
- <h2>Other options</h2>
196
+ <h2 id="other-options">Other options</h2>
188
197
 
189
198
  <p>GUI panels can be dragged around with the <span class="code-inline">draggable</span> option.</p>
190
199
  <p>They can also have a custom width, by using the <span class="code-inline">width</span> option.</p>
@@ -243,7 +252,7 @@
243
252
 
244
253
  </div>
245
254
 
246
- <h2>Killing and creating dynamically</h2>
255
+ <h2 id="killing-creating">Killing and creating dynamically</h2>
247
256
 
248
257
  <p>There is no .kill() method at the moment, so instances have to be killed "manually".</p>
249
258
 
@@ -282,6 +291,7 @@
282
291
  </pre></div>
283
292
  </div>
284
293
  </div>
294
+ </div>
285
295
  </body>
286
296
 
287
297
  </html>
package/test/src/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import './styles/main.scss';
1
+ import './styles/styles.css';
2
2
  //import demo from './js/demo';
3
3
  import basics from './js/basics';
4
4
  import vectors from './js/vectors';
package/test/src/styles/{main.scss → styles.css} RENAMED
@@ -1,30 +1,85 @@
1
- @import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
1
+ @import url('https://api.fontshare.com/v2/css?f[]=general-sans@200,300,400,500,600,700&display=swap');
2
+
3
+ :root {
4
+ --black: rgb(17, 17, 17);
5
+ --white: rgb(246, 246, 232);
6
+ --grey: #ffffff33;
7
+ --sans: 'General Sans', serif;
8
+ }
9
+
10
+ * {
11
+ -webkit-font-smoothing: antialiased;
12
+ -moz-osx-font-smoothing: grayscale;
13
+ }
14
+
2
15
  html, body {
3
16
  height: 100%;
17
+ overscroll-behavior: none;
18
+ }
19
+
20
+ html {
21
+ font-size: 10px;
4
22
  }
5
23
 
6
24
  body {
7
25
  margin: 0;
8
- background-color: white;
9
- color: black;
26
+ background-color: var(--black);
27
+ color: var(--white);
10
28
  font-family: Arial, sans-serif;
11
29
  }
12
30
 
13
31
  .wrapper {
32
+ display: flex;
33
+ flex-direction: row;
34
+ font-size: 1.2rem;
35
+ }
36
+
37
+ .sidebar {
38
+ position: fixed;
39
+ top: 0;
40
+ left: 0;
41
+ width: 200px;
42
+ border-right: 1px solid var(--grey);
43
+ height: 100%;
44
+ background-color: #1b1b1b;
45
+ }
46
+
47
+ .sidebar__item {
48
+ padding: 20px 40px;
49
+ text-transform: uppercase;
50
+ opacity: .8;
51
+ display: block;
52
+ }
53
+
54
+ .sidebar__item:hover {
55
+ opacity: 1;
56
+ }
57
+
58
+ .sidebar__item:first-of-type {
59
+ margin-top: 50px;
60
+ }
61
+
62
+ .main {
14
63
  width: 800px;
15
64
  margin: 0 auto;
65
+ padding-left: 200px;
16
66
  padding-bottom: 100px;
17
67
  }
18
68
 
19
- @media (max-width: 900px) {
20
- .wrapper {
69
+ @media (max-width: 1024px) {
70
+ .sidebar {
71
+ width: 160px;
72
+ }
73
+
74
+ .main {
21
75
  width: 700px;
22
- padding: 0 20px 100px 20px;
76
+ padding: 0 20px 100px 180px;
23
77
  }
24
78
  }
25
79
 
26
80
  h1, h2 {
27
- font-family: 'Montserrat', sans-serif;
81
+ font-family: var(--sans), sans-serif;
82
+ font-weight: normal;
28
83
  }
29
84
 
30
85
  h1 {
@@ -39,10 +94,16 @@ p {
39
94
  line-height: 1.4;
40
95
  }
41
96
 
97
+ a {
98
+ color: var(--white);
99
+ text-decoration: none;
100
+ }
101
+
42
102
  .code-button {
43
103
  text-decoration: underline;
44
104
  cursor: pointer;
45
105
  margin-bottom: 10px;
106
+ font-size: 1.2rem;
46
107
  }
47
108
 
48
109
  .code-block--hidden {
@@ -51,7 +112,7 @@ p {
51
112
 
52
113
  .code-inline {
53
114
  font-family: monospace;
54
- background-color: black;
115
+ background-color: #333333;
55
116
  color: #a6e22e;
56
117
  padding: 3px 6px;
57
118
  border-radius: 3px;
@@ -64,11 +125,11 @@ div:has(pre) {
64
125
  pre {
65
126
  padding: 20px;
66
127
  border-radius: 5px;
67
- font-size: 1.2em;
128
+ font-size: 1.2rem;
68
129
  }
69
130
 
70
131
  .container {
71
- background-color: #111;
132
+ background-color: #1b1b1b;
72
133
  transition: .3s all ease;
73
134
  background-position: center;
74
135
  background-size: cover;
@@ -93,7 +154,6 @@ pre {
93
154
  background-size: cover;
94
155
  background-position: center;
95
156
  background-repeat: no-repeat;
96
- border: 1px solid black;
97
157
  transition: .1s transform ease, .3s border-radius ease;
98
158
  }
99
159
 
@@ -105,8 +165,7 @@ pre {
105
165
  position: absolute;
106
166
  bottom: 10px;
107
167
  left: 20px;
108
- text-shadow: 0 0 1px black, 0 0 1px black;
109
168
  font-family: arial;
110
- color: white;
111
- font-size: 10px;
169
+ color: var(--black);
170
+ font-size: 1rem;
112
171
  }