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

minor restructuring

Browse Source
This commit is contained in:
Candifloss 2024-10-29 23:32:45 +05:30
parent efe9796c39
commit f137db1707
4 changed files with 46 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -38,38 +38,31 @@ body .form-container h2 {
body .form-container form { body .form-container form {
margin-bottom: 20px; margin-bottom: 20px;
} }
body .form-container form .main-form, body .form-container form .collapsible-section { body .form-container form fieldset {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 20px; gap: 20px;
padding-bottom: 3px; padding-bottom: 3px;
} }
body .form-container form .main-form .form-group, body .form-container form .collapsible-section .form-group { body .form-container form fieldset .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 .main-form .form-group label, body .form-container form .collapsible-section .form-group label { body .form-container form fieldset .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 .main-form .form-group input[type=text], body .form-container form fieldset .form-group input[type=text],
body .form-container form .main-form .form-group input[type=password], body .form-container form fieldset .form-group input[type=password],
body .form-container form .main-form .form-group input[type=email], body .form-container form fieldset .form-group input[type=email],
body .form-container form .main-form .form-group input[type=date], body .form-container form fieldset .form-group input[type=date],
body .form-container form .main-form .form-group input[type=number], body .form-container form fieldset .form-group input[type=number],
body .form-container form .main-form .form-group input[type=datetime-local], body .form-container form fieldset .form-group input[type=datetime-local],
body .form-container form .main-form .form-group input[type=tel], body .form-container form fieldset .form-group input[type=tel],
body .form-container form .main-form .form-group select, body .form-container form .collapsible-section .form-group input[type=text], body .form-container form fieldset .form-group select {
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);
@ -78,38 +71,31 @@ body .form-container form .collapsible-section .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 .main-form .form-group input[type=text]:focus, body .form-container form fieldset .form-group input[type=text]:focus,
body .form-container form .main-form .form-group input[type=password]:focus, body .form-container form fieldset .form-group input[type=password]:focus,
body .form-container form .main-form .form-group input[type=email]:focus, body .form-container form fieldset .form-group input[type=email]:focus,
body .form-container form .main-form .form-group input[type=date]:focus, body .form-container form fieldset .form-group input[type=date]:focus,
body .form-container form .main-form .form-group input[type=number]:focus, body .form-container form fieldset .form-group input[type=number]:focus,
body .form-container form .main-form .form-group input[type=datetime-local]:focus, body .form-container form fieldset .form-group input[type=datetime-local]:focus,
body .form-container form .main-form .form-group input[type=tel]:focus, body .form-container form fieldset .form-group input[type=tel]: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 fieldset .form-group select: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 .main-form .form-group.checkbox-set label, body .form-container form .collapsible-section .form-group.checkbox-set label { body .form-container form fieldset .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 .main-form .form-group.checkbox-set .checkboxes, body .form-container form .collapsible-section .form-group.checkbox-set .checkboxes { body .form-container form fieldset .form-group.checkbox-set .checkboxes {
display: flex; display: flex;
gap: 10px; gap: 10px;
} }
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] { body .form-container form fieldset .form-group.checkbox-set .checkboxes input[type=checkbox] {
display: none; display: none;
} }
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 { body .form-container form fieldset .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);
@ -121,27 +107,27 @@ body .form-container form .main-form .form-group.checkbox-set .checkboxes label.
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 .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 { body .form-container form fieldset .form-group.checkbox-set .checkboxes label.checkbox:hover, body .form-container form fieldset .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 .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 { body .form-container form fieldset .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 .main-form .form-group.dropdown-menu, body .form-container form .collapsible-section .form-group.dropdown-menu { body .form-container form fieldset .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 .main-form .form-group.radio-input .radio-group, body .form-container form .collapsible-section .form-group.radio-input .radio-group { body .form-container form fieldset .form-group.radio-input .radio-group {
display: flex; display: flex;
gap: 10px; gap: 10px;
} }
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] { body .form-container form fieldset .form-group.radio-input .radio-group input[type=radio] {
display: none; display: none;
} }
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 { body .form-container form fieldset .form-group.radio-input .radio-group label.radio {
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 6px; border-radius: 6px;
@ -156,16 +142,16 @@ body .form-container form .main-form .form-group.radio-input .radio-group label.
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 .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 { body .form-container form fieldset .form-group.radio-input .radio-group label.radio:hover, body .form-container form fieldset .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 .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 { body .form-container form fieldset .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 .main-form .form-group input[type=range], body .form-container form .collapsible-section .form-group input[type=range] { body .form-container form fieldset .form-group input[type=range] {
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
width: 100%; width: 100%;
@ -177,17 +163,17 @@ body .form-container form .main-form .form-group input[type=range], body .form-c
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
} }
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 { body .form-container form fieldset .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 .main-form .form-group input[type=range]::-moz-range-track, body .form-container form .collapsible-section .form-group input[type=range]::-moz-range-track { body .form-container form fieldset .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 .main-form .form-group input[type=range]::-webkit-slider-thumb, body .form-container form .collapsible-section .form-group input[type=range]::-webkit-slider-thumb { body .form-container form fieldset .form-group input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none; -webkit-appearance: none;
display: none; display: none;
appearance: none; appearance: none;
@ -200,7 +186,7 @@ body .form-container form .main-form .form-group input[type=range]::-webkit-slid
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
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 { 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;
@ -212,18 +198,11 @@ body .form-container form .main-form .form-group input[type=range]::-moz-range-t
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
body .form-container form .main-form .form-group input[type=range]:focus, body .form-container form .collapsible-section .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 .main-form[open], body .form-container form .collapsible-section[open] { body .form-container form fieldset .collapsible-section-title {
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; display: block;
width: 100%; width: 100%;
color: #b1b1b1; color: #b1b1b1;
@ -233,9 +212,8 @@ body .form-container form .main-form summary, body .form-container form .collaps
margin-bottom: 10px; margin-bottom: 10px;
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;
border-radius: 6px 6px 0 0;
} }
body .form-container form .main-form summary:hover, body .form-container form .collapsible-section summary:hover { body .form-container form fieldset .collapsible-section-title:hover {
color: #636363; color: #636363;
background-color: #d4d4d4; background-color: #d4d4d4;
} }

10
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/entry-form.css"> <link rel="stylesheet" href="../css/entry-form.css">
<title>Add New User</title> <title>Add New User</title>
</head> </head>
<body> <body>
@ -113,8 +113,8 @@
</div> </div>
</fieldset> </fieldset>
<details class="collapsible-section" open> <fieldset class="collapsible-section">
<summary>Advanced</summary> <legend class="collapsible-section-title">Advanced</legend>
<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">
@ -134,7 +134,7 @@
<label for="security-clearance">Security Clearance Level</label> <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"> <input type="number" id="security-clearance" name="security_clearance" value="0" min="0" max="5" step="1">
</div> </div>
</details> </fieldset>
<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>
@ -145,5 +145,5 @@
</div> </div>
</body> </body>
<script src="/home/ucadmin/Documents/Scripts/b/Test/ldapmanager/test/js/rangeslider.js"></script > <script src="../js/rangeslider.js"></script >
</html> </html>

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

@ -4,16 +4,7 @@
// Collapsible sections in the form, like "Advanced" // Collapsible sections in the form, like "Advanced"
@mixin collapsible { @mixin collapsible {
padding-bottom: 3px; padding-bottom: 3px;
// Style when the section is expanded .collapsible-section-title {
&[open] {
summary {
color: $details-open-summary-color;
}
background-color: #dadada;
border-radius: 6px;
}
// Regular
summary {
display: block; display: block;
width: 100%; width: 100%;
color: $details-closed-summary-color; color: $details-closed-summary-color;
@ -23,7 +14,6 @@
margin-bottom: 10px; margin-bottom: 10px;
border-bottom: 2px solid $details-summary-border-color; border-bottom: 2px solid $details-summary-border-color;
padding: 10px 2px; padding: 10px 2px;
border-radius: 6px 6px 0 0;
&:hover { &:hover {
color: $details-summary-hover-color; color: $details-summary-hover-color;

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

@ -41,7 +41,7 @@ body {
// Form element // Form element
form { form {
margin-bottom: 20px; // Add space below the form for submit button margin-bottom: 20px; // Add space below the form for submit button
.main-form, .collapsible-section { fieldset {
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