candifloss/ldapmanager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

restructured form sections

Browse Source
This commit is contained in:
Candifloss 2024-10-29 16:44:12 +05:30
parent f6727ab813
commit efe9796c39
6 changed files with 293 additions and 184 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

128
test/css/entry-form.css
View File

@ -36,30 +36,40 @@ body .form-container h2 {
display: block; display: block;
} }
body .form-container form { body .form-container form {
margin-bottom: 20px;
}
body .form-container form .main-form, body .form-container form .collapsible-section {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 20px; gap: 20px;
margin-bottom: 20px; padding-bottom: 3px;
} }
body .form-container form .form-group { body .form-container form .main-form .form-group, body .form-container form .collapsible-section .form-group {
flex: 1 1 calc(50% - 20px); flex: 1 1 calc(50% - 20px);
min-width: 250px; min-width: 250px;
--value: 50; --value: 50;
} }
body .form-container form .form-group label { body .form-container form .main-form .form-group label, body .form-container form .collapsible-section .form-group label {
display: block; display: block;
color: #4e4e4e; color: #4e4e4e;
font-size: 16px; font-size: 16px;
margin-bottom: 5px; margin-bottom: 5px;
} }
body .form-container form .form-group input[type=text], body .form-container form .main-form .form-group input[type=text],
body .form-container form .form-group input[type=password], body .form-container form .main-form .form-group input[type=password],
body .form-container form .form-group input[type=email], body .form-container form .main-form .form-group input[type=email],
body .form-container form .form-group input[type=date], body .form-container form .main-form .form-group input[type=date],
body .form-container form .form-group input[type=number], body .form-container form .main-form .form-group input[type=number],
body .form-container form .form-group input[type=datetime-local], body .form-container form .main-form .form-group input[type=datetime-local],
body .form-container form .form-group input[type=tel], body .form-container form .main-form .form-group input[type=tel],
body .form-container form .form-group select { body .form-container form .main-form .form-group select, body .form-container form .collapsible-section .form-group input[type=text],
body .form-container form .collapsible-section .form-group input[type=password],
body .form-container form .collapsible-section .form-group input[type=email],
body .form-container form .collapsible-section .form-group input[type=date],
body .form-container form .collapsible-section .form-group input[type=number],
body .form-container form .collapsible-section .form-group input[type=datetime-local],
body .form-container form .collapsible-section .form-group input[type=tel],
body .form-container form .collapsible-section .form-group select {
width: 100%; width: 100%;
padding: 12px; padding: 12px;
border: 1px solid rgba(220, 220, 220, 0.8); border: 1px solid rgba(220, 220, 220, 0.8);
@ -68,31 +78,38 @@ body .form-container form .form-group select {
font-size: 16px; font-size: 16px;
transition: border-color 0.3s, background-color 0.3s; transition: border-color 0.3s, background-color 0.3s;
} }
body .form-container form .form-group input[type=text]:focus, body .form-container form .main-form .form-group input[type=text]:focus,
body .form-container form .form-group input[type=password]:focus, body .form-container form .main-form .form-group input[type=password]:focus,
body .form-container form .form-group input[type=email]:focus, body .form-container form .main-form .form-group input[type=email]:focus,
body .form-container form .form-group input[type=date]:focus, body .form-container form .main-form .form-group input[type=date]:focus,
body .form-container form .form-group input[type=number]:focus, body .form-container form .main-form .form-group input[type=number]:focus,
body .form-container form .form-group input[type=datetime-local]:focus, body .form-container form .main-form .form-group input[type=datetime-local]:focus,
body .form-container form .form-group input[type=tel]:focus, body .form-container form .main-form .form-group input[type=tel]:focus,
body .form-container form .form-group select:focus { body .form-container form .main-form .form-group select:focus, body .form-container form .collapsible-section .form-group input[type=text]:focus,
body .form-container form .collapsible-section .form-group input[type=password]:focus,
body .form-container form .collapsible-section .form-group input[type=email]:focus,
body .form-container form .collapsible-section .form-group input[type=date]:focus,
body .form-container form .collapsible-section .form-group input[type=number]:focus,
body .form-container form .collapsible-section .form-group input[type=datetime-local]:focus,
body .form-container form .collapsible-section .form-group input[type=tel]:focus,
body .form-container form .collapsible-section .form-group select:focus {
border-color: #007b8a; border-color: #007b8a;
outline: none; outline: none;
} }
body .form-container form .form-group.checkbox-set label { body .form-container form .main-form .form-group.checkbox-set label, body .form-container form .collapsible-section .form-group.checkbox-set label {
display: block; display: block;
color: #4e4e4e; color: #4e4e4e;
font-size: 16px; font-size: 16px;
margin-bottom: 5px; margin-bottom: 5px;
} }
body .form-container form .form-group.checkbox-set .checkboxes { body .form-container form .main-form .form-group.checkbox-set .checkboxes, body .form-container form .collapsible-section .form-group.checkbox-set .checkboxes {
display: flex; display: flex;
gap: 10px; gap: 10px;
} }
body .form-container form .form-group.checkbox-set .checkboxes input[type=checkbox] { body .form-container form .main-form .form-group.checkbox-set .checkboxes input[type=checkbox], body .form-container form .collapsible-section .form-group.checkbox-set .checkboxes input[type=checkbox] {
display: none; display: none;
} }
body .form-container form .form-group.checkbox-set .checkboxes label.checkbox { body .form-container form .main-form .form-group.checkbox-set .checkboxes label.checkbox, body .form-container form .collapsible-section .form-group.checkbox-set .checkboxes label.checkbox {
cursor: pointer; cursor: pointer;
padding: 12px; padding: 12px;
border: 1px solid rgba(220, 220, 220, 0.8); border: 1px solid rgba(220, 220, 220, 0.8);
@ -104,27 +121,27 @@ body .form-container form .form-group.checkbox-set .checkboxes label.checkbox {
transition: background-color 0.3s, color 0.3s, border-color 0.3s; transition: background-color 0.3s, color 0.3s, border-color 0.3s;
user-select: none; user-select: none;
} }
body .form-container form .form-group.checkbox-set .checkboxes label.checkbox:hover, body .form-container form .form-group.checkbox-set .checkboxes label.checkbox:focus { body .form-container form .main-form .form-group.checkbox-set .checkboxes label.checkbox:hover, body .form-container form .main-form .form-group.checkbox-set .checkboxes label.checkbox:focus, body .form-container form .collapsible-section .form-group.checkbox-set .checkboxes label.checkbox:hover, body .form-container form .collapsible-section .form-group.checkbox-set .checkboxes label.checkbox:focus {
background-color: rgba(232, 232, 232, 0.9); background-color: rgba(232, 232, 232, 0.9);
border-color: #007b8a; border-color: #007b8a;
} }
body .form-container form .form-group.checkbox-set .checkboxes input[type=checkbox]:checked + label.checkbox { body .form-container form .main-form .form-group.checkbox-set .checkboxes input[type=checkbox]:checked + label.checkbox, body .form-container form .collapsible-section .form-group.checkbox-set .checkboxes input[type=checkbox]:checked + label.checkbox {
background-color: #009299; background-color: #009299;
color: #ffffff; color: #ffffff;
border-color: rgba(0, 170, 179, 0.8); border-color: rgba(0, 170, 179, 0.8);
} }
body .form-container form .form-group.dropdown-menu { body .form-container form .main-form .form-group.dropdown-menu, body .form-container form .collapsible-section .form-group.dropdown-menu {
flex: 1 1 calc(50% - 20px); flex: 1 1 calc(50% - 20px);
min-width: 250px; min-width: 250px;
} }
body .form-container form .form-group.radio-input .radio-group { body .form-container form .main-form .form-group.radio-input .radio-group, body .form-container form .collapsible-section .form-group.radio-input .radio-group {
display: flex; display: flex;
gap: 10px; gap: 10px;
} }
body .form-container form .form-group.radio-input .radio-group input[type=radio] { body .form-container form .main-form .form-group.radio-input .radio-group input[type=radio], body .form-container form .collapsible-section .form-group.radio-input .radio-group input[type=radio] {
display: none; display: none;
} }
body .form-container form .form-group.radio-input .radio-group label.radio { body .form-container form .main-form .form-group.radio-input .radio-group label.radio, body .form-container form .collapsible-section .form-group.radio-input .radio-group label.radio {
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 6px; border-radius: 6px;
@ -139,16 +156,16 @@ body .form-container form .form-group.radio-input .radio-group label.radio {
transition: background-color 0.3s, color 0.3s, border-color 0.3s; transition: background-color 0.3s, color 0.3s, border-color 0.3s;
user-select: none; user-select: none;
} }
body .form-container form .form-group.radio-input .radio-group label.radio:hover, body .form-container form .form-group.radio-input .radio-group label.radio:focus { body .form-container form .main-form .form-group.radio-input .radio-group label.radio:hover, body .form-container form .main-form .form-group.radio-input .radio-group label.radio:focus, body .form-container form .collapsible-section .form-group.radio-input .radio-group label.radio:hover, body .form-container form .collapsible-section .form-group.radio-input .radio-group label.radio:focus {
background-color: rgba(232, 232, 232, 0.9); background-color: rgba(232, 232, 232, 0.9);
border-color: #007b8a; border-color: #007b8a;
} }
body .form-container form .form-group.radio-input .radio-group input[type=radio]:checked + label.radio { body .form-container form .main-form .form-group.radio-input .radio-group input[type=radio]:checked + label.radio, body .form-container form .collapsible-section .form-group.radio-input .radio-group input[type=radio]:checked + label.radio {
background-color: #009299; background-color: #009299;
color: #ffffff; color: #ffffff;
border-color: rgba(0, 170, 179, 0.8); border-color: rgba(0, 170, 179, 0.8);
} }
body .form-container form .form-group input[type=range] { body .form-container form .main-form .form-group input[type=range], body .form-container form .collapsible-section .form-group input[type=range] {
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
width: 100%; width: 100%;
@ -160,17 +177,17 @@ body .form-container form .form-group input[type=range] {
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
} }
body .form-container form .form-group input[type=range]::-webkit-slider-runnable-track { body .form-container form .main-form .form-group input[type=range]::-webkit-slider-runnable-track, body .form-container form .collapsible-section .form-group input[type=range]::-webkit-slider-runnable-track {
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 6px; border-radius: 6px;
} }
body .form-container form .form-group input[type=range]::-moz-range-track { body .form-container form .main-form .form-group input[type=range]::-moz-range-track, body .form-container form .collapsible-section .form-group input[type=range]::-moz-range-track {
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 6px; border-radius: 6px;
} }
body .form-container form .form-group input[type=range]::-webkit-slider-thumb { body .form-container form .main-form .form-group input[type=range]::-webkit-slider-thumb, body .form-container form .collapsible-section .form-group input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none; -webkit-appearance: none;
display: none; display: none;
appearance: none; appearance: none;
@ -183,7 +200,7 @@ body .form-container form .form-group input[type=range]::-webkit-slider-thumb {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
body .form-container form .form-group input[type=range]::-moz-range-thumb { body .form-container form .main-form .form-group input[type=range]::-moz-range-thumb, body .form-container form .collapsible-section .form-group input[type=range]::-moz-range-thumb {
display: none; display: none;
appearance: none; appearance: none;
width: 0; width: 0;
@ -195,37 +212,60 @@ body .form-container form .form-group input[type=range]::-moz-range-thumb {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
body .form-container form .form-group input[type=range]:focus { body .form-container form .main-form .form-group input[type=range]:focus, body .form-container form .collapsible-section .form-group input[type=range]:focus {
outline: none; outline: none;
border-color: #007b8a; border-color: #007b8a;
} }
body .form-container form .form-group.submit-buttons { body .form-container form .main-form[open], body .form-container form .collapsible-section[open] {
background-color: #dadada;
border-radius: 6px;
}
body .form-container form .main-form[open] summary, body .form-container form .collapsible-section[open] summary {
color: #979797;
}
body .form-container form .main-form summary, body .form-container form .collapsible-section summary {
display: block;
width: 100%;
color: #b1b1b1;
font-weight: bold;
font-size: 18px;
cursor: pointer;
margin-bottom: 10px;
border-bottom: 2px solid rgba(220, 220, 220, 0.8);
padding: 10px 2px;
border-radius: 6px 6px 0 0;
}
body .form-container form .main-form summary:hover, body .form-container form .collapsible-section summary:hover {
color: #636363;
background-color: #d4d4d4;
}
body .form-container form .submit-buttons {
flex: 1 1 100%; flex: 1 1 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-top: 20px; margin-top: 20px;
} }
body .form-container form .form-group.submit-buttons button { body .form-container form .submit-buttons button {
width: 48%; width: 48%;
text-align: center; text-align: center;
padding: 12px; padding: 12px;
border-radius: 6px; border-radius: 6px;
} }
body .form-container form .form-group.submit-buttons button.clear-button { body .form-container form .submit-buttons button.clear-button {
background-color: #c4c4c4; background-color: #c4c4c4;
color: #ffffff; color: #ffffff;
} }
body .form-container form .form-group.submit-buttons button.clear-button:hover { body .form-container form .submit-buttons button.clear-button:hover {
background-color: #8f9091; background-color: #8f9091;
} }
body .form-container form .form-group.submit-buttons button.submit { body .form-container form .submit-buttons button.submit {
background-color: #007b8a; background-color: #007b8a;
color: #ffffff; color: #ffffff;
border: none; border: none;
} }
body .form-container form .form-group.submit-buttons button.submit:hover { body .form-container form .submit-buttons button.submit:hover {
background-color: #006b7a; background-color: #006b7a;
} }
body .form-container form .form-group.submit-buttons button:active { body .form-container form .submit-buttons button:active {
transform: translateY(2px); transform: translateY(2px);
} }

25
test/html/adduser.html
View File

@ -11,6 +11,7 @@
<div class="form-container"> <div class="form-container">
<h2>Add New User</h2> <h2>Add New User</h2>
<form action="/add_user" method="post"> <form action="/add_user" method="post">
<fieldset name="main" class="main-form">
<div class="form-group"> <div class="form-group">
<label for="full-name">Full Name</label> <label for="full-name">Full Name</label>
<input type="text" id="full-name" name="full_name" placeholder="Full Name" required> <input type="text" id="full-name" name="full_name" placeholder="Full Name" required>
@ -110,6 +111,30 @@
<label class="radio" for="inactive">Inactive</label> <label class="radio" for="inactive">Inactive</label>
</div> </div>
</div> </div>
</fieldset>
<details class="collapsible-section" open>
<summary>Advanced</summary>
<div class="form-group">
<label for="employee-id">Employee ID</label>
<input type="text" id="employee-id" name="employee_id" placeholder="Employee ID">
</div>
<div class="form-group">
<label for="office-location">Office Location</label>
<input type="text" id="office-location" name="office_location" placeholder="Office Location">
</div>
<div class="form-group">
<label for="backup-email">Backup Email</label>
<input type="email" id="backup-email" name="backup_email" placeholder="Backup Email">
</div>
<div class="form-group">
<label for="security-clearance">Security Clearance Level</label>
<input type="number" id="security-clearance" name="security_clearance" value="0" min="0" max="5" step="1">
</div>
</details>
<div class="form-group submit-buttons"> <div class="form-group submit-buttons">
<button type="reset" class="clear-button">Clear</button> <button type="reset" class="clear-button">Clear</button>

6
test/scss/_colors.scss
View File

@ -80,3 +80,9 @@ $user-form-radio-button-active-border-color: $user-form-checkbox-button-active-b
// Range slider // Range slider
$user-form-range-slider-background: $add-user-input-background; $user-form-range-slider-background: $add-user-input-background;
$user-form-range-slider-filled: $user-form-checkbox-button-active-color; $user-form-range-slider-filled: $user-form-checkbox-button-active-color;
// Collapsible section
$details-closed-summary-color: #b1b1b1;
$details-summary-hover-color: #636363;
$details-open-summary-color: #979797;
$details-summary-border-color: $add-user-input-border-color;

34
test/scss/entry-form-fields/_collapsible-section.scss Normal file
View File

@ -0,0 +1,34 @@
@use "../colors" as *;
@use "../vars" as *;
// Collapsible sections in the form, like "Advanced"
@mixin collapsible {
padding-bottom: 3px;
// Style when the section is expanded
&[open] {
summary {
color: $details-open-summary-color;
}
background-color: #dadada;
border-radius: 6px;
}
// Regular
summary {
display: block;
width: 100%;
color: $details-closed-summary-color;
font-weight: bold;
font-size: 18px;
cursor: pointer;
margin-bottom: 10px;
border-bottom: 2px solid $details-summary-border-color;
padding: 10px 2px;
border-radius: 6px 6px 0 0;
&:hover {
color: $details-summary-hover-color;
background-color: #d4d4d4;
}
}
}

2
test/scss/entry-form-fields/_submit-buttons.scss
View File

@ -3,7 +3,7 @@
// Submit button styling // Submit button styling
@mixin submit-buttons { @mixin submit-buttons {
&.submit-buttons { .submit-buttons {
flex: 1 1 100%; // Full width of the available space flex: 1 1 100%; // Full width of the available space
display: flex; // Use flex to align the buttons display: flex; // Use flex to align the buttons
justify-content: space-between; // Space between buttons justify-content: space-between; // Space between buttons

14
test/scss/entry-form.scss
View File

@ -1,10 +1,12 @@
@use "common"; // Reset styles @use "common"; // Reset styles
@use "colors" as *; // Color scheme @use "colors" as *; // Color scheme
@use "vars" as *;
@use "entry-form-fields/submit-buttons" as *; @use "entry-form-fields/submit-buttons" as *;
@use "entry-form-fields/range-slider" as *; @use "entry-form-fields/range-slider" as *;
@use "entry-form-fields/radio-buttons" as *; @use "entry-form-fields/radio-buttons" as *;
@use "entry-form-fields/checkboxes" as *; @use "entry-form-fields/checkboxes" as *;
@use "entry-form-fields/drop-down-menu" as *; @use "entry-form-fields/drop-down-menu" as *;
@use "entry-form-fields/collapsible-section" as *;
// Basic styling for the body // Basic styling for the body
body { body {
@ -38,16 +40,15 @@ body {
// Form element // Form element
form { form {
margin-bottom: 20px; // Add space below the form for submit button
.main-form, .collapsible-section {
display: flex; display: flex;
flex-wrap: wrap; // Allow wrapping for form groups flex-wrap: wrap; // Allow wrapping for form groups
gap: 20px; // Add consistent gap between elements gap: 20px; // Add consistent gap between elements
margin-bottom: 20px; // Add space below the form for submit button
// Form groups for each input
.form-group { .form-group {
flex: 1 1 calc(50% - 20px); // Take up half the row, accounting for gap flex: 1 1 calc(50% - 20px); // Take up half the row, accounting for gap
min-width: 250px; // Minimum width to prevent shrinking too much min-width: 250px; // Minimum width to prevent shrinking too much
$input-field-border-radius: 6px; //$input-field-border-radius: 6px;
// Label styling // Label styling
label { label {
@ -80,12 +81,15 @@ body {
} }
} }
// Form groups for each input
@include checkboxes; @include checkboxes;
@include drop-down-menu; @include drop-down-menu;
@include radio-buttons; @include radio-buttons;
@include range-slider; @include range-slider;
}
@include collapsible;
}
@include submit-buttons; @include submit-buttons;
} }
} }
} }
}