MaDgIK
/
explore-services
13
0
Fork 0
Code Issues Pull Requests Projects Releases 23 Wiki Activity

Rename all css files to less. Import less from library instead of css

This commit is contained in:
Konstantinos Triantafyllou 2022-07-18 18:59:32 +03:00
parent 7b29884305
commit 1d16f6f651
19 changed files with 113 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
explore/angular.json
View File

@ -54,7 +54,6 @@
],
"styles": [
"src/styles.less",
"src/deprecated.css",
"src/assets/common-assets/library-css/material.scss"
],
"scripts": [

4
explore/src/app/fos/fos.component.css
View File

@ -1,4 +0,0 @@
.custom-bottom-border {
border-bottom: solid 5px rgba(var(--explore-color-rgb), var(--opacity));
}

4
explore/src/app/fos/fos.component.html
View File

@ -111,9 +111,9 @@
</ng-container>
<ng-container *ngIf="keyword && keyword.length">
<div class="uk-margin-medium-top uk-padding-small">
<ng-container *ngFor="let item of viewResults;">
<ng-container *ngFor="let item of viewResults; let i=index">
<div
class="uk-margin-large-bottom uk-padding uk-padding-remove-top uk-padding-remove-horizontal uk-text-capitalize custom-bottom-border">
class="uk-margin-large-bottom uk-padding uk-padding-remove-top uk-padding-remove-horizontal uk-text-capitalize" [class.custom-bottom-border]="i < viewResults.length - 1">
<h2 class="uk-h4 uk-margin-remove">
<a [routerLink]="properties.searchLinkToResults" [queryParams]="{'fos': urlEncodeAndQuote(item.id)}"
class="uk-link-text" [innerHTML]="highlightKeyword(item.id)">

5
explore/src/app/fos/fos.component.less Normal file
View File

@ -0,0 +1,5 @@
@import (reference) "~src/assets/openaire-theme/less/_import-variables";
.custom-bottom-border {
border-bottom: 5px solid fade(@explore-color, @global-opacity);
}

4
explore/src/app/fos/fos.component.ts
View File

@ -16,7 +16,7 @@ import {PiwikService} from "../openaireLibrary/utils/piwik/piwik.service";
@Component({
selector: 'fos',
templateUrl: 'fos.component.html',
styleUrls: ['fos.component.css']
styleUrls: ['fos.component.less']
})
export class FosComponent implements OnInit, OnDestroy {
public url: string = null;
@ -174,4 +174,4 @@ export class FosComponent implements OnInit, OnDestroy {
this._meta.updateTag({content: description}, "name='description'");
this._meta.updateTag({content: description}, "property='og:description'");
}
}
}

42
explore/src/app/home/home.component.css
View File

@ -1,42 +0,0 @@
.home-background {
background-color: var(--light-color);
}
.link-actions img {
width: 17px;
}
.trello-button-blue {
background-color: #0076BA;
color: white;
}
.trello-button-blue:hover {
background-color: var(--secondary-color);
}
.home-logo img {
-webkit-filter: grayscale(1);
filter: grayscale(1);
transition-duration: 0.3s;
}
.home-logo:hover img {
-webkit-filter: grayscale(0);
filter: grayscale(0);
transition-duration: 0.3s;
}
#custom-links icon {
color: var(--primary-color);
/* transition: all 0.3s ease; */
}
#custom-links a:hover .link-title {
color: var(--secondary-color);
}
/* #custom-links a:hover icon {
transform: translateX(7px);
transition: all 0.3s ease;
} */
@media only screen and (min-width: 960px){
.explore-dark-logo-background {
background-image: url("~src/assets/explore-assets/home/explore-dark-logo.svg");
background-repeat: no-repeat;
background-position: left 95%;
background-size: 65%;
}
}

6
explore/src/app/home/home.component.html
View File

@ -282,9 +282,9 @@
<h2 class="uk-heading-large uk-margin-medium-bottom uk-margin-remove-top">
you may
</h2>
<div id="custom-links" class="uk-padding uk-grid uk-child-width-1-2@m uk-text-bold" uk-grid uk-height-match="target: .link-title;">
<div class="uk-padding uk-grid uk-child-width-1-2@m uk-text-bold" uk-grid uk-height-match="target: .link-title;">
<div>
<div class="uk-width-3-4 uk-margin-auto uk-padding uk-padding-remove-horizontal" style="border-bottom: 1px solid rgba(0,0,0,0.1)">
<div class="uk-width-3-4 uk-margin-auto uk-padding uk-padding-remove-horizontal custom-link">
<a href="https://provide.openaire.eu/home" target="_blank" class="uk-link-reset uk-text-large uk-flex uk-flex-middle uk-flex-between">
<span class="link-title">have your repository, Journal or CRIS system indexed in EXPLORE and take advantage of services for enriching metadata and counting usage?</span>
<icon name="east" ratio="1.5"></icon>
@ -292,7 +292,7 @@
</div>
</div>
<div>
<div class="uk-width-3-4 uk-margin-auto uk-padding uk-padding-remove-horizontal" style="border-bottom: 1px solid rgba(0,0,0,0.1)">
<div class="uk-width-3-4 uk-margin-auto uk-padding uk-padding-remove-horizontal custom-link">
<a href="https://canada.explore.openaire.eu/" target="_blank" class="uk-link-reset uk-text-large uk-flex uk-flex-middle uk-flex-between">
<span class="link-title">use EXPLORE as an application platform as a service (aPaaS) and set up a national portal for Open Science, such as Canada.EXPLORE?</span>
<icon name="east" ratio="1.5"></icon>

