settings: Remove form-horizontal class from modal templates.

This commit removes form-horizontal class from various modal
templates. We add CSS for margin-bottom property for select
and input elements to keep the design same as before. Most
of the added CSS can be removed once we remove bootstrap
CSS completely for these elements.

We can safely remove this class since vertical-align property
is already present due to other bootstrap CSS. And
margin-bottom property for checkbox inputs are added by
bootstrap and for text inputs inside ".new-style" element it
is handled in app_components.css. For other inputs, this commit
adds CSS as mentioned above.

The display property for inputs other than checkbox and select
elements is set to inline-block by other bootstrap CSS.
For checkbox-type inputs browser sets display property to
inline-block but it is eventually computed to "block" as the
float property is set to left and so it is not required to
set display property for checkbox type inputs.
This commit is contained in:
Sahil Batra 2023-01-10 20:34:43 +05:30 committed by Tim Abbott
parent 8b7a911b0e
commit 802deb1761
8 changed files with 30 additions and 7 deletions

View File

@ -868,12 +868,20 @@ input[type="checkbox"] {
#bot-role-select:disabled {
opacity: 1;
}
select {
margin-bottom: 0;
}
}
#add-alert-word {
form {
margin-bottom: 4px;
}
input {
margin-bottom: 0;
}
}
.admin-linkifier-form,
@ -1851,6 +1859,17 @@ $option_title_width: 180px;
#edit-linkifier-format-status {
margin-top: 10px;
}
input {
margin-bottom: 0;
}
}
#edit-user-form,
#create-bot-form {
select {
margin-bottom: 0;
}
}
.settings_panel_list_header {
@ -1874,4 +1893,8 @@ $option_title_width: 180px;
cursor: default;
opacity: 0.7;
}
select {
margin-bottom: 0;
}
}

View File

@ -1,4 +1,4 @@
<form id="add-alert-word-form" class="form-horizontal">
<form id="add-alert-word-form">
<label for="add-alert-word-name">{{t "Alert word" }}</label>
<input type="text" name="alert-word-name" id="add-alert-word-name" class="required" maxlength=100 placeholder="{{t 'Alert word' }}" value="" />
</form>

View File

@ -1,4 +1,4 @@
<form id="create_bot_form" class="form-horizontal new-style">
<form id="create_bot_form" class="new-style">
<div class="new-bot-form">
<div class="input-group">
<label for="bot_type">

View File

@ -1,4 +1,4 @@
<form class="form-horizontal admin-profile-field-form new-style" id="add-new-custom-profile-field-form">
<form class="admin-profile-field-form new-style" id="add-new-custom-profile-field-form">
<div class="new-profile-field-form wrapper">
<div class="input-group">
<label for="profile_field_type" >{{t "Type" }}</label>

View File

@ -1,5 +1,5 @@
<div id="edit-user-form" data-user-id="{{user_id}}">
<form class="form-horizontal name-setting">
<form class="name-setting">
<input type="hidden" name="is_full_name" value="true" />
<div class="input-group name_change_container">
<label for="edit_user_full_name">{{t "Full name" }}</label>

View File

@ -1,5 +1,5 @@
<div id="edit-linkifier-form">
<form class="form-horizontal linkifier-edit-form">
<form class="linkifier-edit-form">
<div class="input-group name_change_container">
<label for="edit-linkifier-pattern" >{{t "Pattern" }}</label>
<input type="text" autocomplete="off" id="edit-linkifier-pattern" name="pattern" placeholder="#(?P<id>[0-9]+)" value="{{ pattern }}" />

View File

@ -1,5 +1,5 @@
<div id="bot-edit-form" data-user-id="{{user_id}}" data-email="{{email}}">
<form class="new-style edit_bot_form form-horizontal name-setting">
<form class="new-style edit_bot_form name-setting">
<div class="input-group name_change_container">
<label for="edit_bot_full_name">{{t "Full name" }}</label>
<input type="text" autocomplete="off" name="full_name" id="edit_bot_full_name" value="{{ full_name }}" />

View File

@ -1,5 +1,5 @@
{{#with profile_field_info}}
<form class="form-horizontal name-setting profile-field-form new-style" id="edit-custom-profile-field-form-{{id}}">
<form class="name-setting profile-field-form new-style" id="edit-custom-profile-field-form-{{id}}">
<div class="input-group">
<label for="name">{{t "Label" }}</label>
<input type="text" name="name" value="{{ name }}" maxlength="40" />