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

fixed collapsible section; scss clean-up

Browse Source
This commit is contained in:
Candifloss 2024-10-30 14:08:28 +05:30
parent f137db1707
commit f9c45de019
10 changed files with 89 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -42,7 +42,6 @@ body .form-container form fieldset {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 20px; gap: 20px;
padding-bottom: 3px;
} }
body .form-container form fieldset .form-group { body .form-container form fieldset .form-group {
flex: 1 1 calc(50% - 20px); flex: 1 1 calc(50% - 20px);
@ -178,31 +177,29 @@ body .form-container form fieldset .form-group input[type=range]::-webkit-slider
display: none; display: none;
appearance: none; appearance: none;
width: 0; width: 0;
height: 45px; height: 0;
border: none; border: none;
border-radius: 6px; border-radius: 0;
background-color: #009299;
cursor: pointer;
margin: 0; margin: 0;
padding: 0; padding: 0;
cursor: pointer;
} }
body .form-container form fieldset .form-group input[type=range]::-moz-range-thumb { body .form-container form fieldset .form-group input[type=range]::-moz-range-thumb {
display: none; display: none;
appearance: none; appearance: none;
width: 0; width: 0;
height: 45px; height: 0;
border: none; border: none;
border-radius: 6px; border-radius: 0;
background-color: #009299;
cursor: pointer;
margin: 0; margin: 0;
padding: 0; padding: 0;
cursor: pointer;
} }
body .form-container form fieldset .form-group input[type=range]:focus { body .form-container form fieldset .form-group input[type=range]:focus {
outline: none; outline: none;
border-color: #007b8a; border-color: #007b8a;
} }
body .form-container form fieldset .collapsible-section-title { body .form-container form .collapsible-section-title {
display: block; display: block;
width: 100%; width: 100%;
color: #b1b1b1; color: #b1b1b1;
@ -213,10 +210,13 @@ body .form-container form fieldset .collapsible-section-title {
border-bottom: 2px solid rgba(220, 220, 220, 0.8); border-bottom: 2px solid rgba(220, 220, 220, 0.8);
padding: 10px 2px; padding: 10px 2px;
} }
body .form-container form fieldset .collapsible-section-title:hover { body .form-container form .collapsible-section-title:hover {
color: #636363; color: #636363;
background-color: #d4d4d4; background-color: #d4d4d4;
} }
body .form-container form #collapsible-section-title-1:checked + .collapsible-section {
display: none;
}
body .form-container form .submit-buttons { body .form-container form .submit-buttons {
flex: 1 1 100%; flex: 1 1 100%;
display: flex; display: flex;

15
test/html/adduser.html
View File

@ -10,8 +10,8 @@
<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" id="user-form">
<fieldset name="main" class="main-form"> <fieldset name="main" class="main-form" form="user-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>
@ -24,12 +24,12 @@
<div class="form-group"> <div class="form-group">
<label for="password">Password</label> <label for="password">Password</label>
<input type="password" id="password" name="password" placeholder="Password" required> <input type="password" id="password" name="password" pattern="^(?=.*[A-Z])(?=.*[a-z])(?=.*\W).{8,}$" placeholder="Password" required>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="passwordconfirm">Confirm password</label> <label for="passwordconfirm">Confirm password</label>
<input type="password" id="passwordconfirm" name="passwordconfirm" placeholder="Re-enter password" required> <input type="password" id="passwordconfirm" name="passwordconfirm" pattern="^(?=.*[A-Z])(?=.*[a-z])(?=.*\W).{8,}$" placeholder="Re-enter password" required>
</div> </div>
<div class="form-group"> <div class="form-group">
@ -113,8 +113,9 @@
</div> </div>
</fieldset> </fieldset>
<fieldset class="collapsible-section"> <label class="collapsible-section-title" for="collapsible-section-title-1">Advanced</label>
<legend class="collapsible-section-title">Advanced</legend> <input type="checkbox" class="false-header-checkbox" id="collapsible-section-title-1" checked>
<fieldset class="collapsible-section" form="user-form">
<div class="form-group"> <div class="form-group">
<label for="employee-id">Employee ID</label> <label for="employee-id">Employee ID</label>
<input type="text" id="employee-id" name="employee_id" placeholder="Employee ID"> <input type="text" id="employee-id" name="employee_id" placeholder="Employee ID">
@ -145,5 +146,5 @@
</div> </div>
</body> </body>
<script src="../js/rangeslider.js"></script > <script src="../js/rangeslider.js"></script>
</html> </html>

4
test/scss/entry-form-fields/_collapsible-section.scss
View File

@ -3,7 +3,6 @@
// Collapsible sections in the form, like "Advanced" // Collapsible sections in the form, like "Advanced"
@mixin collapsible { @mixin collapsible {
padding-bottom: 3px;
.collapsible-section-title { .collapsible-section-title {
display: block; display: block;
width: 100%; width: 100%;
@ -21,4 +20,7 @@
} }
} }
#collapsible-section-title-1:checked + .collapsible-section {
display: none;
}
} }

5
test/scss/entry-form-fields/_drop-down-menu.scss
View File

@ -3,9 +3,8 @@
// Drop-down menus // Drop-down menus
@mixin drop-down-menu { @mixin drop-down-menu {
// Dropdown Menu
&.dropdown-menu { &.dropdown-menu {
flex: 1 1 calc(50% - 20px); // Half width, considering gap flex: 1 1 calc(50% - 20px); // Same width as other fields
min-width: 250px; // Minimum width to avoid shrinking too much min-width: 250px;
} }
} }

27
test/scss/entry-form-fields/_input_fields.scss Normal file
View File

