Skip to content

Commit

Permalink
feat: change card ui
Browse files Browse the repository at this point in the history
  • Loading branch information
@MAudelGisaia
MAudelGisaia committed Oct 31, 2024
1 parent b0b8bf7 commit 1921010
Show file tree
Hide file tree
Showing 4 changed files with 199 additions and 195 deletions.
84 changes: 39 additions & 45 deletions src/app/components/card/card.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,56 +1,50 @@
<mat-card class="card" [class.public]="publicOrg" [style.borderTopColor]="card?.color" style="border-top: 3px solid;">
<mat-card-header class="header">

<mat-icon mat-card-avatar matTooltip="{{'Private' | translate}}" *ngIf="this.status === 'private'" >lock</mat-icon>
<mat-icon mat-card-avatar matTooltip="{{'Public' | translate}}" *ngIf="this.status === 'public'" >public</mat-icon>
<mat-icon mat-card-avatar matTooltip="{{'Shared' | translate}}" *ngIf="this.status === 'shared'" >groups</mat-icon>
<mat-card-title (click)="clickOnAction(action.VIEW)" matTooltip="{{'View' | translate}}&nbsp;{{card?.title}}" [matTooltipPosition]="'above'">
{{card?.title}}
</mat-card-title>
<mat-card-subtitle class="subtitle">{{ 'Last update' | translate }} : {{card?.last_update_date | date}}</mat-card-subtitle>
<arlas-config-menu #configMenu class="config-menu" matTooltip="{{'Menu' | translate}}" [zone]="'config.json'"
[actions]="card?.actions" (actionExecutedEmitter)="afterAction($event)"></arlas-config-menu>
</mat-card-header>
<mat-card class="card mat-elevation-z1">
<div (click)="clickOnAction(action.VIEW)" class="card_preview" [class.no-preview]="card?.preview === 'assets/no_preview.png'">
<div class="preview_info">
<div class="info_item">
<mat-icon matTooltip="{{'Private' | translate}}" *ngIf="this.status === 'private'" >lock</mat-icon>
<mat-icon matTooltip="{{'Public' | translate}}" *ngIf="this.status === 'public'" >public</mat-icon>
<mat-icon matTooltip="{{'Shared' | translate}}" *ngIf="this.status === 'shared'" >share</mat-icon>
</div>
<div [matTooltip]="card?.organisation" [matTooltipPosition]="'below'" class="info_item organisation" *ngIf="!!card.organisation && card.organisation !== NO_ORGANISATION && publicOrg">
<mat-icon>groups</mat-icon>
<div class="text-ellipsis">
{{card?.organisation}}
</div>

<div class="preview" [class.no-preview]="card?.preview === 'assets/no_preview.png'">
<div class="highlights" *ngIf="card?.tabs.length > 0">
<div class="section_title">{{ 'Highlights' | translate}}</div>
<div *ngFor="let tab of card?.tabs" class="highlight">
⇾ {{tab}}
</div>
</div>
<div class="highlights" *ngIf="card?.tabs.length === 0">
<div class="section_title">{{ 'No Highlights' | translate}}</div>
</div>
<div class="preview_holder"></div>
<ng-container *ngIf="card?.preview$ | async | json_to_preview; let preview; else notPreview">
<img src="{{preview}}" class="image" />
<img src="{{preview}}" class="preview_image" />
</ng-container>
<ng-template #notPreview>
<img src="assets/no_preview.png" class="image" />
<img src="assets/no_preview.png" class="preview_image" />
</ng-template>
</div>
<div class="groups">
<div *ngIf="!!card.organisation && card.organisation !== NO_ORGANISATION && publicOrg">
<div class="section_title">{{ 'Organisation' | translate}}</div>
<mat-chip-list>
<mat-chip class="organisation" >{{card?.organisation}}</mat-chip>
</mat-chip-list>
</div>
<div class="readers">
<div class="section_title">{{ 'Readers' | translate}}</div>
<mat-chip-list>
<mat-chip *ngIf="card?.readers.length === 0" class="group"> -- </mat-chip>
<mat-chip *ngFor="let reader of readers" class="group" [class.mygroup]="reader.in">{{reader.name}}</mat-chip>
</mat-chip-list>
<mat-card-content class="card_meta">
<div class="meta_title-container">
<div class="meta_title text-ellipsis" matTooltip="{{'View' | translate}}&nbsp;{{card?.title}}" [matTooltipPosition]="'above'"> {{card?.title}}</div>
<arlas-config-menu #configMenu class="config-menu" matTooltip="{{'Menu' | translate}}" [zone]="'config.json'"
[actions]="card?.actions" (actionExecutedEmitter)="afterAction($event)"></arlas-config-menu>
</div>
<div class="writers">
<div class="section_title">{{ 'Writers' | translate}}</div>
<mat-chip-list>
<mat-chip *ngIf="card?.writers.length === 0" class="group"> -- </mat-chip>
<mat-chip *ngFor="let writer of writers" class="group" [class.mygroup]="writer.in">{{writer.name}}</mat-chip>
</mat-chip-list>
</div>
</div>

<mat-card-subtitle class="meta_subtitle">{{ 'Last update' | translate }} : {{card?.last_update_date | date}}</mat-card-subtitle>

