Skip to content

Commit f290f37

Browse files
milanmajchrakmilanmajchrak
committed
Created Creative Common license view for the Item Page view
1 parent c165036 commit f290f37

9 files changed

Lines changed: 850 additions & 2 deletions

File tree

‎src/app/item-page/item-page.module.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,7 @@ import { ClarinDateItemFieldComponent } from './simple/field-components/clarin-d
9292
import { ClarinDescriptionItemFieldComponent } from './simple/field-components/clarin-description-item-field/clarin-description-item-field.component';
9393
import { ClarinFilesSectionComponent } from './clarin-files-section/clarin-files-section.component';
9494
import { UsageReportDataService } from '../core/statistics/usage-report-data.service';
95+
import { CreativeCommonsLicenseFieldComponent } from './simple/field-components/creative-commons-license-field/creative-commons-license-field.component';
9596

9697
const ENTRY_COMPONENTS = [
9798
// put only entry components that use custom decorator
@@ -157,7 +158,8 @@ const DECLARATIONS = [
157158
ClarinIdentifierItemFieldComponent,
158159
ClarinDateItemFieldComponent,
159160
ClarinDescriptionItemFieldComponent,
160-
ClarinFilesSectionComponent
161+
ClarinFilesSectionComponent,
162+
CreativeCommonsLicenseFieldComponent
161163
];
162164

163165
@NgModule({

‎src/app/item-page/simple/field-components/creative-commons-license-field/creative-commons-license-field.component.html‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<div class="clarin-item-page-field justify-content-start" *ngIf="hasCcLicense$ | async">
2+
<div class="d-flex">
3+
<div><i class="fab fa-creative-commons fa-xs"></i></div>
4+
<div class="pl-1"><b>{{ 'item.page.cc-license' | translate }}</b></div>
5+
</div>
6+
<div>
7+
<div>
8+
<ng-container *ngIf="(ccLicenseUrl$ | async) as licenseUrl">
9+
<ng-container *ngIf="(ccLicenseName$ | async) as licenseName">
10+
<div class="cc-license-content">
11+
<div class="cc-license-row">
12+
<a [href]="licenseUrl"
13+
target="_blank"
14+
rel="noopener noreferrer"
15+
class="cc-license-link">
16+
<div class="cc-icons">
17+
<ng-container [ngSwitch]="getLicenseType(licenseName)">
18+
<ng-container *ngSwitchCase="'by'">
19+
<i class="fab fa-creative-commons"></i>
20+
<i class="fab fa-creative-commons-by"></i>
21+
</ng-container>
22+
<ng-container *ngSwitchCase="'by-sa'">
23+
<i class="fab fa-creative-commons"></i>
24+
<i class="fab fa-creative-commons-by"></i>
25+
<i class="fab fa-creative-commons-sa"></i>
26+
</ng-container>
27+
<ng-container *ngSwitchCase="'by-nc'">
28+
<i class="fab fa-creative-commons"></i>
29+
<i class="fab fa-creative-commons-by"></i>
30+
<i class="fab fa-creative-commons-nc"></i>
31+
</ng-container>
32+
<ng-container *ngSwitchCase="'by-nc-sa'">
33+
<i class="fab fa-creative-commons"></i>
34+
<i class="fab fa-creative-commons-by"></i>
35+
<i class="fab fa-creative-commons-nc"></i>
36+
<i class="fab fa-creative-commons-sa"></i>
37+
</ng-container>
38+
<ng-container *ngSwitchCase="'by-nd'">
39+
<i class="fab fa-creative-commons"></i>
40+
<i class="fab fa-creative-commons-by"></i>
41+
<i class="fab fa-creative-commons-nd"></i>
42+
</ng-container>
43+
<ng-container *ngSwitchCase="'by-nc-nd'">
44+
<i class="fab fa-creative-commons"></i>
45+
<i class="fab fa-creative-commons-by"></i>
46+
<i class="fab fa-creative-commons-nc"></i>
47+
<i class="fab fa-creative-commons-nd"></i>
48+
</ng-container>
49+
<ng-container *ngSwitchCase="'cc0'">
50+
<i class="fab fa-creative-commons"></i>
51+
<i class="fab fa-creative-commons-zero"></i>
52+
</ng-container>
53+
<ng-container *ngSwitchDefault>
54+
<i class="fab fa-creative-commons"></i>
55+
</ng-container>
56+
</ng-container>
57+
</div>
58+
<span class="cc-license-text">{{ licenseName }}</span>
59+
</a>
60+
</div>
61+
</div>
62+
</ng-container>
63+
</ng-container>
64+
</div>
65+
</div>
66+
</div>

‎src/app/item-page/simple/field-components/creative-commons-license-field/creative-commons-license-field.component.scss‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
@import '../../item-page.component';
2+
3+
@media (min-width: 992px) {
4+
.col-2-5 {
5+
flex: 0 0 20%;
6+
max-width: 20%;
7+
}
8+
}
9+
10+
.clarin-item-page-field {
11+
.cc-license-content {
12+
.cc-license-row {
13+
display: flex;
14+
flex-direction: column;
15+
gap: 4px;
16+
}
17+
18+
.cc-license-link {
19+
display: inline-flex;
20+
align-items: center;
21+
gap: 8px;
22+
text-decoration: none;
23+
color: #007bff;
24+
font-weight: 500;
25+
transition: all 0.2s ease;
26+
27+
&:hover {
28+
color: #0056b3;
29+
text-decoration: none;
30+
}
31+
32+
.cc-icons {
33+
display: flex;
34+
align-items: center;
35+
gap: 2px;
36+
37+
i {
38+
font-size: 1.1rem;
39+
transition: transform 0.2s ease;
40+
41+
&.fa-creative-commons {
42+
color: #f39c12;
43+
}
44+
45+
&.fa-creative-commons-by {
46+
color: #3498db;
47+
}
48+
49+
&.fa-creative-commons-sa {
50+
color: #27ae60;
51+
}
52+
53+
&.fa-creative-commons-nc {
54+
color: #e74c3c;
55+
}
56+
57+
&.fa-creative-commons-nd {
58+
color: #9b59b6;
59+
}
60+
61+
&.fa-creative-commons-zero {
62+
color: #34495e;
63+
}
64+
}
65+
}
66+
67+
.cc-license-text {
68+
font-size: 0.95rem;
69+
font-weight: 500;
70+
}
71+
72+
&:hover .cc-icons i {
73+
transform: scale(1.05);
74+
}
75+
}
76+
77+
.cc-license-description {
78+
font-size: 0.85rem;
79+
color: #6c757d;
80+
font-style: italic;
81+
margin-left: 0;
82+
}
83+
}
84+
}
85+
86+
// Responsive design
87+
@media (max-width: 991.98px) {
88+
.clarin-item-page-field {
89+
.cc-license-content {
90+
.cc-license-link {
91+
flex-direction: column;
92+
align-items: flex-start;
93+
gap: 4px;
94+
95+
.cc-icons {
96+
gap: 1px;
97+
98+
i {
99+
font-size: 1rem;
100+
}
101+
}
102+
103+
.cc-license-text {
104+
font-size: 0.9rem;
105+
}
106+
}
107+
108+
.cc-license-description {
109+
font-size: 0.8rem;
110+
margin-top: 2px;
111+
}
112+
}
113+
}
114+
}

0 commit comments

Comments
 (0)