47
explore/src/app/home/home.component.less Normal file
View File

@ -0,0 +1,47 @@
@import (reference) "~src/assets/openaire-theme/less/_import-variables";
@trello-color: #0076BA;
.home-background {
background-color: @global-inverse-color;
}
.link-actions img {
width: 17px;
}
.home-logo {
img {
-webkit-filter: grayscale(1);
filter: grayscale(1);
transition-duration: 0.3s;
}
&:hover img {
-webkit-filter: grayscale(0);
filter: grayscale(0);
transition-duration: 0.3s;
}
}
.custom-link {
border-bottom: @global-border-width solid @global-border;
icon {
color: @global-primary-background;
}
a:hover .link-title {
color: @global-secondary-background;
}
}
@media only screen and (min-width: @breakpoint-medium) {
.explore-dark-logo-background {
background-image: url("~src/assets/explore-assets/home/explore-dark-logo.svg");
background-repeat: no-repeat;
background-position: left 95%;
background-size: 65%;
}
}

2
explore/src/app/home/home.component.ts
View File

@ -36,7 +36,7 @@ import {NumberUtils} from '../openaireLibrary/utils/number-utils.class';
@Component({
selector: 'home',
templateUrl: 'home.component.html',
styleUrls: ['home.component.css']
styleUrls: ['home.component.less']
})
export class HomeComponent implements OnInit, OnDestroy, AfterViewInit {
// MAX 12 logos in every slide

2
explore/src/app/openaireLibrary

@ -1 +1 @@
Subproject commit db5c95fe248c0e4fe059602185ee8a6161d9949f
Subproject commit f4a723d3acd5b7a25a245f60865eda63db4658b5

71
explore/src/app/sdg/sdg.component.css
View File

@ -1,71 +0,0 @@
.custom-sdg-dot:after {
content: "";
background-image: url(../../assets/explore-assets/sdg-dot-img.svg);
display: inline-block;
background-size: 100% 100%;
height: 18px;
width: 18px;
margin-left: 10px;
}
.sdg-card-text-color {
color: #F9F9F9 !important;
}
.sdg-card {
width: 265px;
height: 255px;
}
.sdg-card img {
height: 40px;
width: auto;
}
.sdg-1 {
background-color: #E6233D !important;
}
.sdg-2 {
background-color: #DF9F00 !important;
}
.sdg-3 {
background-color: #19A220 !important;
}
.sdg-4 {
background-color: #D70023 !important;
}
.sdg-5 {
background-color: #FF0B00 !important;
}
.sdg-6 {
background-color: #00BFE8 !important;
}
.sdg-7 {
background-color: #FFC300 !important;
}
.sdg-8 {
background-color: #B10240 !important;
}
.sdg-9 {
background-color: #FF5D00 !important;
}
.sdg-10 {
background-color: #F50D86 !important;
}
.sdg-11 {
background-color: #FF8A00 !important;
}
.sdg-12 {
background-color: #CA8A03 !important;
}
.sdg-13 {
background-color: #2B772B !important;
}
.sdg-14 {
background-color: #0098DF !important;
}
.sdg-15 {
background-color: #00B91C !important;
}
.sdg-16 {
background-color: #0069A2 !important;
}
.sdg-17 {
background-color: #1C336A !important;
}

14
explore/src/app/sdg/sdg.component.html
View File

@ -30,9 +30,9 @@
</div>
</div>
<div class="uk-width-2-5@m uk-width-1-1@s uk-text-center uk-position-relative" uk-scrollspy-class>
<img src="../../assets/explore-assets/sdg-hero-img.svg" loading="lazy">
<div class="uk-position-absolute uk-card uk-card-default uk-padding" style="bottom: 0; left: 0">
<img src="../../assets/explore-assets/sdg-badge.png" loading="lazy" style="max-width: 215px">
<img src="assets/explore-assets/sdg-hero-img.svg" loading="lazy">
<div class="uk-position-bottom-left uk-card uk-card-default uk-padding">
<img src="assets/explore-assets/sdg-badge.png" loading="lazy" style="max-width: 215px">
</div>
</div>
</div>
@ -48,16 +48,16 @@
class="uk-link-reset">
<div class="uk-card uk-card-default uk-card-hover" [class]="'sdg-card sdg-' + sdg.code">
<div class="uk-height-1-1 uk-flex uk-flex-column uk-flex-between">
<div class="uk-flex uk-flex-middle uk-padding-small uk-padding-remove-bottom">
<div class="uk-text-bold sdg-card-text-color uk-h4 uk-margin-remove">
<div class="uk-flex uk-flex-middle uk-light uk-padding-small uk-padding-remove-bottom">
<div class="uk-text-bold uk-h4 uk-margin-remove">
{{sdg.code}}
</div>
<div class="uk-text-bold sdg-card-text-color uk-text-uppercase uk-text-small uk-margin-small-left">
<div class="uk-text-bold uk-text-uppercase uk-text-small uk-margin-small-left">
<span [innerHTML]="sdg.html"></span>
</div>
</div>
<div class="uk-text-center">
<img [src]="'../../assets/explore-assets/sdgs/g' + sdg.code + '.png'" alt="">
<img [src]="'assets/explore-assets/sdgs/g' + sdg.code + '.png'" alt="">
</div>
<div class="uk-text-center uk-padding-small uk-background-default" style="border-radius: 0 0 4px 4px;">
<span class="uk-text-large uk-text-bold uk-margin-small-bottom">{{sdg.number == null ? '0' : sdg.number | number}}</span>

30
explore/src/app/sdg/sdg.component.less Normal file
View File

@ -0,0 +1,30 @@
@import (reference) "~src/assets/openaire-theme/less/_import-variables";
@sdgs: #E6233D, #DF9F00, #19A220, #D70023, #FF0B00, #00BFE8, #FFC300, #B10240, #FF5D00,
#F50D86, #FF8A00, #CA8A03, #2B772B, #0098DF, #00B91C, #0069A2, #1C336A;
custom-sdg-dot:after {
content: "";
background-image: url("~src/assets/explore-assets/sdg-dot-img.svg");
display: inline-block;
background-size: 100% 100%;
height: 18px;
width: 18px;
margin-left: 10px;
}
.sdg-card {
width: 265px;
height: 255px;
img {
height: @global-control-height;
width: auto;
}
each(@sdgs, {
&.sdg-@{index} {
background-color: @value !important;
}
})
}

4
explore/src/app/sdg/sdg.component.ts
View File

@ -16,7 +16,7 @@ import {PiwikService} from "../openaireLibrary/utils/piwik/piwik.service";
@Component({
selector: 'sdg',
templateUrl: 'sdg.component.html',
styleUrls: ['sdg.component.css']
styleUrls: ['sdg.component.less']
})
export class SdgComponent implements OnInit, OnDestroy {
public url: string = null;
@ -94,4 +94,4 @@ export class SdgComponent implements OnInit, OnDestroy {
this._meta.updateTag({content: description}, "name='description'");
this._meta.updateTag({content: description}, "property='og:description'");
}
}
}

