-
Notifications
You must be signed in to change notification settings - Fork 12
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Redesign Organization Details Card (#555)
- Loading branch information
1 parent
33bf004
commit eef9b63
Showing
5 changed files
with
141 additions
and
267 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
184 changes: 37 additions & 147 deletions
184
...nization/widgets/organization-details-info-card/organization-details-info-card.widget.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,165 +1,55 @@ | ||
| /** Profile Card CSS */ | ||
| .mdc-list-item--with-two-lines .mdc-list-item__primary-text, | ||
| .mdc-list-item--with-three-lines .mdc-list-item__primary-text { | ||
| margin-bottom: 0; | ||
| } | ||
|
|
||
|
|
||
| .organization-header { | ||
| display: flex; | ||
| align-items: flex-start; | ||
| justify-content: space-between; | ||
| padding-bottom: 16px; | ||
| mat-card-header { | ||
| flex-direction: column; | ||
| width: 100%; | ||
| } | ||
|
|
||
| .left-header-info { | ||
| padding-top: 0.5rem; | ||
| width: 10%; | ||
| p { | ||
| margin-bottom: 0; | ||
| } | ||
|
|
||
| .right-header-info { | ||
| display: flex; | ||
| flex-direction: column; | ||
| width: 90%; | ||
| .mat-mdc-card-avatar { | ||
| margin-bottom: 0 !important; | ||
| } | ||
|
|
||
| .organization-top-header-group { | ||
| .header-row { | ||
| display: flex; | ||
| flex-direction: row; | ||
| align-items: flex-start; | ||
| justify-content: left; | ||
| align-items: center; | ||
| gap: 12px; | ||
| } | ||
|
|
||
| .organization-name-section { | ||
| .row { | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| align-content: center; | ||
| height: 48px; | ||
| flex-direction: row; | ||
| gap: 4px; | ||
| align-items: center; | ||
| } | ||
|
|
||
| /* .organization-icons-section { | ||
| display: flex; | ||
| flex-direction: row-reverse; | ||
| width: 50%; | ||
| height: 5vh; | ||
| } */ | ||
| .link-icons { | ||
| .links-row { | ||
| display: flex; | ||
| flex-direction: row; | ||
| flex-wrap: wrap; | ||
| margin-top: 4px; | ||
| align-items: center; | ||
| margin-bottom: 12px; | ||
| margin-left: 48px; | ||
| margin-right: 32px; | ||
| gap: 12px; | ||
| } | ||
| /*TODO(mdc-migration): The following rule targets internal classes of card that may no longer apply for the MDC version. */ | ||
| mat-card-footer { | ||
| margin: 0 1rem 1.25rem 1rem; | ||
| } | ||
|
|
||
| .edit-organization-button { | ||
| margin-left: 6rem; | ||
| } | ||
|
|
||
| .user-avatar { | ||
| margin-right: 1rem; | ||
| margin-bottom: 0; | ||
| background-color: #4786C6; | ||
| text-align: center; | ||
| vertical-align: middle; | ||
| justify-content: center; | ||
| width: 40px; | ||
| height: 40px; | ||
| line-height: 40px; | ||
| border-radius: 100%; | ||
| font-size: 1.15em; | ||
| } | ||
|
|
||
| .user-name { | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| display: -webkit-box; | ||
| -webkit-line-clamp: 1; | ||
| /* number of lines to show */ | ||
| line-clamp: 1; | ||
| -webkit-box-orient: vertical; | ||
| } | ||
|
|
||
| .mat-mdc-card-avatar { | ||
| margin-bottom: 0 !important; | ||
| } | ||
|
|
||
| .mdc-list-group__subheader { | ||
| margin: 0; | ||
| } | ||
|
|
||
| .user-info-label { | ||
| font-weight: 500; | ||
| margin-bottom: 0; | ||
| font-size: 1.15em; | ||
| } | ||
|
|
||
| .organization-description { | ||
| font-size: 1rem; | ||
| margin-top: 0; | ||
| } | ||
|
|
||
| .logo { | ||
| width: 85%; | ||
| border-radius: 50% !important; | ||
| } | ||
|
|
||
| a { | ||
| text-decoration: none !important; | ||
| } | ||
|
|
||
| /** Make cards display in one column, with the event card appearing last */ | ||
| @media only screen and (max-width: 1180px) { | ||
|
|
||
| .right-header-info { | ||
| width: 100%; | ||
| } | ||
|
|
||
| .organization-card { | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: space-around; | ||
| } | ||
|
|
||
| .logo { | ||
| width: 40px; | ||
| height: 40px; | ||
| border-radius: 50% !important; | ||
| margin-right: 0.5rem; | ||
| } | ||
|
|
||
| .organization-header { | ||
| flex-direction: column; | ||
| justify-content: left; | ||
| align-items: flex-start !important; | ||
| } | ||
|
|
||
| .organization-name-section { | ||
| width: 100%; | ||
| } | ||
|
|
||
| .organization-icons-section { | ||
| width: 100%; | ||
| height: 100% !important; | ||
| } | ||
|
|
||
| button { | ||
| width: max-content; | ||
| } | ||
|
|
||
| .mat-mdc-card { | ||
| margin: 1rem !important; | ||
| } | ||
|
|
||
| .edit-organization-button { | ||
| margin-left: 0; | ||
| } | ||
| } | ||
|
|
||
| @media only screen and (max-width: 1280px) { | ||
| .right-header-info { | ||
| width: 100%; | ||
| } | ||
| } | ||
|
|
||
| .link-icons { | ||
| width: 22px; | ||
| height: 22px; | ||
| } | ||
|
|
||
| mat-divider { | ||
| margin-top: 12px; | ||
| padding-bottom: 4px; | ||
| } | ||
|
|
||
| mat-card-actions { | ||
| padding-bottom: 12px; | ||
| justify-content: flex-end; | ||
| gap: 8px; | ||
| } |
158 changes: 93 additions & 65 deletions
158
...ization/widgets/organization-details-info-card/organization-details-info-card.widget.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,71 +1,99 @@ | ||
| <mat-pane | ||
| class="organization-card" | ||
| *ngIf="organization !== undefined" | ||
| appearance="outlined"> | ||
| <!-- Organization Card Header (Image, Name, Description) --> | ||
| <mat-card-header class="organization-header"> | ||
| @if (!isTablet && !isHandset) { | ||
| <div class="left-header-info"> | ||
| <!-- Organization Logo (Laptops/Monitors) --> | ||
| <img mat-card-image src="{{ organization.logo }}" class="logo" /> | ||
| @if (organization) { | ||
| <mat-pane> | ||
| <mat-card-header> | ||
| <div class="header-row"> | ||
| <img mat-card-avatar src="{{ organization.logo }}" /> | ||
| <mat-card-title>{{ organization.name }}</mat-card-title> | ||
| </div> | ||
| } | ||
| <div class="right-header-info"> | ||
| <!-- Organization Name, Logo, and Social Media --> | ||
| <div class="organization-top-header-group"> | ||
| <!-- Organization Logo (Tablets/Phones) --> | ||
| @if (isTablet || isHandset) { | ||
| <img | ||
| mat-card-image | ||
| src="{{ organization.logo }}" | ||
| class="logo" | ||
| [ngStyle]="{ | ||
| width: '32px', | ||
| height: '32px', | ||
| 'margin-right': '16px' | ||
| }" /> | ||
| } | ||
| <!-- Organization Name --> | ||
| <div class="organization-name-section"> | ||
| <mat-card-title class="user-name"> | ||
| {{ organization.name }} | ||
| </mat-card-title> | ||
| </div> | ||
| <div class="links-row"> | ||
| @if (organization.website !== '') { | ||
| <div class="row"> | ||
| <mat-icon class="link-icons secondary-icon">link</mat-icon> | ||
| <p> | ||
| <a | ||
| class="font-secondary" | ||
| [href]="organization.website" | ||
| target="_blank" | ||
| >Website</a | ||
| > | ||
| </p> | ||
| </div> | ||
| } @if (organization.email !== '') { | ||
| <div class="row"> | ||
| <mat-icon class="secondary-icon">mail</mat-icon> | ||
| <p> | ||
| <a | ||
| class="font-secondary" | ||
| href="mailto:{{ organization.email }}" | ||
| target="_blank" | ||
| >Email</a | ||
| > | ||
| </p> | ||
| </div> | ||
| } @if (organization.instagram !== '') { | ||
| <div class="row"> | ||
| <mat-icon class="link-icons secondary-icon" svgIcon="instagram" /> | ||
| <p> | ||
| <a | ||
| class="font-secondary" | ||
| [href]="organization.instagram" | ||
| target="_blank" | ||
| >Instagram</a | ||
| > | ||
| </p> | ||
| </div> | ||
|
|
||
| <!-- Organization Description --> | ||
| <p class="organization-description"> | ||
| {{ organization.long_description || organization.short_description }} | ||
| </p> | ||
|
|
||
| <!-- Organization Icons (Phones)--> | ||
| <div | ||
| class="organization-icons-section" | ||
| [ngStyle]="{ 'flex-direction': 'row' }"> | ||
| <div class="link-icons"> | ||
| @if(organization) { @if (organization.website !== '') { | ||
| <social-media-icon | ||
| [fontIcon]="'link'" | ||
| [href]="organization!.website" /> | ||
| } @if (organization.email !== '') { | ||
| <social-media-icon | ||
| [fontIcon]="'mail'" | ||
| [href]="'mailto:' + organization.email" /> | ||
| } @if(organization.instagram !== '') { | ||
| <social-media-icon | ||
| [svgIcon]="'instagram'" | ||
| [href]="organization!.instagram" /> | ||
| } @if(organization.linked_in !== '') { | ||
| <social-media-icon | ||
| [svgIcon]="'linkedin'" | ||
| [href]="organization!.linked_in" /> | ||
| } @if(organization.youtube !== '') { | ||
| <social-media-icon | ||
| [svgIcon]="'youtube'" | ||
| [href]="organization!.youtube" /> | ||
| } } | ||
| </div> | ||
| } @if (organization.linked_in !== '') { | ||
| <div class="row"> | ||
| <mat-icon | ||
| class="link-icons secondary-icon" | ||
| id="linkedin-icon" | ||
| svgIcon="linkedin" /> | ||
| <p> | ||
| <a | ||
| class="font-secondary" | ||
| [href]="organization.linked_in" | ||
| target="_blank" | ||
| >LinkedIn</a | ||
| > | ||
| </p> | ||
| </div> | ||
| } @if (organization.youtube !== '') { | ||
| <div class="row"> | ||
| <mat-icon class="link-icons secondary-icon" svgIcon="youtube" /> | ||
| <p> | ||
| <a | ||
| class="font-secondary" | ||
| [href]="organization.youtube" | ||
| target="_blank" | ||
| >YouTube</a | ||
| > | ||
| </p> | ||
| </div> | ||
| } | ||
| </div> | ||
| </mat-card-header> | ||
| <mat-card-content> | ||
| <p>{{ organization.long_description || organization.short_description }}</p> | ||
| @if(eventCreationPermissions) { | ||
| <mat-divider /> | ||
| } | ||
| </mat-card-content> | ||
| <mat-card-actions> | ||
| @if(eventCreationPermissions) { | ||
| <button | ||
| mat-stroked-button | ||
| class="primary-button" | ||
| [routerLink]="'/events/' + this.organization.slug + '/new/edit'"> | ||
| <mat-icon class="font-primary">calendar_add_on</mat-icon> | ||
| Create Event | ||
| </button> | ||
| <button | ||
| mat-flat-button | ||
| class="primary-button" | ||
| [routerLink]="'/organizations/' + this.organization.slug + '/edit'"> | ||
| Edit | ||
| </button> | ||
| } | ||
| </mat-card-actions> | ||
| </mat-pane> | ||
| } |
Oops, something went wrong.