repos / neovimcraft

website that makes it easy to find neovim plugins
git clone https://github.com/neurosnap/neovimcraft.git

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
M src/app.html
+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>
M src/lib/plugin.svelte
+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>
M src/routes/index.svelte
+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;
M src/routes/plugin/[username]/[repo].svelte
+4, -0
 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;
M static/main.css
+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 {
A static/reset.css
+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 }