search page
This commit is contained in:
parent
494af30e43
commit
acfb0ddfc6
156
test/css/search.css
Normal file
156
test/css/search.css
Normal file
@ -0,0 +1,156 @@
|
||||
* {
|
||||
all: unset;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Arial", sans-serif;
|
||||
background: linear-gradient(135deg, #283e4a, #1c2e38);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
padding: 20px;
|
||||
}
|
||||
body .search-page {
|
||||
background-color: rgba(255, 255, 255, 0.92);
|
||||
padding: 40px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.25);
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
body .search-page .search-bar {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
padding: 20px 20px 10px 20px;
|
||||
border-radius: 12px 12px 0 0;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: #c4c4c4;
|
||||
height: 75px;
|
||||
}
|
||||
body .search-page .search-bar input[type=text],
|
||||
body .search-page .search-bar select {
|
||||
flex: 1;
|
||||
height: 45px;
|
||||
padding: 10px;
|
||||
background-color: rgba(245, 245, 245, 0.9);
|
||||
border: 1px solid rgba(220, 220, 220, 0.8);
|
||||
border-radius: 6px;
|
||||
font-size: 16px;
|
||||
}
|
||||
body .search-page .search-bar input[type=text]:hover,
|
||||
body .search-page .search-bar select:hover {
|
||||
border-color: #007b8a;
|
||||
}
|
||||
body .search-page .search-bar input[type=text]:focus,
|
||||
body .search-page .search-bar select:focus {
|
||||
border-color: #007b8a;
|
||||
}
|
||||
body .search-page .search-bar select {
|
||||
max-width: 25%;
|
||||
}
|
||||
body .search-page .search-bar button[type=submit] {
|
||||
padding: 10px 20px;
|
||||
font-size: 16px;
|
||||
height: 45px;
|
||||
background-color: rgba(245, 245, 245, 0.9);
|
||||
color: #4e4e4e;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
body .search-page .search-bar button[type=submit]:hover {
|
||||
background-color: #007b8a;
|
||||
color: #ffffff;
|
||||
border-color: #007b8a;
|
||||
}
|
||||
body .search-page .search-bar button[type=submit]:active {
|
||||
background-color: rgba(232, 232, 232, 0.9);
|
||||
color: #007b8a;
|
||||
border-color: #007b8a;
|
||||
}
|
||||
body .search-page .search-results {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
padding: 20px;
|
||||
min-height: 800px;
|
||||
}
|
||||
body .search-page .search-results .search-result {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
padding: 12px 10px;
|
||||
border-radius: 6px;
|
||||
transition: background-color 0.3s;
|
||||
background-color: #e1e1e1;
|
||||
}
|
||||
body .search-page .search-results .search-result:hover {
|
||||
background-color: #b9b9b9;
|
||||
}
|
||||
body .search-page .search-results .search-result .details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
body .search-page .search-results .search-result .details .primary-key {
|
||||
font-size: 16px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
body .search-page .search-results .search-result .details .info-row {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
body .search-page .search-results .search-result .details .info-row * {
|
||||
font-size: 15px;
|
||||
color: #666;
|
||||
}
|
||||
body .search-page .search-results .search-result .actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-self: flex-start;
|
||||
visibility: hidden;
|
||||
}
|
||||
body .search-page .search-results .search-result .actions button {
|
||||
padding: 6px 12px;
|
||||
font-size: 12px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
body .search-page .search-results .search-result .actions button.edit {
|
||||
background-color: rgba(245, 245, 245, 0.9);
|
||||
color: #4e4e4e;
|
||||
}
|
||||
body .search-page .search-results .search-result .actions button.edit:hover {
|
||||
background-color: #3b8084;
|
||||
}
|
||||
body .search-page .search-results .search-result .actions button.delete {
|
||||
background-color: rgba(245, 245, 245, 0.9);
|
||||
color: #4e4e4e;
|
||||
}
|
||||
body .search-page .search-results .search-result .actions button.delete:hover {
|
||||
background-color: #c96f6f;
|
||||
}
|
||||
body .search-page .search-results .search-result .actions button:hover {
|
||||
color: #fff;
|
||||
}
|
||||
body .search-page .search-results .search-result:hover .actions {
|
||||
visibility: visible;
|
||||
}
|
||||
@ -103,7 +103,7 @@
|
||||
<div class="form-group radio-input">
|
||||
<label>Account Status</label>
|
||||
<div class="radio-group">
|
||||
<input type="radio" id="active" name="account_status" value="active">
|
||||
<input type="radio" id="active" name="account_status" value="active" checked>
|
||||
<label class="radio" for="active">Active</label>
|
||||
|
||||
<input type="radio" id="inactive" name="account_status" value="inactive">
|
||||
|
||||
@ -3,13 +3,13 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<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="../css/login.css">
|
||||
<title>Login Page</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="left-container">
|
||||
<img src="/home/ucadmin/Documents/Scripts/b/Test/ldapmanager/test/images/logo2.png" alt="Company Logo" class="logo">
|
||||
<img src="../images/logo2.png" alt="Company Logo" class="logo">
|
||||
<h1>LDAP Manager</h1>
|
||||
<p>User management system</p>
|
||||
</div>
|
||||
|
||||
111
test/html/search.html
Normal file
111
test/html/search.html
Normal file
@ -0,0 +1,111 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Search Results</title>
|
||||
<link rel="stylesheet" href="../css/search.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="search-page">
|
||||
<form class="search-bar" action="/search-results" method="GET">
|
||||
<input type="text" name="query" placeholder="Search...">
|
||||
<select name="filter">
|
||||
<option value="username">Username</option>
|
||||
<option value="employee-id">Employee ID</option>
|
||||
<option value="name">Name</option>
|
||||
<option value="email">Email</option>
|
||||
</select>
|
||||
<button type="submit">Search</button>
|
||||
</form>
|
||||
|
||||
<ul class="search-results">
|
||||
|
||||
<li class="search-result">
|
||||
<div class="details">
|
||||
<span class="primary-key username">realobamna</span>
|
||||
<div class="info-row">
|
||||
<span class="employee-id">12345</span>
|
||||
<span class="full-name">John Doe Obama</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button class="edit">Edit</button>
|
||||
<button class="delete">Delete</button>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="search-result">
|
||||
<div class="details">
|
||||
<span class="primary-key username">obama</span>
|
||||
<div class="info-row">
|
||||
<span class="employee-id">19845</span>
|
||||
<span class="full-name">Fake Obama</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button class="edit">Edit</button>
|
||||
<button class="delete">Delete</button>
|
||||
</div>
|
||||
</li>
|
||||
<li class="search-result">
|
||||
<div class="details">
|
||||
<span class="primary-key username">realobamna</span>
|
||||
<div class="info-row">
|
||||
<span class="employee-id">12345</span>
|
||||
<span class="full-name">John Doe Obama</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button class="edit">Edit</button>
|
||||
<button class="delete">Delete</button>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="search-result">
|
||||
<div class="details">
|
||||
<span class="primary-key username">obama</span>
|
||||
<div class="info-row">
|
||||
<span class="employee-id">19845</span>
|
||||
<span class="full-name">Fake Obama</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button class="edit">Edit</button>
|
||||
<button class="delete">Delete</button>
|
||||
</div>
|
||||
</li>
|
||||
<li class="search-result">
|
||||
<div class="details">
|
||||
<span class="primary-key username">realobamna</span>
|
||||
<div class="info-row">
|
||||
<span class="employee-id">12345</span>
|
||||
<span class="full-name">John Doe Obama</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button class="edit">Edit</button>
|
||||
<button class="delete">Delete</button>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="search-result">
|
||||
<div class="details">
|
||||
<span class="primary-key username">obama</span>
|
||||
<div class="info-row">
|
||||
<span class="employee-id">19845</span>
|
||||
<span class="full-name">Fake Obama</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button class="edit">Edit</button>
|
||||
<button class="delete">Delete</button>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Additional search results go here -->
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -22,7 +22,7 @@ $login-button-shadow: rgba(0, 95, 115, 0.3);
|
||||
$login-button-active-shadow: rgba(70, 70, 70, 0.2);
|
||||
$login-button-text-color: #fff;
|
||||
|
||||
// Entry Form Page ////////////////////////////////
|
||||
// Entry Form Page //////////////////////////////////
|
||||
|
||||
// Page
|
||||
$add-user-background-color: linear-gradient(135deg, #283e4a, #1c2e38); // Background gradient
|
||||
@ -51,9 +51,9 @@ $add-user-clear-button-text-color: #ffffff;
|
||||
|
||||
// Check-box buttons
|
||||
// Unchecked
|
||||
$user-form-checkbox-button-color: #007b8a;
|
||||
$user-form-checkbox-button-text-color: #007b8a;
|
||||
$user-form-checkbox-button-border-color: rgba(220, 220, 220, 0.8);
|
||||
$user-form-checkbox-button-color: $add-user-input-background;
|
||||
$user-form-checkbox-button-text-color: $add-user-form-title-color;
|
||||
$user-form-checkbox-button-border-color: $add-user-input-border-color;
|
||||
// Hover
|
||||
$user-form-checkbox-button-hover-color: rgba(232, 232, 232, 0.9);
|
||||
$user-form-checkbox-button-hover-text-color: #007b8a;
|
||||
@ -86,3 +86,37 @@ $details-closed-summary-color: #b1b1b1;
|
||||
$details-summary-hover-color: #636363;
|
||||
$details-open-summary-color: #979797;
|
||||
$details-summary-border-color: $add-user-input-border-color;
|
||||
|
||||
// Search page //////////////////////////////////////
|
||||
|
||||
// Search field
|
||||
$search-page-search-field-background: $add-user-input-background;
|
||||
$search-page-search-field-border-color: $add-user-input-border-color;
|
||||
$search-page-search-field-hover-border-color: $add-user-input-focus-border-color;
|
||||
$search-page-search-field-focus-border-color: $add-user-input-focus-border-color;
|
||||
|
||||
// Search button normal
|
||||
$search-page-search-button-color: $user-form-checkbox-button-color;
|
||||
$search-page-search-button-text-color: $user-form-checkbox-button-text-color;
|
||||
$search-page-search-button-border-color: $user-form-checkbox-button-border-color;
|
||||
// Search button hover
|
||||
$search-page-search-button-hover-color: $add-user-button-color;
|
||||
$search-page-search-button-hover-text-color: $add-user-button-text-color;
|
||||
$search-page-search-button-hover-border-color: $user-form-checkbox-button-hover-border-color;
|
||||
// Search button clicked
|
||||
$search-page-search-button-active-color: $user-form-checkbox-button-hover-color;
|
||||
$search-page-search-button-active-text-color: $user-form-checkbox-button-hover-text-color;
|
||||
$search-page-search-button-active-border-color: $user-form-checkbox-button-hover-border-color;
|
||||
|
||||
// Search result normal
|
||||
$search-res-item-border-color: #e0e0e0;
|
||||
$search-res-item-hover-color: #b9b9b9;
|
||||
|
||||
// Search res item edit button
|
||||
$search-res-edit-item-button-color: $user-form-checkbox-button-color;
|
||||
$search-res-edit-item-button-text-color: $user-form-checkbox-button-text-color;
|
||||
$search-res-edit-item-button-hover-color: $user-form-checkbox-button-active-color;
|
||||
// Search res item delete button
|
||||
$search-res-delete-item-button-color: $user-form-checkbox-button-color;
|
||||
$search-res-delete-item-button-text-color: $user-form-checkbox-button-text-color;
|
||||
$search-res-delete-item-button-hover-color: #c96f6f;
|
||||
171
test/scss/search.scss
Normal file
171
test/scss/search.scss
Normal file
@ -0,0 +1,171 @@
|
||||
@use "common"; // Reset styles
|
||||
@use "colors" as *; // Color scheme
|
||||
@use "vars" as *;
|
||||
|
||||
body {
|
||||
font-family: 'Arial', sans-serif;
|
||||
background: $add-user-background-color;
|
||||
display: flex;
|
||||
justify-content: center; // Center the form horizontally
|
||||
align-items: center; // Center the form vertically
|
||||
height: 100%;
|
||||
padding: 20px; // Some padding for mobile responsiveness
|
||||
|
||||
.search-page {
|
||||
background-color: $add-user-form-background;
|
||||
padding: 40px;
|
||||
border-radius: 12px; // Rounded corners
|
||||
box-shadow: 0 8px 15px $add-user-form-shadow-color;
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
|
||||
.search-bar {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
padding: 20px 20px 10px 20px;
|
||||
border-radius: 12px 12px 0 0; // Rounded corners
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: #c4c4c4;
|
||||
height: 75px;
|
||||
|
||||
input[type="text"],
|
||||
select {
|
||||
flex: 1;
|
||||
height: 45px;
|
||||
padding: 10px;
|
||||
background-color: $search-page-search-field-background;
|
||||
border: 1px solid $search-page-search-field-border-color;
|
||||
border-radius: $input-field-border-radius;
|
||||
font-size: 16px;
|
||||
|
||||
&:hover {
|
||||
border-color: $search-page-search-field-hover-border-color;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: $search-page-search-field-focus-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
max-width: 25%;
|
||||
}
|
||||
|
||||
button[type="submit"] {
|
||||
padding: 10px 20px;
|
||||
font-size: 16px;
|
||||
height: 45px;
|
||||
background-color: $search-page-search-button-color;
|
||||
color: $search-page-search-button-text-color;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: $search-page-search-button-hover-color;
|
||||
color: $search-page-search-button-hover-text-color;
|
||||
border-color: $search-page-search-button-hover-border-color;
|
||||
}
|
||||
&:active {
|
||||
background-color: $search-page-search-button-active-color;
|
||||
color: $search-page-search-button-active-text-color;
|
||||
border-color: $search-page-search-button-active-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-results {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
padding: 20px;
|
||||
min-height: 800px;
|
||||
|
||||
.search-result {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
padding: 12px 10px;
|
||||
border-radius: $input-field-border-radius;
|
||||
transition: background-color 0.3s;
|
||||
background-color: #e1e1e1;
|
||||
|
||||
&:hover {
|
||||
background-color: $search-res-item-hover-color;
|
||||
}
|
||||
|
||||
.details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
|
||||
.primary-key {
|
||||
font-size: 16px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
|
||||
* {
|
||||
font-size: 15px;
|
||||
//font-weight: 500;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-self: flex-start;
|
||||
visibility: hidden;
|
||||
|
||||
button {
|
||||
padding: 6px 12px;
|
||||
font-size: 12px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
|
||||
&.edit {
|
||||
background-color: $search-res-edit-item-button-color;
|
||||
color: $search-res-edit-item-button-text-color;
|
||||
|
||||
&:hover {
|
||||
background-color: $search-res-edit-item-button-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.delete {
|
||||
background-color: $search-res-delete-item-button-color;
|
||||
color: $search-res-delete-item-button-text-color;
|
||||
|
||||
&:hover {
|
||||
background-color: $search-res-delete-item-button-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .actions {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user