Skip to content

Commit c6afc16

Browse files
milanmajchrakmilanmajchrak
authored
VSB-TUO/Creative Common license view for the Item Page (#966)
* Created Creative Common license view for the Item Page view * Corrected grammar mistakes, updated hover animation for cc icons * Removed debug method and improved performance
1 parent f2aaa4e commit c6afc16

9 files changed

Lines changed: 835 additions & 1 deletion

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: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
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+
40+
&.fa-creative-commons {
41+
color: #f39c12;
42+
}
43+
44+
&.fa-creative-commons-by {
45+
color: #3498db;
46+
}
47+
48+
&.fa-creative-commons-sa {
49+
color: #27ae60;
50+
}
51+
52+
&.fa-creative-commons-nc {
53+
color: #e74c3c;
54+
}
55+
56+
&.fa-creative-commons-nd {
57+
color: #9b59b6;
58+
}
59+
60+
&.fa-creative-commons-zero {
61+
color: #34495e;
62+
}
63+
}
64+
}
65+
66+
.cc-license-text {
67+
font-size: 0.95rem;
68+
font-weight: 500;
69+
}
70+
71+
&:hover .cc-icons i {
72+
font-size: 1.2rem;
73+
}
74+
}
75+
76+
.cc-license-description {
77+
font-size: 0.85rem;
78+
color: #6c757d;
79+
font-style: italic;
80+
margin-left: 0;
81+
}
82+
}
83+
}
84+
85+
// Responsive design
86+
@media (max-width: 991.98px) {
87+
.clarin-item-page-field {
88+
.cc-license-content {
89+
.cc-license-link {
90+
flex-direction: column;
91+
align-items: flex-start;
92+
gap: 4px;
93+
94+
.cc-icons {
95+
gap: 1px;
96+
97+
i {
98+
font-size: 1rem;
99+
}
100+
}
101+
102+
.cc-license-text {
103+
font-size: 0.9rem;
104+
}
105+
}
106+
107+
.cc-license-description {
108+
font-size: 0.8rem;
109+
margin-top: 2px;
110+
}
111+
}
112+
}
113+
}

0 commit comments

Comments
 (0)