From 10c7fdba5f080a29bd8635c4f1d78990571d3473 Mon Sep 17 00:00:00 2001
From: Tixie <admin@glitch.family>
Date: Sat, 29 Feb 2020 02:21:36 +0100
Subject: [PATCH] style input tags in settings

---
 .../o-tags.scss => 5-modules/tags.scss}       | 44 ++++++++++++++-----
 src/assets/scss/style.scss                    |  3 +-
 src/components/Settings.svelte                |  2 +-
 src/components/TagInput.svelte                |  7 ++-
 4 files changed, 40 insertions(+), 16 deletions(-)
 rename src/assets/scss/{7-vendors/o-tags.scss => 5-modules/tags.scss} (50%)

diff --git a/src/assets/scss/7-vendors/o-tags.scss b/src/assets/scss/5-modules/tags.scss
similarity index 50%
rename from src/assets/scss/7-vendors/o-tags.scss
rename to src/assets/scss/5-modules/tags.scss
index 2d22fde..f7236c9 100644
--- a/src/assets/scss/7-vendors/o-tags.scss
+++ b/src/assets/scss/5-modules/tags.scss
@@ -1,7 +1,16 @@
 /* ----------------------------------------------------------- */
-/* == tags input override */
+/* == tags input */
 /* ----------------------------------------------------------- */
-div.svelte-tags-input-layout:nth-child(n) {
+/* main */
+
+
+/* svelte-tags-input-layout */
+
+.svelte-tags-input-layout {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  padding: 0 .5rem .5rem .5rem;
   padding-right: 2rem;
   padding-left: 1.5rem;
   border: $input-border;
@@ -9,34 +18,49 @@ div.svelte-tags-input-layout:nth-child(n) {
   background: $input-background-color;
 }
 
-div.svelte-tags-input-layout:nth-child(n):hover {
-  border: $input-border;
-}
+/* svelte-tags-input */
 
-input.svelte-tags-input:nth-child(n) {
+.svelte-tags-input {
+  flex: 1;
+  margin: 0;
+  margin-top: 5px;
   padding: .35rem .5rem;
   min-width: 0;
+  border: none;
   box-shadow: none;
-  font-family: inherit;
   line-height: 1.5em;
 }
 
-span.svelte-tags-input-tag:nth-child(n) {
+.svelte-tags-input:focus {
+  outline: 0;
+}
+
+/* svelte-tags-input-tag */
+
+.svelte-tags-input-tag {
+  display: flex;
+  margin-top: .5rem;
+  margin-right: .5rem;
   padding: 0;
   padding-left: .9rem;
+  border-radius: .2rem;
   background-color: $color-primary;
+  color: #fff;
+  list-style: none;
+  white-space: nowrap;
   font-size: 1.3rem;
   font-family: inherit;
 }
 
-span.svelte-tags-input-tag-remove:nth-child(n) {
+.svelte-tags-input-tag-remove {
   margin-left: .3rem;
   padding: .5rem;
   padding-left: .5rem;
   font-size: 1.6rem;
   line-height: 1em;
+  cursor: pointer;
 }
 
-span.svelte-tags-input-tag-remove:hover {
+.svelte-tags-input-tag-remove:hover {
   background-color: rgba(#000, .3);
 }
diff --git a/src/assets/scss/style.scss b/src/assets/scss/style.scss
index 390c01b..fdd0283 100755
--- a/src/assets/scss/style.scss
+++ b/src/assets/scss/style.scss
@@ -75,6 +75,7 @@
 @import "5-modules/context-menu";
 @import "5-modules/modal";
 @import "5-modules/modal-share";
+@import "5-modules/tags";
 
 
 // --------------------------------------------------------------
@@ -92,7 +93,7 @@
 // Tips: load vendor from your package manager and override CSS here (e.g. o-vendor-name.scss)
 // In this context, "o" means "override" and you can use it as a convention.
 
-@import "7-vendors/o-tags.scss";
+// @import "7-vendors/o-vendor.scss";
 
 
 // --------------------------------------------------------------
diff --git a/src/components/Settings.svelte b/src/components/Settings.svelte
index 5de8688..1f0b6d4 100644
--- a/src/components/Settings.svelte
+++ b/src/components/Settings.svelte
@@ -48,7 +48,7 @@
     import ContextPage from '/components/ContextPage'
     import TagInput from '/components/TagInput'
 
-    let a = ['I', 'love', 'u']
+    let a = ['np', 'tootradio', 'pouetradio']
     $: console.log(a)
 
     let open = false
diff --git a/src/components/TagInput.svelte b/src/components/TagInput.svelte
index f875b7e..5312f29 100644
--- a/src/components/TagInput.svelte
+++ b/src/components/TagInput.svelte
@@ -1,9 +1,8 @@
-<div class="">
+<div class="svelte-tags-input-layout">
     {#each tags as tag, index}
-        <span>{tag} <span class="" on:click={() => remove(index)}>×</span></span>
+        <span class="svelte-tags-input-tag">{tag} <span class="svelte-tags-input-tag-remove" on:click={() => remove(index)}>×</span></span>
     {/each}
-
-    <input type="text" on:keydown={onKeyDown} />
+    <input type="text" class="svelte-tags-input" on:keydown={onKeyDown} />
 </div>
 
 <script>