connect/src/app/demo/demo.component.html

95 lines
4.7 KiB
HTML

<div class="">
<div
class="uk-padding generalSearchForm midBackground ">
<div class="uk-container uk-container-large">
<div class="uk-margin-large-top">
<h1 class="title uk-margin-remove">
Lorem ipsum dolor sit amet
</h1>
<div class="subtitle uk-margin-remove">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>
</div>
</div>
<div
class=" uk-flex uk-flex-center uk-flex-middle">
<form class="uk-margin-large uk-margin-large-top ">
<input class="uk-input uk-input uk-width-xlarge@l uk-width-large@m uk-width-medium uk-margin-small-bottom" placeholder="Search... ">
<button class="uk-button uk-margin-small-left uktext-bold">Search</button>
<div class="uk-text-right uk-margin-small-top"><a class="portal-link">Advanced search</a></div>
</form>
</div>
</div>
</div>
<!--Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.-->
<div class="uk-container uk-container-large uk-margin-top">
<my-tabs class="uk-padding">
<my-tab
[tabTitle]="'Summary'" [tabId]="'summary'" class="uk-active">
<div class="uk-padding uk-width-1-1">
<div class="uk-margin-bottom">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="uk-margin-small-bottom">
<span class="uk-margin-right "><span class="lowOpacityColor uk-text-muted">Created: </span> 01-Jan-2020
</span>
<span><span class="uk-display-inline-block "><span class="lowOpacityColor uk-text-muted">Members: </span>
1024 </span></span>
</div>
<div class="uk-margin-small-bottom">
<span class="uk-margin-right "><span class="lowOpacityColor uk-text-muted">Projects: </span> <a
class="portal-link">567
</a>
</span>
<span><span class="uk-display-inline-block "><span class="lowOpacityColor uk-text-muted">Content providers:
</span>
<a class="portal-link">123</a></span></span>
</div>
<hr>
<div>
<div class="tab-header"> <span class=""> Recent publications </span></div>
<div class="uk-text-right "><a class=" uk-button uk-button-text" > View all </a></div>
<result-preview [properties]="properties" [result]="result"></result-preview>
</div>
</div>
</my-tab>
<my-tab customClass="portalTab"
[tabTitle]="'Extra tab'" [tabId]="'extra'" >
<div class="uk-padding-small uk-text-center uk-width-1-1 uk-height-medium lightBackground uk-flex uk-flex-center uk-flex-middle">
Extra tab
</div>
</my-tab>
</my-tabs>
<div>
<result-landing [resultFromInput]="true" [resultLandingInfo]="resultLanding"></result-landing>
</div>
<div class="uk-margin-top uk-margin-small-bottom uk-text-bold uk-text-large">Dark background</div>
<div class="uk-padding-small uk-text-center communityPanelBackground uk-height-medium uk-light uk-flex uk-flex-center uk-flex-middle" >
<div>
<h1 >Heading</h1>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis velit ornare, auctor lectus at, rutrum magna. Aenean vehicula elementum lacinia.</div>
<a class="">Link</a>
<br>
<button class="uk-button">Button</button>
</div>
</div>
<div class="uk-margin-top">
<div class="uk-margin-top uk-margin-small-bottom uk-text-bold uk-text-large">Light background</div>
<div class="uk-padding-small uk-text-center uk-width-1-1 uk-height-medium lightBackground uk-flex uk-flex-center uk-flex-middle" >
<div>
<h1 >Heading</h1>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis velit ornare, auctor lectus at, rutrum magna. Aenean vehicula elementum lacinia.</div>
<a class="portal-link">Link</a>
<br>
<button class="uk-button">Button</button>
</div>
</div>
</div>
</div>