Project

General

Profile

« Previous | Next » 

Revision 59189

[use-UoaAdminToolsLibrary | Connect]: Merge trunk into branch.

View differences:

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="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}" tm-header-transparent="light" tm-header-transparent-placeholder="">
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>&lt;div class="myclass"&gt;...&lt;div&gt;</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([
... This diff was truncated because it exceeds the maximum size that can be displayed.

Also available in: Unified diff