Project

General

Profile

« Previous | Next » 

Revision 57323

[Monitor]: Delete connect folders

View differences:

modules/uoa-monitor-portal/trunk/monitor/src/app/my-communities/my-communities.module.ts
1
import {NgModule} from '@angular/core';
2
import {CommonModule} from '@angular/common';
3
import {FormsModule} from '@angular/forms';
4
import {RouterModule} from '@angular/router';
5
import {ManageModule} from '../openaireLibrary/utils/manage/manage.module';
6

  
7
import {MyCommunitiesComponent} from './my-communities.component';
8
import {PreviousRouteRecorder} from '../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
9

  
10
import {PiwikService} from '../openaireLibrary/utils/piwik/piwik.service';
11
import {ErrorMessagesModule} from '../openaireLibrary/utils/errorMessages.module';
12
import {Schema2jsonldModule} from "../openaireLibrary/sharedComponents/schema2jsonld/schema2jsonld.module";
13
import {SEOServiceModule} from "../openaireLibrary/sharedComponents/SEO/SEOService.module";
14
import {LoginGuard} from "../openaireLibrary/login/loginGuard.guard";
15
import {HelperModule} from "../openaireLibrary/utils/helper/helper.module";
16
import {BrowseCommunityModule} from "../communities/browseCommunity/browse-community.module";
17
import {MyCommunitiesRoutingModule} from "./my-communities-routing.module";
18
import {IsRouteEnabled} from "../openaireLibrary/error/isRouteEnabled.guard";
19

  
20
@NgModule({
21
  imports: [
22
    CommonModule, FormsModule, RouterModule, HelperModule,
23
    ManageModule, ErrorMessagesModule, BrowseCommunityModule, Schema2jsonldModule, SEOServiceModule,
24
    MyCommunitiesRoutingModule
25
  ],
26
  declarations: [
27
    MyCommunitiesComponent
28
  ],
29
  providers: [
30
    LoginGuard, PreviousRouteRecorder,
31
    PiwikService, IsRouteEnabled
32
  ],
33
  exports: [
34
    MyCommunitiesComponent
35
  ]
36
})
37
export class MyCommunitiesModule {
38
}
modules/uoa-monitor-portal/trunk/monitor/src/app/my-communities/my-communities-routing.module.ts
1
import {NgModule} from '@angular/core';
2
import {RouterModule} from '@angular/router';
3
import {PreviousRouteRecorder} from '../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
4
import {MyCommunitiesComponent} from "./my-communities.component";
5
import {LoginGuard} from "../openaireLibrary/login/loginGuard.guard";
6
import {IsRouteEnabled} from "../openaireLibrary/error/isRouteEnabled.guard";
7

  
8
@NgModule({
9
  imports: [
10
    RouterModule.forChild([
11
      {path: '', component: MyCommunitiesComponent, canActivate: [LoginGuard, IsRouteEnabled], canDeactivate: [PreviousRouteRecorder]}
12

  
13
    ])
14
  ]
15
})
16
export class MyCommunitiesRoutingModule {
17
}
modules/uoa-monitor-portal/trunk/monitor/src/app/my-communities/my-communities.component.html
1
<schema2jsonld [URL]="properties.baseLink"
2
               [logoURL]="properties.baseLink+'/assets/common-assets/logo-small-connect.png'" type="home"
3
               name="OpenAIRE Connect">
4
</schema2jsonld>
5
<div
6
     class="banner-background image-front-topbar uk-section uk-background-norepeat uk-background-bottom-center uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color"
7
     uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}"
8
     tm-header-transparent="light" tm-header-transparent-placeholder="">
9
  <div class=" uk-section uk-padding-remove-bottom">
10
    <div class="uk-position-cover"></div>
11
    <div class="uk-position-relative uk-panel">
12
      <div *ngIf="loading" class="uk-container uk-container-large uk-height-large">
13
        <div class="uk-animation-fade uk-margin-top  uk-width-1-1" role="alert"><span
14
          class="loading-gif  uk-align-center"></span></div>
15
      </div>
16
      <div *ngIf="!loading" class="uk-container uk-container-large">
17
        <div class="uk-text-center uk-text-bold uk-h2 uk-margin-bottom">My Communities</div>
