Revision 59189
Added by Konstantina Galouni almost 4 years ago
modules/uoa-connect-portal/branches/use-UoaAdminToolsLibrary/src/app/createCommunity/community-creation-instructions.component.ts | ||
---|---|---|
1 |
import {Component, ElementRef, HostListener, Input, ViewChild} from '@angular/core'; |
|
2 |
import {ActivatedRoute, Router} from '@angular/router'; |
|
3 |
import {Title, Meta} from '@angular/platform-browser'; |
|
4 |
|
|
5 |
import {PiwikService} from '../openaireLibrary/utils/piwik/piwik.service'; |
|
6 |
import {EnvProperties} from '../openaireLibrary/utils/properties/env-properties'; |
|
7 |
|
|
8 |
declare var UIkit: any; |
|
9 |
|
|
10 |
@Component({ |
|
11 |
selector: 'community-creation-instructions', |
|
12 |
template: ` |
|
13 |
<div class="image-front-topbar uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color" uk-scrollspy="{"target":"[uk-scrollspy-class]","cls":"uk-animation-fade","delay":false}" tm-header-transparent="light" tm-header-transparent-placeholder=""> |
|
14 |
<div style=" min-height: calc(7.89999px + 60vh);" |
|
15 |
class=" mainPageSearchForm uk-background-norepeat uk-background-cover uk-section uk-padding-remove-bottom" > |
|
16 |
<div class="uk-position-cover" style=""></div> |
|
17 |
<div class="uk-position-relative uk-panel"> |
|
18 |
<div class="uk-container uk-section"> |
|
19 |
<div> |
|
20 |
<h3 class="uk-margin-remove-bottom uk-margin-large-top">Discover the power of OpenAIRE Connect community page builder</h3> |
|
21 |
<h5 class="uk-margin-remove-top">Gather all your research in one place</h5> |
|
22 |
|
|
23 |
<!-- <div class="uk-width-medium uk-text-center uk-margin-large-top uk-margin-large-left">--> |
|
24 |
<!-- <h5>Contact OpenAIRE team, in order to create your community page</h5>--> |
|
25 |
<!-- <div>--> |
|
26 |
<!-- <a class="uk-button portal-button" routerLinkActive="router-link-active" routerLink="/contact-us"> CONTACT US</a>--> |
|
27 |
<!-- </div>--> |
|
28 |
<!-- </div>--> |
|
29 |
|
|
30 |
<div class="uk-width-1-2 uk-inline uk-margin-large-top uk-margin-large-bottom"> |
|
31 |
<div class="uk-position-center "> |
|
32 |
<div class="uk-width-medium uk-text-center"> |
|
33 |
<h5>Contact OpenAIRE team, in order to create your community page</h5> |
|
34 |
<div> |
|
35 |
<a class="uk-button portal-button" routerLinkActive="router-link-active" routerLink="/contact-us"> CONTACT US</a> |
|
36 |
</div> |
|
37 |
</div> |
|
38 |
</div> |
|
39 |
<br> |
|
40 |
</div> |
|
41 |
</div> |
|
42 |
</div> |
|
43 |
</div> |
|
44 |
</div> |
|
45 |
</div> |
|
46 |
|
|
47 |
<div> |
|
48 |
<div> |
|
49 |
<div #adminPortalImage class="uk-margin-bottom uk-margin-top"> |
|
50 |
<!--div uk-scrollspy="cls: uk-animation-fade uk-animation-reverse; target: > div > div > .uk-card; delay: 1000; repeat: false"--> |
|
51 |
<div class="uk-container uk-margin-large-top"> |
|
52 |
<h3>OpenAIRE Connect community page builder at a glance</h3> |
|
53 |
<div class="uk-inline uk-dark" (scroll)="scrollHandler($event)"> |
|
54 |
<img src="assets/admin-portal.png" alt="OpenAIRE" > |
|
55 |
|
|
56 |
<div id="logo" class="my-tooltip uk-card uk-card-secondary uk-position-absolute uk-transform-center" |
|
57 |
style="left: 27%; top: 2%" hidden> |
|
58 |
<div class="uk-padding-small uk-text-small uk-text-bold">Your logo goes here</div> |
|
59 |
</div> |
|
60 |
|
|
61 |
<div id="configure-profile" class="my-tooltip uk-text-center uk-card uk-card-secondary uk-position-absolute uk-transform-center" |
|
62 |
style="left: 33%; top: 21%" hidden> |
|
63 |
<div class="uk-padding-small uk-text-small uk-text-bold">Configure your community profile</div> |
|
64 |
</div> |
|
65 |
<div id="connect-with" class="my-tooltip uk-width-1-5 uk-card uk-text-center uk-card-secondary uk-position-absolute uk-transform-center" |
|
66 |
style="left: 56%; top: 18%" hidden> |
|
67 |
<div class="uk-padding-small uk-text-small uk-text-bold">Connect with subjects, projects, content providers & Zenodo communities</div> |
|
68 |
</div> |
|
69 |
<div id="choose-statistics" class="my-tooltip uk-text-center uk-card uk-card-secondary uk-position-absolute uk-transform-center" |
|
70 |
style="left: 80%; top: 19%" hidden> |
|
71 |
<div class="uk-padding-small uk-text-small uk-text-bold">Choose statistics and charts to be publicly available</div> |
|
72 |
</div> |
|
73 |
|
|
74 |
<div id="curate" class="my-tooltip uk-text-center uk-card uk-card-secondary uk-position-absolute uk-transform-center" |
|
75 |
style="left: 32%; top: 60%" hidden> |
|
76 |
<div class="uk-padding-small uk-text-small uk-text-bold">Curate links of research results</div> |
|
77 |
</div> |
|
78 |
<div id="help-texts" class="my-tooltip uk-width-1-5 uk-text-center uk-card uk-card-secondary uk-position-absolute uk-transform-center" |
|
79 |
style="left: 56%; top: 59%" hidden> |
|
80 |
<div class="uk-padding-small uk-text-small uk-text-bold">Add help texts in your pages for extra information</div> |
|
81 |
</div> |
|
82 |
<div id="invite" class="my-tooltip uk-text-center uk-card uk-card-secondary uk-position-absolute uk-transform-center" |
|
83 |
style="left: 80%; top: 60%" hidden> |
|
84 |
<div class="uk-padding-small uk-text-small uk-text-bold">Invite collaborators and users</div> |
|
85 |
</div> |
|
86 |
|
|
87 |
|
|
88 |
<!--[attr.uk-tooltip]="'title: ' + createTooltip('Your logo goes here')"--> |
|
89 |
<!--uk-toggle="target: #logo; mode: click"--> |
|
90 |
<a class="uk-position-absolute uk-transform-center uk-icon uk-marker" |
|
91 |
style="left: 20%; top: 5%" uk-marker> |
|
92 |
<!--span uk-icon="plus"></span--> |
|
93 |
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="marker"><rect x="9" y="4" width="1" height="11"></rect><rect x="4" y="9" width="11" height="1"></rect></svg> |
|
94 |
</a> |
|
95 |
|
|
96 |
<!--[attr.uk-tooltip]="'title: ' + createTooltip('Configure your community profile') + '; cls: conf-profile'"--> |
|
97 |
<!--class: configure-profile --> |
|
98 |
<a class="uk-position-absolute uk-transform-center uk-icon uk-marker" |
|
99 |
style="left: 22%; top: 24%" uk-marker> |
|
100 |
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="marker"><rect x="9" y="4" width="1" height="11"></rect><rect x="4" y="9" width="11" height="1"></rect></svg> |
|
101 |
</a> |
|
102 |
<!--[attr.uk-tooltip]="'title: ' + createTooltip('Connect with subjects, projects, content providers & Zenodo communities')"--> |
|
103 |
<a class="uk-position-absolute uk-transform-center uk-icon uk-marker" |
|
104 |
style="left: 46%; top: 24%" uk-marker> |
|
105 |
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="marker"><rect x="9" y="4" width="1" height="11"></rect><rect x="4" y="9" width="11" height="1"></rect></svg> |
|
106 |
</a> |
|
107 |
<!-- [attr.uk-tooltip]="'title: ' + createTooltip('Choose statistics and charts to be publicly available')"--> |
|
108 |
<a class="uk-position-absolute uk-transform-center uk-icon uk-marker" |
|
109 |
style="left: 70%; top: 24%" uk-marker> |
|
110 |
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="marker"><rect x="9" y="4" width="1" height="11"></rect><rect x="4" y="9" width="11" height="1"></rect></svg> |
|
111 |
</a> |
|
112 |
|
|
113 |
<!--[attr.uk-tooltip]="'title: ' + createTooltip('Curate links of research results')"--> |
|
114 |
<a class="uk-position-absolute uk-transform-center uk-icon uk-marker" |
|
115 |
style="left: 22%; top: 64%" uk-marker> |
|
116 |
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="marker"><rect x="9" y="4" width="1" height="11"></rect><rect x="4" y="9" width="11" height="1"></rect></svg> |
|
117 |
</a> |
|
118 |
<!--[attr.uk-tooltip]="'title: ' + createTooltip('Add help texts in your pages for extra information')"--> |
|
119 |
<a class="uk-position-absolute uk-transform-center uk-icon uk-marker" |
|
120 |
style="left: 46%; top: 64%" uk-marker> |
|
121 |
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="marker"><rect x="9" y="4" width="1" height="11"></rect><rect x="4" y="9" width="11" height="1"></rect></svg> |
|
122 |
</a> |
|
123 |
<!--[attr.uk-tooltip]="'title: ' + createTooltip('Invite collaborators and users')"--> |
|
124 |
<a class="uk-position-absolute uk-transform-center uk-icon uk-marker" |
|
125 |
style="left: 70%; top: 64%" uk-marker> |
|
126 |
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="marker"><rect x="9" y="4" width="1" height="11"></rect><rect x="4" y="9" width="11" height="1"></rect></svg> |
|
127 |
</a> |
|
128 |
|
|
129 |
</div> |
|
130 |
</div> |
|
131 |
</div> |
|
132 |
|
|
133 |
<div #communityImage class="uk-container uk-margin-large-top"> |
|
134 |
<h3>Community page</h3> |
|
135 |
<div uk-grid uk-grid-match> |
|
136 |
<div class="uk-width-1-3 uk-card"> |
|
137 |
<div class="uk-text-center uk-position-center "> |
|
138 |
<p>Contact OpenAIRE team, in order to create your community page</p> |
|
139 |
<div> |
|
140 |
<a class="uk-button portal-button" routerLinkActive="router-link-active" routerLink="/contact-us"> CONTACT US</a> |
|
141 |
</div> |
|
142 |
</div> |
|
143 |
</div> |
|
144 |
<div class="uk-width-2-3 uk-text-center"> |
|
145 |
<div class="uk-inline uk-dark"> |
|
146 |
<img src="assets/community-first-page.jpg" alt="OpenAIRE"> |
|
147 |
|
|
148 |
<div id="community-content" class="my-tooltip uk-text-center uk-card uk-card-secondary uk-position-absolute uk-transform-center" |
|
149 |
style="left: 80%; top: 31%" hidden> |
|
150 |
<div class="uk-padding-small uk-text-small uk-text-bold">Community content at a glance</div> |
|
151 |
</div> |
|
152 |
<div id="locate-research-results" class="my-tooltip uk-text-center uk-card uk-card-secondary uk-position-absolute uk-transform-center" |
|
153 |
style="left: 57%; top: 38%" hidden> |
|
154 |
<div class="uk-padding-small uk-text-small uk-text-bold">Locate Research Results</div> |
|
155 |
</div> |
|
156 |
<div id="recent-research-results" class="my-tooltip uk-width-1-4 uk-text-center uk-card uk-card-secondary uk-position-absolute uk-transform-center" |
|
157 |
style="left: 48%; top: 58%" hidden> |
|
158 |
<div class="uk-padding-small uk-text-small uk-text-bold">Recent research results and related graphs</div> |
|
159 |
</div> |
|
160 |
|
|
161 |
<!--[attr.uk-tooltip]="'title: ' + createTooltip('Community content at a glance')"--> |
|
162 |
<a class="uk-position-absolute uk-transform-center uk-icon uk-marker" |
|
163 |
style="right: 6%; top: 28%" uk-marker> |
|
164 |
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="marker"><rect x="9" y="4" width="1" height="11"></rect><rect x="4" y="9" width="11" height="1"></rect></svg> |
|
165 |
</a> |
|
166 |
<!--[attr.uk-tooltip]="'title: ' + createTooltip('Locate Research Results')"--> |
|
167 |
<a class="uk-position-absolute uk-transform-center uk-icon uk-marker" |
|
168 |
style="left: 45%; top: 40%" uk-marker> |
|
169 |
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="marker"><rect x="9" y="4" width="1" height="11"></rect><rect x="4" y="9" width="11" height="1"></rect></svg> |
|
170 |
</a> |
|
171 |
<!--[attr.uk-tooltip]="'title: ' + createTooltip('Recent research results and related graphs')"--> |
|
172 |
<a class="uk-position-absolute uk-transform-center uk-icon uk-marker" |
|
173 |
style="left: 35%; top: 55%" uk-marker> |
|
174 |
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="marker"><rect x="9" y="4" width="1" height="11"></rect><rect x="4" y="9" width="11" height="1"></rect></svg> |
|
175 |
</a> |
|
176 |
</div> |
|
177 |
</div> |
|
178 |
</div> |
|
179 |
</div> |
|
180 |
</div> |
|
181 |
<!--/div--> |
|
182 |
</div> |
|
183 |
|
|
184 |
<!--<div class="uk-container">--> |
|
185 |
<!-- <a class="configure-profile uk-icon uk-marker"--> |
|
186 |
<!-- uk-marker--> |
|
187 |
<!-- uk-tooltip="title: AAAAAAA 1">--> |
|
188 |
<!-- <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="marker"><rect x="9" y="4" width="1" height="11"></rect><rect x="4" y="9" width="11" height="1"></rect></svg>--> |
|
189 |
<!-- </a>--> |
|
190 |
<!-- <a class="connect-with uk-icon uk-marker"--> |
|
191 |
<!-- uk-marker--> |
|
192 |
<!-- uk-tooltip="title: AAAAAAA 2">--> |
|
193 |
<!-- <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="marker"><rect x="9" y="4" width="1" height="11"></rect><rect x="4" y="9" width="11" height="1"></rect></svg>--> |
|
194 |
<!-- </a>--> |
|
195 |
<!-- <a class="choose-statistics uk-icon uk-marker"--> |
|
196 |
<!-- uk-marker--> |
|
197 |
<!-- uk-tooltip="title: AAAAAAA 3">--> |
|
198 |
<!-- <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="marker"><rect x="9" y="4" width="1" height="11"></rect><rect x="4" y="9" width="11" height="1"></rect></svg>--> |
|
199 |
<!-- </a>--> |
|
200 |
|
|
201 |
<!-- <button (click)="openTooltips()">OPEN TOOLTIPS</button>--> |
|
202 |
|
|
203 |
|
|
204 |
<!-- <button type="button" uk-toggle="target: #my-id1; mode: hover; animation: uk-animation-fade">test tooltip</button>--> |
|
205 |
<!-- <p id="my-id1" class="test-tooltip">TEST tooltip1</p>--> |
|
206 |
|
|
207 |
<!-- <button (scroll)="scrollHandler($event)" type="button" uk-toggle="target: #my-id2; mode: hover; animation: uk-animation-fade">test tooltip</button>--> |
|
208 |
<!-- <p id="my-id2" class="test-tooltip" [attr.hidden]="hidden ? 'hidden' : null">TEST tooltip2</p>--> |
|
209 |
|
|
210 |
<!-- <button type="button" uk-toggle="target: #my-id3; mode: hover; animation: uk-animation-fade">test tooltip</button>--> |
|
211 |
<!-- <p id="my-id3"class="test-tooltip">TEST tooltip3</p>--> |
|
212 |
<!--</div>--> |
|
213 |
|
|
214 |
<div class="uk-section-muted uk-margin-large-top"> |
|
215 |
<div class="uk-container uk-container-large"> |
|
216 |
<div class="uk-margin-large-top uk-margin-large-bottom"> |
|
217 |
<div class="uk-margin uk-panel"> |
|
218 |
<h4 class="uk-margin uk-h4 uk-text-bold"> |
|
219 |
Why trust OpenAIRE? |
|
220 |
</h4> |
|
221 |
|
|
222 |
<div class="uk-child-width-1-3@m uk-grid-small uk-grid-match" uk-grid |
|
223 |
uk-scrollspy="target: > div; cls:uk-animation-fade; delay: 500"> |
|
224 |
<div> |
|
225 |
<div class="uk-card uk-card-default uk-card-body"> |
|
226 |
<p class="">It is the Open Access Infrastructure for Europe.</p> |
|
227 |
</div> |
|
228 |
</div> |
|
229 |
<div> |
|
230 |
<div class="uk-card uk-card-default uk-card-body"> |
|
231 |
<p>It is community based and independent.</p> |
|
232 |
</div> |
|
233 |
</div> |
|
234 |
<div> |
|
235 |
<div class="uk-card uk-card-default uk-card-body"> |
|
236 |
<p>Provides organizational and technical framework to support OpenScience.</p> |
|
237 |
</div> |
|
238 |
</div> |
|
239 |
<div> |
|
240 |
<div class="uk-card uk-card-default uk-card-body"> |
|
241 |
<p>Provides access to over 25 million research outputs and services that enable their access, link and reuse.</p> |
|
242 |
</div> |
|
243 |
</div> |
|
244 |
<div> |
|
245 |
<div class="uk-card uk-card-default uk-card-body"> |
|
246 |
<p>Provides organizational and technical framework to support OpenScience.</p> |
|
247 |
</div> |
|
248 |
</div> |
|
249 |
<div> |
|
250 |
<div class="uk-card uk-card-default uk-card-body"> |
|
251 |
<p>Ensures that all data come from trusted sources.</p> |
|
252 |
</div> |
|
253 |
</div> |
|
254 |
</div> |
|
255 |
</div> |
|
256 |
</div> |
|
257 |
</div> |
|
258 |
</div> |
|
259 |
` |
|
260 |
}) |
|
261 |
|
|
262 |
export class CommunityCreationInstructionsComponent { |
|
263 |
public piwiksub: any; |
|
264 |
|
|
265 |
public pageTitle = "OpenAIRE" |
|
266 |
|
|
267 |
public admin_portal_image_hidden: boolean = true; |
|
268 |
@ViewChild('adminPortalImage') admin_portal_image: ElementRef; |
|
269 |
|
|
270 |
public community_image_hidden: boolean = true; |
|
271 |
@ViewChild('communityImage') community_image: ElementRef; |
|
272 |
|
|
273 |
properties:EnvProperties; |
|
274 |
|
|
275 |
constructor ( |
|
276 |
private route: ActivatedRoute, |
|
277 |
private _router: Router, |
|
278 |
private _title: Title, |
|
279 |
private _piwikService:PiwikService) { |
|
280 |
|
|
281 |
var description = "OpenAIRE - Connect, Community Dashboard, research community"; |
|
282 |
var title = "OpenAIRE - Connect | Create and manage your community page"; |
|
283 |
this._title.setTitle(title); |
|
284 |
} |
|
285 |
|
|
286 |
public ngOnInit() { |
|
287 |
this.route.data |
|
288 |
.subscribe((data: { envSpecific: EnvProperties }) => { |
|
289 |
this.properties = data.envSpecific; |
|
290 |
var url = data.envSpecific.baseLink+this._router.url; |
|
291 |
|
|
292 |
if(this.properties.enablePiwikTrack && (typeof document !== 'undefined')){ |
|
293 |
this.piwiksub = this._piwikService.trackView(this.properties, "OpenAIRE Connect | Create and manage your community page", this.properties.piwikSiteId).subscribe(); |
|
294 |
} |
|
295 |
|
|
296 |
//UIkit.tooltip('.configure-profile').show(); |
|
297 |
}); |
|
298 |
} |
|
299 |
|
|
300 |
/* |
|
301 |
public openTooltips() { |
|
302 |
console.debug("open these tooltips!"); |
|
303 |
UIkit.tooltip('.configure-profile').show(); |
|
304 |
UIkit.tooltip('.connect-with').show(); |
|
305 |
UIkit.tooltip('.choose-statistics').show(); |
|
306 |
} |
|
307 |
*/ |
|
308 |
|
|
309 |
|
|
310 |
public ngAfterViewInit() { |
|
311 |
/* if (typeof document !== 'undefined') { |
|
312 |
|
|
313 |
if (document.getElementById('enableFadeOutScrollScript')) { |
|
314 |
document.getElementById('enableFadeOutScrollScript').remove(); |
|
315 |
} |
|
316 |
|
|
317 |
const enableFadeOutScrollScript = document.createElement('script'); |
|
318 |
enableFadeOutScrollScript.setAttribute('id', 'enableFadeOutScrollScript'); |
|
319 |
enableFadeOutScrollScript.innerHTML = '\n' + |
|
320 |
'$(document).ready(function() {\n' + |
|
321 |
'\n' + |
|
322 |
' $(window).scroll( function(){\n' + |
|
323 |
'\n' + |
|
324 |
' $(\'.my-tooltip\').each( function(i){\n' + |
|
325 |
'\n' + |
|
326 |
' var bottom_of_object = $(this).position().top + $(this).outerHeight();\n' + |
|
327 |
' var bottom_of_window = $(window).scrollTop() + $(window).height();\n' + |
|
328 |
'\n' + |
|
329 |
' if( bottom_of_window > bottom_of_object ){\n' + |
|
330 |
'\n' + |
|
331 |
' $(this).animate({\'opacity\':\'1\'},1500);\n' + |
|
332 |
//'\n' + 'this.hidden = true;' + |
|
333 |
'\n' + |
|
334 |
' }\n' + |
|
335 |
'\n' + |
|
336 |
' });\n' + |
|
337 |
'\n' + |
|
338 |
' });\n' + |
|
339 |
'\n' + |
|
340 |
' });'; |
|
341 |
|
|
342 |
document.body.appendChild(enableFadeOutScrollScript); |
|
343 |
*/ |
|
344 |
/*UIkit.util.on('#logo', 'beforehide', function () { |
|
345 |
// do something |
|
346 |
if(this.hide =http://www.equp4.wf/= false) { |
|
347 |
return false; |
|
348 |
} |
|
349 |
}); |
|
350 |
}*/ |
|
351 |
} |
|
352 |
|
|
353 |
|
|
354 |
|
|
355 |
@HostListener('window:scroll', ['$event']) |
|
356 |
scrollHandler(event) { |
|
357 |
let offsetHeight = document.getElementById('stickyNavbar').offsetHeight; |
|
358 |
let scrollPosition = window.pageYOffset; |
|
359 |
|
|
360 |
let admin_portal_image_idsToToggle: string[] = ['#logo', '#configure-profile', '#choose-statistics', '#connect-with', '#curate', '#help-texts', '#invite']; |
|
361 |
let adminPortalImageHeight = this.admin_portal_image.nativeElement.offsetHeight; |
|
362 |
let adminPortalImagePosition = this.admin_portal_image.nativeElement.offsetTop - offsetHeight; |
|
363 |
|
|
364 |
if(!this.admin_portal_image_hidden |
|
365 |
&& ((scrollPosition >= 0.7*adminPortalImagePosition+adminPortalImageHeight) || scrollPosition < 0.7*adminPortalImagePosition)) { |
|
366 |
this.admin_portal_image_hidden = true; |
|
367 |
admin_portal_image_idsToToggle.forEach((id: string) => { |
|
368 |
UIkit.toggle(id, { |
|
369 |
animation: 'uk-animation-fade uk-animation-reverse', |
|
370 |
duration: 1500 |
|
371 |
}).toggle(); |
|
372 |
}); |
|
373 |
} else if (this.admin_portal_image_hidden && (scrollPosition >= 0.7*adminPortalImagePosition)) { |
|
374 |
this.admin_portal_image_hidden = false; |
|
375 |
admin_portal_image_idsToToggle.forEach((id: string) => { |
|
376 |
UIkit.toggle(id, { |
|
377 |
animation: 'uk-animation-fade', |
|
378 |
duration: 1500 |
|
379 |
}).toggle(); |
|
380 |
}); |
|
381 |
} |
|
382 |
|
|
383 |
let community_image_idsToToggle: string[] = ['#community-content', '#locate-research-results', '#recent-research-results']; |
|
384 |
let communityImageHeight = this.community_image.nativeElement.offsetHeight; |
|
385 |
let communityImagePosition = this.community_image.nativeElement.offsetTop - offsetHeight; |
|
386 |
|
|
387 |
if(!this.community_image_hidden |
|
388 |
&& ((scrollPosition >= 0.9*communityImagePosition+communityImageHeight) || scrollPosition < 0.9*communityImagePosition)) { |
|
389 |
this.community_image_hidden = true; |
|
390 |
community_image_idsToToggle.forEach((id: string) => { |
|
391 |
UIkit.toggle(id, { |
|
392 |
animation: 'uk-animation-fade uk-animation-reverse', |
|
393 |
duration: 1500 |
|
394 |
}).toggle(); |
|
395 |
}); |
|
396 |
} else if (this.community_image_hidden && (scrollPosition >= 0.9*communityImagePosition)) { |
|
397 |
this.community_image_hidden = false; |
|
398 |
community_image_idsToToggle.forEach((id: string) => { |
|
399 |
UIkit.toggle(id, { |
|
400 |
animation: 'uk-animation-fade', |
|
401 |
duration: 1500 |
|
402 |
}).toggle(); |
|
403 |
}); |
|
404 |
} |
|
405 |
} |
|
406 |
|
|
407 |
public ngOnDestroy() { |
|
408 |
if(this.piwiksub){ |
|
409 |
this.piwiksub.unsubscribe(); |
|
410 |
} |
|
411 |
} |
|
412 |
|
|
413 |
public createTooltip(content: string) : string { |
|
414 |
return "<div class=\"uk-text-center uk-text-bold uk-padding-small\">"+content+"</div>"; |
|
415 |
} |
|
416 |
} |
modules/uoa-connect-portal/branches/use-UoaAdminToolsLibrary/src/app/createCommunity/community-creation-instructions.module.ts | ||
---|---|---|
1 |
import { NgModule} from '@angular/core'; |
|
2 |
import { CommonModule } from '@angular/common'; |
|
3 |
import { RouterModule } from '@angular/router'; |
|
4 |
|
|
5 |
import {FreeGuard} from '../openaireLibrary/login/freeGuard.guard'; |
|
6 |
import {PreviousRouteRecorder} from '../openaireLibrary/utils/piwik/previousRouteRecorder.guard'; |
|
7 |
import {PiwikService} from '../openaireLibrary/utils/piwik/piwik.service'; |
|
8 |
|
|
9 |
import {CommunityCreationInstructionsComponent} from './community-creation-instructions.component'; |
|
10 |
import {CommunityCreationInstructionsRoutingModule} from './community-creation-instructions-routing.module'; |
|
11 |
|
|
12 |
@NgModule({ |
|
13 |
imports: [ |
|
14 |
CommonModule, RouterModule, CommunityCreationInstructionsRoutingModule |
|
15 |
], |
|
16 |
declarations: [ |
|
17 |
CommunityCreationInstructionsComponent |
|
18 |
], |
|
19 |
exports: [ |
|
20 |
CommunityCreationInstructionsComponent |
|
21 |
], |
|
22 |
providers:[ |
|
23 |
FreeGuard, PreviousRouteRecorder, PiwikService |
|
24 |
] |
|
25 |
}) |
|
26 |
export class CommunityCreationInstructionsModule { } |
modules/uoa-connect-portal/branches/use-UoaAdminToolsLibrary/src/app/createCommunity/community-creation-instructions-routing.module.ts | ||
---|---|---|
1 |
import {NgModule} from '@angular/core'; |
|
2 |
import {RouterModule} from '@angular/router'; |
|
3 |
|
|
4 |
import {FreeGuard} from '../openaireLibrary/login/freeGuard.guard'; |
|
5 |
import {PreviousRouteRecorder} from '../openaireLibrary/utils/piwik/previousRouteRecorder.guard'; |
|
6 |
|
|
7 |
import {CommunityCreationInstructionsComponent} from './community-creation-instructions.component'; |
|
8 |
|
|
9 |
@NgModule({ |
|
10 |
imports: [ |
|
11 |
RouterModule.forChild([ |
|
12 |
{ path: '', component: CommunityCreationInstructionsComponent, canActivate: [FreeGuard], canDeactivate: [PreviousRouteRecorder] } |
|
13 |
|
|
14 |
]) |
|
15 |
] |
|
16 |
}) |
|
17 |
export class CommunityCreationInstructionsRoutingModule { } |
modules/uoa-connect-portal/branches/use-UoaAdminToolsLibrary/src/app/test/theme.component.ts | ||
---|---|---|
1 |
import {Component} from '@angular/core'; |
|
2 |
|
|
3 |
|
|
4 |
@Component({ |
|
5 |
selector: 'theme', |
|
6 |
templateUrl: 'theme.component.html', |
|
7 |
}) |
|
8 |
|
|
9 |
export class ThemeComponent { |
|
10 |
|
|
11 |
} |
modules/uoa-connect-portal/branches/use-UoaAdminToolsLibrary/src/app/test/theme.component.html | ||
---|---|---|
1 |
<div class="uk-offcanvas-content"> |
|
2 |
|
|
3 |
<nav class="uk-navbar-container"> |
|
4 |
<div class="uk-container"> |
|
5 |
<div uk-navbar="" class="uk-navbar"> |
|
6 |
<div class="uk-navbar-left"> |
|
7 |
|
|
8 |
<a class="uk-navbar-item uk-logo" href="#">Logo</a> |
|
9 |
|
|
10 |
<ul class="uk-navbar-nav"> |
|
11 |
<li class="uk-active"><a href="#">Active</a></li> |
|
12 |
<li> |
|
13 |
<a href="#" aria-expanded="false">Parent</a> |
|
14 |
<div class="uk-navbar-dropdown"> |
|
15 |
<ul class="uk-nav uk-navbar-dropdown-nav"> |
|
16 |
<li class="uk-active"><a href="#">Active</a></li> |
|
17 |
<li class="uk-parent"> |
|
18 |
<a href="#">Parent</a> |
|
19 |
<ul class="uk-nav-sub"> |
|
20 |
<li><a href="#">Sub item</a></li> |
|
21 |
<li><a href="#">Sub item</a></li> |
|
22 |
</ul> |
|
23 |
</li> |
|
24 |
<li class="uk-nav-header">Header</li> |
|
25 |
<li><a href="#"><span class="uk-margin-small-right uk-icon" uk-icon="icon: table"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="table"><rect x="1" y="3" width="18" height="1"></rect><rect x="1" y="7" width="18" height="1"></rect><rect x="1" y="11" width="18" height="1"></rect><rect x="1" y="15" width="18" height="1"></rect></svg></span> Item</a></li> |
|
26 |
<li><a href="#"><span class="uk-margin-small-right uk-icon" uk-icon="icon: thumbnails"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="thumbnails"><rect fill="none" stroke="#000" x="3.5" y="3.5" width="5" height="5"></rect><rect fill="none" stroke="#000" x="11.5" y="3.5" width="5" height="5"></rect><rect fill="none" stroke="#000" x="11.5" y="11.5" width="5" height="5"></rect><rect fill="none" stroke="#000" x="3.5" y="11.5" width="5" height="5"></rect></svg></span> Item</a></li> |
|
27 |
<li class="uk-nav-divider"></li> |
|
28 |
<li><a href="#"><span class="uk-margin-small-right uk-icon" uk-icon="icon: trash"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="trash"><polyline fill="none" stroke="#000" points="6.5 3 6.5 1.5 13.5 1.5 13.5 3"></polyline><polyline fill="none" stroke="#000" points="4.5 4 4.5 18.5 15.5 18.5 15.5 4"></polyline><rect x="8" y="7" width="1" height="9"></rect><rect x="11" y="7" width="1" height="9"></rect><rect x="2" y="3" width="16" height="1"></rect></svg></span> Item</a></li> |
|
29 |
</ul> |
|
30 |
</div> |
|
31 |
</li> |
|
32 |
<li><a href="#">Item</a></li> |
|
33 |
<li><a href="#">Item</a></li> |
|
34 |
</ul> |
|
35 |
|
|
36 |
</div> |
|
37 |
<div class="uk-navbar-right"> |
|
38 |
<a class="uk-navbar-toggle uk-icon" href="#modal" uk-icon="icon: more-vertical" uk-toggle=""><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="more-vertical"><circle cx="10" cy="3" r="2"></circle><circle cx="10" cy="10" r="2"></circle><circle cx="10" cy="17" r="2"></circle></svg></a> |
|
39 |
<a class="uk-navbar-toggle uk-icon uk-search-icon" href="#modal-search" uk-search-icon="" uk-toggle=""><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="search-icon"><circle fill="none" stroke="#000" stroke-width="1.1" cx="9" cy="9" r="7"></circle><path fill="none" stroke="#000" stroke-width="1.1" d="M14,14 L18,18 L14,14 Z"></path></svg></a> |
|
40 |
<a class="uk-navbar-toggle uk-icon uk-navbar-toggle-icon" href="#offcanvas" uk-navbar-toggle-icon="" uk-toggle=""><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="navbar-toggle-icon"><rect y="9" width="20" height="2"></rect><rect y="3" width="20" height="2"></rect><rect y="15" width="20" height="2"></rect></svg></a> |
|
41 |
</div> |
|
42 |
</div> |
|
43 |
</div> |
|
44 |
</nav> |
|
45 |
|
|
46 |
<div class="uk-section uk-section-default"> |
|
47 |
<div class="uk-container"> |
|
48 |
|
|
49 |
<div uk-grid="" class="uk-grid"> |
|
50 |
<div class="uk-width-2-3@m uk-first-column"> |
|
51 |
|
|
52 |
<ul class="uk-breadcrumb"> |
|
53 |
<li><a href="#">Home</a></li> |
|
54 |
<li><a href="#">Blog</a></li> |
|
55 |
<li class="uk-disabled"><a>Category</a></li> |
|
56 |
<li><span>Post</span></li> |
|
57 |
</ul> |
|
58 |
|
|
59 |
<article class="uk-article"> |
|
60 |
|
|
61 |
<h1 class="uk-article-title"><a class="uk-link-reset" href="#">Article Title</a></h1> |
|
62 |
|
|
63 |
<hr class="uk-divider-small"> |
|
64 |
|
|
65 |
<p class="uk-text-lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> |
|
66 |
|
|
67 |
<p class="uk-column-1-2@s uk-dropcap">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.</p> |
|
68 |
|
|
69 |
<p class="uk-article-meta">Written by <a href="#">Super User</a> on 12 April 2012. Posted in <a href="#">Blog</a></p> |
|
70 |
|
|
71 |
<hr class="uk-divider-icon uk-margin-medium"> |
|
72 |
|
|
73 |
<div class="uk-grid-small uk-child-width-auto uk-flex-middle uk-margin-medium uk-grid" uk-grid=""> |
|
74 |
<div class="uk-first-column"> |
|
75 |
<button class="uk-button uk-button-default" aria-expanded="false">Default</button> |
|
76 |
<div uk-dropdown="mode: click" class="uk-dropdown"> |
|
77 |
<ul class="uk-nav uk-dropdown-nav"> |
|
78 |
<li class="uk-active"><a href="#">Active</a></li> |
|
79 |
<li class="uk-parent"> |
|
80 |
<a href="#">Parent</a> |
|
81 |
<ul class="uk-nav-sub"> |
|
82 |
<li><a href="#">Sub item</a></li> |
|
83 |
<li><a href="#">Sub item</a></li> |
|
84 |
</ul> |
|
85 |
</li> |
|
86 |
<li class="uk-nav-header">Header</li> |
|
87 |
<li><a href="#"><span class="uk-margin-small-right uk-icon" uk-icon="icon: table"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="table"><rect x="1" y="3" width="18" height="1"></rect><rect x="1" y="7" width="18" height="1"></rect><rect x="1" y="11" width="18" height="1"></rect><rect x="1" y="15" width="18" height="1"></rect></svg></span> Item</a></li> |
|
88 |
<li><a href="#"><span class="uk-margin-small-right uk-icon" uk-icon="icon: thumbnails"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="thumbnails"><rect fill="none" stroke="#000" x="3.5" y="3.5" width="5" height="5"></rect><rect fill="none" stroke="#000" x="11.5" y="3.5" width="5" height="5"></rect><rect fill="none" stroke="#000" x="11.5" y="11.5" width="5" height="5"></rect><rect fill="none" stroke="#000" x="3.5" y="11.5" width="5" height="5"></rect></svg></span> Item</a></li> |
|
89 |
<li class="uk-nav-divider"></li> |
|
90 |
<li><a href="#"><span class="uk-margin-small-right uk-icon" uk-icon="icon: trash"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="trash"><polyline fill="none" stroke="#000" points="6.5 3 6.5 1.5 13.5 1.5 13.5 3"></polyline><polyline fill="none" stroke="#000" points="4.5 4 4.5 18.5 15.5 18.5 15.5 4"></polyline><rect x="8" y="7" width="1" height="9"></rect><rect x="11" y="7" width="1" height="9"></rect><rect x="2" y="3" width="16" height="1"></rect></svg></span> Item</a></li> |
|
91 |
</ul> |
|
92 |
</div> |
|
93 |
</div> |
|
94 |
<div> |
|
95 |
<button class="uk-button uk-button-primary">Primary</button> |
|
96 |
</div> |
|
97 |
<div> |
|
98 |
<button class="uk-button uk-button-secondary">Secondary</button> |
|
99 |
</div> |
|
100 |
<div> |
|
101 |
<button class="uk-button uk-button-danger">Danger</button> |
|
102 |
</div> |
|
103 |
<div> |
|
104 |
<button class="uk-button uk-button-default" disabled="">Disabled</button> |
|
105 |
</div> |
|
106 |
</div> |
|
107 |
|
|
108 |
<hr class="uk-margin-medium"> |
|
109 |
|
|
110 |
<div class="uk-child-width-1-2 uk-child-width-1-4@s uk-margin uk-grid" uk-grid=""> |
|
111 |
<div class="uk-first-column"> |
|
112 |
<ul class="uk-list"> |
|
113 |
<li><a href="#">a element</a></li> |
|
114 |
<li><abbr title="Title text">abbr element</abbr></li> |
|
115 |
<li><code>code element</code></li> |
|
116 |
<li><del>del element</del></li> |
|
117 |
<li><dfn title="Title text">dfn element</dfn></li> |
|
118 |
<li><a href="#" class="uk-link-muted">Link Muted</a></li> |
|
119 |
</ul> |
|
120 |
</div> |
|
121 |
<div> |
|
122 |
<ul class="uk-list"> |
|
123 |
<li><em>em element</em></li> |
|
124 |
<li><ins>ins element</ins></li> |
|
125 |
<li><mark>mark element</mark></li> |
|
126 |
<li><q>q <q>inside</q> a q</q></li> |
|
127 |
<li><strong>strong element</strong></li> |
|
128 |
<li><a href="#" class="uk-link-reset">Link Reset</a></li> |
|
129 |
</ul> |
|
130 |
</div> |
|
131 |
<div> |
|
132 |
<ul class="uk-list"> |
|
133 |
<li class="uk-text-muted">Text Muted</li> |
|
134 |
<li class="uk-text-emphasis">Text Emphasis</li> |
|
135 |
<li class="uk-text-primary">Text Primary</li> |
|
136 |
<li class="uk-text-secondary">Text Secondary</li> |
|
137 |
<li class="uk-text-success">Text Success</li> |
|
138 |
<li class="uk-text-warning">Text Warning</li> |
|
139 |
<li class="uk-text-danger">Text Danger</li> |
|
140 |
<li class="uk-text-meta">Text Meta</li> |
|
141 |
</ul> |
|
142 |
</div> |
|
143 |
<div> |
|
144 |
<ul class="uk-list"> |
|
145 |
<li><span class="uk-label">Default</span></li> |
|
146 |
<li><span class="uk-label uk-label-success">Success</span></li> |
|
147 |
<li><span class="uk-label uk-label-warning">Warning</span></li> |
|
148 |
<li><span class="uk-label uk-label-danger">Danger</span></li> |
|
149 |
<li><a class="uk-badge" href="#">1</a></li> |
|
150 |
<li> |
|
151 |
<a class="uk-icon-button uk-icon" href="#" uk-icon="icon: home"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="home"><polygon points="18.65 11.35 10 2.71 1.35 11.35 0.65 10.65 10 1.29 19.35 10.65"></polygon><polygon points="15 4 18 4 18 7 17 7 17 5 15 5"></polygon><polygon points="3 11 4 11 4 18 7 18 7 12 12 12 12 18 16 18 16 11 17 11 17 19 11 19 11 13 8 13 8 19 3 19"></polygon></svg></a> |
|
152 |
<a class="uk-icon-button uk-icon" href="#" uk-icon="icon: github"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="github"><path d="M10,1 C5.03,1 1,5.03 1,10 C1,13.98 3.58,17.35 7.16,18.54 C7.61,18.62 7.77,18.34 7.77,18.11 C7.77,17.9 7.76,17.33 7.76,16.58 C5.26,17.12 4.73,15.37 4.73,15.37 C4.32,14.33 3.73,14.05 3.73,14.05 C2.91,13.5 3.79,13.5 3.79,13.5 C4.69,13.56 5.17,14.43 5.17,14.43 C5.97,15.8 7.28,15.41 7.79,15.18 C7.87,14.6 8.1,14.2 8.36,13.98 C6.36,13.75 4.26,12.98 4.26,9.53 C4.26,8.55 4.61,7.74 5.19,7.11 C5.1,6.88 4.79,5.97 5.28,4.73 C5.28,4.73 6.04,4.49 7.75,5.65 C8.47,5.45 9.24,5.35 10,5.35 C10.76,5.35 11.53,5.45 12.25,5.65 C13.97,4.48 14.72,4.73 14.72,4.73 C15.21,5.97 14.9,6.88 14.81,7.11 C15.39,7.74 15.73,8.54 15.73,9.53 C15.73,12.99 13.63,13.75 11.62,13.97 C11.94,14.25 12.23,14.8 12.23,15.64 C12.23,16.84 12.22,17.81 12.22,18.11 C12.22,18.35 12.38,18.63 12.84,18.54 C16.42,17.35 19,13.98 19,10 C19,5.03 14.97,1 10,1 L10,1 Z"></path></svg></a> |
|
153 |
<a class="uk-icon-link uk-icon" href="#" uk-icon="icon: trash"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="trash"><polyline fill="none" stroke="#000" points="6.5 3 6.5 1.5 13.5 1.5 13.5 3"></polyline><polyline fill="none" stroke="#000" points="4.5 4 4.5 18.5 15.5 18.5 15.5 4"></polyline><rect x="8" y="7" width="1" height="9"></rect><rect x="11" y="7" width="1" height="9"></rect><rect x="2" y="3" width="16" height="1"></rect></svg></a> |
|
154 |
</li> |
|
155 |
</ul> |
|
156 |
</div> |
|
157 |
</div> |
|
158 |
|
|
159 |
<pre class="uk-pre uk-margin-medium"><code><div class="myclass">...<div></code></pre> |
|
160 |
|
|
161 |
<blockquote class="uk-margin-medium" cite="#"> |
|
162 |
<p>The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a footer or cite element.</p> |
|
163 |
<footer>Someone famous in <cite><a href="#">Source Title</a></cite></footer> |
|
164 |
</blockquote> |
|
165 |
|
|
166 |
<div class="uk-grid-small uk-grid" uk-grid=""> |
|
167 |
<div class="uk-first-column"> |
|
168 |
<a class="uk-button uk-button-text" href="#">Read more</a> |
|
169 |
</div> |
|
170 |
<div> |
|
171 |
<a class="uk-button uk-button-text" href="#">5 Comments</a> |
|
172 |
</div> |
|
173 |
</div> |
|
174 |
|
|
175 |
</article> |
|
176 |
|
|
177 |
<hr class="uk-margin-medium"> |
|
178 |
|
|
179 |
<ul class="uk-comment-list uk-margin-medium"> |
|
180 |
<li> |
|
181 |
<article class="uk-comment uk-visible-toggle" tabindex="-1"> |
|
182 |
<header class="uk-comment-header uk-position-relative"> |
|
183 |
<div class="uk-grid-medium uk-flex-middle uk-grid" uk-grid=""> |
|
184 |
<div class="uk-width-auto uk-first-column"> |
|
185 |
<canvas class="uk-comment-avatar test-img-small" width="50" height="50"></canvas> |
|
186 |
</div> |
|
187 |
<div class="uk-width-expand"> |
|
188 |
<h4 class="uk-comment-title uk-margin-remove"><a class="uk-link-reset" href="#">Author</a></h4> |
|
189 |
<p class="uk-comment-meta uk-margin-remove-top"><a class="uk-link-reset" href="#">12 days ago</a></p> |
|
190 |
</div> |
|
191 |
</div> |
|
192 |
<div class="uk-position-top-right uk-position-small uk-hidden-hover"><a class="uk-button uk-button-text" href="#">Reply</a></div> |
|
193 |
</header> |
|
194 |
<div class="uk-comment-body"> |
|
195 |
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p> |
|
196 |
</div> |
|
197 |
</article> |
|
198 |
</li> |
|
199 |
</ul> |
|
200 |
|
|
201 |
<ul class="uk-pagination uk-flex-center" uk-margin=""> |
|
202 |
<li class="uk-first-column"><a href="#"><span uk-pagination-previous="" class="uk-icon uk-pagination-previous"><svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg" data-svg="pagination-previous"><polyline fill="none" stroke="#000" stroke-width="1.2" points="6 1 1 6 6 11"></polyline></svg></span></a></li> |
|
203 |
<li><a href="#">1</a></li> |
|
204 |
<li class="uk-disabled"><span>...</span></li> |
|
205 |
<li><a href="#">4</a></li> |
|
206 |
<li><a href="#">5</a></li> |
|
207 |
<li><a href="#">6</a></li> |
|
208 |
<li class="uk-active"><span>7</span></li> |
|
209 |
<li><a href="#">8</a></li> |
|
210 |
<li><a href="#">9</a></li> |
|
211 |
<li><a href="#">10</a></li> |
|
212 |
<li class="uk-disabled"><span>...</span></li> |
|
213 |
<li><a href="#">20</a></li> |
|
214 |
<li><a href="#"><span uk-pagination-next="" class="uk-icon uk-pagination-next"><svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg" data-svg="pagination-next"><polyline fill="none" stroke="#000" stroke-width="1.2" points="1 1 6 6 1 11"></polyline></svg></span></a></li> |
|
215 |
</ul> |
|
216 |
|
|
217 |
</div> |
|
218 |
<div class="uk-width-expand@m"> |
|
219 |
|
|
220 |
<div class="uk-margin-medium-bottom"> |
|
221 |
<form class="uk-search uk-search-default uk-width-1-1"> |
|
222 |
<span uk-search-icon="" class="uk-icon uk-search-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="search-icon"><circle fill="none" stroke="#000" stroke-width="1.1" cx="9" cy="9" r="7"></circle><path fill="none" stroke="#000" stroke-width="1.1" d="M14,14 L18,18 L14,14 Z"></path></svg></span> |
|
223 |
<input class="uk-search-input" type="search" placeholder="Search..."> |
|
224 |
</form> |
|
225 |
</div> |
|
226 |
|
|
227 |
<ul class="uk-nav-default uk-nav-parent-icon uk-margin-medium uk-nav" uk-nav=""> |
|
228 |
<li class="uk-active"><a href="#">Active</a></li> |
|
229 |
<li class="uk-parent"> |
|
230 |
<a href="#">Parent</a> |
|
231 |
<ul class="uk-nav-sub" aria-hidden="true" hidden=""> |
|
232 |
<li><a href="#">Sub item</a></li> |
|
233 |
<li><a href="#">Sub item</a> |
|
234 |
<ul> |
|
235 |
<li><a href="#">Sub item</a></li> |
|
236 |
<li><a href="#">Sub item</a></li> |
|
237 |
</ul> |
|
238 |
</li> |
|
239 |
</ul> |
|
240 |
</li> |
|
241 |
<li class="uk-parent"> |
|
242 |
<a href="#">Parent</a> |
|
243 |
<ul class="uk-nav-sub" aria-hidden="true" hidden=""> |
|
244 |
<li><a href="#">Sub item</a></li> |
|
245 |
<li><a href="#">Sub item</a></li> |
|
246 |
</ul> |
|
247 |
</li> |
|
248 |
<li class="uk-nav-header">Header</li> |
|
249 |
<li><a href="#"><span class="uk-margin-small-right uk-icon" uk-icon="icon: table"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="table"><rect x="1" y="3" width="18" height="1"></rect><rect x="1" y="7" width="18" height="1"></rect><rect x="1" y="11" width="18" height="1"></rect><rect x="1" y="15" width="18" height="1"></rect></svg></span> Item</a></li> |
|
250 |
<li><a href="#"><span class="uk-margin-small-right uk-icon" uk-icon="icon: thumbnails"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="thumbnails"><rect fill="none" stroke="#000" x="3.5" y="3.5" width="5" height="5"></rect><rect fill="none" stroke="#000" x="11.5" y="3.5" width="5" height="5"></rect><rect fill="none" stroke="#000" x="11.5" y="11.5" width="5" height="5"></rect><rect fill="none" stroke="#000" x="3.5" y="11.5" width="5" height="5"></rect></svg></span> Item</a></li> |
|
251 |
<li class="uk-nav-divider"></li> |
|
252 |
<li><a href="#"><span class="uk-margin-small-right uk-icon" uk-icon="icon: trash"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="trash"><polyline fill="none" stroke="#000" points="6.5 3 6.5 1.5 13.5 1.5 13.5 3"></polyline><polyline fill="none" stroke="#000" points="4.5 4 4.5 18.5 15.5 18.5 15.5 4"></polyline><rect x="8" y="7" width="1" height="9"></rect><rect x="11" y="7" width="1" height="9"></rect><rect x="2" y="3" width="16" height="1"></rect></svg></span> Item</a></li> |
|
253 |
</ul> |
|
254 |
|
|
255 |
<div class="uk-card uk-card-body uk-card-default uk-card-hover"> |
|
256 |
<h3 class="uk-card-title">Default</h3> |
|
257 |
<p>Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> |
|
258 |
</div> |
|
259 |
|
|
260 |
<div class="uk-margin uk-card uk-card-body uk-card-primary uk-card-hover"> |
|
261 |
<h3 class="uk-card-title">Primary</h3> |
|
262 |
<p>Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> |
|
263 |
</div> |
|
264 |
|
|
265 |
<div class="uk-margin uk-card uk-card-body uk-card-secondary uk-card-hover"> |
|
266 |
<h3 class="uk-card-title">Secondary</h3> |
|
267 |
<p>Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> |
|
268 |
</div> |
|
269 |
|
|
270 |
<div class="uk-margin uk-card uk-card-body uk-card-hover"> |
|
271 |
<h3 class="uk-card-title">Hover</h3> |
|
272 |
<p>Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> |
|
273 |
</div> |
|
274 |
|
|
275 |
</div> |
|
276 |
</div> |
|
277 |
|
|
278 |
<hr class="uk-margin-large"> |
|
279 |
|
|
280 |
<div class="uk-grid-divider uk-grid" uk-grid=""> |
|
281 |
<div class="uk-width-3-5@m uk-first-column"> |
|
282 |
|
|
283 |
<div class="uk-child-width-expand@s uk-grid" uk-grid=""> |
|
284 |
<div class="uk-first-column"> |
|
285 |
|
|
286 |
<form class="uk-form-stacked"> |
|
287 |
|
|
288 |
<div class="uk-margin-small"> |
|
289 |
<label class="uk-form-label">Text</label> |
|
290 |
<input class="uk-input" type="text" placeholder="Some text..."> |
|
291 |
</div> |
|
292 |
|
|
293 |
<div class="uk-margin-small"> |
|
294 |
<select class="uk-select"> |
|
295 |
<option>Option 01</option> |
|
296 |
<option>Option 02</option> |
|
297 |
</select> |
|
298 |
</div> |
|
299 |
|
|
300 |
<div class="uk-margin-small"> |
|
301 |
<textarea class="uk-textarea" rows="2" placeholder="Some text..."></textarea> |
|
302 |
</div> |
|
303 |
|
|
304 |
<div class="uk-grid-small uk-child-width-auto uk-grid" uk-grid=""> |
|
305 |
<div class="uk-first-column"> |
|
306 |
<label><input class="uk-radio" type="radio" name="radio"> Radio</label> |
|
307 |
</div> |
|
308 |
<div> |
|
309 |
<label><input class="uk-checkbox" type="checkbox"> Checkbox</label> |
|
310 |
</div> |
|
311 |
</div> |
|
312 |
|
|
313 |
<div class="uk-margin-small"> |
|
314 |
<input class="uk-range" type="range" value="2" min="0" max="10" step="0.1"> |
|
315 |
</div> |
|
316 |
|
|
317 |
</form> |
|
318 |
|
|
319 |
</div> |
|
320 |
<div> |
|
321 |
|
|
322 |
<form class="uk-form-stacked"> |
|
323 |
|
|
324 |
<div class="uk-margin-small"> |
|
325 |
<label class="uk-form-label">States</label> |
|
326 |
<input class="uk-input" type="text" placeholder=":disabled" disabled=""> |
|
327 |
</div> |
|
328 |
|
|
329 |
<div class="uk-margin-small"> |
|
330 |
<input class="uk-input uk-form-danger" type="text" placeholder="form-danger" value="form-danger"> |
|
331 |
</div> |
|
332 |
<div class="uk-margin-small"> |
|
333 |
<input class="uk-input uk-form-success" type="text" placeholder="form-success" value="form-success"> |
|
334 |
</div> |
|
335 |
<div class="uk-margin-small"> |
|
336 |
<input class="uk-input uk-form-blank" type="text" placeholder="form-blank"> |
|
337 |
</div> |
|
338 |
|
|
339 |
</form> |
|
340 |
|
|
341 |
</div> |
|
342 |
</div> |
|
343 |
|
|
344 |
<div class="uk-overflow-auto uk-margin-medium-top"> |
|
345 |
<table class="uk-table uk-table-divider uk-table-hover uk-table-small"> |
|
346 |
<thead> |
|
347 |
<tr> |
|
348 |
<th>Table Heading</th> |
|
349 |
<th>Table Heading</th> |
|
350 |
<th>Table Heading</th> |
|
351 |
</tr> |
|
352 |
</thead> |
|
353 |
<tbody> |
|
354 |
<tr> |
|
355 |
<td>Table Data</td> |
|
356 |
<td>Table Data</td> |
|
357 |
<td>Table Data</td> |
|
358 |
</tr> |
|
359 |
<tr> |
|
360 |
<td>Table Data</td> |
|
361 |
<td>Table Data</td> |
|
362 |
<td>Table Data</td> |
|
363 |
</tr> |
|
364 |
<tr> |
|
365 |
<td>Table Data</td> |
|
366 |
<td>Table Data</td> |
|
367 |
<td>Table Data</td> |
|
368 |
</tr> |
|
369 |
<tr> |
|
370 |
<td>Table Data</td> |
|
371 |
<td>Table Data</td> |
|
372 |
<td>Table Data</td> |
|
373 |
</tr> |
|
374 |
</tbody> |
|
375 |
</table> |
|
376 |
</div> |
|
377 |
|
|
378 |
<div class="uk-margin-medium-top uk-alert" uk-alert=""> |
|
379 |
<a href="#" class="uk-alert-close uk-icon uk-close" uk-close=""><svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" data-svg="close-icon"><line fill="none" stroke="#000" stroke-width="1.1" x1="1" y1="1" x2="13" y2="13"></line><line fill="none" stroke="#000" stroke-width="1.1" x1="13" y1="1" x2="1" y2="13"></line></svg></a> |
|
380 |
<p>Default</p> |
|
381 |
</div> |
|
382 |
|
|
383 |
<div class="uk-alert-primary uk-alert" uk-alert=""> |
|
384 |
<a href="#" class="uk-alert-close uk-icon uk-close" uk-close=""><svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" data-svg="close-icon"><line fill="none" stroke="#000" stroke-width="1.1" x1="1" y1="1" x2="13" y2="13"></line><line fill="none" stroke="#000" stroke-width="1.1" x1="13" y1="1" x2="1" y2="13"></line></svg></a> |
|
385 |
<p>Primary</p> |
|
386 |
</div> |
|
387 |
|
|
388 |
<div class="uk-alert-success uk-alert" uk-alert=""> |
|
389 |
<a href="#" class="uk-alert-close uk-icon uk-close" uk-close=""><svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" data-svg="close-icon"><line fill="none" stroke="#000" stroke-width="1.1" x1="1" y1="1" x2="13" y2="13"></line><line fill="none" stroke="#000" stroke-width="1.1" x1="13" y1="1" x2="1" y2="13"></line></svg></a> |
|
390 |
<p>Success</p> |
|
391 |
</div> |
|
392 |
|
|
393 |
<div class="uk-alert-warning uk-alert" uk-alert=""> |
|
394 |
<a href="#" class="uk-alert-close uk-icon uk-close" uk-close=""><svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" data-svg="close-icon"><line fill="none" stroke="#000" stroke-width="1.1" x1="1" y1="1" x2="13" y2="13"></line><line fill="none" stroke="#000" stroke-width="1.1" x1="13" y1="1" x2="1" y2="13"></line></svg></a> |
|
395 |
<p>Warning</p> |
|
396 |
</div> |
|
397 |
|
|
398 |
<div class="uk-alert-danger uk-margin-remove-bottom uk-alert" uk-alert=""> |
|
399 |
<a href="#" class="uk-alert-close uk-icon uk-close" uk-close=""><svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" data-svg="close-icon"><line fill="none" stroke="#000" stroke-width="1.1" x1="1" y1="1" x2="13" y2="13"></line><line fill="none" stroke="#000" stroke-width="1.1" x1="13" y1="1" x2="1" y2="13"></line></svg></a> |
|
400 |
<p>Danger</p> |
|
401 |
</div> |
|
402 |
|
|
403 |
<div class="uk-grid-small uk-child-width-auto uk-margin-medium-top uk-countdown uk-grid" uk-grid="" js-countdown=""> |
|
404 |
<div class="uk-first-column"> |
|
405 |
<div class="uk-countdown-number uk-countdown-days"><span>0</span><span>6</span></div> |
|
406 |
</div> |
|
407 |
<div class="uk-countdown-separator">:</div> |
|
408 |
<div> |
|
409 |
<div class="uk-countdown-number uk-countdown-hours"><span>2</span><span>3</span></div> |
|
410 |
</div> |
|
411 |
<div class="uk-countdown-separator">:</div> |
|
412 |
<div> |
|
413 |
<div class="uk-countdown-number uk-countdown-minutes"><span>5</span><span>9</span></div> |
|
414 |
</div> |
|
415 |
<div class="uk-countdown-separator">:</div> |
|
416 |
<div> |
|
417 |
<div class="uk-countdown-number uk-countdown-seconds"><span>5</span><span>0</span></div> |
|
418 |
</div> |
|
419 |
</div> |
|
420 |
|
|
421 |
<script> |
|
422 |
|
|
423 |
var date = (new Date(Date.now() + 864e5 * 7)).toISOString(); |
|
424 |
|
|
425 |
UIkit.util.$$('[js-countdown]').forEach(function(el) { |
|
426 |
UIkit.countdown(el, {date: date}); |
|
427 |
}); |
|
428 |
|
|
429 |
</script> |
|
430 |
|
|
431 |
</div> |
|
432 |
<div class="uk-width-2-5@m"> |
|
433 |
|
|
434 |
<h1 class="uk-heading-2xlarge uk-margin-small">2XL</h1> |
|
435 |
<h1 class="uk-heading-xlarge uk-margin-small">XLarge</h1> |
|
436 |
<h1 class="uk-heading-large uk-margin-small">Heading L</h1> |
|
437 |
<h1 class="uk-heading-medium uk-margin-small">Heading M</h1> |
|
438 |
<h1 class="uk-heading-small uk-margin-small">Heading S</h1> |
|
439 |
|
|
440 |
<h1 class="uk-margin-small">Heading H1</h1> |
|
441 |
<h2 class="uk-margin-small">Heading H2</h2> |
|
442 |
<h3 class="uk-margin-small">Heading H3</h3> |
|
443 |
<h4 class="uk-margin-small">Heading H4</h4> |
|
444 |
<h5 class="uk-margin-small">Heading H5</h5> |
|
445 |
<h6 class="uk-margin-small">Heading H6</h6> |
|
446 |
|
|
447 |
<h3 class="uk-heading-divider">Heading Divider</h3> |
|
448 |
<h3 class="uk-heading-bullet">Heading Bullet</h3> |
|
449 |
<h3 class="uk-heading-line"><span>Heading Line</span></h3> |
|
450 |
|
|
451 |
</div> |
|
452 |
</div> |
|
453 |
|
|
454 |
<hr class="uk-margin-medium"> |
|
455 |
|
|
456 |
<div class="uk-child-width-1-2@s uk-child-width-expand@m uk-grid" uk-grid=""> |
|
457 |
<div class="uk-first-column"> |
|
458 |
|
|
459 |
<div class="uk-inline"> |
|
460 |
<canvas width="800" height="600" class="test-img"></canvas> |
|
461 |
<a class="uk-position-absolute uk-transform-center uk-icon uk-marker" style="left: 20%; top: 30%" href="#" uk-marker=""><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="marker"><rect x="9" y="4" width="1" height="11"></rect><rect x="4" y="9" width="11" height="1"></rect></svg></a> |
|
462 |
<a class="uk-position-absolute uk-transform-center uk-icon uk-marker" style="left: 60%; top: 40%" href="#" uk-marker=""><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="marker"><rect x="9" y="4" width="1" height="11"></rect><rect x="4" y="9" width="11" height="1"></rect></svg></a> |
|
463 |
<a class="uk-position-absolute uk-transform-center uk-icon uk-marker" style="left: 80%; top: 70%" href="#" uk-marker=""><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="marker"><rect x="9" y="4" width="1" height="11"></rect><rect x="4" y="9" width="11" height="1"></rect></svg></a> |
|
464 |
</div> |
|
465 |
|
|
466 |
</div> |
|
467 |
<div> |
|
468 |
|
|
469 |
<div class="uk-inline-clip"> |
|
470 |
<canvas width="800" height="600" class="test-img"></canvas> |
|
471 |
<div class="uk-overlay uk-overlay-default uk-position-bottom"> |
|
472 |
<p>Default Lorem ipsum dolor sit amet, consectetur.</p> |
|
473 |
</div> |
|
474 |
</div> |
|
475 |
|
|
476 |
</div> |
|
477 |
<div> |
|
478 |
|
|
479 |
<div class="uk-inline-clip"> |
|
480 |
<canvas width="800" height="600" class="test-img"></canvas> |
|
481 |
<div class="uk-overlay uk-overlay-primary uk-position-bottom"> |
|
482 |
<p>Primary Lorem ipsum dolor sit amet, consectetur.</p> |
|
483 |
</div> |
|
484 |
</div> |
|
485 |
|
|
486 |
</div> |
|
487 |
<div> |
|
488 |
|
|
489 |
<div class="uk-inline"> |
|
490 |
<canvas width="800" height="600" class="test-img"></canvas> |
|
491 |
<div class="uk-position-center"> |
|
492 |
<span uk-overlay-icon="" class="uk-icon uk-overlay-icon"><svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg" data-svg="overlay-icon"><rect x="19" y="0" width="1" height="40"></rect><rect x="0" y="19" width="40" height="1"></rect></svg></span> |
|
493 |
</div> |
|
494 |
</div> |
|
495 |
|
|
496 |
</div> |
|
497 |
</div> |
|
498 |
|
|
499 |
<hr class="uk-margin-medium"> |
|
500 |
|
|
501 |
<div class="uk-grid-divider uk-child-width-auto@m uk-grid" uk-grid=""> |
|
502 |
<div class="uk-first-column"> |
|
503 |
|
|
504 |
<ul class="uk-dotnav"> |
|
505 |
<li class="uk-active"><a href="#">Item 1</a></li> |
|
506 |
<li><a href="#">Item 2</a></li> |
|
507 |
<li><a href="#">Item 3</a></li> |
|
508 |
<li><a href="#">Item 4</a></li> |
|
509 |
<li><a href="#">Item 5</a></li> |
|
510 |
<li><a href="#">Item 6</a></li> |
|
511 |
</ul> |
|
512 |
|
|
513 |
</div> |
|
514 |
<div> |
|
515 |
|
|
516 |
<a href="#" uk-slidenav-previous="" class="uk-icon uk-slidenav-previous uk-slidenav"><svg width="14px" height="24px" viewBox="0 0 14 24" xmlns="http://www.w3.org/2000/svg" data-svg="slidenav-previous"><polyline fill="none" stroke="#000" stroke-width="1.4" points="12.775,1 1.225,12 12.775,23 "></polyline></svg></a> |
|
517 |
<a href="#" uk-slidenav-next="" class="uk-icon uk-slidenav-next uk-slidenav"><svg width="14px" height="24px" viewBox="0 0 14 24" xmlns="http://www.w3.org/2000/svg" data-svg="slidenav-next"><polyline fill="none" stroke="#000" stroke-width="1.4" points="1.225,23 12.775,12 1.225,1 "></polyline></svg></a> |
|
518 |
|
|
519 |
</div> |
|
520 |
<div> |
|
521 |
|
|
522 |
<ul class="uk-thumbnav"> |
|
523 |
<li class="uk-active"><a href="#"><canvas width="60" height="40" class="test-img"></canvas></a></li> |
|
524 |
<li><a href="#"><canvas width="60" height="40" class="test-img"></canvas></a></li> |
|
525 |
<li><a href="#"><canvas width="60" height="40" class="test-img"></canvas></a></li> |
|
526 |
</ul> |
|
527 |
|
|
528 |
</div> |
|
529 |
<div> |
|
530 |
|
|
531 |
<div class="uk-tooltip uk-tooltip-top-center uk-display-inline-block uk-margin-remove uk-position-relative">Tooltip</div> |
|
532 |
|
|
533 |
</div> |
|
534 |
<div class="uk-width-expand@m"> |
|
535 |
|
|
536 |
<progress class="uk-progress" value="45" max="100">45%</progress> |
|
537 |
|
|
538 |
</div> |
|
539 |
<div> |
|
540 |
|
|
541 |
<button type="button" uk-close="" class="uk-icon uk-close"><svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" data-svg="close-icon"><line fill="none" stroke="#000" stroke-width="1.1" x1="1" y1="1" x2="13" y2="13"></line><line fill="none" stroke="#000" stroke-width="1.1" x1="13" y1="1" x2="1" y2="13"></line></svg></button> |
|
542 |
|
|
543 |
</div> |
|
544 |
<div> |
|
545 |
|
|
546 |
<a href="#" uk-totop="" class="uk-icon uk-totop"><svg width="18" height="10" viewBox="0 0 18 10" xmlns="http://www.w3.org/2000/svg" data-svg="totop"><polyline fill="none" stroke="#000" stroke-width="1.2" points="1 9 9 1 17 9 "></polyline></svg></a> |
|
547 |
|
|
548 |
</div> |
|
549 |
</div> |
|
550 |
|
|
551 |
<hr class="uk-margin-medium"> |
|
552 |
|
|
553 |
<div class="uk-grid-divider uk-child-width-expand@m uk-grid" uk-grid=""> |
|
554 |
<div class="uk-first-column"> |
|
555 |
|
|
556 |
<ul class="uk-subnav uk-subnav-divider" uk-margin=""> |
|
557 |
<li class="uk-active uk-first-column"><a href="#">Active</a></li> |
|
558 |
<li><a href="#">Item</a></li> |
|
559 |
<li class="uk-disabled"><a>Disabled</a></li> |
|
560 |
</ul> |
|
561 |
|
|
562 |
</div> |
|
563 |
<div> |
|
564 |
|
|
565 |
<ul class="uk-subnav uk-subnav-pill" uk-margin=""> |
|
566 |
<li class="uk-active uk-first-column"><a href="#">Active</a></li> |
|
567 |
<li><a href="#">Item</a></li> |
|
568 |
<li class="uk-disabled"><a>Disabled</a></li> |
|
569 |
</ul> |
|
570 |
|
|
571 |
</div> |
|
572 |
<div> |
|
573 |
|
|
574 |
<ul uk-tab="" class="uk-tab"> |
|
575 |
<li class="uk-active"><a href="#">Active</a></li> |
|
576 |
<li><a href="#">Item</a></li> |
|
577 |
<li class="uk-disabled"><a>Disabled</a></li> |
|
578 |
</ul> |
|
579 |
|
|
580 |
</div> |
|
581 |
</div> |
|
582 |
|
|
583 |
<hr class="uk-margin-medium"> |
|
584 |
|
|
585 |
<div class="uk-grid-divider uk-child-width-expand@m uk-grid" uk-grid=""> |
|
586 |
<div class="uk-first-column"> |
|
587 |
|
|
588 |
<ul class="uk-list uk-list-bullet uk-margin-medium"> |
|
589 |
<li>List item 1</li> |
|
590 |
<li>List item 2</li> |
|
591 |
<li>List item 3</li> |
|
592 |
</ul> |
|
593 |
|
|
594 |
<ul class="uk-list uk-list-striped"> |
|
595 |
<li>List item 1</li> |
|
596 |
<li>List item 2</li> |
|
597 |
<li>List item 3</li> |
|
598 |
</ul> |
|
599 |
|
|
600 |
</div> |
|
601 |
<div> |
|
602 |
|
|
603 |
<ul class="uk-list uk-list-divider uk-margin-medium"> |
|
604 |
<li>List item 1</li> |
|
605 |
<li>List item 2</li> |
|
606 |
<li>List item 3</li> |
|
607 |
</ul> |
|
608 |
|
|
609 |
<dl class="uk-description-list uk-description-list-divider"> |
|
610 |
<dt>Description lists</dt> |
|
611 |
<dd>A description text</dd> |
|
612 |
<dt>Description lists</dt> |
|
613 |
<dd>A description text</dd> |
|
614 |
</dl> |
|
615 |
|
|
616 |
</div> |
|
617 |
<div> |
|
618 |
|
|
619 |
<ul uk-accordion="" class="uk-accordion"> |
|
620 |
<li class="uk-open"> |
|
621 |
|
|
622 |
<a class="uk-accordion-title" href="#">Item 1</a> |
|
623 |
<div class="uk-accordion-content" aria-hidden="false"> |
|
624 |
<p>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.</p> |
|
625 |
</div> |
|
626 |
|
|
627 |
</li> |
|
628 |
<li> |
|
629 |
|
|
630 |
<a class="uk-accordion-title" href="#">Item 2</a> |
|
631 |
<div class="uk-accordion-content" aria-hidden="true" hidden=""> |
|
632 |
<p>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.</p> |
|
633 |
</div> |
|
634 |
|
|
635 |
</li> |
|
636 |
<li> |
|
637 |
|
|
638 |
<a class="uk-accordion-title" href="#">Item 3</a> |
|
639 |
<div class="uk-accordion-content" aria-hidden="true" hidden=""> |
|
640 |
<p>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.</p> |
|
641 |
</div> |
|
642 |
|
|
643 |
</li> |
|
644 |
</ul> |
|
645 |
|
|
646 |
</div> |
|
647 |
</div> |
|
648 |
|
|
649 |
</div> |
|
650 |
</div> |
|
651 |
|
|
652 |
<div class="uk-section uk-padding-remove-vertical"> |
|
653 |
<div class="uk-child-width-1-2@s uk-child-width-1-4@l uk-grid-collapse uk-grid-match uk-grid" uk-grid=""> |
|
654 |
<div class="uk-first-column"> |
|
655 |
<div class="uk-tile uk-tile-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</div> |
|
656 |
</div> |
|
657 |
<div> |
|
658 |
<div class="uk-tile uk-tile-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</div> |
|
659 |
</div> |
|
660 |
<div> |
|
661 |
<div class="uk-tile uk-tile-primary">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</div> |
|
662 |
</div> |
|
663 |
<div> |
|
664 |
<div class="uk-tile uk-tile-secondary">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</div> |
|
665 |
</div> |
|
666 |
</div> |
|
667 |
</div> |
|
668 |
|
|
669 |
<div class="uk-section uk-section-default"> |
|
670 |
<div class="uk-container"> |
|
671 |
|
|
672 |
<div class="uk-grid-large uk-flex-middle uk-grid" uk-grid=""> |
|
673 |
<div class="uk-width-expand@m uk-first-column"> |
|
674 |
<p class="uk-text-large">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p> |
|
675 |
</div> |
|
676 |
<div class="uk-width-auto@m"> |
|
677 |
<a class="uk-button uk-button-default uk-button-large" href="#">Button</a> |
|
678 |
</div> |
|
679 |
</div> |
|
680 |
|
|
681 |
</div> |
|
682 |
</div> |
|
683 |
|
|
684 |
<div class="uk-section uk-section-muted"> |
|
685 |
<div class="uk-container"> |
|
686 |
|
|
687 |
<div class="uk-grid-large uk-flex-middle uk-grid" uk-grid=""> |
|
688 |
<div class="uk-width-expand@m uk-first-column"> |
|
689 |
<p class="uk-text-large">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p> |
|
690 |
</div> |
|
691 |
<div class="uk-width-auto@m"> |
|
692 |
<a class="uk-button uk-button-default uk-button-large" href="#">Button</a> |
|
693 |
</div> |
|
694 |
</div> |
|
695 |
|
|
696 |
</div> |
|
697 |
</div> |
|
698 |
|
|
699 |
<div class="uk-section uk-section-primary"> |
|
700 |
<div class="uk-container"> |
|
701 |
|
|
702 |
<div class="uk-grid-large uk-flex-middle uk-grid" uk-grid=""> |
|
703 |
<div class="uk-width-expand@m uk-first-column"> |
|
704 |
<p class="uk-text-large">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p> |
|
705 |
</div> |
|
706 |
<div class="uk-width-auto@m"> |
|
707 |
<a class="uk-button uk-button-default uk-button-large" href="#">Button</a> |
|
708 |
</div> |
|
709 |
</div> |
|
710 |
|
|
711 |
</div> |
|
712 |
</div> |
|
713 |
|
|
714 |
<div class="uk-section uk-section-secondary"> |
|
715 |
<div class="uk-container"> |
|
716 |
|
|
717 |
<div class="uk-grid-large uk-flex-middle uk-grid" uk-grid=""> |
|
718 |
<div class="uk-width-expand@m uk-first-column"> |
|
719 |
<p class="uk-text-large">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p> |
|
720 |
</div> |
|
721 |
<div class="uk-width-auto@m"> |
|
722 |
<a class="uk-button uk-button-default uk-button-large" href="#">Button</a> |
|
723 |
</div> |
|
724 |
</div> |
|
725 |
|
|
726 |
</div> |
|
727 |
</div> |
|
728 |
|
|
729 |
<div id="modal" uk-modal="" class="uk-modal"> |
|
730 |
<div class="uk-modal-dialog"> |
|
731 |
<button class="uk-modal-close-default uk-icon uk-close" type="button" uk-close=""><svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" data-svg="close-icon"><line fill="none" stroke="#000" stroke-width="1.1" x1="1" y1="1" x2="13" y2="13"></line><line fill="none" stroke="#000" stroke-width="1.1" x1="13" y1="1" x2="1" y2="13"></line></svg></button> |
|
732 |
<div class="uk-modal-header"> |
|
733 |
<h2 class="uk-modal-title">Headline</h2> |
|
734 |
</div> |
|
735 |
<div class="uk-modal-body"> |
|
736 |
<p>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.</p> |
|
737 |
</div> |
|
738 |
<div class="uk-modal-footer uk-text-right"> |
|
739 |
<button class="uk-button uk-button-default uk-modal-close" type="button">Cancel</button> |
|
740 |
<button class="uk-button uk-button-primary" type="button">Save</button> |
|
741 |
</div> |
|
742 |
</div> |
|
743 |
</div> |
|
744 |
|
|
745 |
<div id="modal-search" class="uk-modal-full uk-modal" uk-modal=""> |
|
746 |
<div class="uk-modal-dialog uk-flex uk-flex-center uk-flex-middle" uk-height-viewport=""> |
|
747 |
|
|
748 |
<button class="uk-modal-close-full uk-close-large uk-icon uk-close" type="button" uk-close=""><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="close-large"><line fill="none" stroke="#000" stroke-width="1.4" x1="1" y1="1" x2="19" y2="19"></line><line fill="none" stroke="#000" stroke-width="1.4" x1="19" y1="1" x2="1" y2="19"></line></svg></button> |
|
749 |
|
|
750 |
<div> |
|
751 |
|
|
752 |
<ul class="uk-nav-primary uk-nav-center uk-nav" uk-nav=""> |
|
753 |
<li class="uk-active"><a href="#">Active</a></li> |
|
754 |
<li><a href="#">Item</a></li> |
|
755 |
<li><a href="#">Item</a></li> |
|
756 |
<li><a href="#">Item</a></li> |
|
757 |
</ul> |
|
758 |
|
|
759 |
<div class="uk-margin"> |
|
760 |
<form class="uk-search uk-search-large"> |
|
761 |
<input class="uk-search-input uk-text-center" type="search" placeholder="Search..."> |
|
762 |
</form> |
|
763 |
</div> |
|
764 |
|
|
765 |
</div> |
|
766 |
|
|
767 |
</div> |
|
768 |
</div> |
|
769 |
|
|
770 |
</div> |
|
771 |
<div class="uk-container "> |
|
772 |
<button class="uk-button portal-button">Button</button> |
|
773 |
<div class="portal-color">portal-color</div> |
|
774 |
<div class="portal-secondary-color">portal-secondary-color</div> |
|
775 |
<div class="portal-background-color">portal-background-color</div> |
|
776 |
<a class="uk-link portal-link">portal-link</a> |
|
777 |
<div class="portal-box">portal-box</div> |
|
778 |
<div><span class="portal-icon-button uk-icon uk-icon-button" uk-icon="icon: check"></span> portal-icon-button |
|
779 |
uk-icon-button uk-icon</div> |
|
780 |
|
|
781 |
</div> |
|
782 |
<div class="uk-container uk-container-small portal-box"> |
|
783 |
<div class=" uk-text-large">small container</div> |
|
784 |
|
|
785 |
|
|
786 |
</div> |
|
787 |
<div class="uk-container portal-box"> |
|
788 |
<div class=" uk-text-large">large container</div> |
|
789 |
|
|
790 |
|
|
791 |
</div> |
|
792 |
<div class="uk-container uk-container-large portal-box"> |
|
793 |
<div class=" uk-text-large">large container</div> |
|
794 |
|
|
795 |
|
|
796 |
</div> |
|
797 |
|
|
798 |
. |
modules/uoa-connect-portal/branches/use-UoaAdminToolsLibrary/src/app/htmlPages/about/aboutPage-routing.module.ts | ||
---|---|---|
1 |
import { NgModule } from '@angular/core'; |
|
2 |
import { RouterModule } from '@angular/router'; |
|
3 |
|
|
4 |
import {AboutPageComponent} from './aboutPage.component'; |
|
5 |
import {FreeGuard} from '../../openaireLibrary/login/freeGuard.guard'; |
|
6 |
import {PreviousRouteRecorder} from '../../openaireLibrary/utils/piwik/previousRouteRecorder.guard'; |
|
7 |
import {IsRouteEnabled} from '../../openaireLibrary/error/isRouteEnabled.guard' |
|
8 |
|
|
9 |
@NgModule({ |
|
10 |
imports: [ |
|
11 |
RouterModule.forChild([ |
|
12 |
{ path: '', component: AboutPageComponent, canActivate: [FreeGuard, IsRouteEnabled], canDeactivate: [PreviousRouteRecorder] } |
|
13 |
|
|
14 |
]) |
|
15 |
] |
|
16 |
}) |
|
17 |
export class AboutPageRoutingModule { } |
modules/uoa-connect-portal/branches/use-UoaAdminToolsLibrary/src/app/htmlPages/about/aboutPage.component.ts | ||
---|---|---|
1 |
import {Component, Input, Output, EventEmitter, ViewChild, ElementRef} from '@angular/core'; |
|
2 |
import {Observable} from 'rxjs/Observable'; |
|
3 |
import {ActivatedRoute, Router} from '@angular/router'; |
|
4 |
import {Title, Meta} from '@angular/platform-browser'; |
|
5 |
import{EnvProperties} from '../../openaireLibrary/utils/properties/env-properties'; |
|
6 |
|
|
7 |
@Component({ |
|
8 |
selector: 'about', |
|
9 |
template: ` |
|
10 |
<div class=" uk-section uk-margin-large-top tm-middle uk-container" id="tm-main"> |
|
11 |
<div class="uk-container uk-margin-bottom"> |
|
12 |
<html-page></html-page> |
|
13 |
</div> |
|
14 |
</div> |
|
15 |
` |
|
16 |
}) |
|
17 |
export class AboutPageComponent { |
|
18 |
properties:EnvProperties; |
|
19 |
|
|
20 |
constructor ( private route: ActivatedRoute, private _router: Router, |
|
21 |
private _meta: Meta, private _title: Title) {} |
|
22 |
|
|
23 |
public ngOnInit() { |
|
24 |
this.route.data |
|
25 |
.subscribe((data: { envSpecific: EnvProperties }) => { |
|
26 |
this.updateUrl(data.envSpecific.baseLink+this._router.url); |
|
27 |
this.updateTitle("About"); |
|
28 |
this.updateDescription("About, open access"); |
|
29 |
}); |
|
30 |
} |
|
31 |
|
|
32 |
private updateDescription(description:string){ |
|
33 |
this._meta.updateTag({content:description},"name='description'"); |
|
34 |
this._meta.updateTag({content:description},"property='og:description'"); |
|
35 |
} |
|
36 |
private updateTitle(title:string){ |
|
37 |
var _prefix ="OpenAIRE | "; |
|
38 |
var _title = _prefix + ((title.length> 50 ) ?title.substring(0,50):title); |
|
39 |
this._title.setTitle(_title); |
|
40 |
this._meta.updateTag({content:_title},"property='og:title'"); |
|
41 |
} |
|
42 |
private updateUrl(url:string){ |
|
43 |
this._meta.updateTag({content:url},"property='og:url'"); |
|
44 |
} |
|
45 |
} |
modules/uoa-connect-portal/branches/use-UoaAdminToolsLibrary/src/app/htmlPages/about/aboutPage.module.ts | ||
---|---|---|
1 |
import { NgModule, ModuleWithProviders } from '@angular/core'; |
|
2 |
|
|
3 |
import {FreeGuard} from '../../openaireLibrary/login/freeGuard.guard'; |
|
4 |
import {PreviousRouteRecorder} from '../../openaireLibrary/utils/piwik/previousRouteRecorder.guard'; |
|
5 |
import {IsRouteEnabled} from '../../openaireLibrary/error/isRouteEnabled.guard' |
|
6 |
|
|
7 |
import {AboutPageComponent} from './aboutPage.component'; |
|
8 |
import {AboutPageRoutingModule} from './aboutPage-routing.module'; |
|
9 |
|
|
10 |
import {HtmlPagesModule} from '../htmlPages.module'; |
|
11 |
|
|
12 |
@NgModule({ |
|
13 |
imports: [ |
|
14 |
AboutPageRoutingModule, HtmlPagesModule |
|
15 |
], |
|
16 |
declarations: [ |
|
17 |
AboutPageComponent |
|
18 |
], |
|
19 |
providers:[FreeGuard,PreviousRouteRecorder, IsRouteEnabled], |
|
20 |
exports: [ |
|
21 |
AboutPageComponent |
|
22 |
] |
|
23 |
}) |
|
24 |
|
|
25 |
|
|
26 |
export class AboutPageModule{} |
modules/uoa-connect-portal/branches/use-UoaAdminToolsLibrary/src/app/htmlPages/htmlPage.service.ts | ||
---|---|---|
1 |
import {Injectable, Inject} from '@angular/core'; |
|
2 |
import {HttpClient} from "@angular/common/http"; |
|
3 |
import {Observable} from 'rxjs/Observable'; |
|
4 |
import 'rxjs/add/observable/of'; |
|
5 |
import 'rxjs/add/operator/do'; |
|
6 |
import 'rxjs/add/operator/share'; |
|
7 |
import{EnvProperties} from '../openaireLibrary/utils/properties/env-properties'; |
|
8 |
|
|
9 |
@Injectable() |
|
10 |
export class HtmlPageService { |
|
11 |
constructor(private http: HttpClient) {} |
|
12 |
|
|
13 |
getHtmlContent (router: string, properties:EnvProperties, communityId:string ):any { |
|
14 |
//console.info("get router html content for : "+router); |
|
15 |
|
|
16 |
let url = properties.adminToolsAPIURL + '/htmlpagecontent?community='+communityId+'&page='+router; |
|
17 |
|
|
18 |
return this.http.get<Array<any>>((properties.useCache)? (properties.cacheUrl+encodeURIComponent(url)): url); |
|
19 |
//.map(res => <Array<any>> res.json()); |
|
20 |
|
|
21 |
} |
|
22 |
|
|
23 |
|
|
24 |
|
|
25 |
} |
modules/uoa-connect-portal/branches/use-UoaAdminToolsLibrary/src/app/searchPages/advanced/advancedSearchDatasets.module.ts | ||
---|---|---|
6 | 6 |
import {OpenaireAdvancedSearchDatasetsComponent} from './advancedSearchDatasets.component'; |
7 | 7 |
|
8 | 8 |
import {FreeGuard} from '../../openaireLibrary/login/freeGuard.guard'; |
9 |
import {IsRouteEnabled} from '../../openaireLibrary/error/isRouteEnabled.guard' |
|
10 | 9 |
import {AdvancedSearchResearchResultsModule} from "../../openaireLibrary/searchPages/advanced/advancedSearchResearchResults.module"; |
11 | 10 |
|
12 | 11 |
@NgModule({ |
... | ... | |
18 | 17 |
declarations: [ |
19 | 18 |
OpenaireAdvancedSearchDatasetsComponent |
20 | 19 |
], |
21 |
providers:[FreeGuard, IsRouteEnabled],
|
|
20 |
providers:[FreeGuard], |
|
22 | 21 |
exports: [ |
23 | 22 |
OpenaireAdvancedSearchDatasetsComponent |
24 | 23 |
] |
modules/uoa-connect-portal/branches/use-UoaAdminToolsLibrary/src/app/searchPages/simple/searchPublications-routing.module.ts | ||
---|---|---|
4 | 4 |
import{OpenaireSearchPublicationsComponent} from './searchPublications.component'; |
5 | 5 |
import {FreeGuard} from '../../openaireLibrary/login/freeGuard.guard'; |
6 | 6 |
import {PreviousRouteRecorder} from '../../openaireLibrary/utils/piwik/previousRouteRecorder.guard'; |
7 |
import {IsRouteEnabled} from '../../openaireLibrary/error/isRouteEnabled.guard' |
|
8 | 7 |
|
9 |
|
|
10 | 8 |
@NgModule({ |
11 | 9 |
imports: [ |
12 | 10 |
RouterModule.forChild([ |
13 |
{ path: '', component: OpenaireSearchPublicationsComponent, canActivate: [FreeGuard, IsRouteEnabled], data: {
|
|
11 |
{ path: '', component: OpenaireSearchPublicationsComponent, canActivate: [FreeGuard], data: { |
|
14 | 12 |
redirect: '/error' |
15 | 13 |
}, canDeactivate: [PreviousRouteRecorder] } |
16 | 14 |
|
modules/uoa-connect-portal/branches/use-UoaAdminToolsLibrary/src/app/searchPages/simple/searchOrganizations.module.ts | ||
---|---|---|
7 | 7 |
|
8 | 8 |
import {FreeGuard} from '../../openaireLibrary/login/freeGuard.guard'; |
9 | 9 |
import {PreviousRouteRecorder} from '../../openaireLibrary/utils/piwik/previousRouteRecorder.guard'; |
10 |
import {IsRouteEnabled} from '../../openaireLibrary/error/isRouteEnabled.guard' |
|
11 | 10 |
|
12 | 11 |
import { SearchOrganizationsModule} from '../../openaireLibrary/searchPages/simple/searchOrganizations.module'; |
13 | 12 |
|
... | ... | |
20 | 19 |
declarations: [ |
21 | 20 |
OpenaireSearchOrganizationsComponent |
22 | 21 |
], |
23 |
providers:[FreeGuard,PreviousRouteRecorder, IsRouteEnabled],
|
|
22 |
providers:[FreeGuard,PreviousRouteRecorder], |
|
24 | 23 |
exports: [ |
25 | 24 |
OpenaireSearchOrganizationsComponent |
26 | 25 |
] |
modules/uoa-connect-portal/branches/use-UoaAdminToolsLibrary/src/app/searchPages/find/mainSearch-routing.module.ts | ||
---|---|---|
4 | 4 |
import{OpenaireSearchComponent} from './search.component'; |
5 | 5 |
import {FreeGuard} from "../../openaireLibrary/login/freeGuard.guard"; |
6 | 6 |
import {PreviousRouteRecorder} from "../../openaireLibrary/utils/piwik/previousRouteRecorder.guard"; |
7 |
import {IsRouteEnabled} from "../../openaireLibrary/error/isRouteEnabled.guard"; |
|
8 | 7 |
|
9 |
|
|
10 | 8 |
@NgModule({ |
11 | 9 |
imports: [ |
12 | 10 |
RouterModule.forChild([ |
Also available in: Unified diff
[use-UoaAdminToolsLibrary | Connect]: Merge trunk into branch.