adds Key generic parameters, use custom Key type from template.rs

web/vue/src/components/RecipeList.vue

@@ -2,14 +2,16 @@
   <div class="container">
     <div v-if="active_category == -1" class="columns">
       <div v-for="c in categories" :key="c.id" class="column">
-        <button @click="setActiveCategory(c.id)" class="button is-large is-primary has-text-dark">{{ c.name }}</button>
+        <button @click="setActiveCategory(c.id)"
+          class="button is-large is-primary has-text-dark button-block">
+        {{ c.name }}</button>
       </div>
     </div>
     <div v-else class="box">
-      <button @click="setActiveCategory(-1)" class="button is-pulled-left"><< back</button>
+      <button @click="setActiveCategory(-1)" class="button is-pulled-left">Categories</button>
       <h2 class="subtitle">{{ categories[active_category].name }}</h2>
       <ul>
-        <li v-for="item in displayed" :key="item.id">
+        <li v-for="item in displayed" :key="item.id" class="has-text-left">
           <a href=""
              @click.prevent="$emit(
                'open-details',
@@ -52,3 +54,14 @@ export default {
   },
 }
 </script>
+
+<style scoped>
+  .button-block {
+    width: 200px;
+    height: 200px;
+  }
+
+  .li {
+    list-style: circle;
+  }
+</style>