From 1d16f6f651beb855248c6b3678abde41e1091c59 Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Mon, 18 Jul 2022 18:59:32 +0300 Subject: [PATCH] Rename all css files to less. Import less from library instead of css --- explore/angular.json | 1 - explore/src/app/fos/fos.component.css | 4 -- explore/src/app/fos/fos.component.html | 4 +- explore/src/app/fos/fos.component.less | 5 ++ explore/src/app/fos/fos.component.ts | 4 +- explore/src/app/home/home.component.css | 42 -------------- explore/src/app/home/home.component.html | 6 +- explore/src/app/home/home.component.less | 47 ++++++++++++++++ explore/src/app/home/home.component.ts | 2 +- explore/src/app/openaireLibrary | 2 +- explore/src/app/sdg/sdg.component.css | 71 ------------------------ explore/src/app/sdg/sdg.component.html | 14 ++--- explore/src/app/sdg/sdg.component.less | 30 ++++++++++ explore/src/app/sdg/sdg.component.ts | 4 +- explore/src/assets/common-assets | 2 +- explore/src/assets/explore-custom.less | 6 ++ explore/src/assets/openaire-theme | 2 +- explore/src/deprecated.css | 4 -- explore/src/styles.less | 6 +- 19 files changed, 113 insertions(+), 143 deletions(-) delete mode 100644 explore/src/app/fos/fos.component.css create mode 100644 explore/src/app/fos/fos.component.less delete mode 100644 explore/src/app/home/home.component.css create mode 100644 explore/src/app/home/home.component.less delete mode 100644 explore/src/app/sdg/sdg.component.css create mode 100644 explore/src/app/sdg/sdg.component.less delete mode 100644 explore/src/deprecated.css diff --git a/explore/angular.json b/explore/angular.json index 3361ad45..3772fd7a 100644 --- a/explore/angular.json +++ b/explore/angular.json @@ -54,7 +54,6 @@ ], "styles": [ "src/styles.less", - "src/deprecated.css", "src/assets/common-assets/library-css/material.scss" ], "scripts": [ diff --git a/explore/src/app/fos/fos.component.css b/explore/src/app/fos/fos.component.css deleted file mode 100644 index 5f7378e1..00000000 --- a/explore/src/app/fos/fos.component.css +++ /dev/null @@ -1,4 +0,0 @@ -.custom-bottom-border { - border-bottom: solid 5px rgba(var(--explore-color-rgb), var(--opacity)); - -} \ No newline at end of file diff --git a/explore/src/app/fos/fos.component.html b/explore/src/app/fos/fos.component.html index 3c729e5b..b8e77672 100644 --- a/explore/src/app/fos/fos.component.html +++ b/explore/src/app/fos/fos.component.html @@ -111,9 +111,9 @@
- +
+ 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">

diff --git a/explore/src/app/fos/fos.component.less b/explore/src/app/fos/fos.component.less new file mode 100644 index 00000000..c8020e14 --- /dev/null +++ b/explore/src/app/fos/fos.component.less @@ -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); +} diff --git a/explore/src/app/fos/fos.component.ts b/explore/src/app/fos/fos.component.ts index 940fab38..dc588ea3 100644 --- a/explore/src/app/fos/fos.component.ts +++ b/explore/src/app/fos/fos.component.ts @@ -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'"); } -} \ No newline at end of file +} diff --git a/explore/src/app/home/home.component.css b/explore/src/app/home/home.component.css deleted file mode 100644 index 0419f10e..00000000 --- a/explore/src/app/home/home.component.css +++ /dev/null @@ -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%; - } -} \ No newline at end of file diff --git a/explore/src/app/home/home.component.html b/explore/src/app/home/home.component.html index ffcf2145..e261d818 100644 --- a/explore/src/app/home/home.component.html +++ b/explore/src/app/home/home.component.html @@ -282,9 +282,9 @@

you may

