re-structured and re-styled search page
This commit is contained in:
parent
acfb0ddfc6
commit
d5cc27ed03
@ -101,9 +101,6 @@ body .search-page .search-results .search-result {
|
||||
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;
|
||||
@ -112,14 +109,25 @@ body .search-page .search-results .search-result .details {
|
||||
body .search-page .search-results .search-result .details .primary-key {
|
||||
font-size: 16px;
|
||||
margin-bottom: 3px;
|
||||
color: #166264;
|
||||
}
|
||||
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;
|
||||
font-size: 16px;
|
||||
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 {
|
||||
display: flex;
|
||||
@ -139,7 +147,7 @@ body .search-page .search-results .search-result .actions button.edit {
|
||||
color: #4e4e4e;
|
||||
}
|
||||
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 {
|
||||
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;
|
||||
}
|
||||
body .search-page .search-results .search-result .actions button:hover {
|
||||
color: #fff;
|
||||
color: #ffffff;
|
||||
}
|
||||
body .search-page .search-results .search-result:hover .actions {
|
||||
visibility: visible;
|
||||
|
||||
@ -19,9 +19,9 @@
|
||||
<button type="submit">Search</button>
|
||||
</form>
|
||||
|
||||
<ul class="search-results">
|
||||
<div class="search-results">
|
||||
|
||||
<li class="search-result">
|
||||
<a class="search-result" href="/user/realobamna">
|
||||
<div class="details">
|
||||
<span class="primary-key username">realobamna</span>
|
||||
<div class="info-row">
|
||||
@ -33,9 +33,9 @@
|
||||
<button class="edit">Edit</button>
|
||||
<button class="delete">Delete</button>
|
||||
</div>
|
||||
</li>
|
||||
</a>
|
||||
|
||||
<li class="search-result">
|
||||
<a class="search-result" href="/user/obama">
|
||||
<div class="details">
|
||||
<span class="primary-key username">obama</span>
|
||||
<div class="info-row">
|
||||
@ -47,8 +47,8 @@
|
||||
<button class="edit">Edit</button>
|
||||
<button class="delete">Delete</button>
|
||||
</div>
|
||||
</li>
|
||||
<li class="search-result">
|
||||
</a>
|
||||
<a class="search-result" href="/user/realobamna">
|
||||
<div class="details">
|
||||
<span class="primary-key username">realobamna</span>
|
||||
<div class="info-row">
|
||||
@ -60,9 +60,9 @@
|
||||
<button class="edit">Edit</button>
|
||||
<button class="delete">Delete</button>
|
||||
</div>
|
||||
</li>
|
||||
</a>
|
||||
|
||||
<li class="search-result">
|
||||
<a class="search-result" href="/user/obama">
|
||||
<div class="details">
|
||||
<span class="primary-key username">obama</span>
|
||||
<div class="info-row">
|
||||
@ -74,37 +74,10 @@
|
||||
<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>
|
||||
</a>
|
||||
<!-- Additional search results go here -->
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
@ -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-border-color: $user-form-checkbox-button-hover-border-color;
|
||||
|
||||
// Search res items
|
||||
// Search result normal
|
||||
$search-res-item-color: #e1e1e1;
|
||||
$search-res-item-hover-color: #b0b0b0;
|
||||
$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-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-edit-item-button-hover-color: #5ca4a8;
|
||||
// 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;
|
||||
$search-res-item-action-button-hover-text-color: #ffffff;
|
||||
|
||||
|
||||
@ -97,11 +97,8 @@ body {
|
||||
padding: 12px 10px;
|
||||
border-radius: $input-field-border-radius;
|
||||
transition: background-color 0.3s;
|
||||
background-color: #e1e1e1;
|
||||
background-color: $search-res-item-color;
|
||||
|
||||
&:hover {
|
||||
background-color: $search-res-item-hover-color;
|
||||
}
|
||||
|
||||
.details {
|
||||
display: flex;
|
||||
@ -111,6 +108,7 @@ body {
|
||||
.primary-key {
|
||||
font-size: 16px;
|
||||
margin-bottom: 3px;
|
||||
color: $search-res-item-detail-primary-key-color;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
@ -118,9 +116,24 @@ body {
|
||||
gap: 10px;
|
||||
|
||||
* {
|
||||
font-size: 15px;
|
||||
//font-weight: 500;
|
||||
color: #666;
|
||||
font-size: 16px;
|
||||
color: $search-res-item-detail-info-row-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&: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 {
|
||||
color: #fff;
|
||||
color: $search-res-item-action-button-hover-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user