Skip to content

Commit

Permalink
[MWPW-157033] Attendee table (#201)
Browse files Browse the repository at this point in the history
  • Loading branch information
@qiyundai
qiyundai authored Sep 5, 2024
1 parent e1442b3 commit 1e2d471
Show file tree
Hide file tree
Showing 11 changed files with 1,299 additions and 50 deletions.
359 changes: 359 additions & 0 deletions ecc/blocks/attendee-management-table/attendee-management-table.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,359 @@
.attendee-management-table {
font-family: var(--body-font-family);
padding: 40px;
margin: auto;
}

.attendee-management-table .loading-screen {
position: fixed;
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
height: 100%;
width: 100%;
top: 0;
left: 0;
z-index: 20;
background: var(--color-white);
}

.attendee-management-table .loading-screen sp-field-label {
font-size: var(--type-body-s-size);
}

.attendee-management-table .dashboard-main-container {
margin-top: 24px;
display: flex;
gap: 24px;
}

.attendee-management-table .dashboard-main-container .dashboard-side-panel {
background-color: var(--color-gray-100);
border-radius: 8px;
padding: 16px;
max-width: 192px;
min-width: 192px;
}

.attendee-management-table .dashboard-main-container .dashboard-side-panel .back-btn {
display: flex;
align-items: center;
font-weight: 700;
color: var(--color-black);
font-size: var(--type-body-s-size);
width: max-content;
margin-bottom: 1rem;
margin-left: -4px;
}

.attendee-management-table .dashboard-main-container .dashboard-side-panel sp-field-label {
font-weight: 700;
}

.attendee-management-table .dashboard-main-container .dashboard-side-panel .clear-all-wrapper.hidden {
display: none;
}

.attendee-management-table .events-picker-wrapper {
display: flex;
flex-direction: column;
}

.attendee-management-table sp-divider {
margin: 16px 0;
}

.attendee-management-table .dashboard-header {
display: flex;
flex-direction: column;
gap: 16px;
justify-content: space-between;
align-items: flex-start;
}

.attendee-management-table .dashboard-table-container {
max-width: calc(100% - 250px);
position: relative;
}

.attendee-management-table .loading-overlay {
position: absolute;
top: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--highlight-background-color);
gap: 16px;
}

.attendee-management-table .dashboard-table-wrapper {
overflow: auto;
}

.attendee-management-table .pagination-container {
margin: 40px auto 0;
display: flex;
width: max-content;
font-size: var(--type-body-xs-size);
}

.attendee-management-table .loading-screen,
.attendee-management-table .dashboard-header,
.attendee-management-table .dashboard-table-wrapper,
.attendee-management-table .pagination-container {
transition: opacity 0.5s;
}

.attendee-management-table.loading .dashboard-header,
.attendee-management-table.loading .dashboard-table-wrapper,
.attendee-management-table.loading .pagination-container {
opacity: 0;
}

.attendee-management-table:not(.loading) .loading-screen {
opacity: 0;
z-index: -1;
}

.attendee-management-table.no-attendees .no-attendees-area {
margin: 64px;
display: flex;
flex-direction: column;
align-items: center;
}

.attendee-management-table sp-theme sp-underlay + sp-dialog {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
background: var(--spectrum-gray-100);
min-width: 480px;
}

.attendee-management-table sp-theme sp-underlay + sp-dialog h1 {
font-size: var(--type-heading-s-size);
}

.attendee-management-table sp-theme sp-underlay + sp-dialog p {
font-size: var(--type-body-s-size);
}

.attendee-management-table sp-theme sp-underlay + sp-dialog .button-container {
display: flex;
justify-content: flex-end;
gap: 16px;
}

.attendee-management-table sp-theme sp-underlay:not([open]) + sp-dialog {
display: none;
}

.attendee-management-table .dashboard-header-text {
display: flex;
align-items: flex-end;
gap: 16px;
}

.attendee-management-table .dashboard-header-text h1 {
margin: 0;
}

.attendee-management-table .dashboard-header-text p {
margin: 6px 0;
}

.attendee-management-table .dashboard-actions-container {
display: flex;
align-items: center;
gap: 16px;
}

.attendee-management-table .dashboard-actions-container .search-input-wrapper {
position: relative;
}