@ -0,0 +1,27 @@
@use "../colors" as *;
@use "../vars" as *;
// Input fields and drop-down menu styling
@mixin input_fields {
input[type="text"],
input[type="password"],
input[type="email"],
input[type="date"],
input[type="number"],
input[type="datetime-local"],
input[type="tel"],
select {
width: 100%; // Full width of the form group div
padding: 12px;
border: 1px solid $add-user-input-border-color;
border-radius: $input-field-border-radius;
background-color: $add-user-input-background;
font-size: 16px;
transition: border-color 0.3s, background-color 0.3s;
&:focus {
border-color: $add-user-input-focus-border-color;
outline: none;
}
}
}

12
test/scss/entry-form-fields/_labels.scss Normal file
View File

@ -0,0 +1,12 @@
@use "../colors" as *;
@use "../vars" as *;
// Labels
@mixin labels {
label {
display: block;
color: $add-user-form-title-color;
font-size: 16px;
margin-bottom: 5px;
}
}

3
test/scss/entry-form-fields/_radio-buttons.scss
View File

@ -13,6 +13,7 @@
display: none; display: none;
} }
// Style the labels like buttons
label.radio { label.radio {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -36,7 +37,7 @@
} }
} }
// Radio checked // Radio button checked
input[type="radio"]:checked + label.radio { input[type="radio"]:checked + label.radio {
background-color: $user-form-radio-button-active-color; background-color: $user-form-radio-button-active-color;
color: $user-form-radio-button-active-text-color; color: $user-form-radio-button-active-text-color;

27
test/scss/entry-form-fields/_range-slider.scss
View File

@ -13,24 +13,23 @@ $form-range-slider-height: 45px;
@mixin slider_thumb { @mixin slider_thumb {
display: none; // Hide the actual thing, since we use a different representation display: none; // Hide the actual thing, since we use a different representation
appearance: none; appearance: none;
width: 0; width: 0; // Set everything to 0 or none to make sure it's hidden
height: $form-range-slider-height; height: 0;
border: none; border: none;
border-radius: $input-field-border-radius; border-radius: 0;
background-color: $user-form-range-slider-filled;
cursor: pointer;
margin: 0; margin: 0;
padding: 0; padding: 0;
cursor: pointer;
} }
// This gradient makes it look like a progress-bar, filled upto `--value` // This gradient makes it look like a progress-bar filled upto `--value`
$form-range-slider-background-gradient: $form-range-slider-background-gradient:
linear-gradient( linear-gradient(
to right, to right,
$user-form-range-slider-filled 0%, $user-form-range-slider-filled 0%,
$user-form-range-slider-filled var(--value), $user-form-range-slider-filled var(--value),
$user-form-range-slider-background 0% $user-form-range-slider-background 0%
); );
// Range input, styled as a progress bar // Range input, styled as a progress bar
@mixin range-slider { @mixin range-slider {
@ -52,6 +51,7 @@ $form-range-slider-background-gradient:
@include slider_track; @include slider_track;
} }
// Firefox
&::-moz-range-track { &::-moz-range-track {
@include slider_track; @include slider_track;
} }
@ -62,6 +62,7 @@ $form-range-slider-background-gradient:
@include slider_thumb; @include slider_thumb;
} }
// Firefox
&::-moz-range-thumb { &::-moz-range-thumb {
@include slider_thumb; @include slider_thumb;
} }

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

@ -1,11 +1,11 @@
@use "../colors" as *; @use "../colors" as *;
@use "../vars" as *; @use "../vars" as *;
// Submit button styling // Submit & clear buttons
@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; // To align the contents(buttons)
justify-content: space-between; // Space between buttons justify-content: space-between; // Space between buttons
margin-top: 20px; // Space above the buttons margin-top: 20px; // Space above the buttons
@ -15,7 +15,7 @@
padding: 12px; padding: 12px;
border-radius: $input-field-border-radius; border-radius: $input-field-border-radius;
// Add styles for the clear button // Clear button
&.clear-button { &.clear-button {
background-color: $add-user-clear-button-color; background-color: $add-user-clear-button-color;
color: $add-user-clear-button-text-color; color: $add-user-clear-button-text-color;
@ -25,7 +25,7 @@
} }
} }
// Existing styles for submit button // Submit button
&.submit { &.submit {
background-color: $add-user-button-color; background-color: $add-user-button-color;
color: $add-user-button-text-color; color: $add-user-button-text-color;

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

@ -7,6 +7,8 @@
@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 *; @use "entry-form-fields/collapsible-section" as *;
@use "entry-form-fields/input_fields" as *;
@use "entry-form-fields/labels" as *;
// Basic styling for the body // Basic styling for the body
body { body {
@ -48,47 +50,18 @@ body {
.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;
// Label styling @include labels; // Label styling for all inputs
label { @include input_fields; // Common styles for all inputs
display: block;
color: $add-user-form-title-color;
font-size: 16px;
margin-bottom: 5px;
}
// Input and select styling // Form groups for special input types
input[type="text"],
input[type="password"],
input[type="email"],
input[type="date"],
input[type="number"],
input[type="datetime-local"],
input[type="tel"],
select {
width: 100%; // Full width of the form group
padding: 12px;
border: 1px solid $add-user-input-border-color;
border-radius: $input-field-border-radius;
background-color: $add-user-input-background;
font-size: 16px;
transition: border-color 0.3s, background-color 0.3s;
&:focus {
border-color: $add-user-input-focus-border-color;
outline: none;
}
}
// 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 collapsible;
@include submit-buttons; @include submit-buttons;
} }
} }