tecitheme 0.8.2 → 0.9.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.
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
<header id="menu" class="relative">
|
|
35
35
|
<div
|
|
36
36
|
aria-hidden="true"
|
|
37
|
-
class="pointer-events-none absolute inset-0 z-
|
|
37
|
+
class="pointer-events-none absolute inset-0 z-50 shadow"
|
|
38
38
|
/>
|
|
39
39
|
<div
|
|
40
40
|
class="relative mx-auto flex max-w-7xl items-center justify-between px-2 py-5 sm:px-6 sm:py-4 md:justify-start md:space-x-6 lg:space-x-10 lg:px-8"
|
|
@@ -84,7 +84,7 @@
|
|
|
84
84
|
<!-- Flyout menu -->
|
|
85
85
|
{#if openMenu == "products"}
|
|
86
86
|
<div
|
|
87
|
-
class="absolute inset-x-0 top-full z-
|
|
87
|
+
class="absolute inset-x-0 top-full z-50 transform bg-white text-left shadow-lg"
|
|
88
88
|
use:clickOutside
|
|
89
89
|
on:outclick={() => (openMenu = "")}
|
|
90
90
|
in:slide={{ duration: 250, easing: cubicOut }}
|
|
@@ -350,7 +350,7 @@
|
|
|
350
350
|
|
|
351
351
|
{#if openMenu == "company"}
|
|
352
352
|
<div
|
|
353
|
-
class="absolute left-1/2 z-
|
|
353
|
+
class="absolute left-1/2 z-50 mt-3 w-screen max-w-md -translate-x-1/2 transform overflow-hidden px-2 shadow-lg ring-1 ring-black ring-opacity-5 sm:px-0"
|
|
354
354
|
use:clickOutside
|
|
355
355
|
on:outclick={() => (openMenu = "")}
|
|
356
356
|
in:slide={{ duration: 250, easing: cubicOut }}
|
|
@@ -0,0 +1,255 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
import { getColorStyles } from "../utils";
|
|
3
|
+
import { fade, slide } from "svelte/transition";
|
|
4
|
+
import { cubicIn, cubicOut } from "svelte/easing";
|
|
5
|
+
import Icon from "./Icon.svelte";
|
|
6
|
+
|
|
7
|
+
export let data = {};
|
|
8
|
+
let {logo, logo_mobile, logo_link_url, logo_alt_text, ctas, dropdowns, links} = data;
|
|
9
|
+
|
|
10
|
+
let id;
|
|
11
|
+
if (data.name) {
|
|
12
|
+
id = encodeURIComponent(data.name).toLowerCase()
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
let openDropdown = "";
|
|
16
|
+
export function clickOutside(node) {
|
|
17
|
+
const handleClick = (event) => {
|
|
18
|
+
if (
|
|
19
|
+
!node.contains(event.target) &&
|
|
20
|
+
event.target.innerText.toLowerCase() != node.parentElement.id
|
|
21
|
+
) {
|
|
22
|
+
node.dispatchEvent(new CustomEvent("outclick"));
|
|
23
|
+
}
|
|
24
|
+
};
|
|
25
|
+
document.addEventListener("click", handleClick, true);
|
|
26
|
+
return {
|
|
27
|
+
destroy() {
|
|
28
|
+
document.removeEventListener("click", handleClick, true);
|
|
29
|
+
},
|
|
30
|
+
};
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
function handleEscape({ key }) {
|
|
34
|
+
if (key === "Escape") {
|
|
35
|
+
openDropdown = "";
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
let mobileOpen = false;
|
|
40
|
+
</script>
|
|
41
|
+
|
|
42
|
+
<svelte:window on:keyup={handleEscape} />
|
|
43
|
+
|
|
44
|
+
<header {id} class="sticky top-0 w-full z-40 bg-white">
|
|
45
|
+
<div
|
|
46
|
+
aria-hidden="true"
|
|
47
|
+
class="pointer-events-none absolute inset-0 z-30 shadow"
|
|
48
|
+
/>
|
|
49
|
+
<div class="relative">
|
|
50
|
+
|
|
51
|
+
<!-- Rail -->
|
|
52
|
+
<div
|
|
53
|
+
class="relative mx-auto w-full flex max-w-7xl items-center justify-between px-2 py-5 sm:px-6 sm:py-4 md:justify-start md:space-x-6 lg:space-x-10 lg:px-8"
|
|
54
|
+
>
|
|
55
|
+
|
|
56
|
+
<!-- Left Icons -->
|
|
57
|
+
<div class="flex-shrink-0">
|
|
58
|
+
<!-- Mobile Nav Icon -->
|
|
59
|
+
<button class="flex-shrink-0 md:hidden flex flex-row items-center"
|
|
60
|
+
|
|
61
|
+
on:click={() => mobileOpen = !mobileOpen}
|
|
62
|
+
>
|
|
63
|
+
<span class="sr-only">{logo_alt_text}</span>
|
|
64
|
+
<Icon classes="h-10 w-auto" icon={logo_mobile} />
|
|
65
|
+
<svg
|
|
66
|
+
class="ml-2 h-10 w-10 group-hover:text-gray-900 {mobileOpen == true
|
|
67
|
+
? 'rotate-180 text-gray-900'
|
|
68
|
+
: 'text-gray-400'}"
|
|
69
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
70
|
+
viewBox="0 0 20 20"
|
|
71
|
+
fill="currentColor"
|
|
72
|
+
aria-hidden="true"
|
|
73
|
+
>
|
|
74
|
+
<path
|
|
75
|
+
fill-rule="evenodd"
|
|
76
|
+
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
|
77
|
+
clip-rule="evenodd"
|
|
78
|
+
/>
|
|
79
|
+
</svg>
|
|
80
|
+
</button>
|
|
81
|
+
|
|
82
|
+
<!-- Desktop Nav Icon-->
|
|
83
|
+
<div class="hidden sm:flex sm:flex-shrink-0">
|
|
84
|
+
<a href={logo_link_url} class="flex">
|
|
85
|
+
<span class="sr-only">{logo_alt_text}</span>
|
|
86
|
+
<Icon classes="h-10 w-auto" icon={logo} />
|
|
87
|
+
</a>
|
|
88
|
+
</div>
|
|
89
|
+
</div>
|
|
90
|
+
|
|
91
|
+
<!-- Interactive Elements -->
|
|
92
|
+
<nav class="hidden md:flex md:space-x-4 lg:space-x-10 md:items-center w-full">
|
|
93
|
+
|
|
94
|
+
<!-- Left Links -->
|
|
95
|
+
{#if links}
|
|
96
|
+
{#each links as link}
|
|
97
|
+
<a href={link.url} class="text-base font-medium hover:text-gray-900">{link.text}</a>
|
|
98
|
+
{/each}
|
|
99
|
+
{/if}
|
|
100
|
+
|
|
101
|
+
<!-- Spacer -->
|
|
102
|
+
<div class="flex-1" />
|
|
103
|
+
|
|
104
|
+
<!-- Right Dropdowns -->
|
|
105
|
+
{#if dropdowns}
|
|
106
|
+
{#each dropdowns as drop}
|
|
107
|
+
<div id={drop.key} class="relative">
|
|
108
|
+
|
|
109
|
+
<!-- Rail Buttons-->
|
|
110
|
+
<button
|
|
111
|
+
type="button"
|
|
112
|
+
on:click={() =>
|
|
113
|
+
openDropdown == drop.key
|
|
114
|
+
? (openDropdown = "")
|
|
115
|
+
: (openDropdown = drop.key)}
|
|
116
|
+
class="group inline-flex items-center bg-white text-left text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-teci-blue-light focus:ring-offset-2"
|
|
117
|
+
aria-expanded={openDropdown == drop.key}
|
|
118
|
+
>
|
|
119
|
+
<span class:text-gray-900={openDropdown == drop.key}>{drop.text}</span>
|
|
120
|
+
<svg
|
|
121
|
+
class="ml-2 h-5 w-5 group-hover:text-gray-900 {openDropdown == drop.key
|
|
122
|
+
? 'rotate-180 text-gray-900'
|
|
123
|
+
: 'text-gray-400'}"
|
|
124
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
125
|
+
viewBox="0 0 20 20"
|
|
126
|
+
fill="currentColor"
|
|
127
|
+
aria-hidden="true"
|
|
128
|
+
>
|
|
129
|
+
<path
|
|
130
|
+
fill-rule="evenodd"
|
|
131
|
+
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
|
132
|
+
clip-rule="evenodd"
|
|
133
|
+
/>
|
|
134
|
+
</svg>
|
|
135
|
+
</button>
|
|
136
|
+
|
|
137
|
+
<!-- Flyout menus -->
|
|
138
|
+
{#if openDropdown == drop.key}
|
|
139
|
+
<div
|
|
140
|
+
class="absolute left-1/2 z-50 mt-3 w-48 max-w-xs -translate-x-1/2 transform overflow-hidden px-2 shadow-lg ring-1 ring-black ring-opacity-5 sm:px-0 bg-white"
|
|
141
|
+
use:clickOutside
|
|
142
|
+
on:outclick={() => (openDropdown = "")}
|
|
143
|
+
in:slide={{ duration: 250, easing: cubicOut }}
|
|
144
|
+
out:slide={{ duration: 150, easing: cubicIn }}
|
|
145
|
+
>
|
|
146
|
+
|
|
147
|
+
<button
|
|
148
|
+
on:click={() => (openDropdown = "")}
|
|
149
|
+
class="relative grid w-full gap-6 bg-white px-2 py-6 text-left"
|
|
150
|
+
>
|
|
151
|
+
{#each drop.links as link}
|
|
152
|
+
<a
|
|
153
|
+
href={link.url}
|
|
154
|
+
class="-m-3 flex items-start py-3 px-4 transition duration-150 ease-in-out hover:bg-gray-50"
|
|
155
|
+
>
|
|
156
|
+
<div class="ml-4">
|
|
157
|
+
<p class="text-base font-medium text-gray-900">{link.text}</p>
|
|
158
|
+
</div>
|
|
159
|
+
</a>
|
|
160
|
+
{/each}
|
|
161
|
+
</button>
|
|
162
|
+
|
|
163
|
+
</div>
|
|
164
|
+
{/if}
|
|
165
|
+
</div>
|
|
166
|
+
{/each}
|
|
167
|
+
{/if}
|
|
168
|
+
|
|
169
|
+
<!-- CTA Buttons -->
|
|
170
|
+
{#if ctas}
|
|
171
|
+
{#each ctas as cta}
|
|
172
|
+
<a href={cta.url} class="inline-block btn {getColorStyles('button', cta.color)}">
|
|
173
|
+
{cta.text}
|
|
174
|
+
<span class="hidden sm:inline" aria-hidden="true">→</span>
|
|
175
|
+
</a>
|
|
176
|
+
{/each}
|
|
177
|
+
{/if}
|
|
178
|
+
</nav>
|
|
179
|
+
|
|
180
|
+
</div>
|
|
181
|
+
|
|
182
|
+
<!-- Mobile Menu -->
|
|
183
|
+
{#if mobileOpen}
|
|
184
|
+
<div
|
|
185
|
+
class="absolute inset-x-0 z-50 divide-y-2 divide-gray-50 bg-white shadow-lg ring-1 ring-black ring-opacity-5 md:hidden px-2 py-4"
|
|
186
|
+
use:clickOutside
|
|
187
|
+
on:outclick={() => mobileOpen = false}
|
|
188
|
+
in:fade={{ duration: 250, easing: cubicOut }}
|
|
189
|
+
out:fade={{ duration: 150, easing: cubicIn }}
|
|
190
|
+
>
|
|
191
|
+
<button
|
|
192
|
+
on:click={() => mobileOpen = false}
|
|
193
|
+
class="relative grid w-full gap-6 bg-white p-2 text-left"
|
|
194
|
+
>
|
|
195
|
+
<!-- Page Home Link -->
|
|
196
|
+
<a
|
|
197
|
+
href={logo_link_url}
|
|
198
|
+
class="-m-3 flex items-start py-3 px-4 transition duration-150 ease-in-out hover:bg-gray-50"
|
|
199
|
+
>
|
|
200
|
+
<div class="ml-4">
|
|
201
|
+
<p class="text-base font-medium text-gray-900">{logo_alt_text}</p>
|
|
202
|
+
</div>
|
|
203
|
+
</a>
|
|
204
|
+
|
|
205
|
+
<!-- Links -->
|
|
206
|
+
{#if links }
|
|
207
|
+
{#each links as link}
|
|
208
|
+
<a
|
|
209
|
+
href={link.url}
|
|
210
|
+
class="-m-3 flex items-start py-3 px-4 transition duration-150 ease-in-out hover:bg-gray-50"
|
|
211
|
+
>
|
|
212
|
+
<div class="ml-4">
|
|
213
|
+
<p class="text-base font-medium text-gray-900">{link.text}</p>
|
|
214
|
+
</div>
|
|
215
|
+
</a>
|
|
216
|
+
{/each}
|
|
217
|
+
{/if}
|
|
218
|
+
|
|
219
|
+
<!-- Dropdowns -->
|
|
220
|
+
{#if dropdowns}
|
|
221
|
+
{#each dropdowns as drop}
|
|
222
|
+
<div id={drop.key} class="-m-3 py-3 px-4">
|
|
223
|
+
<p class="text-base font-medium text-gray-400 px-4">{drop.text}</p>
|
|
224
|
+
{#each drop.links as link}
|
|
225
|
+
<a
|
|
226
|
+
href={drop.url}
|
|
227
|
+
class="flex items-start py-3 px-4 transition duration-150 ease-in-out hover:bg-gray-50"
|
|
228
|
+
>
|
|
229
|
+
<div class="ml-4">
|
|
230
|
+
<p class="text-base font-medium text-gray-900">{link.text}</p>
|
|
231
|
+
</div>
|
|
232
|
+
</a>
|
|
233
|
+
{/each}
|
|
234
|
+
</div>
|
|
235
|
+
{/each}
|
|
236
|
+
{/if}
|
|
237
|
+
|
|
238
|
+
<!-- CTAs -->
|
|
239
|
+
{#if ctas}
|
|
240
|
+
{#each ctas as cta}
|
|
241
|
+
<a
|
|
242
|
+
href={cta.url}
|
|
243
|
+
class="-m-3 flex items-start py-3 px-4 transition duration-150 ease-in-out hover:bg-gray-50"
|
|
244
|
+
>
|
|
245
|
+
<div class="ml-4">
|
|
246
|
+
<p class="text-base font-medium text-gray-900">{cta.text}</p>
|
|
247
|
+
</div>
|
|
248
|
+
</a>
|
|
249
|
+
{/each}
|
|
250
|
+
{/if}
|
|
251
|
+
</button>
|
|
252
|
+
</div>
|
|
253
|
+
{/if}
|
|
254
|
+
</div>
|
|
255
|
+
</header>
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
/** @typedef {typeof __propDef.props} PageNavProps */
|
|
2
|
+
/** @typedef {typeof __propDef.events} PageNavEvents */
|
|
3
|
+
/** @typedef {typeof __propDef.slots} PageNavSlots */
|
|
4
|
+
export default class PageNav extends SvelteComponent<{
|
|
5
|
+
data?: {};
|
|
6
|
+
clickOutside?: (node: any) => {
|
|
7
|
+
destroy(): void;
|
|
8
|
+
};
|
|
9
|
+
}, {
|
|
10
|
+
[evt: string]: CustomEvent<any>;
|
|
11
|
+
}, {}> {
|
|
12
|
+
get clickOutside(): (node: any) => {
|
|
13
|
+
destroy(): void;
|
|
14
|
+
};
|
|
15
|
+
}
|
|
16
|
+
export type PageNavProps = typeof __propDef.props;
|
|
17
|
+
export type PageNavEvents = typeof __propDef.events;
|
|
18
|
+
export type PageNavSlots = typeof __propDef.slots;
|
|
19
|
+
import { SvelteComponent } from "svelte";
|
|
20
|
+
declare const __propDef: {
|
|
21
|
+
props: {
|
|
22
|
+
data?: {};
|
|
23
|
+
clickOutside?: (node: any) => {
|
|
24
|
+
destroy(): void;
|
|
25
|
+
};
|
|
26
|
+
};
|
|
27
|
+
events: {
|
|
28
|
+
[evt: string]: CustomEvent<any>;
|
|
29
|
+
};
|
|
30
|
+
slots: {};
|
|
31
|
+
};
|
|
32
|
+
export {};
|
|
@@ -16,6 +16,7 @@
|
|
|
16
16
|
import ContentTwoColumns from "../components/ContentTwoColumns.svelte";
|
|
17
17
|
import PricingTable from "../components/PricingTable.svelte";
|
|
18
18
|
import Stats from "../components/Stats.svelte";
|
|
19
|
+
import PageNav from "../components/PageNav.svelte";
|
|
19
20
|
import Testimonial from "../components/Testimonial.svelte";
|
|
20
21
|
|
|
21
22
|
let blocks = [
|
|
@@ -36,6 +37,7 @@
|
|
|
36
37
|
{ ref: "content-two-columns", component: ContentTwoColumns },
|
|
37
38
|
{ ref: "pricing-table", component: PricingTable },
|
|
38
39
|
{ ref: "stats", component: Stats },
|
|
40
|
+
{ ref: "pageNav", component: PageNav },
|
|
39
41
|
{ ref: "testimonial", component: Testimonial },
|
|
40
42
|
];
|
|
41
43
|
|
|
@@ -58,6 +60,8 @@
|
|
|
58
60
|
} else {
|
|
59
61
|
featuredImage = "https://teci.imgix.net/www/images/teci_icon_250.png";
|
|
60
62
|
}
|
|
63
|
+
|
|
64
|
+
let pageNav = page_sections ? page_sections.filter(sect => sect.fieldGroup === "pageNav")[0] : undefined;
|
|
61
65
|
</script>
|
|
62
66
|
|
|
63
67
|
<svelte:head>
|
|
@@ -75,21 +79,30 @@
|
|
|
75
79
|
<meta name="twitter:card" content={featuredImage} />
|
|
76
80
|
</svelte:head>
|
|
77
81
|
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
{
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
82
|
+
{#if pageNav}
|
|
83
|
+
<svelte:component
|
|
84
|
+
this={blocks.find((obj) => obj.ref === pageNav.fieldGroup).component}
|
|
85
|
+
data={pageNav}
|
|
86
|
+
/>
|
|
87
|
+
{/if}
|
|
88
|
+
|
|
89
|
+
<main class="relative my-0 mx-auto box-border flex w-full max-w-7xl flex-grow flex-col py-12 px-4 sm:px-6 lg:px-8">
|
|
90
|
+
<article class="flex flex-col space-y-16 {layout}">
|
|
91
|
+
{#each page_sections as section}
|
|
92
|
+
{#if section && section.fieldGroup === "sidebar-content"}
|
|
93
|
+
<svelte:component
|
|
94
|
+
this={blocks.find((obj) => obj.ref === section.fieldGroup).component}
|
|
95
|
+
data={section}
|
|
96
|
+
{title}
|
|
97
|
+
{date}
|
|
98
|
+
{lastmod}><slot /></svelte:component
|
|
99
|
+
>
|
|
100
|
+
{:else if section && section.fieldGroup != "sidebar-content" && section.fieldGroup != "pageNav"}
|
|
101
|
+
<svelte:component
|
|
102
|
+
this={blocks.find((obj) => obj.ref === section.fieldGroup).component}
|
|
103
|
+
data={section}
|
|
104
|
+
/>
|
|
105
|
+
{/if}
|
|
106
|
+
{/each}
|
|
107
|
+
</article>
|
|
108
|
+
</main>
|