updates to customization component to use the background image for the forms
This commit is contained in:
parent
8acbe5889d
commit
08ac3c8d19
|
@ -169,7 +169,7 @@ export class AppComponent {
|
||||||
this.configurationService.initCommunityInformation(this.properties, (communityId) ? communityId : this.properties.adminToolsPortalType);
|
this.configurationService.initCommunityInformation(this.properties, (communityId) ? communityId : this.properties.adminToolsPortalType);
|
||||||
}
|
}
|
||||||
initLayout(communityId){
|
initLayout(communityId){
|
||||||
if(!this.layout) {
|
if(!this.layout && location.pathname.indexOf("/preview") == -1) {
|
||||||
this._layoutService.getLayout(this.properties, communityId).subscribe(
|
this._layoutService.getLayout(this.properties, communityId).subscribe(
|
||||||
layout => {
|
layout => {
|
||||||
if (layout) {
|
if (layout) {
|
||||||
|
|
|
@ -62,15 +62,19 @@ export class CustomizationComponent {
|
||||||
:root {
|
:root {
|
||||||
--portal-main-color: ` + this.layout.identity.mainColor+`;
|
--portal-main-color: ` + this.layout.identity.mainColor+`;
|
||||||
--portal-dark-color: ` + this.layout.identity.secondaryColor+`;
|
--portal-dark-color: ` + this.layout.identity.secondaryColor+`;
|
||||||
|
--background-light-color:` + this.layout.backgrounds.light.color+`;
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
//Search SVG
|
console.log(" create form css " , this.layout.backgrounds.form)
|
||||||
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>`;;
|
//Search SVG
|
||||||
let svg = 'data:image/svg+xml,' + encodeURIComponent(search.replace('{{color}}', this.layout.backgrounds.form.color));
|
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>`;
|
||||||
this.customizationCss = this.customizationCss.concat('.generalSearchForm,.publicationsSearchForm,.projectsSearchForm, .projectsTableSearchForm,.organizationsSearchForm,.datasourcesSearchForm {');
|
;
|
||||||
this.customizationCss = this.customizationCss.concat(' background: ' + "url('" + svg + "') transparent no-repeat center bottom; ");
|
let svg = 'data:image/svg+xml,' + encodeURIComponent(search.replace('{{color}}', this.layout.backgrounds.form.color));
|
||||||
this.customizationCss = this.customizationCss.concat(" background-size: cover !important; ");
|
this.customizationCss = this.customizationCss.concat('.generalSearchForm,.publicationsSearchForm,.projectsSearchForm, .projectsTableSearchForm,.organizationsSearchForm,.datasourcesSearchForm {');
|
||||||
this.customizationCss = this.customizationCss.concat(" height: inherit; }");
|
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
|
//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>`;;
|
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>`;;
|
||||||
|
|
|
@ -24,7 +24,8 @@ export class PiwikHelper{
|
||||||
"gotriple":490,
|
"gotriple":490,
|
||||||
"neanias-underwater":474,
|
"neanias-underwater":474,
|
||||||
"inspired-ris":530,
|
"inspired-ris":530,
|
||||||
"citizen-science":538
|
"citizen-science":538,
|
||||||
|
"eut":558
|
||||||
};
|
};
|
||||||
public static getSiteId(communityId:string, environment:string){
|
public static getSiteId(communityId:string, environment:string){
|
||||||
return this.siteIDs[communityId];
|
return this.siteIDs[communityId];
|
||||||
|
|
Loading…
Reference in New Issue