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

fixed range input

Browse Source
This commit is contained in:
Candifloss 2024-10-25 21:34:03 +05:30
parent 42a47fe51e
commit e2359a5c1b
9 changed files with 348 additions and 293 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -1,2 +1,3 @@
.venv/ .venv/
test/scripts/csswatch.sh test/scripts/csswatch.sh
test/css/adduser.css.map

41
test/css/adduser.css
View File

@ -146,6 +146,7 @@ body .form-container form .radio-group input[type=radio]:checked + label.radio {
border-color: rgba(0, 170, 179, 0.8); border-color: rgba(0, 170, 179, 0.8);
} }
body .form-container form input[type=range] { body .form-container form input[type=range] {
--value: 0;
width: 100%; width: 100%;
height: 45px; height: 45px;
-webkit-appearance: none; -webkit-appearance: none;
@ -172,21 +173,20 @@ body .form-container form input[type=range]::-moz-range-track {
body .form-container form input[type=range]::-webkit-slider-thumb { body .form-container form input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
width: 45px; width: 0;
height: 45px; height: 45px;
border-radius: 50%; border-radius: 6px;
background-color: #007b8a; background-color: #007b8a;
border: 2px solid rgba(220, 220, 220, 0.8);
cursor: pointer; cursor: pointer;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
body .form-container form input[type=range]::-moz-range-thumb { body .form-container form input[type=range]::-moz-range-thumb {
width: 24px; width: 0;
height: 24px; height: 45px;
border-radius: 50%; border: none;
border-radius: 6px;
background-color: #007b8a; background-color: #007b8a;
border: 2px solid rgba(220, 220, 220, 0.8);
cursor: pointer; cursor: pointer;
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -198,27 +198,34 @@ body .form-container form input[type=range]:focus {
body .form-container form .submit-button { body .form-container form .submit-button {
flex: 1 1 100%; flex: 1 1 100%;
display: flex; display: flex;
justify-content: center; justify-content: space-between;
margin-top: 20px; margin-top: 20px;
} }
body .form-container form .submit-button button { body .form-container form .submit-button button {
width: 40%; width: 48%;
text-align: center; text-align: center;
padding: 12px; padding: 12px;
border-radius: 6px;
}
body .form-container form .submit-button button.clear-button {
background-color: #c4c4c4;
color: #ffffff;
}
body .form-container form .submit-button button.clear-button:hover {
background-color: #8f9091;
}
body .form-container form .submit-button button.clear-button:active {
transform: translateY(2px);
}
body .form-container form .submit-button button:not(.clear-button) {
background-color: #007b8a; background-color: #007b8a;
color: #ffffff; color: #ffffff;
border: none; border: none;
border-radius: 6px;
font-size: 18px;
font-weight: bold;
cursor: pointer;
transition: background-color 0.3s, transform 0.3s;
box-shadow: 0 4px 10px rgba(0, 123, 138, 0.3);
} }
body .form-container form .submit-button button:hover { body .form-container form .submit-button button:not(.clear-button):hover {
background-color: #006b7a; background-color: #006b7a;
} }
body .form-container form .submit-button button:active { body .form-container form .submit-button button:not(.clear-button):active {
transform: translateY(2px); transform: translateY(2px);
} }

2
test/css/adduser.css.map
View File

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["../scss/_common.scss","../scss/adduser.scss","../scss/_colors.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;;;AAIJ;EACI;;;ACLJ;EACI;EACA,YCcwB;EDbxB;EACA;EACA;EACA;EACA;;AAGA;EACI,kBCOmB;EDNnB;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI,OCFgB;EDGhB;EACA;EACA;EACA;;AAIJ;EACI;EACA;EACA;EACA;;AAGA;EACI;EACA;;AAGA;EACI;EACA,OCxBQ;EDyBR;EACA;;AAIJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAQI;EACA;EACA;EACA;EACA,kBCzCQ;ED0CR;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACI,cC5CY;ED6CZ;;AAMR;EACI;EACA,OCxDQ;EDyDR;EACA;;AAGJ;EACI;EACA;;AAGA;EACI;;AAIJ;EACI;EACA;EACA;EACA;EACA,kBC3EI;ED4EJ;EACA;EACA;EACA;EACA;;AAGA;EAEI,kBC7EY;ED8EZ,cCxEmB;;AD6E3B;EACI,kBCnFiB;EDoFjB,OCjFsB;EDkFtB,cC/EwB;;ADqFpC;EACI;EACA;EACA;;AAGJ;EACI;EACA;;AAGA;EACI;;AAIJ;EACI;EACA;EACA;EACA;EACA,kBCzHQ;ED0HR;EACA;EACA;EACA;EACA;;AAGA;EAEI,kBClHa;EDmHb,cC7GoB;;ADkH5B;EACI,kBCxHkB;EDyHlB,OCtHuB;EDuHvB,cCpHyB;;ADyHjC;EACI;EACA;EACA;EACA;EACA;EACA,kBCvJY;EDwJZ;EACA;EACA;EACA;;AAGA;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAIJ;EACI;EACA;EACA;EACA;EACA;EACA,kBChLI;EDiLJ;EACA;EAEA;EACA;;AAGJ;EACI;EACA;EACA;EACA,kBC5LI;ED6LJ;EACA;EACA;EACA;;AAGJ;EACI;EACA,cCtMgB;;AD2MxB;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA,kBCpNI;EDqNJ,OCnNS;EDoNT;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI,kBC9NM;;ADiOV;EACI","file":"adduser.css"} {"version":3,"sourceRoot":"","sources":["../scss/_common.scss","../scss/adduser.scss","../scss/_colors.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;;;AAIJ;EACI;;;ACLJ;EACC;EACA,YCc2B;EDb3B;EACA;EACA;EACA;EACA;;AAGA;EACC,kBCOyB;EDNzB;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACC,OCFyB;EDGzB;EACA;EACA;EACA;;AAID;EACC;EACA;EACA;EACA;;AAGA;EACC;EACA;;AAGA;EACC;EACA,OCxBuB;EDyBvB;EACA;;AAID;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAQC;EACA;EACA;EACA;EACA,kBCxCuB;EDyCvB;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACC,cC3C8B;ED4C9B;;AAMF;EACC;EACA,OCxDuB;EDyDvB;EACA;;AAGD;EACC;EACA;;AAGA;EACC;;AAID;EACC;EACA;EACA;EACA;EACA,kBC1EsB;ED2EtB;EACA;EACA;EACA;EACA;;AAGA;EAEC,kBCtEiC;EDuEjC,cCjEwC;;ADsE1C;EACC,kBC5EmC;ED6EnC,OC1EwC;ED2ExC,cCxE0C;;AD8E7C;EACC;EACA;EACA;;AAGD;EACC;EACA;;AAGA;EACC;;AAID;EACC;EACA;EACA;EACA;EACA,kBCxHuB;EDyHvB;EACA;EACA;EACA;EACA;;AAGA;EAEC,kBC1G+B;ED2G/B,cCrGsC;;AD0GxC;EACC,kBChHiC;EDiHjC,OC9GsC;ED+GtC,cC5GwC;;ADiH1C;EACC;EACA;EACA;EACA;EACA;EACA;EACA,kBCvJwB;EDwJxB;EACA;EACA;EACA;;AAGA;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;;AAID;EACC;EACA;EACA;EACA;EACA;EACA,kBC/KmB;EDiLnB;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA,kBC3LmB;ED4LnB;EACA;EACA;;AAGD;EACC;EACA,cCrM+B;;AD0MjC;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAGA;EACC,kBCjNwB;EDkNxB,OChN6B;;ADkN7B;EACC,kBCpN6B;;ADuN9B;EACC;;AAKF;EACC,kBCpOkB;EDqOlB,OCnOuB;EDoOvB;;AAEA;EACC,kBCxOuB;;AD2OxB;EACC","file":"adduser.css"}

17
test/html/adduser.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/home/ucadmin/Documents/Scripts/b/Test/ldapmanager/test/css/adduser.css"> <link rel="stylesheet" href="/home/lcm/Works/ldapmanager/test/css/adduser.css">
<title>Add New User</title> <title>Add New User</title>
</head> </head>
<body> <body>
@ -64,13 +64,12 @@
<div class="form-group"> <div class="form-group">
<label for="mobile_number">Mobile Number</label> <label for="mobile_number">Mobile Number</label>
<input type="tel" id="mobile_number" name="mobile_number" placeholder="Enter mobile number"> <input type="tel" id="mobile_number" name="mobile_number" placeholder="Enter mobile number">
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="experience_level">Experience Level</label> <label for="experience_level">Experience Level</label>
<input type="range" id="experience_level" name="experience_level" min="0" max="10" step="1"> <input type="range" class="range-slider" id="experience_level" name="experience_level" min="0" max="100" step="1">
</div> </div>
<div class="form-group role-dropdown"> <div class="form-group role-dropdown">
<label for="role">User Role</label> <label for="role">User Role</label>
@ -110,14 +109,16 @@
<input type="radio" id="inactive" name="account_status" value="inactive"> <input type="radio" id="inactive" name="account_status" value="inactive">
<label class="radio" for="inactive">Inactive</label> <label class="radio" for="inactive">Inactive</label>
</div> </div>
</div> </div>
<div class="form-group submit-button"> <div class="form-group submit-button">
<button type="reset" class="clear-button">Clear</button>
<button type="submit">Add User</button> <button type="submit">Add User</button>
</div> </div>
</form> </form>
</div> </div>
</body> </body>
<script src="/home/lcm/Works/ldapmanager/test/js/rangeslider.js"></script>
</html> </html>

8
test/html/login.html
View File

@ -1,12 +1,12 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/home/ucadmin/Documents/Scripts/b/Test/ldapmanager/test/css/login.css"> <link rel="stylesheet" href="/home/ucadmin/Documents/Scripts/b/Test/ldapmanager/test/css/login.css">
<title>Login Page</title> <title>Login Page</title>
</head> </head>
<body> <body>
<div class="left-container"> <div class="left-container">
<img src="/home/ucadmin/Documents/Scripts/b/Test/ldapmanager/test/images/logo2.png" alt="Company Logo" class="logo"> <img src="/home/ucadmin/Documents/Scripts/b/Test/ldapmanager/test/images/logo2.png" alt="Company Logo" class="logo">
@ -23,5 +23,5 @@
</form> </form>
</div> </div>
</body> </body>
</html> </html>

25
test/js/rangeslider.js Normal file
View File

@ -0,0 +1,25 @@
document.addEventListener('DOMContentLoaded', function () {
const rangeInputs = document.querySelectorAll('input[type="range"]');
rangeInputs.forEach(rangeInput => {
// Get the maximum value
const max = rangeInput.max;
// Get the initial value; if not set, default to 0
const initialValue = rangeInput.value ? Number(rangeInput.value) : 0; // This may not work on all browsers. Firefox defaults this to 50
// console.log("initial val: " + initialValue);
const initialPercentage = (initialValue / max) * 100;
// Set the initial thumb position
rangeInput.style.setProperty('--value', `${initialPercentage}%`);
rangeInput.addEventListener('input', function () {
const value = rangeInput.value;
const percentage = (value / max) * 100;
// Update the width of the thumb based on the percentage
rangeInput.style.setProperty('--value', `${percentage}%`);
});
});
});

4
test/scripts/csswatch.sh
View File

@ -1,6 +1,6 @@
#!/bin/bash #!/bin/bash
idir="/home/ucadmin/Documents/Scripts/b/Test/ldapmanager/test/scss" idir="/home/lcm/Works/ldapmanager/test/scss"
odir="/home/ucadmin/Documents/Scripts/b/Test/ldapmanager/test/css" odir="/home/lcm/Works/ldapmanager/test/css"
inotifywait -e modify -m -r $idir | while read events; do inotifywait -e modify -m -r $idir | while read events; do
sass $idir/:$odir/ sass $idir/:$odir/
done; done;

8
test/scss/_colors.scss
View File

@ -23,13 +23,20 @@ $add-user-header-color: #ffffff; // Header text color (white for contrast)
$add-user-form-background: rgba(255, 255, 255, 0.92); // Form background color $add-user-form-background: rgba(255, 255, 255, 0.92); // Form background color
$add-user-form-shadow-color: rgba(0, 0, 0, 0.25); // Form shadow color $add-user-form-shadow-color: rgba(0, 0, 0, 0.25); // Form shadow color
$add-user-form-title-color: #4e4e4e; // Form title color $add-user-form-title-color: #4e4e4e; // Form title color
$add-user-input-background: rgba(245, 245, 245, 0.9); // Input field background color $add-user-input-background: rgba(245, 245, 245, 0.9); // Input field background color
$add-user-input-border-color: rgba(220, 220, 220, 0.8); // Input field border color $add-user-input-border-color: rgba(220, 220, 220, 0.8); // Input field border color
$add-user-input-focus-border-color: #007b8a; // Focus border color for inputs $add-user-input-focus-border-color: #007b8a; // Focus border color for inputs
$add-user-button-color: #007b8a; // Primary button color $add-user-button-color: #007b8a; // Primary button color
$add-user-button-hover-color: #006b7a; // Button hover color $add-user-button-hover-color: #006b7a; // Button hover color
$add-user-button-text-color: #ffffff; // Button text color $add-user-button-text-color: #ffffff; // Button text color
$add-user-button-shadow: rgba(0, 123, 138, 0.3); // Button shadow color $add-user-button-shadow: rgba(0, 123, 138, 0.3); // Button shadow color
$add-user-clear-button-color: #c4c4c4;;
$add-user-clear-button-hover-color: #8f9091;
$add-user-clear-button-text-color: #ffffff;
$user-form-checkbox-button-color: #007b8a; $user-form-checkbox-button-color: #007b8a;
$user-form-checkbox-button-hover-color: rgba(232, 232, 232, 0.9); $user-form-checkbox-button-hover-color: rgba(232, 232, 232, 0.9);
$user-form-checkbox-button-active-color: #009299; $user-form-checkbox-button-active-color: #009299;
@ -39,6 +46,7 @@ $user-form-checkbox-button-active-text-color: #ffffff;
$user-form-checkbox-button-border-color: rgba(220, 220, 220, 0.8); $user-form-checkbox-button-border-color: rgba(220, 220, 220, 0.8);
$user-form-checkbox-button-hover-border-color: #007b8a; $user-form-checkbox-button-hover-border-color: #007b8a;
$user-form-checkbox-button-active-border-color: rgba(0, 170, 179, 0.8); $user-form-checkbox-button-active-border-color: rgba(0, 170, 179, 0.8);
$user-form-radio-button-color: #007b8a; $user-form-radio-button-color: #007b8a;
$user-form-radio-button-hover-color: rgba(232, 232, 232, 0.9); $user-form-radio-button-hover-color: rgba(232, 232, 232, 0.9);
$user-form-radio-button-active-color: #009299; $user-form-radio-button-active-color: #009299;

81
test/scss/adduser.scss
View File

@ -169,23 +169,24 @@ body {
// Style the range input to match the other form inputs // Style the range input to match the other form inputs
input[type="range"] { input[type="range"] {
width: 100%; // Full width of the form group --value: 0;
height: 45px; // Match the height of the other input fields width: 100%;
-webkit-appearance: none; // Remove default styling height: 45px;
-webkit-appearance: none;
appearance: none; appearance: none;
border-radius: 6px; // Rounded corners, matching other inputs border-radius: 6px;
background-color: $add-user-input-background; // Same background color as other inputs background-color: $add-user-input-background;
border: 1px solid $add-user-input-border-color; // Input field border color border: 1px solid $add-user-input-border-color;
cursor: pointer; // Change cursor on hover cursor: pointer;
padding: 0; // Remove any default padding padding: 0;
box-sizing: border-box; // Ensure padding is included in total width/height box-sizing: border-box;
// Style the filled portion of the track // Style the filled portion of the track
&::-webkit-slider-runnable-track { &::-webkit-slider-runnable-track {
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 6px; // Rounded corners border-radius: 6px;
background: linear-gradient(to right, $add-user-button-color 0%, $add-user-button-color var(--value), $add-user-input-background var(--value)); // Gradient to indicate value background: linear-gradient(to right, $add-user-button-color 0%, $add-user-button-color var(--value), $add-user-input-background var(--value));
} }
&::-moz-range-track { &::-moz-range-track {
@ -195,58 +196,69 @@ body {
background: linear-gradient(to right, $add-user-button-color 0%, $add-user-button-color var(--value), $add-user-input-background var(--value)); background: linear-gradient(to right, $add-user-button-color 0%, $add-user-button-color var(--value), $add-user-input-background var(--value));
} }
// Style the thumb // Slider thumb
&::-webkit-slider-thumb { &::-webkit-slider-thumb {
-webkit-appearance: none; // Remove default appearance -webkit-appearance: none;
appearance: none; appearance: none;
width: 45px; // Thumb size width: 0; // Smaller thumb size
height: 45px; height: 45px;
border-radius: 50%; // Make the thumb round border-radius: 6px;
background-color: $add-user-button-color; // Thumb color background-color: $add-user-button-color;
border: 2px solid $add-user-input-border-color; // Thumb border //border: 2px solid $add-user-input-border-color;
cursor: pointer; cursor: pointer;
//margin-top: -8px; // Center the thumb vertically
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
&::-moz-range-thumb { &::-moz-range-thumb {
width: 24px; width: 0; // Smaller thumb size
height: 24px; height: 45px;
border-radius: 50%; border: none;
border-radius: 6px;
background-color: $add-user-button-color; background-color: $add-user-button-color;
border: 2px solid $add-user-input-border-color;
cursor: pointer; cursor: pointer;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
&:focus { &:focus {
outline: none; // Remove default focus outline outline: none;
border-color: $add-user-input-focus-border-color; // Change border color on focus border-color: $add-user-input-focus-border-color;
} }
} }
// Submit button styling // Submit button styling
.submit-button { .submit-button {
flex: 1 1 100%; // Full width for the submit button flex: 1 1 100%; // Full width for the submit button
display: flex; // Use flex to center the button display: flex; // Use flex to align the buttons
justify-content: center; // Center the button justify-content: space-between; // Space between buttons
margin-top: 20px; // Space above the button margin-top: 20px; // Space above the buttons
button { button {
width: 40%; width: 48%; // Set both buttons to take up nearly half of the width
text-align: center; text-align: center;
padding: 12px; // Padding for button padding: 12px; // Padding for button
border-radius: 6px;
// Add styles for the clear button
&.clear-button {
background-color: $add-user-clear-button-color; // Define your clear button color in colors.scss
color: $add-user-clear-button-text-color; // Define clear button text color in colors.scss
&:hover {
background-color: $add-user-clear-button-hover-color; // Hover effect color
}
&:active {
transform: translateY(2px); // Subtle press effect
}
}
// Existing styles for submit button
&:not(.clear-button) {
background-color: $add-user-button-color; // Primary button color background-color: $add-user-button-color; // Primary button color
color: $add-user-button-text-color; color: $add-user-button-text-color;
border: none; border: none;
border-radius: 6px;
font-size: 18px;
font-weight: bold;
cursor: pointer;
transition: background-color 0.3s, transform 0.3s;
box-shadow: 0 4px 10px $add-user-button-shadow;
&:hover { &:hover {
background-color: $add-user-button-hover-color; // Button hover color background-color: $add-user-button-hover-color; // Button hover color
@ -259,4 +271,5 @@ body {
} }
} }
} }
}
} }