updates to customization component to use the background image for the forms

This commit is contained in:
argirok 2021-11-26 14:50:37 +02:00
parent 8acbe5889d
commit 08ac3c8d19
3 changed files with 14 additions and 9 deletions

View File

@ -169,7 +169,7 @@ export class AppComponent {
this.configurationService.initCommunityInformation(this.properties, (communityId) ? communityId : this.properties.adminToolsPortalType);
}
initLayout(communityId){
if(!this.layout) {
if(!this.layout && location.pathname.indexOf("/preview") == -1) {
this._layoutService.getLayout(this.properties, communityId).subscribe(
layout => {
if (layout) {

View File

@ -62,15 +62,19 @@ export class CustomizationComponent {
:root {
--portal-main-color: ` + this.layout.identity.mainColor+`;
--portal-dark-color: ` + this.layout.identity.secondaryColor+`;
--background-light-color:` + this.layout.backgrounds.light.color+`;
}
`;
//Search SVG
let search = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 532"><defs><style>.cls-1{isolation:isolate;}.cls-2{fill:{{color}};mix-blend-mode:multiply;}</style></defs><title>Asset 3</title><g class="cls-1"><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-2" d="M0,431s362,109,841,62,632,68,1159-9V0H0Z"/><path class="cls-2" d="M0,514s1401,71,2000-69V0H0Z"/></g></g></g></svg>`;;
let svg = 'data:image/svg+xml,' + encodeURIComponent(search.replace('{{color}}', this.layout.backgrounds.form.color));
this.customizationCss = this.customizationCss.concat('.generalSearchForm,.publicationsSearchForm,.projectsSearchForm, .projectsTableSearchForm,.organizationsSearchForm,.datasourcesSearchForm {');
this.customizationCss = this.customizationCss.concat(' background: ' + "url('" + svg + "') transparent no-repeat center bottom; ");
this.customizationCss = this.customizationCss.concat(" background-size: cover !important; ");
this.customizationCss = this.customizationCss.concat(" height: inherit; }");
console.log(" create form css " , this.layout.backgrounds.form)
//Search SVG
let search = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 532"><defs><style>.cls-1{isolation:isolate;}.cls-2{fill:{{color}};mix-blend-mode:multiply;}</style></defs><title>Asset 3</title><g class="cls-1"><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-2" d="M0,431s362,109,841,62,632,68,1159-9V0H0Z"/><path class="cls-2" d="M0,514s1401,71,2000-69V0H0Z"/></g></g></g></svg>`;
;
let svg = 'data:image/svg+xml,' + encodeURIComponent(search.replace('{{color}}', this.layout.backgrounds.form.color));
this.customizationCss = this.customizationCss.concat('.generalSearchForm,.publicationsSearchForm,.projectsSearchForm, .projectsTableSearchForm,.organizationsSearchForm,.datasourcesSearchForm {');
this.customizationCss = this.customizationCss.concat(' background: '
+ "url('" + (this.layout.backgrounds.form.imageFile?(this.properties.utilsService + '/download/' +this.layout.backgrounds.form.imageFile): svg) + "') transparent no-repeat "+this.layout.backgrounds.form.position+" ;");
this.customizationCss = this.customizationCss.concat(" background-size: cover !important; ");
this.customizationCss = this.customizationCss.concat(" height: inherit; }");
//Button link SVG
let arrow = `<svg width="23" height="11" viewBox="0 0 23 11" xmlns="http://www.w3.org/2000/svg"><polyline fill="none" stroke="{{color}}" points="17 1 22 5.5 17 10 " /><line fill="none" stroke="{{color}}" x1="0" y1="5.5" x2="22.4" y2="5.5" /></svg>`;;

View File

@ -24,7 +24,8 @@ export class PiwikHelper{
"gotriple":490,
"neanias-underwater":474,
"inspired-ris":530,
"citizen-science":538
"citizen-science":538,
"eut":558
};
public static getSiteId(communityId:string, environment:string){
return this.siteIDs[communityId];