MaDgIK
/
connect
13
0
Fork 0
Code Issues Pull Requests Projects Releases 13 Wiki Activity

[Trunk|Connect]: 1. Home page with new images. 2. Add classes for backgrounds on connect-custom 

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-connect-portal/trunk@56213 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
k.triantafyllou 2019-06-26 15:52:10 +00:00
parent 5019335268
commit 3d7d20f746
4 changed files with 75 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/communities/browseCommunity/browse-community.component.html
View File

@ -5,9 +5,9 @@
<div *ngIf="community.isSubscribed" class="uk-position-top-right uk-card-badge portal-card-badge uk-width-1-2 uk-text-small uk-text-center">
<span>Subscribed</span>
</div>
<div class="uk-card-media-top uk-margin-top community uk-padding">
<div class="uk-card-media-top uk-margin-top community uk-padding-small">
<a (click)="confirmModalOpen()">
<div class="communitiesImageBox uk-position-relative">
<div class="communitiesImageBox uk-position-relative uk-align-center">
<img *ngIf= "community.logoUrl != null && community.logoUrl != '' " src="{{community.logoUrl}}" alt="{{(community.title)?community.title:community.shortTitle}} logo" class="uk-position-center">
<span *ngIf= "community.logoUrl == null || community.logoUrl == '' "class="uk-icon uk-position-center">
<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="2.5"> <circle fill="none" stroke="#000" stroke-width="1.1" cx="7.7" cy="8.6" r="3.5"></circle> <path fill="none" stroke="#000" stroke-width="1.1" d="M1,18.1 C1.7,14.6 4.4,12.1 7.6,12.1 C10.9,12.1 13.7,14.8 14.3,18.3"></path> <path fill="none" stroke="#000" stroke-width="1.1" d="M11.4,4 C12.8,2.4 15.4,2.8 16.3,4.7 C17.2,6.6 15.7,8.9 13.6,8.9 C16.5,8.9 18.8,11.3 19.2,14.1"></path></svg>

103
src/app/communities/communities.component.html
View File

