customization: fixes layout + preview background and sizes
This commit is contained in:
parent
eaebaded60
commit
0c9242d9de
|
@ -21,8 +21,8 @@ declare var UIkit;
|
||||||
[style.background-image]=" getUrl()">
|
[style.background-image]=" getUrl()">
|
||||||
|
|
||||||
|
|
||||||
<a (click)="removePhoto()" uk-tooltip="Remove" class="uk-float-right uk-padding-small uk-background-muted">
|
<a (click)="removePhoto()" uk-tooltip="Remove" class="uk-float-right uk-border-rounded uk-margin-top uk-margin-right uk-background-muted uk-button uk-button-link">
|
||||||
<icon name="remove" [defaultSize]="true" [flex]="true"></icon>
|
<icon name="delete" [defaultSize]="true" [flex]="true"></icon>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -19,10 +19,12 @@ import {CustomizationOptions} from '../../openaireLibrary/connect/community/Cust
|
||||||
styles:[
|
styles:[
|
||||||
`
|
`
|
||||||
.color-input{
|
.color-input{
|
||||||
width:15px;
|
width:24px;
|
||||||
height:8px;
|
height:14px;
|
||||||
border-radius:3px;
|
border-radius:3px;
|
||||||
border:0.10000000149011612px solid #707070;
|
border:0.1px solid #707070;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
}`
|
}`
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
|
|
|
@ -28,7 +28,7 @@
|
||||||
<div *ngIf="item.icon" class="uk-width-auto">
|
<div *ngIf="item.icon" class="uk-width-auto">
|
||||||
<icon class="menu-icon" [name]="item.icon" [flex]="true"></icon>
|
<icon class="menu-icon" [name]="item.icon" [flex]="true"></icon>
|
||||||
</div>
|
</div>
|
||||||
<span [class.uk-text-small]="item.id != menuSelected.id"
|
<span
|
||||||
class="uk-width-expand uk-text-truncate uk-margin-small-left">
|
class="uk-width-expand uk-text-truncate uk-margin-small-left">
|
||||||
{{item.name}}
|
{{item.name}}
|
||||||
</span>
|
</span>
|
||||||
|
@ -126,12 +126,10 @@
|
||||||
|
|
||||||
<div class=" uk-padding-small ">
|
<div class=" uk-padding-small ">
|
||||||
<div class="uk-margin-top uk-margin-small-bottom uk-h5">See a preview</div>
|
<div class="uk-margin-top uk-margin-small-bottom uk-h5">See a preview</div>
|
||||||
<div id="ipadcontainer" class=" uk-flex uk-flex-center uk-flex-middle">
|
<div id="container" class=" uk-flex uk-flex-center uk-flex-middle">
|
||||||
<div id="iframecontainer" class="">
|
<div id="iframecontainer" class="">
|
||||||
<div
|
<div class="uk-height-1-1">
|
||||||
class="uk-margin-medium-top uk-position-relative uk-width-1-1 uk-height-1-1 uk-flex uk-flex-center">
|
<div class=" uk-width-1-1 refresh-indicator">
|
||||||
<div *ngIf="hasChanges(draftCustomizationOptions, appliedCustomizationOptions)"
|
|
||||||
class=" uk-width-1-1 refresh-indicator">
|
|
||||||
<div class="uk-position-relative uk-height-1-1">
|
<div class="uk-position-relative uk-height-1-1">
|
||||||
<div class="uk-position-center uk-text-center clickable uk-h3" style="color:white"
|
<div class="uk-position-center uk-text-center clickable uk-h3" style="color:white"
|
||||||
(click)="applyLayout()">
|
(click)="applyLayout()">
|
||||||
|
@ -144,7 +142,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<iframe *ngIf="previewUrl" [src]="previewUrl" class="uk-width-1-1 "
|
<iframe *ngIf="previewUrl" [src]="previewUrl" class="uk-width-1-1 "
|
||||||
style="transform: scale(0.28,0.28) translate(1258px,-865px);width: 1000px;height: 700px;border-radius: 50px;"
|
style=" border-radius: 10px;"
|
||||||
></iframe>
|
></iframe>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -41,20 +41,27 @@ declare var UIkit;
|
||||||
iframe, .refresh-indicator{
|
iframe, .refresh-indicator{
|
||||||
height:100%
|
height:100%
|
||||||
}
|
}
|
||||||
#ipadcontainer{
|
#container{
|
||||||
background-image: url('/assets/iPad-Pro.svg');
|
position: relative;
|
||||||
background-size: contain;
|
width: 100%;
|
||||||
background-repeat: no-repeat;
|
overflow: hidden;
|
||||||
height: 900px;
|
padding-top: 56.25%; /* 16:9 Aspect Ratio */
|
||||||
|
background-color:black;
|
||||||
|
border-radius:10px;
|
||||||
}
|
}
|
||||||
#iframecontainer{
|
#iframecontainer{
|
||||||
height: 64%;
|
|
||||||
width: 73%;
|
position: absolute;
|
||||||
}
|
top: 2%;
|
||||||
.uk-nav-sub{
|
left: 2.5%;
|
||||||
padding-left: 25px;
|
bottom: 2%;
|
||||||
|
right: 2.5%;
|
||||||
|
width: 95%;
|
||||||
|
height: 96%;
|
||||||
|
border: none;
|
||||||
|
border-radius:10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
`]
|
`]
|
||||||
})
|
})
|
||||||
|
|
||||||
|
@ -270,6 +277,7 @@ sidebarItems = [{name:"Identity", id : "identity", icon: "desktop_windows" },
|
||||||
}
|
}
|
||||||
getCommunityUrl() {
|
getCommunityUrl() {
|
||||||
return 'https://'+ (this.properties.environment == 'production'?'':'beta.')+this.communityId+'.openaire.eu';
|
return 'https://'+ (this.properties.environment == 'production'?'':'beta.')+this.communityId+'.openaire.eu';
|
||||||
|
// return "https://example.com"
|
||||||
}
|
}
|
||||||
|
|
||||||
getCommunityUrlNewLayout(layout: string) {
|
getCommunityUrlNewLayout(layout: string) {
|
||||||
|
|
|
@ -21,7 +21,7 @@ import {ButtonsCustomization} from '../../openaireLibrary/connect/community/Cust
|
||||||
></quick-look-buttons>
|
></quick-look-buttons>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div [class.uk-margin-top]="!buttonView">
|
<div>
|
||||||
<div class="uk-margin-large-top uk-margin-medium-bottom uk-text-large">Light background</div>
|
<div class="uk-margin-large-top uk-margin-medium-bottom uk-text-large">Light background</div>
|
||||||
<div [class]="'uk-padding-small uk-text-center uk-width-1-1 uk-height-medium lightBackground' + (buttonView?' uk-flex uk-flex-middle uk-flex-center':'') "
|
<div [class]="'uk-padding-small uk-text-center uk-width-1-1 uk-height-medium lightBackground' + (buttonView?' uk-flex uk-flex-middle uk-flex-center':'') "
|
||||||
[class.uk-height-small]="buttonView" [class.uk-height-medium]="!buttonView">
|
[class.uk-height-small]="buttonView" [class.uk-height-medium]="!buttonView">
|
||||||
|
|
Loading…
Reference in New Issue