<mat-chip-list class="card_right">
<mat-chip *ngIf="rights.length === 0" class="group"> -- </mat-chip>
<ng-container *ngFor="let r of rights" >
<mat-chip
*ngIf="r.right ==='writer'"
matTooltip="{{'writing' | translate}}"
[matTooltipPosition]="'above'" class="group" [class.group--mine]="r.in">
<mat-icon>edit</mat-icon> {{r.name}}
</mat-chip>
<mat-chip *ngIf="r.right ==='reader'"
matTooltip="{{'reading' | translate}}" [matTooltipPosition]="'above'"
class="group" [class.group--mine]="r.in">
<mat-icon>visibility</mat-icon> {{r.name}}
</mat-chip>
</ng-container>
</mat-chip-list>
</mat-card-content>
</mat-card>
255 changes: 126 additions & 129 deletions src/app/components/card/card.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,163 +16,160 @@
* specific language governing permissions and limitations
* under the License.
*/


@import "variables";

:host {
flex: 1 1 auto;
display: block;
max-width: 384px;
min-width: 200px;
}

.card {
max-width: 280px;
min-width: 280px;
border-radius: 0px;

border-radius: 4px;
color: black;
min-height: 50px;
padding: 16px 0;
padding: 0;
overflow: hidden;
height: 290px;
box-shadow: none;

&.public {
height: 340px;
height: 100%;
&_config-menu{
position: absolute;
}

@mixin group() {
color: #666;
font-size: 0.65em;
min-height: 20px;
padding: 10px 8px;
&_preview {
max-width: 100%;
height: 150px;
position: relative;
}

.header {
display: flex;
justify-content: space-between;
padding: 0 10px;

::ng-deep .mat-card-header-text {
margin: 0;
width: 175px;
}

.mat-card-avatar {
font-size: 28px;
}
&_meta{
padding: 6px;
}

::ng-deep .mat-card-title {
font-weight: 400;
cursor: pointer;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
font-size: 18px;
}
&_right{
margin-top: 4px;
}
}

::ng-deep .mat-card-title:hover {
text-decoration: underline;
}
.group {
color: #6D6565;
background: #F1F1F1;
min-height: 24px;
padding: 12px 8px;
display: flex;
align-items: center;
gap: 4px;
.mat-icon {
height: $group-icon-size;
width: $group-icon-size;
font-size: $group-icon-size;
}

.subtitle {
font-size: 0.65rem;
}

.config-menu {
margin-top: -8px;
margin-right: -8px;
}
&--mine {
font-weight: bold;
}
}

.preview {
max-width: 280px;
height: 140px;

.image {
width: 100%;
background-color: rgb(211, 211, 211);
object-fit: cover;
max-width: 100%;
max-height: 100%;
width: 100%;
height: 100%;
.preview {
&_holder {
position: absolute;
height: 100%;
width: 100%;
&:hover{
cursor: pointer;
background: rgba(96, 96, 96, 0.55);
transition: background-color 300ms ease;
}
}
&_image {
width: 100%;
background-color: rgb(211, 211, 211);
object-fit: cover;
max-width: 100%;
max-height: 100%;
height: 100%;
}

&:hover {
.highlights {
display: block;
position: absolute;
padding: 5px 10px;
height: 140px;
width: 260px;
background-color: rgba(255, 255, 255, 0.55);
overflow: hidden;

.highlight {
font-style: italic;
font-size: 0.8em;
}
}
}
&_info {
display: flex;
position: absolute;
top: $sm-margin;
left: $sm-margin;
height: 20px;
gap: 6px;
z-index: 1;
}
}

&.no-preview {
.image {
opacity: 0.5;
}

&:hover {
.highlights {
height: 140px;
background-color: rgba(255, 255, 255, 0.8);
}

.image {
opacity: 1;
}
}
}
.meta {
&_title {
font-weight: 400;
font-size: 20px;
}
&_subtitle {
font-size: .75rem;
font-style: italic;
}

.section_title {
font-variant: small-caps;
&_title-container {
display: flex;
align-items: center;
justify-content: space-between;
}
}

.groups {
margin-bottom: 5px;
/*border-bottom: 1px solid #999;*/
padding: 5px 10px 0;
.info_item {
background: #F0F0F0;
padding: 4px;
height: 20px;
text-align: center;
border-radius: 4px;
font-weight: 600;
}

::ng-deep .mat-chip-list-wrapper {
margin: 0 -4px;
}
.organisation {
display: flex;
align-items: center;
gap: 4px;
max-width: 200px;

.organisation {
color: rgba(0, 0, 0, 0.9);
font-size: 0.7em;
min-height: 24px;
padding: 12px 8px;
background-color: white;
border: 1px solid rgba(0, 0, 0, 0.9);
}
& mat-icon {
flex: 1 0 auto;
}
}

.group {
@include group();
.text-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}

&.mygroup {
background-color: #959595;
color: white;
}
}

/* Medium devices such as tablets (768px and up)*/
@media only screen and (min-width: 768px) {
.card {
max-width: 350px;
min-width: 350px;
}
}

.highlights {
display: none;
/* Large devices such as laptops (1024px and up)*/
@media only screen and (min-width: 1024px) {
.card {
max-width: 364px;
min-width: 364px;
}
}

.footer {
display: flex;
align-items: center;
justify-content: flex-end;
position: absolute;
bottom: 0;
left: 0;
padding: 0 5px 1px 0;
right: 0;

.date {
font-size: 0.75em;
color: rgba(0, 0, 0, 0.55);
}
/* Largest devices such as desktops (1280px and up)*/
@media only screen and (min-width: 1280px) {
.card {
max-width: 384px;
min-width: 384px;
}
}
Loading

0 comments on commit 1921010

Please sign in to comment.