lkva/NDOJ
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Design organization list page and add organization search (#119)

Browse source
This commit is contained in:
Phuoc Anh Kha Le 2024-06-18 22:11:36 -05:00 • committed by GitHub
parent 02ba30a29e
commit 326b3d5dd3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
20 changed files with 553 additions and 286 deletions
Download patch file Download diff file Expand all files Collapse all files

92
resources/organization.scss
View file

@ -1,3 +1,5 @@
@import "vars";
.leave-organization, .leave-organization:hover {
color: red;
}
@ -28,6 +30,79 @@
display: contents;
}
.organization-container {
display: flex;
flex-wrap: wrap;
gap: 1em;
justify-content: flex-start;
width: 100%;
box-sizing: border-box;
margin-bottom: 1em;
}
.organization-card {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
text-align: center;
padding: 1em;
transition: transform 0.3s;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 300px;
margin-bottom: 1em;
text-decoration: none;
color: inherit;
&:hover {
transform: translateY(-5px);
color: $theme_color;
}
img.org-logo {
width: 100%;
border-radius: 8px 8px 0 0;
object-fit: contain;
object-position: center;
flex-shrink: 0;
background-color: #f0f0f0;
}
.org-details {
padding: 1em 0;
span {
display: block;
margin-bottom: 0.5em;
}
}
}
@media(min-width: 800px) {
.organization-card {
flex: 1 1 calc(33.33% - 1em);
max-width: calc(33.33% - 1em);
img.org-logo {
height: 150px;
}
}
}
@media(max-width: 799px) {
.organization-card {
flex: 1 1 calc(50% - 1em);
max-width: calc(50% - 1em);
img.org-logo {
height: 120px;
}
}
}
.organization-row {
display: block;
padding: 0.5em;
@ -37,19 +112,18 @@
font-weight: 500;
display: flex;
align-items: center;
}
.organization-row:hover {
background-color: #f3f3f3;
}
.organization-container {
border: 1px #ccc solid;
margin-bottom: 3em;
border-radius: 5px;
&:hover {
background-color: #f3f3f3;
}
}
.org-help-text {
display: block;
color: gray;
}
#search-organization {
width: 100%;
height: 2.3em;
}