From cb837f6e09c64128ea4eb9de4ee434dca3f2a62a Mon Sep 17 00:00:00 2001 From: teceler <19716939+teceler@users.noreply.github.com> Date: Wed, 1 Jan 2025 14:57:21 -0600 Subject: [PATCH] Clean up hiding things --- app/assets/javascripts/characters/editor.js | 4 ++-- app/assets/javascripts/galleries/add_new.js | 3 +-- app/assets/javascripts/galleries/edit.js | 4 ++-- app/assets/javascripts/users/new.js | 18 ++++++------------ app/assets/stylesheets/characters.scss | 5 +++++ app/assets/stylesheets/galleries.scss | 11 +++++++++++ app/assets/stylesheets/global.scss | 1 - app/assets/stylesheets/layout.scss | 1 + app/views/characters/_editor.haml | 2 +- app/views/characters/edit.haml | 2 +- app/views/characters/new.haml | 2 +- app/views/characters/replace.haml | 2 +- app/views/icons/_editor.haml | 16 ++++++++-------- app/views/users/new.haml | 10 +++++----- 14 files changed, 45 insertions(+), 36 deletions(-) diff --git a/app/assets/javascripts/characters/editor.js b/app/assets/javascripts/characters/editor.js index 14f4444f92..48ccbae85b 100644 --- a/app/assets/javascripts/characters/editor.js +++ b/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"); } }); diff --git a/app/assets/javascripts/galleries/add_new.js b/app/assets/javascripts/galleries/add_new.js index 337dfea502..b72970a7cf 100644 --- a/app/assets/javascripts/galleries/add_new.js +++ b/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() { diff --git a/app/assets/javascripts/galleries/edit.js b/app/assets/javascripts/galleries/edit.js index 44bdd23991..184d19d368 100644 --- a/app/assets/javascripts/galleries/edit.js +++ b/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(); diff --git a/app/assets/javascripts/users/new.js b/app/assets/javascripts/users/new.js index 28b151368b..e72077a263 100644 --- a/app/assets/javascripts/users/new.js +++ b/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'); } diff --git a/app/assets/stylesheets/characters.scss b/app/assets/stylesheets/characters.scss index 9bb2c56f5f..89cb16d18c 100644 --- a/app/assets/stylesheets/characters.scss +++ b/app/assets/stylesheets/characters.scss @@ -75,3 +75,8 @@ padding: 10px; } } + +#character-editor #create_template { + display: grid; + &.hidden { display: none; } +} diff --git a/app/assets/stylesheets/galleries.scss b/app/assets/stylesheets/galleries.scss index 7a461bb871..ffd2389917 100644 --- a/app/assets/stylesheets/galleries.scss +++ b/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 { diff --git a/app/assets/stylesheets/global.scss b/app/assets/stylesheets/global.scss index 4bc5ca49cb..59e1e7aec5 100644 --- a/app/assets/stylesheets/global.scss +++ b/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; } diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index 1d3fe5b7cb..c0e635c4e1 100644 --- a/app/assets/stylesheets/layout.scss +++ b/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) { diff --git a/app/views/characters/_editor.haml b/app/views/characters/_editor.haml index 9d87f1e784..1da045c4b1 100644 --- a/app/views/characters/_editor.haml +++ b/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} diff --git a/app/views/characters/edit.haml b/app/views/characters/edit.haml index fd9b1453e2..b3382ae6ed 100644 --- a/app/views/characters/edit.haml +++ b/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 diff --git a/app/views/characters/new.haml b/app/views/characters/new.haml index eb5aec5bb6..34c06d5b59 100644 --- a/app/views/characters/new.haml +++ b/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 diff --git a/app/views/characters/replace.haml b/app/views/characters/replace.haml index c31cda080b..8786db42f4 100644 --- a/app/views/characters/replace.haml +++ b/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) diff --git a/app/views/icons/_editor.haml b/app/views/icons/_editor.haml index 89c04a7825..9b8e9cf276 100644 --- a/app/views/icons/_editor.haml +++ b/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' diff --git a/app/views/users/new.haml b/app/views/users/new.haml index 3c7ab32f01..2eb07a1c1b 100644 --- a/app/views/users/new.haml +++ b/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'