@ -1,4 +1,4 @@
<div class="image-front-topbar uk-section-large banner-connect uk-background-norepeat uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color" uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}" tm-header-transparent="light" tm-header-transparent-placeholder="">
<div [ngClass]="(managerOfCommunities.length > 0 || subscriberOfCommunities.length > 0)?'banner-background':'home-banner'" class="image-front-topbar uk-section-large uk-background-norepeat uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color" uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}" tm-header-transparent="light" tm-header-transparent-placeholder="">
<div class=" uk-section uk-padding-remove-bottom">
<div class="uk-position-cover"></div>
<div class="uk-position-relative uk-panel">
@ -6,54 +6,59 @@
<div class="uk-animation-fade uk-margin-top uk-width-1-2" role="alert"><span class="loading-gif uk-align-center" ></span></div>
</div>
<div *ngIf="!loading" class="uk-container uk-container-large">
<div *ngIf="managerOfCommunities.length > 0 || subscriberOfCommunities.length > 0">
<div *ngIf="managerOfCommunities.length > 0" uk-grid>
<h5 class="uk-width-1-1 uk-text-bold">You are managing</h5>
<div class="uk-width-1-2@m uk-width-1-1@s">
<div class="uk-grid-match uk-grid-small uk-child-width-1-3@m uk-child-width-1-2@s uk-child-width-1-1@xs uk-text-center" uk-grid uk-height-match=".community">
<div *ngFor="let community of managerOfCommunities.slice(0,3); let i = index">
<div class="uk-padding-small uk-height-max-medium uk-card uk-card-default communityCard"
[attr.uk-tooltip]="((community.description) ? ('title: '+ community.description + '; pos: bottom-right') : 'cls: uk-invisible')">
<browse-community [community]=community [showDescription]=false></browse-community>
<div *ngIf="managerOfCommunities.length > 0 || subscriberOfCommunities.length > 0" class="uk-child-width-1-1@s uk-child-width-1-2@m uk-flex uk-flex-middle" uk-grid>
<div>
<div *ngIf="managerOfCommunities.length > 0" uk-grid>
<h5 class="uk-width-1-1 uk-text-bold">You are managing</h5>
<div class="uk-width-1-1">
<div class="uk-grid-match uk-grid-small uk-child-width-1-3@m uk-child-width-1-2@s uk-child-width-1-1@xs uk-text-center" uk-grid uk-height-match=".community">
<div *ngFor="let community of managerOfCommunities.slice(0,3); let i = index">
<div class="uk-padding-small uk-height-max-medium uk-card uk-card-default communityCard"
[attr.uk-tooltip]="((community.description) ? ('title: '+ community.description + '; pos: bottom-right') : 'cls: uk-invisible')">
<browse-community [community]=community [showDescription]=false></browse-community>
</div>
</div>
</div>
</div>
<div *ngIf="managerOfCommunities.length > 3" class="uk-text-right uk-width-1-1 uk-margin-top">
<a [queryParams]="{role: quote('manager')}" class="portal-color uk-text-uppercase uk-text-bold"
routerLinkActive="router-link-active" routerLink="/search/find/communities">
<div>View all ({{managerOfCommunities.length | number}}) ></div>
</a>
</div>
</div>
</div>
<div class="uk-container uk-container-large uk-width-4-5">
<div *ngIf="subscriberErrorMessage" class="uk-animation-fade uk-alert uk-alert-warning" role="alert">
{{subscriberErrorMessage}}
</div>
</div>
<div *ngIf="subscriberOfCommunities.length > 0" uk-grid>
<h5 class="uk-width-1-1 uk-text-bold">You are subscribed to</h5>
<div class="uk-width-1-2@m uk-width-1-1@s">
<div class="uk-grid-match uk-grid-small uk-child-width-1-3@m uk-child-width-1-2@s uk-child-width-1-1@xs uk-text-center" uk-grid uk-height-match=".community">
<div *ngFor="let community of subscriberOfCommunities.slice(0,3); let i = index">
<div class="uk-padding-small uk-height-max-medium uk-card uk-card-default communityCard"
[attr.uk-tooltip]="((community.description) ? ('title: '+ community.description + '; pos: bottom-right') : 'cls: uk-invisible')">
<browse-community [community]=community [showDescription]=false></browse-community>
</div>
<div *ngIf="managerOfCommunities.length > 3" class="uk-text-right uk-width-1-1 uk-margin-top">
<a [queryParams]="{role: quote('manager')}" class="portal-color uk-text-uppercase uk-text-bold"
routerLinkActive="router-link-active" routerLink="/search/find/communities">
<div>View all ({{managerOfCommunities.length | number}}) ></div>
</a>
</div>
</div>
<div *ngIf="subscriberOfCommunities.length > 3" class="uk-text-right uk-width-1-1 uk-margin-top">
<a [queryParams]="{status: quote('subscribed')}" class="portal-color uk-text-uppercase uk-text-bold"
routerLinkActive="router-link-active" routerLink="/search/find/communities">
<div>View all ({{subscriberOfCommunities.length | number}}) ></div>
</a>
</div>
<div class="uk-container uk-container-large uk-width-4-5">
<div *ngIf="subscriberErrorMessage" class="uk-animation-fade uk-alert uk-alert-warning" role="alert">
{{subscriberErrorMessage}}
</div>
</div>
</div>
<div *ngIf="subscriberOfCommunities.length > 0" uk-grid>
<h5 class="uk-width-1-1 uk-text-bold">You are subscribed to</h5>
<div class="uk-width-1-1">
<div class="uk-grid-match uk-grid-small uk-child-width-1-3@m uk-child-width-1-2@s uk-child-width-1-1@xs uk-text-center" uk-grid uk-height-match=".community">
<div *ngFor="let community of subscriberOfCommunities.slice(0,3); let i = index">
<div class="uk-padding-small uk-height-max-medium uk-card uk-card-default communityCard"
[attr.uk-tooltip]="((community.description) ? ('title: '+ community.description + '; pos: bottom-right') : 'cls: uk-invisible')">
<browse-community [community]=community [showDescription]=false></browse-community>
</div>
</div>
</div>
<div *ngIf="subscriberOfCommunities.length > 3" class="uk-text-right uk-width-1-1 uk-margin-top">
<a [queryParams]="{status: quote('subscribed')}" class="portal-color uk-text-uppercase uk-text-bold"
routerLinkActive="router-link-active" routerLink="/search/find/communities">
<div>View all ({{subscriberOfCommunities.length | number}}) ></div>
</a>
</div>
</div>
</div>
</div>
<div class="uk-position-relative uk-align-center banner-img-box">
<img src="../../assets/banner/login.png" class="uk-padding uk-position-center">
</div>
</div>
<div *ngIf="managerOfCommunities.length == 0 && subscriberOfCommunities.length == 0" uk-grid>
<div class="uk-width-2-5@m uk-width-1-1@s">
@ -80,7 +85,7 @@
<div>
<div class="uk-card uk-card-default uk-padding uk-padding-remove-bottom uk-padding-remove-horizontal connectInfoCard">
<div class="uk-card-media-top target">
<img src="../../assets/2.png" class="uk-align-center" width="111" height="153">
<img src="../../assets/home/1.png" class="uk-align-center" width="111" height="138">
</div>
<div class="uk-card-body uk-grid-divider uk-margin" uk-grid>
<div class="uk-width-1-1 uk-text-center target">
@ -112,7 +117,7 @@
<div>
<div class="uk-card uk-card-default uk-padding uk-padding-remove-bottom uk-padding-remove-horizontal connectInfoCard">
<div class="uk-card-media-top target">
<img src="../../assets/3.png" class="uk-align-center" width="162" height="155">
<img src="../../assets/home/2.png" class="uk-align-center" width="127" height="138">
</div>
<div class="uk-card-body uk-grid-divider uk-margin" uk-grid>
<div class="uk-width-1-1 uk-text-center target">
@ -145,7 +150,7 @@
<div>
<div class="uk-card uk-card-default uk-padding uk-padding-remove-bottom uk-padding-remove-horizontal connectInfoCard">
<div class="uk-card-media-top target">
<img src="../../assets/1.png" class="uk-align-center" width="180" height="130">
<img src="../../assets/home/3.png" class="uk-align-center" width="139" height="138">
</div>
<div class="uk-card-body uk-grid-divider uk-margin" uk-grid>
<div class="uk-width-1-1 uk-text-center target">
@ -214,11 +219,13 @@
</div>
</div>
<helper div="connect-test"></helper>
<div class="banner2-connect uk-background-norepeat uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color">
<div class="contact-background uk-background-norepeat uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color">
<div class="uk-container uk-container-large uk-section">
<div class="uk-flex uk-flex-middle uk-padding " uk-grid>
<div class="uk-width-1-2"></div>
<div class="uk-width-1-2">
<div class="uk-flex uk-flex-middle uk-padding uk-child-width-1-1@s uk-child-width-1-2@m" uk-grid>
<div class="uk-position-relative uk-align-center banner-img-box">
<img src="../../assets/contact/2.png" class="uk-padding uk-position-center">
</div>
<div>
<h1>Let us Help you Develop a Collaborative Science Gateway. It is fast. It is reliable.</h1>
<div>Get in touch with our team to find out how.</div>
<div class="uk-inline uk-margin-large-top uk-margin-bottom">

0
src/assets/cloud/2.png → src/assets/cloud/background.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 191 KiB

After

Width:  |  Height:  |  Size: 191 KiB

21
src/assets/connect-custom.css
View File

@ -45,13 +45,28 @@
min-height: calc(100vh - 412.767px);
}
.banner-connect {
.home-banner {
background-image: url("./home/banner.jpg") !important;
background-color: rgb(255, 255, 255);
}
.banner2-connect {
background-image: url("./banner 2.jpg") !important;
.banner-img-box {
width: 300px;
height: 290px;
}
.contact-background {
background-image: url("./contact/background.png") !important;
background-color: rgb(255, 255, 255);
}
.banner-background {
background-image: url("./banner/background.png") !important;
background-color: rgb(255, 255, 255);
}
.cloud-background {
background-image: url("./cloud/background.png") !important;
background-color: rgb(255, 255, 255);
}