Merge pull request #129 from koloml/bugfix/derpibooru-tag-editor-styling

Fixed tag categories headlines having inconsistent spacing between Derpibooru and Furbooru

manifest.json

@@ -47,6 +47,9 @@
             ],
             "js": [
                 "src/content/tags-editor.ts"
+            ],
+            "css": [
+                "src/styles/content/tags-editor.scss"
             ]
         },
         {

src/lib/components/TagsListBlock.ts

@@ -134,6 +134,7 @@ export class TagsListBlock extends BaseComponent {
       heading.style.display = 'none';
       heading.style.order = `var(${TagsListBlock.#orderCssVariableForGroup(group.id)}, 0)`;
       heading.style.flexBasis = '100%';
+      heading.classList.add('tag-category-headline');
 
       // We're inserting heading to the top just to make sure that heading is always in front of the tags related to
       // this category.

src/styles/booru-vars.scss

@@ -1,6 +1,9 @@
 $background-color: var(--background-color);
 $media-border: var(--media-border);
 $media-box-color: var(--media-box-color);
+$padding-small: var(--padding-small);
+$padding-normal: var(--padding-normal);
+$padding-large: var(--padding-large);
 
 // These variables are defined dynamically based on the category of the tag
 $resolved-tag-background: var(--tag-background);

src/styles/content/tags-editor.scss

@@ -0,0 +1,23 @@
+@use '$styles/booru-vars';
+@use '$styles/environment';
+
+h2.tag-category-headline {
+  // Basic margin top and bottom values gathered from Chrome.
+  $base-margin-top: .83em;
+  $base-margin-bottom: .62em;
+
+  // Tag List element was updated to use flex & gaps. This should be applied to Furbooru later, once updates will be
+  // applied from the base Philomena version.
+  @if environment.$current-site == 'derpibooru' {
+    margin: {
+      top: calc(#{$base-margin-top} - #{booru-vars.$padding-small});
+      bottom: calc(#{$base-margin-bottom} - #{booru-vars.$padding-small});
+    }
+  }
+  @else {
+    margin: {
+      top: $base-margin-top;
+      bottom: $base-margin-bottom;
+    }
+  }
+}