From 00d5402f90b7d027340e81cb7e99f92350f28530 Mon Sep 17 00:00:00 2001
From: Thomas von Deyen <thomas@vondeyen.com>
Date: Fri, 2 Mar 2018 09:16:15 +0100
Subject: [PATCH 1/2] Extract tags css rules into own file

---
 app/assets/stylesheets/alchemy/admin.scss   |   1 +
 app/assets/stylesheets/alchemy/archive.scss | 129 -------------
 app/assets/stylesheets/alchemy/search.scss  |  56 ------
 app/assets/stylesheets/alchemy/selects.scss |  15 --
 app/assets/stylesheets/alchemy/tags.scss    | 199 ++++++++++++++++++++
 5 files changed, 200 insertions(+), 200 deletions(-)
 create mode 100644 app/assets/stylesheets/alchemy/tags.scss

diff --git a/app/assets/stylesheets/alchemy/admin.scss b/app/assets/stylesheets/alchemy/admin.scss
index 0b55f49238..c1e0bf4835 100644
--- a/app/assets/stylesheets/alchemy/admin.scss
+++ b/app/assets/stylesheets/alchemy/admin.scss
@@ -36,6 +36,7 @@
 @import "alchemy/sitemap";
 @import "alchemy/spinner";
 @import "alchemy/tables";
+@import "alchemy/tags";
 @import "alchemy/trash";
 @import "alchemy/lists";
 @import "alchemy/upload";
diff --git a/app/assets/stylesheets/alchemy/archive.scss b/app/assets/stylesheets/alchemy/archive.scss
index 432376eb5b..c4f25d7ecf 100644
--- a/app/assets/stylesheets/alchemy/archive.scss
+++ b/app/assets/stylesheets/alchemy/archive.scss
@@ -169,79 +169,6 @@ div#filter_bar {
   }
 }
 
-.tag-list {
-  height: 100%;
-  padding-bottom: 138px;
-
-  &.filtered {
-    padding-bottom: 164px;
-  }
-
-  &.with_filter_bar {
-    padding-bottom: 218px;
-
-    &.filtered {
-      padding-bottom: 244px;
-    }
-  }
-
-  .js_filter_field_box {
-    position: absolute;
-    right: auto;
-    top: auto;
-    width: 200px;
-    z-index: 1100;
-    transition: background-color 200ms;
-
-    input {
-      width: 200px;
-      background-color: transparentize($white, 0.25);
-
-      &:focus {
-        background-color: $white;
-      }
-    }
-
-    label { display: none }
-  }
-
-  .js_filter_field_clear {
-    right: 4px;
-  }
-
-  ul {
-    list-style-type: none;
-    padding: 0;
-    margin: 40px 0 4px 0;
-    height: 100%;
-    width: 200px;
-    overflow-x: hidden;
-    overflow-y: auto;
-
-    li {
-      display: block;
-
-      &:first-child { margin-top: 0 }
-
-      a {
-        @include tag-base;
-        text-decoration: none;
-        display: block;
-      }
-
-      &:hover { background-color: $very-light-blue }
-
-      &.active {
-
-        a {
-          background-color: $dark-gray;
-          color: $light-gray
-        }
-      }
-    }
-  }
-}
-
 .alchemy-dialog-body {
 
   #library_sidebar {
@@ -256,33 +183,9 @@ div#filter_bar {
 
 #assign_image_list {
   padding-right: 244px;
-
-  .tag-list ul {
-    height: 316px;
-  }
-
-  &.filtered .tag-list ul {
-    height: 292px;
-  }
-}
-
-#assign_file_list {
-
-  .tag-list ul {
-    height: 396px;
-  }
-
-  &.filtered .tag-list ul {
-    height: 372px;
-  }
 }
 
 #overlay_file_list {
-
-  &.with_tag_list {
-    padding-right: 234px;
-  }
-
   .assign_file_file {
     display: block;
     margin-bottom: 4px;
@@ -312,38 +215,6 @@ div#filter_bar {
   }
 }
 