2
explore/src/assets/common-assets

@ -1 +1 @@
Subproject commit d577c6d69a55901e319cf0cf5b93f900f1cdeaab
Subproject commit f6bd64ca6f99fdff03c8368eb381d42871154512

6
explore/src/assets/explore-custom.less
View File

@ -14,6 +14,12 @@
/* Label */
@label-secondary-color: @explore-color;
/* General */
@general-tab-featured-tab: @explore-color;
/* Landing */
@landing-portal-color: @explore-color;
.deposit {
@import (multiple) "~src/assets/openaire-theme/less/_import";
}

2
explore/src/assets/openaire-theme

@ -1 +1 @@
Subproject commit c80b7371801d42611c611707ca933c1c83c3c672
Subproject commit bace9ea21587351f209341dc274ef7522ec4475d

4
explore/src/deprecated.css
View File

@ -1,4 +0,0 @@
@import "assets/openaire-theme/css/structure/variables.css";
@import "assets/common-assets/library.css";
.landing { --landing-text-primary-color: var(--explore-color); }

6
explore/src/styles.less
View File

@ -1,3 +1,7 @@
/* You can add global styles to this file, and also import other style files */
@import "~src/assets/openaire-theme/less/_import";
@import "assets/explore-custom";
@import "~src/assets/common-assets/less/general";
@import "~src/assets/common-assets/less/user";
@import "~src/assets/common-assets/less/linking";
@import "~src/assets/common-assets/less/landing";
@import "~src/assets/explore-custom";