18
        <div *ngIf="managerOfCommunities.length > 0 || subscriberOfCommunities.length > 0"
19
             class="uk-child-width-1-1@s uk-child-width-1-2@m uk-flex uk-flex-middle" uk-grid uk-height-match="target: .community; row: false">
20
          <div>
21
            <div *ngIf="managerOfCommunities.length > 0" class="uk-grid">
22
              <h5 class="uk-width-1-1 uk-text-bold">You are managing</h5>
23
              <div class="uk-width-1-1 uk-margin-small-top">
24
                <div
25
                  class="uk-grid-match uk-grid-small  uk-child-width-1-3@s uk-child-width-1-2 uk-text-center"
26
                  uk-grid >
27
                  <div *ngFor="let community of managerOfCommunities.slice(0,3); let i = index">
28
                    <div class="uk-padding-small uk-card uk-card-default uk-card-small communityCard"
29
                         title="{{community.description}}">
30
                      <browse-community [community]=community [showDescription]=false></browse-community>
31
                    </div>
32
                  </div>
33
                </div>
34
                <div *ngIf="managerOfCommunities.length > 3" class="uk-text-right uk-width-1-1 uk-margin-top">
35
                  <a [queryParams]="{role: quote('manager')}" class="portal-link uk-text-uppercase uk-text-bold uk-text-small"
36
                     routerLinkActive="router-link-active" routerLink="/search/find/communities">
37
                    <div>View all ({{managerOfCommunities.length | number}}) ></div>
38
                  </a>
39
                </div>
40
              </div>
41
            </div>
42

  
43
            <div class="uk-container uk-container-large uk-width-4-5">
44
              <div *ngIf="subscriberErrorMessage" class="uk-animation-fade uk-alert uk-alert-warning" role="alert">
45
                {{subscriberErrorMessage}}
46
              </div>
47
            </div>
48
            <div *ngIf="subscriberOfCommunities.length > 0" class="uk-grid">
49
              <h5 class="uk-width-1-1 uk-text-bold">You are subscribed to</h5>
50
              <div class="uk-width-1-1 uk-margin-small-top">
51
                <div
52
                  class="uk-grid-match uk-grid-small uk-child-width-1-3@s uk-child-width-1-2 uk-text-center"
53
                  uk-grid>
54
                  <div *ngFor="let community of subscriberOfCommunities.slice(0,3); let i = index">
55
                    <div class="uk-padding-small  uk-card uk-card-small uk-card-default communityCard"
56
                         [attr.uk-tooltip]="((community.description) ? ('title: '+ community.description + '; pos: bottom-right') : 'cls: uk-invisible')">
57
                      <browse-community [community]=community [showDescription]=false></browse-community>
58
                    </div>
59
                  </div>
60
                </div>
61
                <div *ngIf="subscriberOfCommunities.length > 3" class="uk-text-right uk-width-1-1 uk-margin-top">
62
                  <a [queryParams]="{status: quote('subscribed')}" class="portal-link uk-text-uppercase uk-text-bold uk-text-small"
63
                     routerLinkActive="router-link-active" routerLink="/search/find/communities">
64
                    <div>View all ({{subscriberOfCommunities.length | number}}) ></div>
65
                  </a>
66
                </div>
67
              </div>
68

  
69
            </div>
70

  
71
          </div>
72
          <div class="uk-text-center">
73
            <img width="200" height="185" src="../../assets/connect-assets/banner/login.png">
74
          </div>
75
        </div>
76
        <div *ngIf="managerOfCommunities.length === 0 && subscriberOfCommunities.length === 0"
77
             class="uk-child-width-1-1" uk-grid>
78
          <div class="uk-flex uk-flex-center uk-margin-bottom">
79
            <div class="uk-card uk-card-default uk-box-shadow-medium uk-width-1-2@m">
80
              <div class="uk-card-body uk-text-bold uk-text-center ">
81
                You are not yet subscribed in any Communities.<br>
82
                Start by browsing and subscribing in those that you are interested in.
83
              </div>
84
            </div>
85
          </div>
86
          <div>
87
            <errorMessages [status]="[status]" [type]="'communities'"></errorMessages>
88
          </div>
