Add category and tag selectors

assets/javascripts/discourse/components/wizard-custom-field.js.es6

@@ -13,6 +13,9 @@ export default Ember.Component.extend({
   @computed('field.type')
   isInput: (type) => type === 'text' || type === 'textarea',
 
+  @computed('field.type')
+  isCategoryOrTag: (type) => type === 'tag' || type === 'category',
+
   @computed()
   presetChoices() {
     return [

assets/javascripts/discourse/templates/components/wizard-custom-field.hbs

@@ -123,3 +123,14 @@
     </div>
   </div>
 {{/if}}
+
+{{#if isCategoryOrTag}}
+  <div class="setting">
+    <div class="setting-label">
+      <h3>{{i18n 'admin.wizard.field.limit'}}</h3>
+    </div>
+    <div class="setting-value">
+      {{input type="number" value=field.limit}}
+    </div>
+  </div>
+{{/if}}

assets/javascripts/wizard-custom-lib.js

@@ -1,12 +1,8 @@
-//= require discourse/lib/autocomplete
+window.Discourse = {}
-//= require discourse/lib/utilities
+window.Wizard = {};
-//= require discourse/lib/offset-calculator
+Wizard.SiteSettings = {};
-//= require discourse/lib/lock-on
+Wizard.RAW_TEMPLATES = {};
-//= require discourse/lib/text-direction
+Discourse.__widget_helpers = {};
-//= require discourse/lib/to-markdown
+Discourse.SiteSettings = Wizard.SiteSettings;
-//= require discourse/lib/load-script
+Discourse.Model = Ember.Object.extend();
-
+Discourse.Site = Ember.Object.extend();
-//= require markdown-it-bundle
-//= require pretty-text/engines/discourse-markdown-it
-//= require pretty-text/engines/discourse-markdown/helpers
-//= require pretty-text/pretty-text

assets/javascripts/wizard-custom.js

@@ -1,3 +1,22 @@
+//= require discourse/lib/autocomplete
+//= require discourse/lib/utilities
+//= require discourse/lib/offset-calculator
+//= require discourse/lib/lock-on
+//= require discourse/lib/text-direction
+//= require discourse/lib/to-markdown
+//= require discourse/lib/load-script
+//= require discourse/lib/url
+//= require discourse/lib/ajax
+//= require discourse/lib/ajax-error
+//= require discourse/lib/page-visible
+//= require discourse/lib/logout
+//= require discourse/lib/render-tag
+
+//= require markdown-it-bundle
+//= require pretty-text/engines/discourse-markdown-it
+//= require pretty-text/engines/discourse-markdown/helpers
+//= require pretty-text/pretty-text
+
 //= require ./wizard/custom-wizard
 //= require_tree ./wizard/components
 //= require_tree ./wizard/controllers
@@ -8,6 +27,12 @@
 //= require_tree ./wizard/routes
 //= require_tree ./wizard/templates
 
+//= require discourse/models/permission-type
+//= require discourse/models/rest
+//= require discourse/models/category
+//= require discourse/helpers/category-link
+//= require discourse/mixins/singleton
+
 //= require discourse/components/user-selector
 //= require discourse/helpers/user-avatar
 //= require discourse/components/conditional-loading-spinner
@@ -17,9 +42,3 @@
 //= require discourse/components/d-editor-modal
 //= require lodash.js
 //= require mousetrap.js
-
-window.Discourse = {}
-window.Wizard = {};
-Wizard.SiteSettings = {};
-Wizard.RAW_TEMPLATES = {};
-Discourse.__widget_helpers = {};

assets/javascripts/wizard/helpers/dir-span.js.es6

@@ -0,0 +1,5 @@
+import { registerUnbound } from "discourse-common/lib/helpers";
+
+export default registerUnbound("dir-span", function(str) {
+  return new Handlebars.SafeString(str);
+});

assets/javascripts/wizard/initializers/custom.js.es6

@@ -1,7 +1,7 @@
 export default {
   name: 'custom-routes',
 
-  initialize() {
+  initialize(app) {
     if (window.location.pathname.indexOf('/w/') < 0) return;
 
     const Router = requirejs('wizard/router').default;
@@ -15,6 +15,7 @@ export default {
     const FieldModel = requirejs('wizard/models/wizard-field').default;
     const autocomplete = requirejs('discourse/lib/autocomplete').default;
     const cook = requirejs('discourse/plugins/discourse-custom-wizard/wizard/lib/text-lite').cook;
+    const Singleton = requirejs("discourse/mixins/singleton").default;
 
     // IE11 Polyfill - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries#Polyfill
     if (!Object.entries)
@@ -30,8 +31,23 @@ export default {
 
     $.fn.autocomplete = autocomplete;
 
+    const targets = ["controller", "component", "route", "model", "adapter"];
+
+    const siteSettings = Wizard.SiteSettings;
+    app.register("site-settings:main", siteSettings, { instantiate: false });
+    targets.forEach(t => app.inject(t, "siteSettings", "site-settings:main"));
+
+    const site = Discourse.Site;
+    app.register("site:main", site);
+    targets.forEach(t => app.inject(t, "site", "site:main"));
+
+    site.reopenClass(Singleton);
+    site.currentProp('can_create_tag', false);
+
     // this is for discourse/lib/utilities.avatarImg;
+    Discourse.__container__ = app.__container__;
     Discourse.getURLWithCDN = getUrl;
+    Discourse.getURL = getUrl;
 
     Router.reopen({
       rootURL: getUrl('/w/')
@@ -188,7 +204,7 @@ export default {
       }.property('field.type', 'field.id')
     });
 
-    const StandardFieldValidation = ['text', 'textarea', 'dropdown', 'image', 'checkbox', 'user-selector', 'text-only', 'composer'];
+    const StandardFieldValidation = ['text', 'textarea', 'dropdown', 'tag', 'category', 'image', 'checkbox', 'user-selector', 'text-only', 'composer'];
 
     FieldModel.reopen({
       hasCustomCheck: false,

assets/javascripts/wizard/models/custom.js.es6

@@ -12,7 +12,7 @@ const CustomWizard = Ember.Object.extend({
     if (this.get('required') && (!this.get('completed') && this.get('permitted'))) return;
     const id = this.get('id');
     CustomWizard.skip(id);
-  }
+  },
 });
 
 CustomWizard.reopenClass({
@@ -61,6 +61,36 @@ export function findCustomWizard(wizardId, params = {}) {
       });
     }
 
+    if (wizard.categories) {
+      let subcatMap = {};
+      let categoriesById = {};
+      let categories = wizard.categories.map(c => {
+        if (c.parent_category_id) {
+          subcatMap[c.parent_category_id] =
+            subcatMap[c.parent_category_id] || [];
+          subcatMap[c.parent_category_id].push(c.id);
+        }
+        return (categoriesById[c.id] = Ember.Object.create(c));
+      });
+
+      // Associate the categories with their parents
+      categories.forEach(c => {
+        let subcategoryIds = subcatMap[c.get("id")];
+        if (subcategoryIds) {
+          c.set("subcategories", subcategoryIds.map(id => categoriesById[id]));
+        }
+        if (c.get("parent_category_id")) {
+          c.set("parentCategory", categoriesById[c.get("parent_category_id")]);
+        }
+      });
+
+      Discourse.Site.currentProp('categoriesList', categories);
+      Discourse.Site.currentProp('sortedCategories', categories);
+      Discourse.Site.currentProp('listByActivity', categories);
+      Discourse.Site.currentProp('categoriesById', categoriesById);
+      Discourse.Site.currentProp('uncategorized_category_id', wizard.uncategorized_category_id);
+    }
+
     return CustomWizard.create(wizard);
   });
 };

assets/javascripts/wizard/templates/components/wizard-field-category.hbs

@@ -0,0 +1,2 @@
+{{category-selector categories=field.value maximum=field.limit}}
+

assets/javascripts/wizard/templates/components/wizard-field-tag.hbs

@@ -0,0 +1 @@
+{{tag-chooser value=field.value maximum=field.limit}}

assets/stylesheets/wizard/wizard_badges.scss

@@ -0,0 +1,148 @@
+@import 'wizard_variables';
+
+// Category badges
+// --------------------------------------------------
+
+.badge-wrapper {
+  font-size: $font-down-1;
+  font-weight: bold;
+  white-space: nowrap;
+  position: relative;
+  display: inline-flex;
+  align-items: baseline;
+
+  .badge-category {
+    display: inline-flex;
+    align-items: baseline;
+    .category-name {
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+    .d-icon {
+      margin-right: 3px;
+      width: 0.74em;
+      height: 0.74em;
+      color: inherit;
+    }
+  }
+
+  // ----- Bullet
+
+  &.bullet {
+    margin-right: 12px;
+    span.badge-category {
+      color: $primary-high;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      .extra-info-wrapper & {
+        color: $header-primary;
+      }
+    }
+    .badge-category-parent-bg,
+    .badge-category-bg {
+      flex: 0 0 auto;
+      width: 9px;
+      height: 9px;
+      margin-right: 5px;
+      display: inline-block;
+    }
+    .badge-category-parent-bg {
+      // Subcategories
+      width: 5px;
+      margin-right: 0;
+      + .badge-category-bg {
+        width: 5px;
+      }
+    }
+    .d-icon {
+      color: $primary-medium;
+    }
+  }
+
+  // ----- Box
+
+  &.box {
+    margin-right: 5px;
+    padding: 2px 4px 2px 4px;
+    display: inline-flex;
+    span {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      &.badge-category-bg,
+      &.badge-category-parent-bg {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+      }
+
+      &.badge-category-parent-bg {
+        // Subcategories
+        width: calc(100% - 5px);
+        & + .badge-category-bg {
+          left: 5px;
+          width: calc(100% - 5px);
+          & + .badge-category {
+            margin-left: 5px;
+          }
+        }
+      }
+
+      &.badge-category {
+        position: relative;
+      }
+    }
+    + .topic-header-extra {
+      padding: 2px 4px 2px 4px;
+    }
+  }
+
+  // ----- Bar
+
+  &.bar {
+    margin-right: 5px;
+
+    span.badge-category {
+      color: $primary-high;
+      padding: 1px 3px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+
+      .extra-info-wrapper & {
+        color: $header-primary;
+      }
+    }
+
+    .badge-category-parent-bg,
+    .badge-category-bg {
+      // Subcategories
+      display: inline-block;
+      padding: 0 1px;
+
+      &:before {
+        content: "\a0";
+      }
+    }
+  }
+
+  // ----- No category style
+
+  &.none {
+    color: $primary-high;
+    margin-right: 5px;
+  }
+}
+
+// Category badge dropdown
+// --------------------------------------------------
+
+.list-controls {
+  .category-breadcrumb {
+    a.badge-category {
+      display: inline-block;
+      padding: 6px 8px;
+      line-height: $line-height-medium;
+    }
+  }
+}

assets/stylesheets/wizard/wizard_variables.scss

@@ -8,3 +8,279 @@ $highlight:         #ffff4d !default;
 $danger:            #e45735 !default;
 $success:           #009900 !default;
 $love:              #fa6c8d !default;
+
+// --------------------------------------------------
+// Variables from Discourse
+// --------------------------------------------------
+
+// Layout dimensions
+// --------------------------------------------------
+
+$small-width: 800px !default;
+$medium-width: 995px !default;
+$large-width: 1110px !default;
+
+$input-padding: 4px 10px;
+$topic-body-width: 690px;
+$topic-body-width-padding: 11px;
+$topic-avatar-width: 45px;
+
+// Brand color variables
+// --------------------------------------------------
+
+$google: #ffffff !default;
+$instagram: #e1306c !default;
+$facebook: #4267b2 !default;
+$cas: #70ba61 !default;
+$twitter: #1da1f2 !default;
+$github: #100e0f !default;
+
+// Badge color variables
+// --------------------------------------------------
+
+$gold: rgb(231, 195, 0) !default;
+$silver: #c0c0c0 !default;
+$bronze: #cd7f32 !default;
+
+// Fonts
+// --------------------------------------------------
+
+$base-font-size-smaller: 14px !default;
+$base-font-size: 15px !default;
+$base-font-size-larger: 17px !default;
+$base-font-size-largest: 19px !default;
+$base-font-family: Helvetica, Arial, sans-serif !default;
+
+// Font-size defintions, multiplier ^ (step / interval)
+$font-up-6: 2.296em;
+$font-up-5: 2em;
+$font-up-4: 1.7511em;
+$font-up-3: 1.5157em;
+$font-up-2: 1.3195em;
+$font-up-1: 1.1487em; // 2^(1/5)
+$font-0: 1em;
+$font-down-1: 0.8706em; // 2^(-1/5)
+$font-down-2: 0.7579em; // Smallest size we use based on the 1em base
+$font-down-3: 0.6599em;
+$font-down-4: 0.5745em;
+$font-down-5: 0.5em;
+$font-down-6: 0.4355em;
+
+// inputs/textareas in iOS need to be at least 16px to avoid triggering zoom on focus
+// with base at 15px, the below gives 16.05px
+$font-size-ios-input: 1.07em;
+
+// Common line-heights
+$line-height-small: 1;
+$line-height-medium: 1.2; // Headings or large text
+$line-height-large: 1.4; // Normal or small text
+
+// Z-index
+// --------------------------------------------------
+
+$z-layers: (
+  "max": 9999,
+  "modal": (
+    "tooltip": 1600,
+    "popover": 1500,
+    "dropdown": 1400,
+    "content": 1300,
+    "overlay": 1200
+  ),
+  "fullscreen": 1150,
+  "mobile-composer": 1100,
+  "ipad-header-nav": 1020,
+  "header": 1000,
+  "footer-nav": 900,
+  "tooltip": 600,
+  "composer": (
+    "dropdown": 700,
+    "tooltip": 600,
+    "popover": 500,
+    "content": 400
+  ),
+  "dropdown": 300,
+  "usercard": 200,
+  "timeline": 100,
+  "base": 1
+);
+
+@function map-has-nested-keys($map, $keys...) {
+  @each $key in $keys {
+    @if not map-has-key($map, $key) {
+      @return false;
+    }
+    $map: map-get($map, $key);
+  }
+  @return true;
+}
+
+@function map-deep-get($map, $keys...) {
+  @each $key in $keys {
+    $map: map-get($map, $key);
+  }
+  @return $map;
+}
+
+@function z($layers...) {
+  @if not map-has-nested-keys($z-layers, $layers...) {
+    @warn "No layer defined for `#{inspect($layers...)}` in $z-layers map. Check variables.scss, property omitted.";
+  }
+  @return map-deep-get($z-layers, $layers...);
+}
+
+// Box-shadow
+// --------------------------------------------------
+
+$box-shadow: (
+  "modal": 0 8px 60px rgba(0, 0, 0, 0.6),
+  "composer": 0 -1px 40px rgba(0, 0, 0, 0.12),
+  "menu-panel": 0 12px 12px rgba(0, 0, 0, 0.15),
+  "card": 0 4px 14px rgba(0, 0, 0, 0.15),
+  "dropdown": 0 2px 3px 0 rgba(0, 0, 0, 0.2),
+  "header": 0 2px 4px -1px rgba(0, 0, 0, 0.25),
+  "footer-nav": 0 0 2px 0 rgba(0, 0, 0, 0.25),
+  "kbd": (
+    0 2px 0 rgba(0, 0, 0, 0.2),
+    0 0 0 1px dark-light-choose(#fff, #000) inset
+  ),
+  "focus": 0 0 6px 0 $tertiary,
+  "focus-danger": 0 0 6px 0 $danger
+);
+
+@function shadow($key) {
+  @return map-get($box-shadow, $key);
+}
+
+// Color utilities
+// --------------------------------------------------
+
+// w3c definition of color brightness https://www.w3.org/TR/AERT#color-contrast
+@function dc-color-brightness($color) {
+  @return (
+    (red($color) * 0.299) + (green($color) * 0.587) + (blue($color) * 0.114)
+  );
+}
+
+// Uses an approximation of sRGB blending, GAMMA=2 instead of GAMMA=2.2
+@function srgb-scale($foreground, $background, $percent) {
+  $ratio: ($percent / 100%);
+  $iratio: 1 - $ratio;
+  $f_r2: red($foreground) * red($foreground);
+  $f_g2: green($foreground) * green($foreground);
+  $f_b2: blue($foreground) * blue($foreground);
+  $b_r2: red($background) * red($background);
+  $b_g2: green($background) * green($background);
+  $b_b2: blue($background) * blue($background);
+  $r_r2: $f_r2 * $ratio + $b_r2 * $iratio;
+  $r_g2: $f_g2 * $ratio + $b_g2 * $iratio;
+  $r_b2: $f_b2 * $ratio + $b_b2 * $iratio;
+  $r_r: sqrt($r_r2);
+  $r_g: sqrt($r_g2);
+  $r_b: sqrt($r_b2);
+  @return rgb($r_r, $r_g, $r_b);
+}
+
+// Replaces dark-light-diff($primary, $secondary, 50%, -50%)
+@function blend-primary-secondary($percent) {
+  @return srgb-scale($primary, $secondary, $percent);
+}
+
+@function dark-light-diff(
+  $adjusted-color,
+  $comparison-color,
+  $lightness,
+  $darkness
+) {
+  @if dc-color-brightness($adjusted-color) <
+    dc-color-brightness($comparison-color)
+  {
+    @return scale-color($adjusted-color, $lightness: $lightness);
+  } @else {
+    @return scale-color($adjusted-color, $lightness: $darkness);
+  }
+}
+@function dark-light-choose($light-theme-result, $dark-theme-result) {
+  @if dc-color-brightness($primary) < dc-color-brightness($secondary) {
+    @return $light-theme-result;
+  } @else {
+    @return $dark-theme-result;
+  }
+}
+
+// standard color transformations, use these if possible, and add any new dark-light-diffs here
+
+//primary
+$primary-very-low: dark-light-diff($primary, $secondary, 97%, -82%);
+$primary-low: dark-light-diff($primary, $secondary, 90%, -78%);
+$primary-low-mid: dark-light-diff($primary, $secondary, 70%, -45%);
+$primary-medium: dark-light-diff($primary, $secondary, 50%, -35%);
+$primary-high: dark-light-diff($primary, $secondary, 30%, -25%);
+$primary-very-high: dark-light-diff($primary, $secondary, 15%, -10%);
+
+//header_primary
+$header_primary-low: dark-light-diff(
+  $header_primary,
+  $header_background,
+  90%,
+  -78%
+);
+$header_primary-low-mid: dark-light-diff(
+  $header_primary,
+  $header_background,
+  70%,
+  -45%
+);
+
+$header_primary-medium: dark-light-diff(
+  $header_primary,
+  $header_background,
+  50%,
+  -35%
+);
+$header_primary-high: dark-light-diff(
+  $header_primary,
+  $header_background,
+  30%,
+  -25%
+);
+$header_primary-very-high: dark-light-diff(
+  $header_primary,
+  $header_background,
+  15%,
+  -10%
+);
+
+//secondary
+$secondary-low: dark-light-diff($secondary, $primary, 70%, -70%);
+$secondary-medium: dark-light-diff($secondary, $primary, 50%, -50%);
+$secondary-high: dark-light-diff($secondary, $primary, 30%, -35%);
+$secondary-very-high: dark-light-diff($secondary, $primary, 7%, -7%);
+
+//tertiary
+$tertiary-low: dark-light-diff($tertiary, $secondary, 85%, -65%);
+$tertiary-medium: dark-light-diff($tertiary, $secondary, 50%, -45%);
+$tertiary-high: dark-light-diff($tertiary, $secondary, 20%, -25%);
+
+//quaternary
+$quaternary-low: dark-light-diff($quaternary, $secondary, 70%, -70%);
+
+//highlight
+$highlight-low: dark-light-diff($highlight, $secondary, 70%, -80%);
+$highlight-medium: dark-light-diff($highlight, $secondary, 50%, -55%);
+$highlight-high: dark-light-diff($highlight, $secondary, -50%, -10%);
+
+//danger
+$danger-low: dark-light-diff($danger, $secondary, 85%, -64%);
+$danger-medium: dark-light-diff($danger, $secondary, 30%, -35%);
+
+//success
+$success-low: dark-light-diff($success, $secondary, 80%, -60%);
+$success-medium: dark-light-diff($success, $secondary, 50%, -40%);
+
+//love
+$love-low: dark-light-diff($love, $secondary, 85%, -60%);
+
+//wiki
+$wiki: green;
+

config/locales/client.en.yml

@@ -109,6 +109,9 @@ en:
           min_length: "Min Length"
           min_length_placeholder: "Minimum length in characters"
           file_types: "File Types"
+          tag: "Tag"
+          category: "Category"
+          limit: "Limit"
         action:
           header: "Actions<sup>*</sup>"
           include: "Include Fields"
@@ -257,7 +260,17 @@ en:
         geo_location: "Search and select a result."
 
     select_kit:
-      filter_placeholder: "Search..."
+      default_header_text: Select...
+      no_content: No matches found
+      filter_placeholder: Search...
+      filter_placeholder_with_any: Search or create...
+      create: "Create: '{{content}}'"
+      max_content_reached:
+        one: "You can only select {{count}} item."
+        other: "You can only select {{count}} items."
+      min_content_not_reached:
+        one: "Select at least {{count}} item."
+        other: "Select at least {{count}} items."
 
     wizard:
       completed: "You have completed the {{name}} wizard."

lib/builder.rb

@@ -207,6 +207,10 @@ class CustomWizard::Builder
       params[:file_types] = field_template['file_types']
     end
     
+    if field_template['type'] === 'category' || field_template['type'] === 'tag'
+      params[:limit] = field_template['limit']
+    end
+
     field = step.add_field(params)
 
     if field_template['type'] === 'dropdown'

lib/field.rb

@@ -1,6 +1,6 @@
 class CustomWizard::Field
   def self.types
-    @types ||= ['checkbox', 'composer', 'dropdown', 'image', 'text', 'textarea', 'text-only', 'upload', 'user-selector']
+    @types ||= ['checkbox', 'composer', 'dropdown', 'tag', 'category', 'image', 'text', 'textarea', 'text-only', 'upload', 'user-selector']
   end
 
   def self.require_assets

lib/wizard_edits.rb

@@ -23,7 +23,7 @@ require_dependency 'wizard/step'
 end
 
 ::Wizard::Field.class_eval do
-  attr_reader :label, :description, :image, :key, :min_length, :file_types
+  attr_reader :label, :description, :image, :key, :min_length, :file_types, :limit
   attr_accessor :dropdown_none
 
   def initialize(attrs)
@@ -39,6 +39,7 @@ end
     @choices = []
     @dropdown_none = attrs[:dropdown_none]
     @file_types = attrs[:file_types]
+    @limit = attrs[:limit]
   end
 
   def label
@@ -65,7 +66,16 @@ class ::Wizard::Step
 end
 
 ::WizardSerializer.class_eval do
-  attributes :id, :name, :background, :completed, :required, :min_trust, :permitted, :user
+  attributes :id,
+             :name,
+             :background,
+             :completed,
+             :required,
+             :min_trust,
+             :permitted,
+             :user,
+             :categories,
+             :uncategorized_category_id
 
   def id
     object.id
@@ -132,6 +142,19 @@ end
   def user
     object.user
   end
+  
+  def categories
+    begin
+      site = ::Site.new(scope)
+      ::ActiveModel::ArraySerializer.new(site.categories, each_serializer: BasicCategorySerializer)
+    rescue => e
+      puts "HERE IS THE ERROR: #{e.inspect}"
+    end
+  end
+  
+  def uncategorized_category_id
+    SiteSetting.uncategorized_category_id
+  end
 end
 
 ::WizardStepSerializer.class_eval do
@@ -153,7 +176,7 @@ end
 end
 
 ::WizardFieldSerializer.class_eval do
-  attributes :dropdown_none, :image, :file_types
+  attributes :dropdown_none, :image, :file_types, :limit
 
   def label
     return object.label if object.label.present?
@@ -184,4 +207,8 @@ end
   def file_types
     object.file_types
   end
+  
+  def limit
+    object.limit
+  end
 end

views/layouts/wizard.html.erb

@@ -4,6 +4,7 @@
     <%= stylesheet_link_tag "wizard_custom", media: "all", "data-turbolinks-track" => "reload" %>
     <%= stylesheet_link_tag "wizard_composer", media: "all", "data-turbolinks-track" => "reload" %>
     <%= stylesheet_link_tag "wizard_variables", media: "all", "data-turbolinks-track" => "reload" %>
+    <%= stylesheet_link_tag "wizard_badges", media: "all", "data-turbolinks-track" => "reload" %>
     <%= stylesheet_link_tag "wizard_custom_mobile", media: "all", "data-turbolinks-track" => "reload" if mobile_view?%>
     <%- if theme_ids %>
       <%= discourse_stylesheet_link_tag (mobile_view? ? :mobile_theme : :desktop_theme) %>