-.picture_tags {
-  overflow: hidden;
-  position: absolute;
-  top: 22px;
-  left: $default-padding;
-  width: 50%;
-  max-height: 80%;
-  padding: $default-padding;
-  pointer-events: none;
-  display: none;
-}
-
-.picture_thumbnail:hover .picture_tags {
-  display: block;
-}
-
-.tag {
-  @include tag-base(
-    $margin: $default-margin/2 0,
-    $padding: $default-padding 2*$default-padding $default-padding
-  );
-  display: inline-block;
-  vertical-align: middle;
-  color: $text-color;
-  pointer-events: none;
-  font-size: $small-font-size;
-}
-
-.tags .list .tag {
-  padding: 0;
-}
-
 #all_files td.name a {
   @include zoom-in;
 }
diff --git a/app/assets/stylesheets/alchemy/search.scss b/app/assets/stylesheets/alchemy/search.scss
index 1f592060d8..b60285d996 100644
--- a/app/assets/stylesheets/alchemy/search.scss
+++ b/app/assets/stylesheets/alchemy/search.scss
@@ -47,62 +47,6 @@
   text-align: center;
 }
 
-#tags_tag_list {
-  text-align: left;
-  padding-top: 5px;
-
-  ul.tags {
-    max-height: 10em;
-    padding: 1px;
-    margin: 0;
-    margin-top: 2px;
-    overflow: auto;
-    text-align: left;
-    list-style-type: none;
-
-    li {
-      background-color: $medium-gray;
-      padding: 4px;
-      margin: 0 0 4px 0;
-      position: relative;
-      border-radius: $default-border-radius;
-
-      &.odd { background-color: #eaf3f9 }
-
-      input {
-        position: absolute;
-        top: 3px;
-        left: 4px;
-      }
-
-      label {
-        display: inline-block;
-        margin-left: 2em;
-        line-height: 1.6em;
-      }
-    }
-  }
-
-  .js_filter_field_box {
-    position: relative;
-    top: 0;
-    right: 0;
-    margin: 0;
-
-    .js_filter_field {
-      width: 100%;
-    }
-
-    label {
-      display: none
-    }
-  }
-
-  .js_filter_field_clear {
-    right: 4px;
-  }
-}
-
 #toolbar,
 #overlay_toolbar {
 
diff --git a/app/assets/stylesheets/alchemy/selects.scss b/app/assets/stylesheets/alchemy/selects.scss
index e9022c79b5..1a84917380 100644
--- a/app/assets/stylesheets/alchemy/selects.scss
+++ b/app/assets/stylesheets/alchemy/selects.scss
@@ -158,21 +158,6 @@ select {
   }
 }
 
