select abritrary fonts and cats

diff --git a/tagger2/TagsByFont.js b/tagger2/TagsByFont.js
index d540f784114df3f9293a73c0f53b58c85221f296..67700ee43d059d703cb43555d5a2df18723f2a5b 100644 (file)
--- a/tagger2/TagsByFont.js
+++ b/tagger2/TagsByFont.js
@@ -8,7 +8,12 @@ export default {
   },
   template: `
     <div>
-      <h3>Tags for font: {{ font }}</h3>
+      <h3>Tags for fonter</h3>
+      <select v-model="font" @change="filteredTags">
+        <option v-for="tag in tags.map(tag => tag.family.name).filter((value, index, self) => self.indexOf(value) === index)" :key="tag">
+          {{ tag }}
+        </option>
+      </select>
       <ul>
         <li v-for="tag in filteredTags" :key="tag.tagName + tag.family.name">
           {{ tag.tagName }} (Score: {{ tag.score }})

diff --git a/tagger2/index.html b/tagger2/index.html
index b9c345fe7536e3b2dbfcad5c2319e688bd37b659..a93bb88daf9a20ea4b2bd76f9d22715715310ee3 100644 (file)
--- a/tagger2/index.html
+++ b/tagger2/index.html
@@ -8,12 +8,13 @@
     <div id="fonts">
       <link v-for="family in gf && gf.families ? gf.families : []" :href="family.url" rel="stylesheet">
     </div>
-    <div v-for="(panel, idx) in panels" :key="idx">
-      <panel :panel="panel" :tags="tags && tags.items ? tags.items : []" @remove="removePanel(idx)"></panel>
+    <button @click="addFontPanel('Maven Pro')">Add Font View</button>
+    <button @click="addCategoriesPanel(['/Expressive/Loud'])">Add Tag View</button>
+    <div style="display: flex; flex-direction: row; width: 100vw; min-height: 100vh;">
+      <div v-for="(panel, idx) in panels" :key="idx" :style="{ flex: '1 1 0', minWidth: 0, borderRight: idx < panels.length - 1 ? '1px solid #eee' : 'none', height: '100vh', overflow: 'auto' }">
+        <panel :panel="panel" :tags="tags && tags.items ? tags.items : []" @remove="removePanel(idx)"></panel>
+      </div>
     </div>
-    <!-- Optionally, add buttons to add panels for testing -->
-    <button @click="addFontPanel('Maven Pro')">Add Maven Pro Panel</button>
-    <button @click="addCategoriesPanel(['/Expressive/Loud'])">Add /Expressive/Loud Panel</button>
   </div>
   <script type="module">
     import { GF, Tags } from './models.js';