ds-one 0.2.5-alpha.3 → 0.2.5-alpha.5
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/DS1/0-face/device.ts +10 -6
- package/DS1/0-face/i18n.ts +3 -1
- package/DS1/1-root/one.css +48 -46
- package/DS1/2-core/ds-cycle.ts +14 -1
- package/DS1/2-core/ds-icon.ts +4 -4
- package/DS1/2-core/ds-text.ts +10 -4
- package/DS1/2-core/ds-tooltip.ts +3 -3
- package/DS1/3-unit/ds-portfolio-singlenav.ts +3 -4
- package/DS1/3-unit/ds-row.ts +4 -5
- package/DS1/4-page/ds-grid.ts +9 -59
- package/DS1/4-page/ds-layout.ts +122 -17
- package/dist/0-face/device.d.ts.map +1 -1
- package/dist/0-face/device.js +7 -3
- package/dist/0-face/i18n.d.ts.map +1 -1
- package/dist/0-face/i18n.js +1 -1
- package/dist/2-core/ds-cycle.d.ts +1 -0
- package/dist/2-core/ds-cycle.d.ts.map +1 -1
- package/dist/2-core/ds-cycle.js +14 -1
- package/dist/2-core/ds-icon.js +4 -4
- package/dist/2-core/ds-text.d.ts.map +1 -1
- package/dist/2-core/ds-text.js +10 -4
- package/dist/2-core/ds-tooltip.js +3 -3
- package/dist/3-unit/ds-portfolio-singlenav.js +3 -3
- package/dist/3-unit/ds-row.js +4 -4
- package/dist/4-page/ds-grid.d.ts +0 -7
- package/dist/4-page/ds-grid.d.ts.map +1 -1
- package/dist/4-page/ds-grid.js +9 -54
- package/dist/4-page/ds-layout.d.ts +1 -1
- package/dist/4-page/ds-layout.d.ts.map +1 -1
- package/dist/4-page/ds-layout.js +125 -16
- package/dist/ds-one.bundle.js +232 -147
- package/dist/ds-one.bundle.js.map +4 -4
- package/dist/ds-one.bundle.min.js +171 -63
- package/dist/ds-one.bundle.min.js.map +4 -4
- package/package.json +2 -2
package/dist/4-page/ds-layout.js
CHANGED
|
@@ -2,29 +2,73 @@
|
|
|
2
2
|
// Simple grid layout component with debug mode
|
|
3
3
|
import { LitElement, html, css } from "lit";
|
|
4
4
|
export class Layout extends LitElement {
|
|
5
|
+
constructor() {
|
|
6
|
+
super(...arguments);
|
|
7
|
+
this.mode = "portfolio";
|
|
8
|
+
}
|
|
5
9
|
render() {
|
|
6
10
|
const isDebug = this.debug || this.mode === "debug";
|
|
11
|
+
const isPortfolio = this.mode === "portfolio";
|
|
7
12
|
const isCompany = this.mode === "company";
|
|
13
|
+
const isApp = this.mode === "app";
|
|
8
14
|
return html `
|
|
9
15
|
<slot></slot>
|
|
10
16
|
${isDebug
|
|
11
17
|
? html `
|
|
12
18
|
<div class="debug-overlay">
|
|
13
|
-
${
|
|
19
|
+
${isApp
|
|
14
20
|
? html `
|
|
15
|
-
<div class="debug-area debug-
|
|
16
|
-
|
|
17
|
-
|
|
21
|
+
<div class="debug-area debug-banner">
|
|
22
|
+
<ds-text key="banner">banner</ds-text>
|
|
23
|
+
</div>
|
|
24
|
+
<div class="debug-area debug-header">
|
|
25
|
+
<ds-text key="header">header</ds-text>
|
|
26
|
+
</div>
|
|
27
|
+
|
|
28
|
+
<div class="debug-area debug-main">
|
|
29
|
+
<ds-text key="main">main</ds-text>
|
|
30
|
+
</div>
|
|
31
|
+
<div class="debug-area debug-footer-app">
|
|
32
|
+
<ds-text key="footer">footer</ds-text>
|
|
33
|
+
</div>
|
|
18
34
|
`
|
|
19
|
-
:
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
35
|
+
: isCompany
|
|
36
|
+
? html `
|
|
37
|
+
<div class="debug-area debug-header">
|
|
38
|
+
<ds-text key="header">header</ds-text>
|
|
39
|
+
</div>
|
|
40
|
+
<div class="debug-area debug-content">
|
|
41
|
+
<ds-text key="content">content</ds-text>
|
|
42
|
+
</div>
|
|
43
|
+
<div class="debug-area debug-footer">
|
|
44
|
+
<ds-text key="footer">footer</ds-text>
|
|
45
|
+
</div>
|
|
46
|
+
`
|
|
47
|
+
: isPortfolio
|
|
48
|
+
? html `
|
|
49
|
+
<div class="debug-area debug-square">
|
|
50
|
+
<ds-text key="square">square</ds-text>
|
|
51
|
+
</div>
|
|
52
|
+
<div class="debug-area debug-title">
|
|
53
|
+
<ds-text key="title">title</ds-text>
|
|
54
|
+
</div>
|
|
55
|
+
<div class="debug-area debug-header">
|
|
56
|
+
<ds-text key="header">header</ds-text>
|
|
57
|
+
</div>
|
|
58
|
+
<div class="debug-area debug-projects">
|
|
59
|
+
<ds-text key="projects">projects</ds-text>
|
|
60
|
+
</div>
|
|
61
|
+
<div class="debug-area debug-bio">
|
|
62
|
+
<ds-text key="bio">bio</ds-text>
|
|
63
|
+
</div>
|
|
64
|
+
<div class="debug-area debug-nav">
|
|
65
|
+
<ds-text key="nav">nav</ds-text>
|
|
66
|
+
</div>
|
|
67
|
+
<div class="debug-area debug-footer">
|
|
68
|
+
<ds-text key="footer">footer</ds-text>
|
|
69
|
+
</div>
|
|
70
|
+
`
|
|
71
|
+
: ""}
|
|
28
72
|
</div>
|
|
29
73
|
`
|
|
30
74
|
: ""}
|
|
@@ -39,6 +83,11 @@ Layout.properties = {
|
|
|
39
83
|
Layout.styles = css `
|
|
40
84
|
:host {
|
|
41
85
|
display: grid;
|
|
86
|
+
position: relative;
|
|
87
|
+
width: 100%;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
:host([mode="portfolio"]) {
|
|
42
91
|
grid-template-columns: 120px 480px 40px;
|
|
43
92
|
grid-template-rows: 120px 120px 60px 180px 60px 120px 60px 20px 120px 120px;
|
|
44
93
|
grid-template-areas:
|
|
@@ -55,8 +104,6 @@ Layout.styles = css `
|
|
|
55
104
|
". . .";
|
|
56
105
|
min-height: 600px;
|
|
57
106
|
background-color: rgba(165, 165, 165, 0.03);
|
|
58
|
-
position: relative;
|
|
59
|
-
width: 100%;
|
|
60
107
|
max-width: 640px;
|
|
61
108
|
margin: 0 auto;
|
|
62
109
|
}
|
|
@@ -90,6 +137,29 @@ Layout.styles = css `
|
|
|
90
137
|
justify-self: end;
|
|
91
138
|
}
|
|
92
139
|
|
|
140
|
+
/* App mode - Base */
|
|
141
|
+
:host([mode="app"]) {
|
|
142
|
+
grid-template-columns: 1fr;
|
|
143
|
+
grid-template-rows: calc(var(--1) * var(--sf)) 20px 1fr auto;
|
|
144
|
+
grid-template-areas:
|
|
145
|
+
"banner"
|
|
146
|
+
"main"
|
|
147
|
+
"footer";
|
|
148
|
+
min-height: 100vh;
|
|
149
|
+
background-color: transparent;
|
|
150
|
+
width: 100%;
|
|
151
|
+
margin: 0 auto;
|
|
152
|
+
gap: 0;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
/* App mode - with scaling factor */
|
|
156
|
+
:host([mode="app"]) {
|
|
157
|
+
max-width: calc(400px * var(--sf, 1));
|
|
158
|
+
padding: calc(60px * var(--sf, 1)) calc(28px * var(--sf, 1))
|
|
159
|
+
calc(9.751px * var(--sf, 1));
|
|
160
|
+
gap: calc(28px * var(--sf, 1));
|
|
161
|
+
}
|
|
162
|
+
|
|
93
163
|
.debug-overlay {
|
|
94
164
|
position: absolute;
|
|
95
165
|
margin-left: -1px;
|
|
@@ -102,6 +172,9 @@ Layout.styles = css `
|
|
|
102
172
|
display: grid;
|
|
103
173
|
font-size: 18px;
|
|
104
174
|
font-weight: bold;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
:host([mode="portfolio"]) .debug-overlay {
|
|
105
178
|
grid-template-columns: 120px 480px;
|
|
106
179
|
grid-template-rows: 120px 120px 60px 180px 60px 120px 60px 20px 120px 120px;
|
|
107
180
|
grid-template-areas:
|
|
@@ -173,12 +246,48 @@ Layout.styles = css `
|
|
|
173
246
|
|
|
174
247
|
.debug-footer {
|
|
175
248
|
grid-area: footer;
|
|
176
|
-
border-color:
|
|
249
|
+
border-color: rgb(24, 147, 73);
|
|
250
|
+
background-color: rgba(127, 123, 11, 0.1);
|
|
177
251
|
}
|
|
178
252
|
|
|
179
253
|
.debug-content {
|
|
180
254
|
grid-area: content;
|
|
181
255
|
border-color: rgba(71, 231, 71, 0.63);
|
|
182
256
|
}
|
|
257
|
+
|
|
258
|
+
:host([mode="app"]) .debug-overlay {
|
|
259
|
+
grid-template-columns: 1fr;
|
|
260
|
+
grid-template-rows:
|
|
261
|
+
calc(var(--1) * var(--sf))
|
|
262
|
+
calc(var(--2) * var(--sf))
|
|
263
|
+
calc(var(--4) * var(--sf))
|
|
264
|
+
calc(var(--1) * var(--sf));
|
|
265
|
+
grid-template-areas:
|
|
266
|
+
"banner"
|
|
267
|
+
"header"
|
|
268
|
+
"main"
|
|
269
|
+
"footer";
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
.debug-banner {
|
|
273
|
+
grid-area: banner;
|
|
274
|
+
border-color: #daed09;
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
.debug-header {
|
|
278
|
+
grid-area: header;
|
|
279
|
+
border-color: #0000ff;
|
|
280
|
+
background-color: rgba(127, 123, 11, 0.5);
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
.debug-main {
|
|
284
|
+
grid-area: main;
|
|
285
|
+
border-color: #0000ff;
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
.debug-footer-app {
|
|
289
|
+
grid-area: footer;
|
|
290
|
+
border-color: #ffa500;
|
|
291
|
+
}
|
|
183
292
|
`;
|
|
184
293
|
customElements.define("ds-layout", Layout);
|