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

re-structured and re-styled search page

Browse Source
This commit is contained in:
Candifloss 2024-11-01 21:36:10 +05:30
parent acfb0ddfc6
commit d5cc27ed03
4 changed files with 57 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
test/css/search.css
View File

@ -101,9 +101,6 @@ body .search-page .search-results .search-result {
transition: background-color 0.3s; transition: background-color 0.3s;
background-color: #e1e1e1; background-color: #e1e1e1;
} }
body .search-page .search-results .search-result:hover {
background-color: #b9b9b9;
}
body .search-page .search-results .search-result .details { body .search-page .search-results .search-result .details {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -112,14 +109,25 @@ body .search-page .search-results .search-result .details {
body .search-page .search-results .search-result .details .primary-key { body .search-page .search-results .search-result .details .primary-key {
font-size: 16px; font-size: 16px;
margin-bottom: 3px; margin-bottom: 3px;
color: #166264;
} }
body .search-page .search-results .search-result .details .info-row { body .search-page .search-results .search-result .details .info-row {
display: flex; display: flex;
gap: 10px; gap: 10px;
} }
body .search-page .search-results .search-result .details .info-row * { body .search-page .search-results .search-result .details .info-row * {
font-size: 15px; font-size: 16px;
color: #666; color: #666666;
}
body .search-page .search-results .search-result:hover {
background-color: #b0b0b0;
cursor: pointer;
}
body .search-page .search-results .search-result:hover .details .primary-key {
font-weight: bold;
}
body .search-page .search-results .search-result:hover .details .info-row * {
color: #424242;
} }
body .search-page .search-results .search-result .actions { body .search-page .search-results .search-result .actions {
display: flex; display: flex;
@ -139,7 +147,7 @@ body .search-page .search-results .search-result .actions button.edit {
color: #4e4e4e; color: #4e4e4e;
} }
body .search-page .search-results .search-result .actions button.edit:hover { body .search-page .search-results .search-result .actions button.edit:hover {
background-color: #3b8084; background-color: #5ca4a8;
} }
body .search-page .search-results .search-result .actions button.delete { body .search-page .search-results .search-result .actions button.delete {
background-color: rgba(245, 245, 245, 0.9); background-color: rgba(245, 245, 245, 0.9);
@ -149,7 +157,7 @@ body .search-page .search-results .search-result .actions button.delete:hover {
background-color: #c96f6f; background-color: #c96f6f;
} }
body .search-page .search-results .search-result .actions button:hover { body .search-page .search-results .search-result .actions button:hover {
color: #fff; color: #ffffff;
} }
body .search-page .search-results .search-result:hover .actions { body .search-page .search-results .search-result:hover .actions {
visibility: visible; visibility: visible;

47
test/html/search.html
View File

@ -19,9 +19,9 @@
<button type="submit">Search</button> <button type="submit">Search</button>
</form> </form>
<ul class="search-results"> <div class="search-results">
<li class="search-result"> <a class="search-result" href="/user/realobamna">
<div class="details"> <div class="details">
<span class="primary-key username">realobamna</span> <span class="primary-key username">realobamna</span>
<div class="info-row"> <div class="info-row">
@ -33,9 +33,9 @@
<button class="edit">Edit</button> <button class="edit">Edit</button>
<button class="delete">Delete</button> <button class="delete">Delete</button>
</div> </div>
</li> </a>
<li class="search-result"> <a class="search-result" href="/user/obama">
<div class="details"> <div class="details">
<span class="primary-key username">obama</span> <span class="primary-key username">obama</span>
<div class="info-row"> <div class="info-row">
@ -47,8 +47,8 @@
<button class="edit">Edit</button> <button class="edit">Edit</button>
<button class="delete">Delete</button> <button class="delete">Delete</button>
</div> </div>
</li> </a>
<li class="search-result"> <a class="search-result" href="/user/realobamna">
<div class="details"> <div class="details">
<span class="primary-key username">realobamna</span> <span class="primary-key username">realobamna</span>
<div class="info-row"> <div class="info-row">
@ -60,9 +60,9 @@
<button class="edit">Edit</button> <button class="edit">Edit</button>
<button class="delete">Delete</button> <button class="delete">Delete</button>
</div> </div>
</li> </a>
<li class="search-result"> <a class="search-result" href="/user/obama">
<div class="details"> <div class="details">
<span class="primary-key username">obama</span> <span class="primary-key username">obama</span>
<div class="info-row"> <div class="info-row">
@ -74,37 +74,10 @@
<button class="edit">Edit</button> <button class="edit">Edit</button>
<button class="delete">Delete</button> <button class="delete">Delete</button>
</div> </div>
</li> </a>
<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 --> <!-- Additional search results go here -->
</ul> </div>
</div> </div>
</body> </body>

11
test/scss/_colors.scss
View File

@ -108,15 +108,22 @@ $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-text-color: $user-form-checkbox-button-hover-text-color;
$search-page-search-button-active-border-color: $user-form-checkbox-button-hover-border-color; $search-page-search-button-active-border-color: $user-form-checkbox-button-hover-border-color;
// Search res items
// Search result normal // Search result normal
$search-res-item-color: #e1e1e1;
$search-res-item-hover-color: #b0b0b0;
$search-res-item-border-color: #e0e0e0; $search-res-item-border-color: #e0e0e0;
$search-res-item-hover-color: #b9b9b9;
$search-res-item-detail-primary-key-color: #166264;
$search-res-item-detail-info-row-color: #666666;
// Search res item edit button // Search res item edit button
$search-res-edit-item-button-color: $user-form-checkbox-button-color; $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-text-color: $user-form-checkbox-button-text-color;
$search-res-edit-item-button-hover-color: $user-form-checkbox-button-active-color; $search-res-edit-item-button-hover-color: #5ca4a8;
// Search res item delete button // Search res item delete button
$search-res-delete-item-button-color: $user-form-checkbox-button-color; $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-text-color: $user-form-checkbox-button-text-color;
$search-res-delete-item-button-hover-color: #c96f6f; $search-res-delete-item-button-hover-color: #c96f6f;
$search-res-item-action-button-hover-text-color: #ffffff;

29
test/scss/search.scss
View File

@ -97,11 +97,8 @@ body {
padding: 12px 10px; padding: 12px 10px;
border-radius: $input-field-border-radius; border-radius: $input-field-border-radius;
transition: background-color 0.3s; transition: background-color 0.3s;
background-color: #e1e1e1; background-color: $search-res-item-color;
&:hover {
background-color: $search-res-item-hover-color;
}
.details { .details {
display: flex; display: flex;
@ -111,6 +108,7 @@ body {
.primary-key { .primary-key {
font-size: 16px; font-size: 16px;
margin-bottom: 3px; margin-bottom: 3px;
color: $search-res-item-detail-primary-key-color;
} }
.info-row { .info-row {
@ -118,9 +116,24 @@ body {
gap: 10px; gap: 10px;
* { * {
font-size: 15px; font-size: 16px;
//font-weight: 500; color: $search-res-item-detail-info-row-color;
color: #666; }
}
}
&:hover {
background-color: $search-res-item-hover-color;
cursor: pointer;
.details {
.primary-key {
font-weight: bold;
}
.info-row {
* {
color: #424242;
}
} }
} }
} }
@ -157,7 +170,7 @@ body {
} }
&:hover { &:hover {
color: #fff; color: $search-res-item-action-button-hover-text-color;
} }
} }
} }