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

15
test/html/adduser.html
View File

@ -10,8 +10,8 @@
<div class="form-container">
<h2>Add New User</h2>
<form action="/add_user" method="post">
<fieldset name="main" class="main-form">
<form action="/add_user" method="post" id="user-form">
<fieldset name="main" class="main-form" form="user-form">
<div class="form-group">
<label for="full-name">Full Name</label>
<input type="text" id="full-name" name="full_name" placeholder="Full Name" required>
@ -24,12 +24,12 @@
<div class="form-group">
<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 class="form-group">
<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 class="form-group">
@ -113,8 +113,9 @@
</div>
</fieldset>
<fieldset class="collapsible-section">
<legend class="collapsible-section-title">Advanced</legend>
<label class="collapsible-section-title" for="collapsible-section-title-1">Advanced</label>
<input type="checkbox" class="false-header-checkbox" id="collapsible-section-title-1" checked>
<fieldset class="collapsible-section" form="user-form">
<div class="form-group">
<label for="employee-id">Employee ID</label>
<input type="text" id="employee-id" name="employee_id" placeholder="Employee ID">
@ -145,5 +146,5 @@
</div>
</body>
<script src="../js/rangeslider.js"></script >
<script src="../js/rangeslider.js"></script>
</html>

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

@ -3,7 +3,6 @@
// Collapsible sections in the form, like "Advanced"
@mixin collapsible {
padding-bottom: 3px;
.collapsible-section-title {
display: block;
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
@mixin drop-down-menu {
// Dropdown Menu
&.dropdown-menu {
flex: 1 1 calc(50% - 20px); // Half width, considering gap
min-width: 250px; // Minimum width to avoid shrinking too much
flex: 1 1 calc(50% - 20px); // Same width as other fields
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;
}
// Style the labels like buttons
label.radio {
width: 100%;
height: 100%;
@ -36,7 +37,7 @@
}
}
// Radio checked
// Radio button checked
input[type="radio"]:checked + label.radio {
background-color: $user-form-radio-button-active-color;
color: $user-form-radio-button-active-text-color;

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

@ -13,17 +13,16 @@ $form-range-slider-height: 45px;
@mixin slider_thumb {
display: none; // Hide the actual thing, since we use a different representation
appearance: none;
width: 0;
height: $form-range-slider-height;
width: 0; // Set everything to 0 or none to make sure it's hidden
height: 0;
border: none;
border-radius: $input-field-border-radius;
background-color: $user-form-range-slider-filled;
cursor: pointer;
border-radius: 0;
margin: 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:
linear-gradient(
to right,
@ -52,6 +51,7 @@ $form-range-slider-background-gradient:
@include slider_track;
}
// Firefox
&::-moz-range-track {
@include slider_track;
}
@ -62,6 +62,7 @@ $form-range-slider-background-gradient:
@include slider_thumb;
}
// Firefox
&::-moz-range-thumb {
@include slider_thumb;
}

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

@ -1,11 +1,11 @@
@use "../colors" as *;
@use "../vars" as *;
// Submit button styling
// Submit & clear buttons
@mixin submit-buttons {
.submit-buttons {
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
margin-top: 20px; // Space above the buttons
@ -15,7 +15,7 @@
padding: 12px;
border-radius: $input-field-border-radius;
// Add styles for the clear button
// Clear button
&.clear-button {
background-color: $add-user-clear-button-color;
color: $add-user-clear-button-text-color;
@ -25,7 +25,7 @@
}
}
// Existing styles for submit button
// Submit button
&.submit {
background-color: $add-user-button-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/drop-down-menu" 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
body {
@ -48,47 +50,18 @@ body {
.form-group {
flex: 1 1 calc(50% - 20px); // Take up half the row, accounting for gap
min-width: 250px; // Minimum width to prevent shrinking too much
//$input-field-border-radius: 6px;
// Label styling
label {
display: block;
color: $add-user-form-title-color;
font-size: 16px;
margin-bottom: 5px;
}
@include labels; // Label styling for all inputs
@include input_fields; // Common styles for all inputs
// Input and select styling
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
// Form groups for special input types
@include checkboxes;
@include drop-down-menu;
@include radio-buttons;
@include range-slider;
}
@include collapsible;
}
@include collapsible;
@include submit-buttons;
}
}