fixes for #3791

app/javascript/packs/application.js

@@ -6,11 +6,12 @@ function importAll (r) {
 
 require('jquery-ujs');
 require('hammerjs');
-require('qtip2');
 
 // should start looking for nodejs replacements
 importAll(require.context('../vendor', true, /\.js$/));
 
+importAll(require.context('../src/styles/base', true, /\.scss$/));
+
 require("jquery-ui/ui/widgets/autocomplete");
 require("jquery-ui/ui/widgets/button");
 require("jquery-ui/ui/widgets/dialog");
@@ -25,5 +26,5 @@ require("jquery-ui/themes/base/resizable.css");
 require("jquery-ui/themes/base/theme.css");
 
 importAll(require.context('../src/javascripts', true, /\.js(\.erb)?$/));
-importAll(require.context('../src/styles', true, /\.scss$/));
+importAll(require.context('../src/styles/common', true, /\.scss(?:\.erb)?$/));
-importAll(require.context('../src/styles', true, /\.scss.erb$/));
+importAll(require.context('../src/styles/specific', true, /\.scss(?:\.erb)?$/));

app/javascript/src/javascripts/mod_queue.js

@@ -1,3 +1,5 @@
+import Utility from './utility'
+
 let ModQueue = {};
 
 ModQueue.processed = 0;

app/javascript/src/javascripts/post_tooltips.js.erb

@@ -1,9 +1,12 @@
 import Utility from './utility'
 
+require('qtip2');
+require('qtip2/dist/jquery.qtip.css');
+
 let PostTooltip = {};
 
 PostTooltip.render_tooltip = function (event, qtip) {
-  var post_id = $(event.target).parents("[data-id]").data("id");
+  var post_id = $(this).parents("[data-id]").data("id");
 
   $.get("/posts/" + post_id, { variant: "tooltip" }).then(function (html) {
     qtip.set("content.text", html);

app/javascript/src/styles/base/000_vars.scss

@@ -1,5 +1,3 @@
-@charset "UTF-8";
-
 $menu_color: #F5F5FF;
 $link_color: hsl(213, 100%, 50%);
 $link_hover_color: lighten($link_color, 25%);

app/javascript/src/styles/base/010_reset.scss

@@ -1,6 +1,6 @@
 // Source: https://github.com/FrogBot/sassy_bootstrap/blob/master/lib/_reset.sass
 
-@import "000_vars.scss";
+@import "../base/000_vars.scss";
 
 // Reset.sass
 // Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an

app/javascript/src/styles/base/020_base.scss

@@ -1,4 +1,4 @@
-@import "000_vars.scss";
+@import "../base/000_vars.scss";
 
 body {
   background-color: #FFF;

app/javascript/src/styles/base/030_links.scss

@@ -1,4 +1,4 @@
-@import "000_vars.scss";
+@import "../base/000_vars.scss";
 
 a:link {
   color: $link_color;

app/javascript/src/styles/common/autocomplete.scss

@@ -1,3 +1,5 @@
+@import "../base/000_vars.scss";
+
 .ui-autocomplete {
   font-size: 0.9em;
 
@@ -9,8 +11,12 @@
     border-right: 1px solid #C5C5C5;
   }
 
-  .ui-menu-item a {
+  .ui-menu-item-wrapper {
-    padding: 1px .2em;
+    padding: 3px .5em 3px .4em;
+
+    a {
+      margin-right: 1em;
+    }
   }
 
   .autocomplete-arrow {

app/javascript/src/styles/common/dtext.scss

@@ -1,4 +1,4 @@
-@import "000_vars.scss";
+@import "../base/000_vars.scss";
 
 div.prose {
   line-height: 1.4em;

app/javascript/src/styles/common/inline.scss

@@ -1,4 +1,4 @@
-@import "000_vars.scss";
+@import "../base/000_vars.scss";
 
 span.error {
   display: block;

app/javascript/src/styles/common/jquery_ui_custom.scss

@@ -1,4 +1,4 @@
-@import "./000_vars.scss";
+@import "../base/000_vars.scss";
 
 .ui-widget {
   font-family: $base_font_family;

app/javascript/src/styles/common/main_layout.scss

@@ -1,4 +1,4 @@
-@import "000_vars.scss";
+@import "../base/000_vars.scss";
 
 div#search {
   margin-bottom: 1em;

app/javascript/src/styles/common/page_header.scss

@@ -1,4 +1,4 @@
-@import "000_vars.scss";
+@import "../base/000_vars.scss";
 
 #maintoggle {
   display: none;

app/javascript/src/styles/common/paginator.scss

@@ -1,4 +1,4 @@
-@import "000_vars.scss";
+@import "../base/000_vars.scss";
 
 div.paginator {
   display: block;

app/javascript/src/styles/common/tables.scss

@@ -1,4 +1,4 @@
-@import "000_vars.scss";
+@import "../base/000_vars.scss";
 
 table.striped {
   p {

app/javascript/src/styles/common/tags.scss.erb

@@ -1,13 +1,17 @@
-@import "./000_vars.scss";
+@import "../base/000_vars.scss";
 
 <% TagCategory.css_mapping.each do |category,cssmap| %>
-  .category-<%= category %> a, a.tag-type-<%= category %>, .ui-state-active a.tag-type-<%= category %> {
+  .category-<%= category %> a, a.tag-type-<%= category %>, .ui-widget-content a.tag-type-<%= category %> {
     color: <%= cssmap["color"] %>;
 
     &:hover {
       color: <%= cssmap["hover"] %>;
     }
   }
+
+  .ui-widget-content .ui-state-active a.tag-type-<%= category %> {
+    color: <%= cssmap["hover"] %>;
+  }
 <% end %>
 
 .category-banned a, a.tag-type-banned, .ui-state-active a.tag-type-banned {

app/javascript/src/styles/specific/api_keys.scss

@@ -1,4 +1,4 @@
-@import "../common/020_base.scss";
+@import "../base/020_base.scss";
 
 #c-maintenance-user-api-keys {
   #api-key {

app/javascript/src/styles/specific/artists.scss

@@ -1,4 +1,4 @@
-@import "../common/000_vars.scss";
+@import "../base/000_vars.scss";
 
 div#c-artists, div#excerpt {
   span.new-artist {

app/javascript/src/styles/specific/bans.scss

@@ -1,4 +1,4 @@
-@import "../common/000_vars.scss";
+@import "../base/000_vars.scss";
 
 #c-bans #a-index {
   tr[data-expired="true"] {

app/javascript/src/styles/specific/comments.scss

@@ -1,4 +1,4 @@
-@import "../common/000_vars.scss";
+@import "../base/000_vars.scss";
 
 div.comments-for-post {
   div.notices {

app/javascript/src/styles/specific/dmails.scss

@@ -1,4 +1,4 @@
-@import "../common/000_vars.scss";
+@import "../base/000_vars.scss";
 
 div#c-dmails {
   tr.read-false {

app/javascript/src/styles/specific/explore.scss

@@ -1,4 +1,4 @@
-@import "../common/000_vars.scss";
+@import "../base/000_vars.scss";
 
 div#c-explore-posts {
   header {

app/javascript/src/styles/specific/favorites.scss

@@ -1,4 +1,4 @@
-@import "../common/000_vars.scss";
+@import "../base/000_vars.scss";
 
 div#c-favorites {
   section#content > h1 {

app/javascript/src/styles/specific/keyboard_shortcuts.scss

@@ -1,4 +1,4 @@
-@import "../common/000_vars.scss";
+@import "../base/000_vars.scss";
 
 div#c-static {
   div#a-keyboard-shortcuts {

app/javascript/src/styles/specific/mod_queue.scss.erb

@@ -1,4 +1,4 @@
-@import "../common/000_vars.scss";
+@import "../base/000_vars.scss";
 
 div#c-moderator-post-queues {
   div.post {

app/javascript/src/styles/specific/notes.scss

@@ -1,4 +1,4 @@
-@import "../common/000_vars.scss";
+@import "../base/000_vars.scss";
 
 div#note-container {
   position: absolute;

app/javascript/src/styles/specific/pools.scss

@@ -1,4 +1,4 @@
-@import "../common/000_vars.scss";
+@import "../base/000_vars.scss";
 
 a.pool-category-series, .pool-category-series a {
   color: #A0A;

app/javascript/src/styles/specific/post_tooltips.scss

@@ -1,4 +1,4 @@
-@import "../common/000_vars.scss";
+@import "../base/000_vars.scss";
 
 $tooltip-line-height: 16px;
 $tooltip-body-height: $tooltip-line-height * 6; // 6 lines high.

app/javascript/src/styles/specific/post_versions.scss

@@ -1,4 +1,4 @@
-@import "../common/000_vars.scss";
+@import "../base/000_vars.scss";
 
 div#c-post-versions {
   div#a-index {

app/javascript/src/styles/specific/posts.scss

@@ -1,4 +1,4 @@
-@import "../common/000_vars.scss";
+@import "../base/000_vars.scss";
 
 article.post-preview {
   height: 154px;

app/javascript/src/styles/specific/related_tags.scss

@@ -1,4 +1,4 @@
-@import "../common/000_vars.scss";
+@import "../base/000_vars.scss";
 
 div#related-tags-container {
   padding-right: 2em;

app/javascript/src/styles/specific/sessions.scss

@@ -1,4 +1,4 @@
-@import "../common/000_vars.scss";
+@import "../base/000_vars.scss";
 
 div#c-sessions {
   div#a-new {

app/javascript/src/styles/specific/site_map.scss

@@ -1,4 +1,4 @@
-@import "../common/000_vars.scss";
+@import "../base/000_vars.scss";
 
 div#c-static {
   div#a-site-map {

app/javascript/src/styles/specific/terms_of_service.scss

@@ -1,4 +1,4 @@
-@import "../common/000_vars.scss";
+@import "../base/000_vars.scss";
 
 div#c-static div#a-terms-of-service {
   width: 40em;

app/javascript/src/styles/specific/users.scss

@@ -1,4 +1,4 @@
-@import "../common/000_vars.scss";
+@import "../base/000_vars.scss";
 
 div#c-users {
   div#a-show {

app/javascript/src/styles/specific/z_responsive.scss

@@ -1,4 +1,4 @@
-@import "../common/000_vars.scss";
+@import "../base/000_vars.scss";
 
 #desktop-version-link {
   display: none;

app/views/posts/partials/show/_ugoira_original.html.erb

@@ -38,9 +38,9 @@
 
 <% content_for(:html_header) do %>
   <script type="text/javascript">
-    Danbooru.Ugoira = {};
+    let Ugoira = {};
 
-    Danbooru.Ugoira.create_player = function() {
+    Ugoira.create_player = function() {
       var meta_data = {
         mime_type: <%= raw @post.pixiv_ugoira_frame_data.content_type.to_json %>,
         frames: <%= raw @post.pixiv_ugoira_frame_data.data.to_json %>
@@ -57,24 +57,24 @@
       this.player = new ZipImagePlayer(options);
     }
 
-    Danbooru.Ugoira.player = null;
+    Ugoira.player = null;
 
     $(function() {
-      Danbooru.Ugoira.create_player();
+      Ugoira.create_player();
-      $(Danbooru.Ugoira.player).on("loadProgress", function(ev, progress) {
+      $(Ugoira.player).on("loadProgress", function(ev, progress) {
         $("#seek-slider").progressbar("value", Math.floor(progress * 100));
       });
 
       var player_manually_paused = false;
       $("#ugoira-play").click(function(e) {
-        Danbooru.Ugoira.player.play();
+        Ugoira.player.play();
         $(this).hide();
         $("#ugoira-pause").show();
         player_manually_paused = false;
         e.preventDefault();
       })
       $("#ugoira-pause").click(function(e) {
-        Danbooru.Ugoira.player.pause();
+        Ugoira.player.pause();
         $(this).hide();
         $("#ugoira-play").show();
         player_manually_paused = true;
@@ -87,23 +87,23 @@
 
       $("#seek-slider").slider({
         min: 0,
-        max: Danbooru.Ugoira.player._frameCount-1,
+        max: Ugoira.player._frameCount-1,
         start: function(event, ui) {
           // Need to pause while slider is being dragged or playback speed will bug out
-          Danbooru.Ugoira.player.pause();
+          Ugoira.player.pause();
         },
         slide: function(event, ui) {
-          Danbooru.Ugoira.player._frame = ui.value;
+          Ugoira.player._frame = ui.value;
-          Danbooru.Ugoira.player._displayFrame();
+          Ugoira.player._displayFrame();
         },
         stop: function(event, ui) {
           // Resume playback when dragging stops, but only if player was not paused by the user earlier
           if (!(player_manually_paused)) {
-            Danbooru.Ugoira.player.play();
+            Ugoira.player.play();
           }
         }
       });
-      $(Danbooru.Ugoira.player).on("frame", function(frame, frame_number) {
+      $(Ugoira.player).on("frame", function(frame, frame_number) {
         $("#seek-slider").slider("option", "value", frame_number);
       });
     });