89
          <div *ngIf="!loading && researchCommunities.length > 0">
90
            <div class="uk-text-bold uk-h5">Community Gateways in Action</div>
91
            <div [class]="(researchCommunities.length <= 5 ? ' uk-margin-medium-bottom' : '')">
92
              <div
93
                class="uk-grid-match uk-grid-medium  uk-child-width-1-5@m uk-child-width-1-2 uk-text-center"
94
                uk-grid uk-height-match=".community">
95
                <div *ngFor="let community of researchCommunities.slice(0, 5); let i = index">
96
                  <div class="uk-padding-small uk-card uk-card-default communityCard">
97
                    <browse-community [community]=community></browse-community>
98
                  </div>
99
                </div>
100
              </div>
101

  
102
            </div>
103
            <div class="uk-text-right uk-margin-top">
104
              <a *ngIf="researchCommunities.length > 5" class="portal-link uk-text-uppercase uk-text-bold uk-text-small"
105
                 routerLinkActive="router-link-active" routerLink="/search/find/communities">
106
                Browse All >
107
              </a>
108
            </div>
109
          </div>
110
        </div>
111
      </div>
112
    </div>
113
  </div>
114
</div>
modules/uoa-monitor-portal/trunk/monitor/src/app/my-communities/my-communities.component.ts
1
import {Component} from '@angular/core';
2
import {ActivatedRoute, Router} from '@angular/router';
3
import {Meta, Title} from '@angular/platform-browser';
4
import {EnvProperties} from '../openaireLibrary/utils/properties/env-properties';
5
import {CommunitiesService} from '../openaireLibrary/connect/communities/communities.service';
6
import {SubscribeService} from '../openaireLibrary/utils/subscribe/subscribe.service';
7
import {CommunityInfo} from '../openaireLibrary/connect/community/communityInfo';
8

  
9
import {PiwikService} from '../openaireLibrary/utils/piwik/piwik.service';
10
import {Session, User} from '../openaireLibrary/login/utils/helper.class';
11
import {StringUtils} from '../openaireLibrary/utils/string-utils.class';
12

  
13
import {ErrorCodes} from '../openaireLibrary/utils/properties/errorCodes';
14
import {ErrorMessagesComponent} from '../openaireLibrary/utils/errorMessages.component';
15
import {HelperService} from "../openaireLibrary/utils/helper/helper.service";
16
import {SEOService} from "../openaireLibrary/sharedComponents/SEO/SEO.service";
17
import {UserManagementService} from "../openaireLibrary/services/user-management.service";
18

  
19
@Component({
20
  selector: 'my-communities',
21
  templateUrl: 'my-communities.component.html',
22
})
23

  
24
export class MyCommunitiesComponent {
25
  public piwiksub: any;
26

  
27
  public pageTitle = "OpenAIRE"
28
  public subscriberOfCommunities = [];
29
  public managerOfCommunities = [];
30
  public researchCommunities = [];
31
  public pageContents = null;
32
  public divContents = null;
33
  // Message variables
34
  public status: number;
35
  public loading: boolean = true;
36
  public subscriberErrorMessage: string = "";
37
  public errorCodes: ErrorCodes;
38
  private errorMessages: ErrorMessagesComponent;
39

  
40
  properties: EnvProperties;
41
  private user: User;
42

  
43
  constructor(
44
    private route: ActivatedRoute,
45
    private _router: Router,
46
    private _meta: Meta,
47
    private _title: Title,
48
    private _piwikService: PiwikService,
49
    private _communitiesService: CommunitiesService,
50
    private _subscribeService: SubscribeService,
51
    private helper: HelperService,
52
    private seoService: SEOService,
53
    private userManagementService: UserManagementService) {
54

  
55
    var description = "OpenAIRE - Connect, Community Dashboard, research community " +
56
      "| My managing and subscribed to Communities";
57
    var title = "OpenAIRE - Connect | My Communities";
58

  
59
    this._meta.updateTag({content: description}, "name='description'");
60
    this._meta.updateTag({content: description}, "property='og:description'");
61
    this._meta.updateTag({content: title}, "property='og:title'");
62
    this._title.setTitle(title);
63

  
64
    this.errorCodes = new ErrorCodes();
65
    this.errorMessages = new ErrorMessagesComponent();
66
    this.status = this.errorCodes.LOADING;
67
  }
68

  
69
  public ngOnInit() {
70
    this.route.data
71
      .subscribe((data: { envSpecific: EnvProperties }) => {
72
        this.properties = data.envSpecific;
73
        var url = data.envSpecific.baseLink + this._router.url;
74
        this.seoService.createLinkForCanonicalURL(url, false);
75
        this._meta.updateTag({content: url}, "property='og:url'");
76
        if (this.properties.enablePiwikTrack && (typeof document !== 'undefined')) {
77
          this.piwiksub = this._piwikService.trackView(this.properties, "OpenAIRE Connect", this.properties.piwikSiteId).subscribe();
78
        }
79
        this.userManagementService.getUserInfo(this.properties.userInfoUrl).subscribe(user => {
80
          this.user = user;
81
          this.getCommunities();
82
          //this.getDivContents();
83
          //this.getPageContents();
84
        });
85
      });
86
  }
87

  
88
  private getPageContents() {
89
    this.helper.getPageHelpContents(this._router.url, this.properties, 'connect').subscribe(contents => {
90
      this.pageContents = contents;
91
    })
92
  }
93

  
94
  private getDivContents() {
95
    this.helper.getDivHelpContents(this._router.url, this.properties, 'connect').subscribe(contents => {
96
      this.divContents = contents;
97
    })
98
  }
99

  
100
  public getCommunities() {
101
    this.loading = true;
102
    this.status = this.errorCodes.LOADING;
103
    this.subscriberErrorMessage = "";
104

  
105
    this.subscriberOfCommunities = [];
106
    this.managerOfCommunities = [];
107
    this.researchCommunities = [];
108

  
109
    this._communitiesService.getCommunitiesState().subscribe(
110
      communitiesResults => {
111
        if(!communitiesResults){
112
          return;
113
        }
114
        if(communitiesResults.length == 0) {
115
          this.status = this.errorCodes.DONE;
116
          return;
117
        };
118
        this.sort(communitiesResults);
119

  
120
        var subscribedLoading = communitiesResults.length;
121
        var mail = this.user.email;
122
        communitiesResults.forEach((community, index) => {
123
          let showCommunity: boolean = true;
124
          let isManager: boolean = false;
125
          let isSubscriber: boolean = false;
126

  
127
          if (community['status'] == "hidden") {
128
            showCommunity = false;
129
          } else {
130
            if (mail == null && community['status'] == "manager") { // no user
131
              showCommunity = false;
132
            } else if (Session.isCommunityCurator(this.user) || Session.isPortalAdministrator(this.user)) {
133
              isManager = true;
134
            } else if (community.managers.indexOf(mail) != -1) {
135
              isManager = true;
136
            } else if (community['status'] == "manager") {
137
              showCommunity = false;
138
            }
139
          }
140

  
141
          if (showCommunity) {
142
            this.researchCommunities.push(community);
143
            if (isManager) {
144
              community.isManager = true;
145
              this.managerOfCommunities.push(community);
146
            }
147
          }
148

  
149
          this.status = this.errorCodes.DONE;
150

  
151
          if (mail != null && showCommunity) {
152
            this._subscribeService.isSubscribedToCommunity(this.properties, community.communityId, mail).subscribe(
153
              res => {
154
                isSubscriber = res;
155
                if (isSubscriber) {
156
                  community.isSubscribed = true;
157
                  if (isManager) {
158
                    this.subscriberOfCommunities.push(community);
159
                  } else {
160
                    this.subscriberOfCommunities.unshift(community);
161
                  }
162
                }
163

  
164
                subscribedLoading--;
165
                if (subscribedLoading == 0) {
166
                  this.loading = false;
167
                }
168
              },
169
              error => {
170
                this.handleError("Error getting response if email: " + mail + " is subscribed to community with id: " + community.communityId, error);
171
                subscribedLoading--;
172
                if (subscribedLoading == 0) {
173
                  this.loading = false;
174
                }
175
              });
176
          } else {
177
            subscribedLoading--;
178
            if (subscribedLoading == 0) {
179
              this.loading = false;
180
            }
181
          }
182
        });
183
      },
184
      error => {
185
        this.status = this.handleError("Error getting communities", error);
186
        this.loading = false;
187
      }
188
    );
189
  }
190

  
191
  private sort(results: CommunityInfo[]) {
192
    results.sort((left, right): number => {
193
      if (!right.date || left.date > right.date) {
194
        return -1;
195
      } else if (!left.date || left.date < right.date) {
196
        return 1;
197
      } else {
198
        if (left.title > right.title) {
199
          return 1;
200
        } else if (left.title < right.title) {
201
          return -1;
202
        } else {
203
          return 0;
204
        }
205
      }
206
    })
207
  }
208

  
209
  public quote(param: string): string {
210
    return StringUtils.quote(param);
211
  }
212

  
213
  public ngOnDestroy() {
214
    if (this.piwiksub) {
215
      this.piwiksub.unsubscribe();
216
    }
217
  }
218

  
219
  private handleError(message: string, error): number {
220
    var code = "";
221
    if (!error.status) {
222
      var error = error.json();
223
      code = error.code;
224
    } else {
225
      code = error.status;
226
    }
227

  
228
    console.error("Communities (component): " + message, error);
229

  
230
    return this.errorMessages.getErrorCode(code);
231
  }
232
}
modules/uoa-monitor-portal/trunk/monitor/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-monitor-portal/trunk/monitor/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-monitor-portal/trunk/monitor/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-monitor-portal/trunk/monitor/src/app/htmlPages/htmlPage.component.ts
1
import { Component, Input } from '@angular/core';
2
import {ActivatedRoute} from '@angular/router';
3
import 'rxjs/Rx';
4
import {HtmlPageService} from './htmlPage.service';
5
import{EnvProperties} from '../openaireLibrary/utils/properties/env-properties';
6
import {ConnectHelper} from '../openaireLibrary/connect/connectHelper';
7
import {SafeHtmlPipe} from '../openaireLibrary/utils/pipes/safeHTML.pipe';
8

  
9
@Component({
10
  selector: 'html-page',
11
  template: `
12
    <div [innerHTML]="content | safeHtml"></div>
13
`
14
})
15
export class HtmlPageComponent {
16
  public content:string="";
17
  sub:any;
18
  properties:EnvProperties;
19
  private communityId: string = null;
20
  constructor (private _service: HtmlPageService, private route: ActivatedRoute,) {}
21

  
22
  ngOnInit() {
23
    this.route.data
24
      .subscribe((data: { envSpecific: EnvProperties }) => {
25
         this.properties = data.envSpecific;
26
         this.route.queryParams.subscribe(
27
           params => {
28
                 this.communityId  = ConnectHelper.getCommunityFromDomain(this.properties.domain);
29
                 if(!this.communityId) {
30
                   this.communityId = params['communityId'];
31
                 }
32

  
33
                  if(!this.communityId){
34
                    this.communityId = this.properties.adminToolsCommunity;
35
                  }
36
                  if(location){
37
                    this.sub = this._service.getHtmlContent(location.pathname, this.properties, this.communityId).subscribe(
38
                      data => {
39
                        if(data.length > 0) {
40
                          this.content = data[0].content;
41
                        }
42
                      },
43
                      err => {
44
                        //console.log(err);
45
                        this.handleError("Error getting html content with route: "+location.pathname+" for community with id: "+this.communityId, err);
46
                      }
47
                    );
48
                  }
49
               });
50
      });
51
  }
52

  
53
  ngOnDestroy() {
54
    if(this.sub){
55
      this.sub.unsubscribe();
56
    }
57
  }
58

  
59
  private handleError(message: string, error) {
60
    console.error("Html Page: "+message, error);
61
  }
62
}
modules/uoa-monitor-portal/trunk/monitor/src/app/htmlPages/organizations/organizationsPage.component.ts
1
import {Component} from '@angular/core';
2
import {ActivatedRoute, Router} from '@angular/router';
3
import {Title, Meta}                  from '@angular/platform-browser';
4
import{EnvProperties} from '../../openaireLibrary/utils/properties/env-properties';
5
import {HelperService} from "../../openaireLibrary/utils/helper/helper.service";
6
import {ConnectHelper} from "../../openaireLibrary/connect/connectHelper";
7

  
8
@Component({
9
    selector: 'organizations',
10
    template: `
11
      <div class=" uk-section tm-middle uk-container uk-padding-remove-top uk-margin-top" id="tm-main">
12
        <div class="uk-container  uk-margin-bottom">
13
          <div class="uk-article-title custom-article-title uk-margin-bottom"> Organizations related to the community
14
          </div>
15
          <helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
16
                  [texts]="pageContents['top']"></helper>
17
          <affiliations [longView]="true" [getAffiliationsFromAPI]="true"></affiliations>
18
        </div>
19
      </div>
20
    `
21
})
22
export class OrganizationsPageComponent {
23
  properties:EnvProperties;
24
  public pageContents = null;
25
  public divContents = null;
26
  public communityId = null;
27

  
28
  constructor ( private  route: ActivatedRoute, private _router: Router,
29
                private _meta: Meta, private _title: Title,
30
                private helper: HelperService) {}
31

  
32
  public ngOnInit() {
33
    this.route.data
34
      .subscribe((data: { envSpecific: EnvProperties }) => {
35
        this.properties = data.envSpecific;
36
        this.communityId = ConnectHelper.getCommunityFromDomain(this.properties.domain);
37
        this.updateUrl(data.envSpecific.baseLink+this._router.url);
38
        this.updateTitle("Organizations");
39
        this.updateDescription("Organizations, open access");
40
        //this.getDivContents();
41
        this.getPageContents();
42
      });
43
  }
44

  
45
  private updateDescription(description:string){
46
    this._meta.updateTag({content:description},"name='description'");
47
    this._meta.updateTag({content:description},"property='og:description'");
48
  }
49
  private updateTitle(title:string){
50
    var _prefix ="OpenAIRE | ";
51
    var _title = _prefix + ((title.length> 50 ) ?title.substring(0,50):title);
52
    this._title.setTitle(_title);
53
    this._meta.updateTag({content:_title},"property='og:title'");
54
  }
55
  private updateUrl(url:string){
56
    this._meta.updateTag({content:url},"property='og:url'");
57
  }
58

  
59
  private getPageContents() {
60
    this.helper.getPageHelpContents(this._router.url, this.properties, this.communityId).subscribe(contents => {
61
      this.pageContents = contents;
62
    })
63
  }
64

  
65
  private getDivContents() {
66
    this.helper.getDivHelpContents(this._router.url, this.properties, this.communityId).subscribe(contents => {
67
      this.divContents = contents;
68
    })
69
  }
70
}
modules/uoa-monitor-portal/trunk/monitor/src/app/htmlPages/organizations/organizationsPage.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 {OrganizationsPageComponent} from './organizationsPage.component';
8
import {OrganizationsPageRoutingModule} from './organizationsPage-routing.module';
9

  
10
import {AffiliationsModule} from "../../affiliations/affiliations.module";
11
import {HelperModule} from "../../openaireLibrary/utils/helper/helper.module";
12
import {CommonModule} from "@angular/common";
13

  
14
@NgModule({
15
  imports: [
16
    OrganizationsPageRoutingModule, AffiliationsModule, HelperModule, CommonModule
17
  ],
18
  declarations: [
19
    OrganizationsPageComponent
20
  ],
21
  providers:[FreeGuard,PreviousRouteRecorder, IsRouteEnabled],
22
  exports: [
23
    OrganizationsPageComponent
24
  ]
25
})
26

  
27

  
28
export class OrganizationsPageModule{}
modules/uoa-monitor-portal/trunk/monitor/src/app/htmlPages/organizations/organizationsPage-routing.module.ts
1
import { NgModule } from '@angular/core';
2
import { RouterModule } from '@angular/router';
3

  
4
import {OrganizationsPageComponent} from './organizationsPage.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: OrganizationsPageComponent, canActivate: [FreeGuard, IsRouteEnabled], canDeactivate: [PreviousRouteRecorder] }
13

  
14
    ])
15
  ]
16
})
17
export class OrganizationsPageRoutingModule { }
modules/uoa-monitor-portal/trunk/monitor/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
      });
... This diff was truncated because it exceeds the maximum size that can be displayed.

Also available in: Unified diff