-.tag_list, .autocomplete_tag_list {
-  .select2-container.select2-container-multi {
-    .select2-search-choice {
-      padding: 0;
-
-      div {
-        @include tag-base(
-          $padding: $default-padding 6*$default-padding $default-padding 3*$default-padding,
-          $margin: 0
-        );
-      }
-    }
-  }
-}
-
 .select2-drop {
 
   .select2-search {
diff --git a/app/assets/stylesheets/alchemy/tags.scss b/app/assets/stylesheets/alchemy/tags.scss
new file mode 100644
index 0000000000..304fdee226
--- /dev/null
+++ b/app/assets/stylesheets/alchemy/tags.scss
@@ -0,0 +1,199 @@
+.tag-list {
+  height: 100%;
+  padding-bottom: 138px;
+
+  &.filtered {
+    padding-bottom: 164px;
+  }
+
+  &.with_filter_bar {
+    padding-bottom: 218px;
+
+    &.filtered {
+      padding-bottom: 244px;
+    }
+  }
+
+  .js_filter_field_box {
+    position: absolute;
+    right: auto;
+    top: auto;
+    width: 200px;
+    z-index: 1100;
+    transition: background-color 200ms;
+
+    input {
+      width: 200px;
+      background-color: transparentize($white, 0.25);
+
+      &:focus {
+        background-color: $white;
+      }
+    }
+
+    label { display: none }
+  }
+
+  .js_filter_field_clear {
+    right: 4px;
+  }
+
+  ul {
+    list-style-type: none;
+    padding: 0;
+    margin: 40px 0 4px 0;
+    height: 100%;
+    width: 200px;
+    overflow-x: hidden;
+    overflow-y: auto;
+
+    li {
+      display: block;
+
+      &:first-child { margin-top: 0 }
+
+      a {
+        @include tag-base;
+        text-decoration: none;
+        display: block;
+      }
+
+      &:hover { background-color: $very-light-blue }
+
+      &.active {
+
+        a {
+          background-color: $dark-gray;
+          color: $light-gray
+        }
+      }
+    }
+  }
+}
+
+.picture_tags {
+  overflow: hidden;
+  position: absolute;
+  top: 22px;
+  left: $default-padding;
+  width: 50%;
+  max-height: 80%;
+  padding: $default-padding;
+  pointer-events: none;
+  display: none;
+}
+
+.picture_thumbnail:hover .picture_tags {
+  display: block;
+}
+
+.tag {
+  @include tag-base(
+    $margin: $default-margin/2 0,
+    $padding: $default-padding 2*$default-padding $default-padding
+  );
+  display: inline-block;
+  vertical-align: middle;
+  color: $text-color;
+  pointer-events: none;
+  font-size: $small-font-size;
+}
+
+.tags .list .tag {
+  padding: 0;
+}
+
+#assign_image_list {
+  .tag-list ul {
+    height: 316px;
+  }
+
+  &.filtered .tag-list ul {
+    height: 292px;
+  }
+}
+
+#assign_file_list {
+  .tag-list ul {
+    height: 396px;
+  }
+
+  &.filtered .tag-list ul {
+    height: 372px;
+  }
+}
+
+#overlay_file_list.with_tag_list {
+  padding-right: 234px;
+}
+
+#tags_tag_list {
+  text-align: left;
+  padding-top: 5px;
+
+  ul.tags {
+    max-height: 10em;
+    padding: 1px;
+    margin: 0;
+    margin-top: 2px;
+    overflow: auto;
+    text-align: left;
+    list-style-type: none;
+
+    li {
+      background-color: $medium-gray;
+      padding: 4px;
+      margin: 0 0 4px 0;
+      position: relative;
+      border-radius: $default-border-radius;
+
+      &.odd { background-color: #eaf3f9 }
+
+      input {
+        position: absolute;
+        top: 3px;
+        left: 4px;
+      }
+
+      label {
+        display: inline-block;
+        margin-left: 2em;
+        line-height: 1.6em;
+      }
+    }
+  }
+
+  .js_filter_field_box {
+    position: relative;
+    top: 0;
+    right: 0;
+    margin: 0;
+
+    .js_filter_field {
+      width: 100%;
+    }
+
+    label {
+      display: none
+    }
+  }
+
+  .js_filter_field_clear {
+    right: 4px;
+  }
+}
+
+.tag_list, .autocomplete_tag_list {
+  .select2-container.select2-container-multi {
+    .select2-search-choice {
+      padding: 0;
+
+      div {
+        @include tag-base(
+          $padding: $default-padding 6*$default-padding $default-padding 3*$default-padding,
+          $margin: 0
+        );
+      }
+    }
+  }
+}

From 5303523d8a03bb8da8bbb36a547dcd2910508065 Mon Sep 17 00:00:00 2001
From: Thomas von Deyen <thomas@vondeyen.com>
Date: Fri, 4 May 2018 13:38:47 +0200
Subject: [PATCH 2/2] Span the sitemap page link over the whole width

---
 app/assets/stylesheets/alchemy/sitemap.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/alchemy/sitemap.scss b/app/assets/stylesheets/alchemy/sitemap.scss
index b6566ced0c..29e978ea11 100644
--- a/app/assets/stylesheets/alchemy/sitemap.scss
+++ b/app/assets/stylesheets/alchemy/sitemap.scss
@@ -24,7 +24,7 @@
 }
 
 .sitemap_pagename_link {
-  display: inline-block;
+  display: block;
   padding: 0 10px;
   margin: 2px;
   text-decoration: none;