.attendee-management-table .dashboard-actions-container .search-input-wrapper img.icon-search {
position: absolute;
display: block;
top: 50%;
transform: translateY(-50%);
right: 10px;
height: 1rem;
width: 1rem;
}

.attendee-management-table .dashboard-actions-container input {
border-radius: 16px;
border: 2px solid var(--color-gray-500);
height: 24px;
padding: 0 16px;
width: 140px;
}

.attendee-management-table .dashboard-actions-container input:not(:placeholder-shown) + img.icon-search {
display: none;
}

.attendee-management-table table {
margin: auto;
border-collapse: collapse;
}

.attendee-management-table table .table-header-row {
height: 40;
border-bottom: 2px solid var(--color-gray-600);
}

.attendee-management-table table .table-header-row th {
padding: 0 16px;
font-weight: 700;
text-align: left;
font-size: var(--type-body-xxs-size);
color: var(--spectrum-color-gray-500);
width: 100px;
white-space: nowrap;
}

.attendee-management-table table .table-header-row th span {
white-space: nowrap;
width: 60px;
}

.attendee-management-table table .table-header-row th.sortable {
cursor: pointer;
}

.attendee-management-table table .table-header-row th.active {
color: var(--color-black);
}

.attendee-management-table table .table-header-row th .icon {
transform: translateY(4px);
}

.attendee-management-table table .table-header-row th:not(.active) .icon,
.attendee-management-table table .table-header-row th .icon-chev-down,
.attendee-management-table table .table-header-row th.desc-sort .icon-chev-up {
display: none;
}

.attendee-management-table table .table-header-row th.active.desc-sort .icon-chev-down {
display: inline-block;

}

.attendee-management-table table .attendee-row {
height: 40px;
}

.attendee-management-table table .no-search-results-row td {
padding: 40px 0;
text-align: center;
}

.attendee-management-table table .attendee-row:nth-of-type(even) {
background-color: var(--color-gray-100);
}

.attendee-management-table table .attendee-row .attendee-title-link {
font-weight: 700;
text-decoration: none;
}

.attendee-management-table table .attendee-row .thumbnail-container img {
display: block;
height: 90px;
width: 90px;
min-width: 90px;
object-fit: cover;
border-radius: 6px;
background-color: var(--color-gray-400);
}

.attendee-management-table table .attendee-row td {
padding: 4px 16px;
position: relative;
font-size: var(--type-body-xs-size);
line-height: var(--type-body-xs-lh);
min-width: 120px;
}

.attendee-management-table .attendee-row .dashboard-attendee-tool-box {
position: absolute;
display: flex;
flex-direction: column;
background-color: var(--color-white);
border-radius: 4px;
padding: 4px;
left: 20px;
z-index: 1;
box-shadow: 0 3px 6px 0 rgb(0 0 0 / 16%);
width: 182px;
}

.attendee-management-table .attendee-row .dashboard-attendee-tool-box a.dash-attendee-tool {
display: flex;
align-items: center;
gap: 8px;
padding: 0 8px;
margin: 2px;
text-decoration: none;
color: var(--color-black);
font-size: var(--type-body-xxs-size);
border-radius: 8px;
}

.attendee-management-table .attendee-row .dashboard-attendee-tool-box a.dash-attendee-tool:hover {
background-color: var(--color-gray-200);
}

.attendee-management-table .pagination-container input {
padding: 4px 12px;
width: 16px;
margin-right: 4px;
}

.attendee-management-table .pagination-container img.icon {
cursor: pointer;
width: 24px;
padding: 0 16px;
}

.attendee-management-table .pagination-container img.icon.disabled {
opacity: 0.5;
pointer-events: none;
}

.attendee-management-table table .attendee-row .attendee-status img.icon {
margin-right: 8px;
}

.attendee-management-table .attendee-row .dashboard-attendee-tool-box a.dash-attendee-tool img.icon {
width: 16px;
}

.attendee-management-table .attendee-row.pending {
opacity: 0.5;
pointer-events: none;
}

.attendee-management-table sp-theme.toast-area {
position: fixed;
right: calc((100% - var(--grid-container-width)) / 2);
bottom: 80px;
display: flex;
flex-direction: column;
gap: 16px;
z-index: 9;
}

@media screen and (min-width: 900px) {
.attendee-management-table .dashboard-header {
flex-direction: row;
}
}
Loading

0 comments on commit 1e2d471

Please sign in to comment.