Skip to content

Commit d953f54

Browse files
JulianFun123JulianFun123
committed
Improved UX
1 parent 0e95350 commit d953f54

File tree

9 files changed

+342
-197
lines changed

9 files changed

+342
-197
lines changed

‎public/index.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ app-root {
4242
border-radius: 8px;
4343
margin-left: 6px;
4444
cursor: pointer;
45+
font-size: 13px;
4546

4647
&.primary {
4748
background: #3469ff;

‎public/index.html‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,11 @@
55
<meta name="viewport"
66
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
77
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<meta id="metaThemeColor" name="theme-color" content="#212531">
89
<title>Document</title>
9-
<link rel="stylesheet" href="/index.css">
10+
<link rel="stylesheet" href="/index.css?v=1">
1011
</head>
1112
<body>
12-
<script type="module" src="/main.js"></script>
13+
<script type="module" src="/main.js?v=1"></script>
1314
</body>
1415
</html>

‎public/loading.svg‎

Lines changed: 11 additions & 0 deletions
Loading

‎src/components/LoadingIndicator.ts‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import {html, JDOMComponent, state} from 'jdomjs'
2+
3+
import {CustomElement, State} from 'jdomjs/src/decorators.ts'
4+
import {scss} from "../scss.ts";
5+
6+
7+
@CustomElement("pastefy-loading-indicator")
8+
export default class LoadingIndicator extends JDOMComponent.unshadowed {
9+
10+
@State()
11+
name = state('Project')
12+
13+
render() {
14+
return html`
15+
<div id="loading-indicator">
16+
<div>
17+
<i class="ti ti-box" />
18+
<h2>Loading ${this.name}</h2>
19+
<div id="progress"></div>
20+
</div>
21+
</div>
22+
`
23+
}
24+
25+
styles(): string {
26+
27+
/*@language css*/
28+
return scss`
29+
#loading-indicator {
30+
position: absolute;
31+
width: 100%;
32+
height: 100%;
33+
top: 0;
34+
left: 0;
35+
z-index: 100;
36+
background: #13151baa;
37+
backdrop-filter: blur(5px);
38+
border-radius: 10px;
39+
40+
& > div {
41+
position: absolute;
42+
left: 50%;
43+
top: 50%;
44+
transform: translate(-50%, -50%);
45+
text-align: center;
46+
47+
i {
48+
font-size: 56px;
49+
}
50+
51+
h2 {
52+
margin-top: 30px;
53+
}
54+
55+
#progress {
56+
height: 11px;
57+
width: 96px;
58+
background: url(/loading.svg) repeat;
59+
background-size: cover;
60+
background-position-x: 69px;
61+
margin: 20px auto auto;
62+
animation: progress-loading 2.5s infinite linear;
63+
64+
@keyframes progress-loading {
65+
from {
66+
background-position-x: 0;
67+
}
68+
to {
69+
background-position-x: 96px;
70+
}
71+
}
72+
}
73+
}
74+
}
75+
`;
76+
}
77+
}

‎src/components/Logo.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { css, html, JDOMComponent } from 'jdomjs'
22

33
import { CustomElement } from 'jdomjs/src/decorators.ts'
44
import { router } from "../main.ts";
5+
import {scss} from "../scss.ts";
56

67

78
@CustomElement("pastefy-code-box-logo")
@@ -18,7 +19,7 @@ export default class Logo extends JDOMComponent.unshadowed {
1819
styles(): string {
1920

2021
/*@language css*/
21-
return css`
22+
return scss`
2223
.pastefy-box-logo {
2324
height: 100%;
2425
width: fit-content;

‎src/views/HomeView.ts‎

Lines changed: 23 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,8 @@ export default class HomeView extends JDOMComponent.unshadowed {
3535
}
3636

3737
render() {
38+
document.querySelector('meta[name="theme-color"]')?.setAttribute('content', '#212531')
39+
3840
if (user.value) {
3941
this.loadUserPastes()
4042
}
@@ -54,18 +56,19 @@ export default class HomeView extends JDOMComponent.unshadowed {
5456
return html`
5557
<${TopBar} />
5658
<div class="home-page">
57-
<h2>Latest Projects</h2>
59+
<h2 :if=${computed(() => this.latestPastes.value.length, [this.latestPastes])}>Latest Projects</h2>
5860
<div class="projects">
59-
<${ForEach}
60-
value=${this.latestPastes}
61-
content=${(paste) => html`
62-
<a class="project" @click=${() => router.go(`/${paste.id}`)}>
63-
<i class=${`ti ti-${paste.config?.icon || 'box'}`} />
64-
<span>${paste.title}</span>
65-
</a>
66-
`}
67-
/>
68-
61+
<${ForEach}
62+
value=${this.latestPastes}
63+
content=${(paste) => html`
64+
<a class="project" @click=${() => router.go(`/${paste.id}`)}>
65+
<i class=${`ti ti-${paste.config?.icon || 'box'}`} />
66+
<span>${paste.title}</span>
67+
</a>
68+
`}
69+
/>
70+
</div>
71+
6972
<h2>New Project</h2>
7073
<div class="projects">
7174
<${ForEach}
@@ -83,15 +86,15 @@ export default class HomeView extends JDOMComponent.unshadowed {
8386
8487
<h2 :if=${computed(() => publicPastes.value.length, [publicPastes])}>Latest Public Projects</h2>
8588
<div class="projects">
86-
<${ForEach}
87-
value=${publicPastes}
88-
content=${(paste) => html`
89-
<a class="project" @click=${() => router.go(`/${paste.id}`)}>
90-
<i class=${`ti ti-${paste.config?.icon || 'box'}`} />
91-
<span>${paste.title}</span>
92-
</a>
93-
`}
94-
/>
89+
<${ForEach}
90+
value=${publicPastes}
91+
content=${(paste) => html`
92+
<a class="project" @click=${() => router.go(`/${paste.id}`)}>
93+
<i class=${`ti ti-${paste.config?.icon || 'box'}`} />
94+
<span>${paste.title}</span>
95+
</a>
96+
`}
97+
/>
9598
</div>
9699
`
97100
}

0 commit comments

Comments
 (0)