MaDgIK
/
connect
13
0
Fork 0
Code Issues Pull Requests Projects Releases 13 Wiki Activity
connect/src/app/communities/communities.component.html

285 lines
13 KiB
HTML
Raw Normal View History

[new-theme | Connect]: Updates in home page & redesign of "my communities" page. 1. my-communities.component.html: Redesign of my communities page - 3 or 4 community cards for managers and subscribers. 2. my-communities.component.ts: Show hidden communities to their managers (disabled link). 3. browse-community.component.html: a. Add uk-disabled in <a> when community is hidden. b. Small changes in icons and badges. c. Remove uk-card-title class. d. No use case when a community has no logo. 4. communities.component.html: a. Small changes in icons. b. Bug fix in "View all" link for community cards (number based on screen size). c. Scroll section updated - all images are in the same place with opacity.
2022-01-28 11:15:21 +01:00
<div>
homepage align with latest mock changes (not text content)
2022-06-03 16:22:41 +02:00
<div class="uk-overflow-hidden uk-tile-default">
<div class="uk-section uk-padding-remove-bottom uk-background-norepeat hero-background">
<div class="uk-container uk-container-large" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-slide-bottom-medium; delay: 200">
<div class="uk-grid uk-flex-middle" uk-grid>
<div class="uk-width-3-5 uk-margin-large-bottom">
<h1 class="uk-heading-large" uk-scrollspy-class>
<span class="">Build a </span><span class="uk-text-primary">Gateway</span>
<br/><span class=""> for your<br/>Community</span><span class="uk-text-primary">.</span>
</h1>
<div class="uk-text-large uk-margin-medium-top" uk-scrollspy-class>
<div>Turn Open Science into Practice.</div>
<div>It takes your open and divnked research outcomes.</div>
<div>A service customized to your needs.</div>
</div>
<div class="uk-margin-medium-top" uk-scrollspy-class>
<a class="uk-button uk-button-primary uk-text-uppercase" routerLink="/about/learn-how">Learn More</a>
</div>
</div>
<div class="uk-width-expand uk-visible@m" uk-scrollspy-class>
<div class="uk-position-relative">
<img style="padding: 1px" src="assets/connect-assets/home/connect-hero.jpg" uk-parallax="y: 300">
<img class="uk-position-top-left" src="assets/connect-assets/home/connect-hero-mask.svg">
</div>
</div>
</div>
</div>
</div>
[new-theme | Connect]: First version of connect home page redesign. 1. browse-community.component & communities.component: First version of connect home page redesign. (not finalized) 2. connect-custom.css: a. Variable --button-primary-color is set with --font-default-color. b. Added css for classes "whiteBackground", "homeBackgroundImage", "community-logo img" (cards with community gateways).
2022-01-20 00:15:04 +01:00
</div>
homepage align with latest mock changes (not text content)
2022-06-03 16:22:41 +02:00
<ng-template #scrolling_text let-position_class="position_class">
<div #scrolling_element [class]="position_class" uk-parallax="target: #js-sticky-parallax-images-all; start: 100vh; end: 100% + 100vh - 150vh; opacity: 0,1 20%,1 99%,0">
<h3 class="uk-h2">
<span class="uk-text-primary">Find a repository to <br/>deposit </span>
<span>your research <br/>outcome</span>
<span class="uk-text-primary">.</span>
</h3>
</div>
<div #scrolling_element [class]="position_class" uk-parallax="target: #js-sticky-parallax-images-all; start: 150vh; end: 100% + 100vh - 200vh; opacity: 0,1 20%,1 99%,0">
<h3 class="uk-h2">
<span class="uk-text-primary">Link your research <br/>output </span>
<span>with your <br/>community, funding,<br/> and other research<br/> products</span>
<span class="uk-text-primary">.</span>
</h3>
[Connect | Trunk]: Remove helptexts from connect, Change headings git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-connect-portal/trunk@59576 d315682c-612b-4755-9ff5-7f18f6832af3
2020-10-13 21:06:30 +02:00
</div>
homepage align with latest mock changes (not text content)
2022-06-03 16:22:41 +02:00
<div #scrolling_element [class]="position_class" uk-parallax="target: #js-sticky-parallax-images-all; start: 200vh; end: 100% + 100vh - 250vh; opacity: 0,1 20%,1 99%,0">
<h3 class="uk-h2">
<span>View community's<br/> </span>
<span class="uk-text-primary">overview at a glance.</span>
</h3>
</div>
<div #scrolling_element [class]="position_class" uk-parallax="target: #js-sticky-parallax-images-all; start: 250vh; end: 100% + 100vh - 300vh; opacity: 0,1 20%,1 99%,0">
<h3 class="uk-h2">
<span class="uk-text-primary">Search & browse </span>
<span>your<br/> community's research<br/> products</span>
<span class="uk-text-primary">.</span>
</h3>
</div>
<div #scrolling_element [class]="position_class" uk-parallax="target: #js-sticky-parallax-images-all; start: 300vh; end: 100% + 100vh - 350vh; opacity: 0,1 20%,1">
<h3 class="uk-h2">
<span class="uk-text-primary">View statistics </span>
<span>for<br/> your community's<br/> research products</span>
<span class="uk-text-primary">.</span>
</h3>
</div>
</ng-template>
<div class="uk-section uk-section-secondary">
<div class="uk-container uk-container-large">
<div class="uk-width-1-1">
<span class="uk-h6 uk-text-primary">Benefits.</span>
<h2 class="uk-h1 uk-margin-remove-top uk-width-1-2@m">
Find the best for your community<span class="uk-text-primary">.</span>
</h2>
</div>
<div id="js-sticky-parallax-images-all" style="min-height: 350vh">
<div class="uk-visible@m uk-height-viewport connect-dark-logo-background uk-sticky" uk-sticky="bottom: #js-sticky-parallax-images-all; target-offset: true">
<div class="uk-grid uk-child-width-1-2" uk-grid>
<div>
<div class="connect-dark-logo-background">
<div uk-parallax="target: #js-sticky-parallax-images-all;">
<img class="uk-position-center-left" src="" alt="" loading="lazy"
uk-parallax="target: #js-sticky-parallax-images-all; start: 100vh; opacity: 1; easing:0" style="height: 70vh">
</div>
</div>
</div>
<div class="uk-inline uk-flex">
<div class="uk-width-3-4@l uk-width-1-1">
<div uk-parallax="target: #js-sticky-parallax-images-all; y: 55vh, 45vh;">
<ng-container *ngTemplateOutlet="scrolling_text; context: {position_class: 'uk-position-center-left'}"></ng-container>
</div>
</div>
</div>
</div>
</div>
<div class="uk-hidden@m uk-height-viewport connect-dark-logo-background" uk-sticky="bottom: #js-sticky-parallax-images-all">
<div class="uk-flex uk-flex-column uk-flex-middle">
<div class="connect-dark-logo-background uk-inline uk-width-1-1" style="height: 50vh;">
<div class="uk-position-center uk-height-1-1" uk-parallax="target: #js-sticky-parallax-images-all; start: 100vh; opacity: 1; easing:0">
<img class="uk-height-1-1" src="" alt="" loading="lazy">
[new-theme | Connect]: Updates in home page & redesign of "my communities" page. 1. my-communities.component.html: Redesign of my communities page - 3 or 4 community cards for managers and subscribers. 2. my-communities.component.ts: Show hidden communities to their managers (disabled link). 3. browse-community.component.html: a. Add uk-disabled in <a> when community is hidden. b. Small changes in icons and badges. c. Remove uk-card-title class. d. No use case when a community has no logo. 4. communities.component.html: a. Small changes in icons. b. Bug fix in "View all" link for community cards (number based on screen size). c. Scroll section updated - all images are in the same place with opacity.
2022-01-28 11:15:21 +01:00
</div>
[Connect | Trunk]: Remove helptexts from connect, Change headings git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-connect-portal/trunk@59576 d315682c-612b-4755-9ff5-7f18f6832af3
2020-10-13 21:06:30 +02:00
</div>
homepage align with latest mock changes (not text content)
2022-06-03 16:22:41 +02:00
<div class="uk-inline uk-width-2-3">
<ng-container *ngTemplateOutlet="scrolling_text; context: {position_class: 'uk-position-top-center'}"></ng-container>
[Connect | Trunk]: Remove helptexts from connect, Change headings git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-connect-portal/trunk@59576 d315682c-612b-4755-9ff5-7f18f6832af3
2020-10-13 21:06:30 +02:00
</div>
</div>
</div>
homepage align with latest mock changes (not text content)
2022-06-03 16:22:41 +02:00
</div>
</div>
</div>
<div class="uk-section uk-section-large uk-container uk-container-large">
<div class="uk-margin-medium-top">
<h2 class="uk-h1">
Our mission for an <br/> Open and FAIR science<span class="uk-text-primary">.</span>
</h2>
<div class="uk-margin-large-top">
<div class="uk-child-width-1-3@m uk-child-width-1-1@s uk-grid-large uk-grid-match uk-grid" uk-grid=""
uk-height-match=".target">
<div class="uk-first-column">
<div class="uk-card uk-card-default uk-padding">
<div class="uk-card-media-top uk-flex uk-flex-middle uk-flex-center
uk-padding-small uk-padding-remove-vertical uk-margin-top uk-margin-bottom">
<div>
<img src="assets/connect-assets/home/virtual.svg" alt="A Virtual Research Environment" style="height:60px; width:67px"/>
</div>
</div>
<div class="uk-card-body uk-padding-remove uk-margin-small-bottom">
<div class="target uk-text-center">
<h3 class="uk-6 uk-card-title uk-margin-small-bottom">A Virtual Research Environment</h3>
<div>An overlay platform making it easy to share, link, disseminate and monitor all your publications,
data, software, methods. In one place.
</div>
</div>
<hr/>
<div>
<ul class="uk-list uk-text-small">
<li class="uk-flex uk-flex-middle">
<icon class="uk-margin-small-right uk-text-primary" name="done" ratio="0.85" flex="true"></icon>
Access to OpenAIRE research graph
</li>
<li class="uk-flex uk-flex-middle">
<icon class="uk-margin-small-right uk-text-primary" name="done" ratio="0.85" flex="true"></icon>
Moderated, front-end linking
</li>
<li class="uk-flex uk-flex-middle">
<icon class="uk-margin-small-right uk-text-primary" name="done" ratio="0.85" flex="true"></icon>
Cross-platform search
</li>
</ul>
</div>
</div>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-padding">
<div class="uk-card-media-top uk-flex uk-flex-middle uk-flex-center
uk-padding-small uk-padding-remove-vertical uk-margin-top uk-margin-bottom">
<div>
<img src="assets/connect-assets/home/open_science.svg" alt="Open science in action" style="height:60px; width:67px"/>
</div>
</div>
<div class="uk-card-body uk-padding-remove uk-margin-small-bottom">
<div class="target uk-text-center" style="">
<h3 class="uk-h6 uk-card-title uk-margin-small-bottom">Open Science in action</h3>
<div>A time-saving bundle of services for researchers to effortlessly practice open science. An integral
part of the&nbsp;European Open Science Cloud.
</div>
</div>
<hr>
<div>
<ul class="uk-list uk-text-small">
<li class="uk-flex uk-flex-middle">
<icon class="uk-margin-small-right uk-text-primary" name="done" ratio="0.85" flex="true"></icon>
Use of OpenAIRE Guidelines
</li>
<li class="uk-flex uk-flex-middle">
<icon class="uk-margin-small-right uk-text-primary" name="done" ratio="0.85" flex="true"></icon>
Publish and get DOIs with Zenodo
</li>
<li class="uk-flex uk-flex-middle">
<icon class="uk-margin-small-right uk-text-primary" name="done" ratio="0.85" flex="true"></icon>
EOSC Single Sign-On
</li>
</ul>
</div>
</div>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-padding">
<div class="uk-card-media-top uk-flex uk-flex-middle uk-flex-center
uk-padding-small uk-padding-remove-vertical uk-margin-top uk-margin-bottom">
<div>
<img src="assets/connect-assets/home/customize.svg" alt="Customized to your needs" style="height:60px; width:67px"/>
</div>
</div>
<div class="uk-card-body uk-padding-remove uk-margin-small-bottom">
<div class="target uk-text-center" style="">
<h3 class="uk-h6 uk-card-title uk-margin-small-bottom">Customized to your needs</h3>
<div>A Gateway with your own brand, rules for aggregation, text &amp; data mining, and presentation. Run
by you via a simple, yet powerful backend administration tool.
</div>
</div>
<hr>
<div>
<ul class="uk-list uk-text-small">
<li class="uk-flex uk-flex-middle">
<icon class="uk-margin-small-right uk-text-primary" name="done" ratio="0.85" flex="true"></icon>
Access control
</li>
<li class="uk-flex uk-flex-middle">
<icon class="uk-margin-small-right uk-text-primary" name="done" ratio="0.85" flex="true"></icon>
Analytics: rich set of indicators
</li>
<li class="uk-flex uk-flex-middle">
<icon class="uk-margin-small-right uk-text-primary" name="done" ratio="0.85" flex="true"></icon>
Look &amp; feel to match your brand
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div *ngIf="researchCommunities.length === 0" class="uk-container uk-container-large uk-margin-large-bottom">
<errorMessages [status]="[status]" [type]="'communities'"></errorMessages>
</div>
<div *ngIf="!loading && researchCommunities.length > 0" class="uk-section uk-container uk-container-large">
<h2 class="uk-h1">Community Gateways <br/> already in action<span class="uk-text-primary">.</span></h2>
<div class="uk-margin-large-top uk-margin-large-bottom">
<div class="uk-visible@xl">
<div class="uk-grid-match uk-grid-medium uk-child-width-1-4 uk-flex-center uk-text-center" uk-grid>
<div *ngFor="let community of researchCommunities.slice(0, 4); let i = index">
<div class="uk-card uk-card-default uk-card-hover">
<browse-community [community]=community></browse-community>
</div>
</div>
</div>
<div class="uk-text-center uk-margin-medium-top">
<a *ngIf="researchCommunities.length > 4"
class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text"
routerLinkActive="router-link-active" routerLink="/search/find/communities">
<span class="uk-flex uk-flex-middle">
<span>View All</span>
</span>
</a>
</div>
</div>
<div class="uk-hidden@xl">
<div class="uk-grid-match uk-grid-medium uk-child-width-1-3@m uk-child-width-1-1 uk-flex-center uk-text-center" uk-grid>
<div *ngFor="let community of researchCommunities.slice(0, 3); let i = index">
<div class="uk-card uk-card-default uk-card-hover">
<browse-community [community]=community></browse-community>
</div>
</div>
</div>
<div class="uk-text-center uk-margin-medium-top">
<a *ngIf="researchCommunities.length > 3"
class="uk-display-inline-block uk-text-uppercase uk-button-text"
routerLinkActive="router-link-active" routerLink="/search/find/communities">
<span class="uk-flex uk-flex-middle">
<span>View All</span>
</span>
</a>
</div>
</div>
</div>
</div>
<div #contact class="uk-section uk-container uk-container-large uk-margin-large-bottom uk-text-center">
<h2 class="uk-h2">
Let us Help you Develop a<br/>Collaborative Science<br/>
Gateway<span class="uk-text-primary">.</span>
It is fast<span class="uk-text-primary">.</span> It is reliable<span class="uk-text-primary">.</span>
</h2>
<a class="uk-button uk-button-primary uk-margin-medium-top uk-margin-medium-bottom" routerLink="/contact-us">CONTACT US</a>
</div>
[Connect | Trunk]: Remove helptexts from connect, Change headings git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-connect-portal/trunk@59576 d315682c-612b-4755-9ff5-7f18f6832af3
2020-10-13 21:06:30 +02:00
</div>