- commit
- 491f21a
- parent
- c61efdf
- author
- Eric Bower
- date
- 2021-07-20 03:36:22 +0000 UTC
pagination and more styling updates
6 files changed,
+141,
-55
+1,
-0
1@@ -4,6 +4,7 @@
2 <meta charset="utf-8" />
3 <link rel="icon" href="/favicon.ico" />
4 <meta name="viewport" content="width=device-width, initial-scale=1" />
5+ <link rel="stylesheet" type="text/css" href="/reset.css" />
6 <link rel="stylesheet" type="text/css" href="/main.css" />
7 %svelte.head%
8 </head>
+52,
-46
1@@ -1,14 +1,13 @@
2 <script lang="ts">
3-import type { Plugin, Tag } from './types';
4-import Tooltip from './tooltip.svelte';
5-import Icon from './icon.svelte';
6-import TagItem from './tag.svelte';
7-export let plugin: Plugin;
8-export let tags: Tag[];
9-export let onSearch: (t: string) => any = (_: string) => {};
10+ import type { Plugin, Tag } from './types';
11+ import Tooltip from './tooltip.svelte';
12+ import Icon from './icon.svelte';
13+ import TagItem from './tag.svelte';
14+ export let plugin: Plugin;
15+ export let tags: Tag[];
16+ export let onSearch: (t: string) => any = (_: string) => {};
17 </script>
18
19-
20 <div class="container">
21 <div class="header">
22 <h2 class="item_header">
23@@ -29,52 +28,59 @@ export let onSearch: (t: string) => any = (_: string) => {};
24 {plugin.description}
25 </div>
26 <div class="tags">
27- {#each tags as tag}
28- <TagItem {tag} showCount={false} {onSearch} />
29- {/each}
30+ {#each tags as tag}
31+ <TagItem {tag} showCount={false} {onSearch} />
32+ {/each}
33 </div>
34 </div>
35
36 <style>
37-.container {
38- display: flex;
39- flex-direction: column;
40- padding: 15px 5px;
41- height: 140px;
42- border-bottom: 1px solid var(--primary-color);
43-}
44+ .container {
45+ display: flex;
46+ flex-direction: column;
47+ padding: 15px 5px;
48+ height: 140px;
49+ width: 100%;
50+ border-bottom: 1px solid var(--primary-color);
51+ }
52+
53+ .header {
54+ display: flex;
55+ align-items: center;
56+ margin-bottom: 5px;
57+ }
58
59-.header {
60- display: flex;
61- align-items: center;
62- margin-bottom: 5px;
63-}
64+ .desc {
65+ margin-top: 5px;
66+ }
67
68-.desc {
69- margin-top: 5px;
70-}
71+ .item_header {
72+ flex: 1;
73+ display: flex;
74+ align-items: center;
75+ }
76
77-.item_header {
78- flex: 1;
79- display: flex;
80- align-items: center;
81-}
82+ .metrics {
83+ width: 150px;
84+ min-width: 150px;
85+ display: flex;
86+ justify-content: space-between;
87+ }
88
89-.metrics {
90- width: 150px;
91- min-width: 150px;
92- display: flex;
93- justify-content: space-between;
94-}
95+ .metric-item {
96+ display: flex;
97+ justify-content: center;
98+ align-items: center;
99+ cursor: pointer;
100+ }
101
102-.metric-item {
103- display: flex;
104- justify-content: center;
105- align-items: center;
106- cursor: pointer;
107-}
108+ .tags {
109+ margin-top: 5px;
110+ }
111
112-.tags {
113- margin-top: 5px;
114-}
115+ @media only screen and (max-width: 700px) {
116+ .container {
117+ height: 160px;
118+ }
119+ }
120 </style>
+64,
-9
1@@ -12,7 +12,7 @@
2 props: {
3 plugins,
4 tags,
5- tagDb
6+ tagDb,
7 },
8 };
9 }
10@@ -89,7 +89,25 @@
11
12 export let plugins: Plugin[] = [];
13 export let tags: Tag[] = [];
14- $: results = filterPlugins({ search, plugins });
15+ $: filterTotal = filterPlugins({ search, plugins });
16+
17+ function paginate(p: number, items: Plugin[]) {
18+ const PER_PAGE = 15;
19+ const total = Math.ceil(items.length / PER_PAGE);
20+ const first = p === 1;
21+ const last = p === total;
22+ const end = p * PER_PAGE;
23+ const start = end - PER_PAGE;
24+ return { results: items.slice(start, end), first, last, total };
25+ }
26+ let curPage = 1;
27+ $: pager = paginate(curPage, filterTotal);
28+ const changePage = (next: number) => {
29+ curPage = next;
30+ document.getElementById('plugins_list').scrollTo(0, 0);
31+ };
32+ const prev = () => changePage(curPage - 1);
33+ const next = () => changePage(curPage + 1);
34 </script>
35
36 <div class="container">
37@@ -124,11 +142,16 @@
38 {/each}
39 </div>
40 <div class="plugins">
41- <div class="plugins_list">
42- <div class="search_results">{results.length} results</div>
43- {#each results as plugin}
44- <PluginItem {plugin} tags={getTags(plugin.tags)} onSearch={onSearch} />
45+ <div class="plugins_list" id="plugins_list">
46+ <div class="search_results">{filterTotal.length} results</div>
47+ {#each pager.results as plugin}
48+ <PluginItem {plugin} tags={getTags(plugin.tags)} {onSearch} />
49 {/each}
50+ <div class="paginate">
51+ <button on:click={prev} disabled={pager.first}>prev</button>
52+ <div>{curPage} of {pager.total}</div>
53+ <button on:click={next} disabled={pager.last}>next</button>
54+ </div>
55 </div>
56 </div>
57 </div>
58@@ -138,6 +161,16 @@
59 </svelte:head>
60
61 <style>
62+ :global(body) {
63+ overflow-y: hidden;
64+ }
65+
66+ .paginate {
67+ margin: 30px 0;
68+ display: flex;
69+ align-items: center;
70+ }
71+
72 .desc {
73 margin-bottom: 5px;
74 }
75@@ -150,7 +183,7 @@
76
77 .search_icon {
78 position: absolute;
79- top: 15px;
80+ top: 12px;
81 left: 0;
82 }
83
84@@ -162,14 +195,16 @@
85 }
86
87 #search {
88- width: calc(100% - 60px);
89+ width: 100%;
90 height: 47px;
91 padding-left: 30px;
92 padding-right: 30px;
93 }
94
95 .search_results {
96- margin: 5px 0;
97+ margin: 0;
98+ margin-top: 5px;
99+ margin-bottom: 5px;
100 }
101
102 .container {
103@@ -214,6 +249,26 @@
104 overflow-x: hidden;
105 }
106
107+ button {
108+ padding: 10px 15px;
109+ margin: 0 10px;
110+ background-color: var(--highlight-color);
111+ color: var(--primary-color);
112+ cursor: pointer;
113+ outline: 0;
114+ border: 1px solid var(--primary-color);
115+ border-radius: 3px;
116+ }
117+
118+ button:disabled {
119+ cursor: default;
120+ background-color: var(--primary-color);
121+ }
122+
123+ button:hover:enabled {
124+ background-color: var(--highlight-secondary);
125+ }
126+
127 @media only screen and (max-width: 700px) {
128 .container {
129 grid-template-columns: 1fr;
1@@ -57,6 +57,10 @@
2 </div>
3
4 <style>
5+ :global(body) {
6+ overflow-y: scroll;
7+ }
8+
9 .container {
10 display: flex;
11 justify-content: center;
+1,
-0
1@@ -82,6 +82,7 @@ input {
2 color: var(--highlight-color);
3 border-bottom: 1px solid var(--highlight-color);
4 font-size: 1.5rem;
5+ border-radius: 0;
6 }
7
8 input:focus {
+19,
-0
1@@ -0,0 +1,19 @@
2+* {box-sizing: border-box}
3+
4+body { margin: 0 }
5+
6+h1, h2, h3, h4, h5, h6 { font-weight: normal }
7+
8+table
9+{
10+ border-collapse: collapse;
11+ border-spacing: 0
12+}
13+
14+th, td
15+{
16+ text-align: left;
17+ vertical-align: top
18+}
19+
20+img, iframe { border: 0 }