Clean up hiding things

app/assets/javascripts/characters/editor.js

@@ -31,11 +31,11 @@ $(document).ready(function() {
     $("#character_template_attributes_id").val('');
 
     if ($("#new_template").is(":checked")) {
-      $("#create_template").show();
+      $("#create_template").removeClass('hidden');
       oldTemplate = $("#character_template_id").val();
       $("#character_template_id").attr("disabled", true).val('').trigger("change.select2");
     } else {
-      $("#create_template").hide();
+      $("#create_template").addClass('hidden');
       $("#character_template_id").attr("disabled", false).val(oldTemplate).trigger("change.select2");
     }
   });

app/assets/javascripts/galleries/add_new.js

@@ -14,7 +14,6 @@ const emptyGif = "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEA
 
 $(document).ready(function() {
   fixButtons();
-  $('.conf').hide();
   $(".icon-row .input-cell").each(function() {
     $(this).keydown(processDirectionalKey);
   });
@@ -97,7 +96,7 @@ function addNewRow() {
   // handle the URL field specially
   // because uploads have special UI
   const urlField = inputs.first();
-  newRow.find('.conf').hide();
+  newRow.find('.conf').addClass('hidden');
   newRow.find('.conf .filename').text('');
   urlField.show();
   inputs.each(function() {

app/assets/javascripts/galleries/edit.js

@@ -8,8 +8,8 @@ $(document).ready(function() {
 function addUploadedIcon(url, s3Key, data, fileInput) {
   const iconId = fileInput.data('icon-id');
   const iconRow = "#icon-row-" + iconId;
-  $(iconRow + " .icon_conf").show();
-  $(iconRow + " .icon_url_field").hide();
+  $(iconRow + " .icon_conf").removeClass('hidden');
+  $(iconRow + " .icon_url_field").addClass('hidden');
   $(iconRow).find('input[id$=_url]').first().hide().val(url);
   $(iconRow).find('input[id$=_s3_key]').first().hide().val(s3Key);
   $("#loading-"+iconId).hide();

app/assets/javascripts/users/new.js

@@ -1,35 +1,29 @@
 /* global gon */
 let duplicateUsername = false;
 $(document).ready(function() {
-  $("#signup-username .user-alert").hide();
-  $("#signup-email .user-alert").hide();
-  $("#signup-password .user-alert").hide();
-  $("#signup-password-confirmation .user-alert").hide();
-  $("#signup-terms .user-alert").hide();
-
   $("#user_username").blur(function() {
-    $("#signup-username .user-alert").hide();
+    $("#signup-username .user-alert").addClass('hidden');
     validateUsername();
   });
 
   $("#user_email").blur(function() {
-    $("#signup-email .user-alert").hide();
+    $("#signup-email .user-alert").addClass('hidden');
     validateEmail();
   });
 
   $("#user_password").blur(function() {
-    $("#signup-password .user-alert").hide();
+    $("#signup-password .user-alert").addClass('hidden');
     validatePassword();
   });
 
   $("#user_password_confirmation").blur(function() {
-    $("#signup-password-confirmation .user-alert").hide();
+    $("#signup-password-confirmation .user-alert").addClass('hidden');
     validateConfirmation();
   });
 
   $("#new_user").submit(function() {
     // Clear existing alerts before validating
-    $(".user-alert").hide();
+    $(".user-alert").addClass('hidden');
 
     // Do not submit if any validation fails
     const usernameValid = validateUsername();
@@ -118,5 +112,5 @@ function validateTosAccepted() {
 
 function addAlertAfter(id, message) {
   $("#signup-" + id + " .user-alert span.msg").text(message);
-  $("#signup-" + id + " .user-alert").show();
+  $("#signup-" + id + " .user-alert").removeClass('hidden');
 }

app/assets/stylesheets/characters.scss

@@ -75,3 +75,8 @@
     padding: 10px;
   }
 }
+
+#character-editor #create_template {
+  display: grid;
+  &.hidden { display: none; }
+}

app/assets/stylesheets/galleries.scss

@@ -60,6 +60,17 @@
   .icon-edit-table { width: unset; }
 }
 
+.icon-edit-table {
+  .icon_conf, .icon_url_field {
+    display: grid;
+    &.hidden { display: none; }
+  }
+  .icon_conf {
+    grid-template-columns: 14px auto;
+    justify-items: center;
+  }
+}
+
 .gallery-editor #gallery_name { height: 23px; }
 
 .gallery-edit-form {

app/assets/stylesheets/global.scss

@@ -96,7 +96,6 @@ button, .button {
 .left-align { text-align: left; }
 .right-align { text-align: right; }
 .hidden { display: none; }
-.grid-hidden { display: none !important; }
 .float-left { float: left; }
 .float-right { float: right; }
 .float-none { float: none !important; }

app/assets/stylesheets/layout.scss

@@ -391,6 +391,7 @@ td, .table-list li { font-size: $font_size_small; }
       grid-template-columns: 16px auto;
       gap: 4px;
       justify-content: center;
+      &.hidden { display: none; }
     }
 
     #signup-secret > div:not(.sub), #signup-terms > div:not(.sub) {

app/views/characters/_editor.haml

@@ -23,7 +23,7 @@
         = check_box_tag :new_template, '1', params[:new_template].present?
         = label_tag :new_template, 'Create New Template'
 - if @character.user == current_user
-  #create_template{class: ('grid-hidden' unless params[:new_template])}
+  #create_template{class: ('hidden' unless params[:new_template])}
     = f.fields_for :template do |ff|
       .sub= ff.label :name, '↳ Name'
       %div{class: klass}

app/views/characters/edit.haml

@@ -12,7 +12,7 @@
 
 = form_for @character, url: @character, method: :put do |f|
   .character-form
-    .form-table
+    .form-table#character-editor
       .editor-title= @character.name
       = render 'editor', f: f
 

app/views/characters/new.haml

@@ -7,7 +7,7 @@
 = form_for @character, url: characters_path, method: :post do |f|
   = f.hidden_field :default_icon_id
   .character-form
-    .form-table
+    .form-table#character-editor
       .editor-title New Character
       = render 'editor', f: f
 

app/views/characters/replace.haml

@@ -21,7 +21,7 @@
 
 - content_for :options do
   = select_tag :icon_dropdown, options_for_select(@alt_dropdown, @alt.try(:id)), prompt: "No Character"
-  = select_tag :alias_dropdown, options_from_collection_for_select(@alt.try(:aliases), :id, :name), prompt: '— No alias —', class: ('grid-hidden' unless @alt.try(:aliases).present?)
+  = select_tag :alias_dropdown, options_from_collection_for_select(@alt.try(:aliases), :id, :name), prompt: '— No alias —', class: ('hidden' unless @alt.try(:aliases).present?)
 
 = form_for @character, url: do_replace_character_path(@character), method: :post do
   = render 'global/replace', obj: @character, name: @character.name, icon: @character.default_icon, alt_icon: @alts.first.try(:default_icon)

app/views/icons/_editor.haml

@@ -3,16 +3,16 @@
 .icons-box
   = icon_tag f.object, id: "icon-#{f.object.id}"
   = f.hidden_field :id
-  = loading_tag class: 'grid-hidden', id: "loading-#{f.object.id}"
+  = loading_tag class: 'hidden', id: "loading-#{f.object.id}"
 .form-table.icon-edit-table
   .gallery-icon-url{id: "icon-row-#{f.object.id}"}
     - klass = cycle('even', 'odd')
     .centered{class: klass} URL
     %div{class: klass}
-      .icon_conf{class: ('grid-hidden' unless f.object.uploaded?)}
-        = image_tag "icons/accept.png", class: 'vmid', alt: ''
+      .icon_conf{class: ('hidden' unless f.object.uploaded?)}
+        = image_tag "icons/accept.png", alt: ''
         Uploaded to site
-      .icon_url_field{class: ('grid-hidden' if f.object.uploaded?)}
+      .icon_url_field{class: ('hidden' if f.object.uploaded?)}
         = f.text_field :url, placeholder: "URL", class: 'text'
       = f.hidden_field :s3_key
   .gallery-icon-upload
@@ -30,11 +30,11 @@
     %div{class: klass}= f.text_field :credit, placeholder: "Credit", class: 'text'
   - if gif.present?
     .gallery-icon-remove.checkbox-field{class: cycle('even', 'odd')}
-      = gif.check_box :_destroy, class: 'vmid'
-      = gif.label :_destroy, 'Remove from Gallery', class: 'vmid'
+      = gif.check_box :_destroy
+      = gif.label :_destroy, 'Remove from Gallery'
     .gallery-icon-destroy.checkbox-field{class: cycle('even', 'odd')}
-      = f.check_box :_destroy, class: 'vmid'
-      = f.label :_destroy, 'Delete Icon', class: 'vmid'
+      = f.check_box :_destroy
+      = f.label :_destroy, 'Delete Icon'
   - if gif.nil?
     .submit-row.form-table-ender
       = submit_tag "Save", class: 'button'

app/views/users/new.haml

@@ -5,28 +5,28 @@
       .sub.vtop= f.label :username
       .even
         = f.text_field :username, placeholder: "Username", autofocus: true, autocomplete: "username", minlength: User::MIN_USERNAME_LEN, maxlength: User::MAX_USERNAME_LEN, required: true
-        .user-alert
+        .user-alert.hidden
           = image_tag 'icons/exclamation.png', alt: '!', title: ''
           %span.msg
     #signup-email
       .sub.vtop= f.label :email
       .odd
         = f.text_field :email, placeholder: "Email address", autocomplete: "email", type: "email", required: true
-        .user-alert
+        .user-alert.hidden
           = image_tag 'icons/exclamation.png', alt: '!', title: ''
           %span.msg
     #signup-password
       .sub.vtop= f.label :password
       .even
         = f.password_field :password, placeholder: "Password", autocomplete: "new-password", minlength: User::MIN_PASSWORD_LEN, required: true
-        .user-alert
+        .user-alert.hidden
           = image_tag 'icons/exclamation.png', alt: '!', title: ''
           %span.msg
     #signup-password-confirmation
       .sub.vtop= f.label :password_confirmation, 'Confirm'
       .odd
         = f.password_field :password_confirmation, placeholder: "Confirm Password", autocomplete: "new-password", minlength: User::MIN_PASSWORD_LEN, required: true
-        .user-alert
+        .user-alert.hidden
           = image_tag 'icons/exclamation.png', alt: '!', title: ''
           %span.msg
     #signup-secret
@@ -48,7 +48,7 @@
             = link_to 'Terms of Service', tos_path
             and the
             = link_to 'Privacy Policy', privacy_path
-        .user-alert
+        .user-alert.hidden
           = image_tag 'icons/exclamation.png', alt: '!', title: ''
           %span.msg
     .form-table-ender= submit_tag "Sign Up", class: 'button'