-
+
-
+
have your repository, Journal or CRIS system indexed in EXPLORE and take advantage of services for enriching metadata and counting usage? @@ -292,7 +292,7 @@
-
+
use EXPLORE as an application platform as a service (aPaaS) and set up a national portal for Open Science, such as Canada.EXPLORE? diff --git a/explore/src/app/home/home.component.less b/explore/src/app/home/home.component.less new file mode 100644 index 00000000..32dc0eba --- /dev/null +++ b/explore/src/app/home/home.component.less @@ -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%; + } +} diff --git a/explore/src/app/home/home.component.ts b/explore/src/app/home/home.component.ts index c9a11911..d7093b5a 100644 --- a/explore/src/app/home/home.component.ts +++ b/explore/src/app/home/home.component.ts @@ -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 diff --git a/explore/src/app/openaireLibrary b/explore/src/app/openaireLibrary index db5c95fe..f4a723d3 160000 --- a/explore/src/app/openaireLibrary +++ b/explore/src/app/openaireLibrary @@ -1 +1 @@ -Subproject commit db5c95fe248c0e4fe059602185ee8a6161d9949f +Subproject commit f4a723d3acd5b7a25a245f60865eda63db4658b5 diff --git a/explore/src/app/sdg/sdg.component.css b/explore/src/app/sdg/sdg.component.css deleted file mode 100644 index c4826a52..00000000 --- a/explore/src/app/sdg/sdg.component.css +++ /dev/null @@ -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; -} \ No newline at end of file diff --git a/explore/src/app/sdg/sdg.component.html b/explore/src/app/sdg/sdg.component.html index 5fd109a4..0e22a05d 100644 --- a/explore/src/app/sdg/sdg.component.html +++ b/explore/src/app/sdg/sdg.component.html @@ -30,9 +30,9 @@
- -
- + +
+
@@ -48,16 +48,16 @@ class="uk-link-reset">
-
-
+
+
{{sdg.code}}
-
+
- +
{{sdg.number == null ? '0' : sdg.number | number}} diff --git a/explore/src/app/sdg/sdg.component.less b/explore/src/app/sdg/sdg.component.less new file mode 100644 index 00000000..481aa9b9 --- /dev/null +++ b/explore/src/app/sdg/sdg.component.less @@ -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; + } + }) +} diff --git a/explore/src/app/sdg/sdg.component.ts b/explore/src/app/sdg/sdg.component.ts index 54cf1e4f..c2530bd8 100644 --- a/explore/src/app/sdg/sdg.component.ts +++ b/explore/src/app/sdg/sdg.component.ts @@ -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'"); } -} \ No newline at end of file +} diff --git a/explore/src/assets/common-assets b/explore/src/assets/common-assets index d577c6d6..f6bd64ca 160000 --- a/explore/src/assets/common-assets +++ b/explore/src/assets/common-assets @@ -1 +1 @@ -Subproject commit d577c6d69a55901e319cf0cf5b93f900f1cdeaab +Subproject commit f6bd64ca6f99fdff03c8368eb381d42871154512 diff --git a/explore/src/assets/explore-custom.less b/explore/src/assets/explore-custom.less index 3d72a396..60707c55 100644 --- a/explore/src/assets/explore-custom.less +++ b/explore/src/assets/explore-custom.less @@ -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"; } diff --git a/explore/src/assets/openaire-theme b/explore/src/assets/openaire-theme index c80b7371..bace9ea2 160000 --- a/explore/src/assets/openaire-theme +++ b/explore/src/assets/openaire-theme @@ -1 +1 @@ -Subproject commit c80b7371801d42611c611707ca933c1c83c3c672 +Subproject commit bace9ea21587351f209341dc274ef7522ec4475d diff --git a/explore/src/deprecated.css b/explore/src/deprecated.css deleted file mode 100644 index f8d50eab..00000000 --- a/explore/src/deprecated.css +++ /dev/null @@ -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); } diff --git a/explore/src/styles.less b/explore/src/styles.less index 8f9a6394..1ac0007b 100644 --- a/explore/src/styles.less +++ b/explore/src/styles.less @@ -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";