Project

General

Profile

« Previous | Next » 

Revision 57451

[Monitor-Dashboard]: Add new dashboard theme and make monitor page base on it.

View differences:

monitor.component.html
1
<schema2jsonld [URL]="properties.baseLink"
2
               [logoURL]="properties.baseLink+'/assets/common-assets/logo-small-monitor.png'" type="home"
3
               name="OpenAIRE Monitor">
4
</schema2jsonld>
5
<div
6
  uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}"
7
  tm-header-transparent="light" tm-header-transparent-placeholder="">
8
  <div *ngIf="status === errorCodes.LOADING" class="uk-animation-fade uk-margin-top  uk-width-1-1" role="alert">
9
    <span class="loading-gif  uk-align-center"></span>
10
  </div>
11
  <div *ngIf="stakeholder && status === errorCodes.DONE && activeTopic"
12
       class="uk-background-primary uk-light uk-padding-small">
13
    <div class="uk-flex uk-flex-middle topic-nav" uk-grid>
14
      <div class="uk-width-1-5@m uk-margin-left">
15
        <span class="uk-text-bold uk-h4">{{stakeholder.index_name}}</span><br>
16
        <span class="uk-h5">Monitor Dashboard</span>
1
<div class="disable_transitions sidebar_main_open sidebar_main_swipe">
2
  <div *ngIf="stakeholder && status === errorCodes.DONE && activeTopic" id="header_main">
3
    <nav class="uk-navbar">
4
      <div class="uk-navbar-center">
5
        <ul class="uk-navbar-nav">
6
          <ng-template ngFor [ngForOf]="stakeholder.topics" let-topic let-i="index">
7
            <li *ngIf="topic.isPublic && topic.isActive"
8
                [ngClass]="(topic.alias === activeTopic.alias)?'uk-active':''">
9
              <a (click)="navigateTo(stakeholder.alias, topic.alias)">{{topic.name}}</a>
10
            </li>
11
          </ng-template>
12
        </ul>
17 13
      </div>
18
      <nav class="uk-width-3-5@m uk-navbar" uk-navbar>
19
        <div class="uk-navbar-center">
20
          <ul class="uk-navbar-nav">
21
            <ng-template ngFor [ngForOf]="stakeholder.topics" let-topic let-i="index">
22
              <li *ngIf="topic.isPublic && topic.isActive"
23
                  [ngClass]="(topic.alias === activeTopic.alias)?'uk-active':''">
24
                <a (click)="navigateTo(stakeholder.alias, topic.alias)">{{topic.name}}</a>
25
              </li>
26
            </ng-template>
27
          </ul>
28
        </div>
29
      </nav>
30
    </div>
14
    </nav>
31 15
  </div>
32
  <div uk-grid>
33
    <sidebar [menuItems]="sideMenuItems" class="uk-width-1-5 sidebar"></sidebar>
34
    <div *ngIf="activeSubCategory"
35
         class="uk-width-expand uk-background-muted uk-padding uk-text-center@s uk-text-left@m">
36
      <h5 class="uk-margin-bottom uk-text-bold">Indicators</h5>
37
      <div class="uk-grid-medium uk-margin-bottom" uk-grid uk-height-match="target: div > h6">
16
  <dashboard-sidebar [items]="sideBar.items" [name]="stakeholder.index_name"
17
                     class="uk-width-1-5"></dashboard-sidebar>
18
  <div *ngIf="activeSubCategory"
19
       id="page_content">
20
    <div id="page_content_inner">
21
      <h5 class="uk-margin uk-margin-top uk-text-bold">Indicators</h5>
22
      <div class="uk-grid uk-grid-medium uk-margin-bottom" uk-height-match="target: div > h6">
38 23
        <ng-template ngFor [ngForOf]="activeSubCategory.numbers" let-number let-i="index">
39 24
          <div *ngIf="number.isActive && number.isPublic"
40
               [class.uk-width-1-3@m]="number.width === 'small'"
41
               [class.uk-width-1-2@m]="number.width === 'medium'"
42
               [class.uk-width-1-1@m]="number.width === 'large'">
43
            <div class="uk-card uk-card-default uk-box-shadow-large uk-padding-small" [attr.uk-tooltip]="number.description">
44
              <h6>{{number.name}}</h6>
45
              <div class="uk-h2" *ngIf="numberResults.get(i)">
46
                {{numberResults.get(i)|number}}
25
               [class.uk-width-medium-1-3]="number.width === 'small'"
26
               [class.uk-width-medium-1-2]="number.width === 'medium'"
27
               [class.uk-width-medium-1-1]="number.width === 'large'">
28
            <div class="md-card"
29
                 [attr.uk-tooltip]="number.description">
30
              <div class="md-card-content">
31
                <span class="uk-text-muted uk-text-small uk-margin-bottom">{{number.name}}</span>
32
                <h2 *ngIf="numberResults.get(i)" class="uk-margin-remove">
33
                  <span class="countUpMe">{{numberResults.get(i) | number}}</span>
34
                </h2>
47 35
              </div>
48
              <div *ngIf="!numberResults.get(i)" class="uk-animation-fade uk-width-1-1" role="alert">
49
                <span class="loading-gif uk-align-center"></span>
50
              </div>
51 36
            </div>
52 37
          </div>
53 38
        </ng-template>
54 39
      </div>
55
      <div class="uk-grid-medium uk-margin-bottom" uk-grid uk-height-match="target: div > h5">
40
      <div class="uk-grid uk-grid-medium uk-margin-bottom" uk-height-match="target: div > div > h5">
56 41
        <ng-template ngFor [ngForOf]="activeSubCategory.charts" let-chart let-i="index">
57 42
          <div *ngIf="chart.isActive && chart.isPublic"
58
             [class.uk-width-1-3@m]="chart.width === 'small'"
59
             [class.uk-width-1-2@m]="chart.width === 'medium'"
60
             [class.uk-width-1-1@m]="chart.width === 'large'">
61
          <div>
62
            <h5 class="uk-margin-bottom uk-margin-top">{{chart.name}}</h5>
63
            <div class="uk-card uk-card-default uk-box-shadow-large uk-padding-small" [attr.uk-tooltip]="chart.description">
64
              <div *ngIf="chart.indicatorPaths.length > 1" class="uk-button-group">
65
                <button *ngFor="let indicatorPath of chart.indicatorPaths;"
66
                        class="uk-button"
67
                        (click)="setActiveChart(i, indicatorPath.type)"
68
                        [class.uk-button-secondary]="chartsActiveType.get(i).url === indicatorPath.url">
69
                  {{indicatorPath.type}}
70
                </button>
43
               [class.uk-width-medium-1-3]="chart.width === 'small'"
44
               [class.uk-width-medium-1-2]="chart.width === 'medium'"
45
               [class.uk-width-medium-1-1]="chart.width === 'large'">
46
            <div>
47
              <h5 class="uk-margin-bottom uk-margin-top">{{chart.name}}</h5>
48
              <div class="md-card"
49
                   [attr.uk-tooltip]="chart.description">
50
                <div class="md-card-content uk-text-center">
51
                  <div *ngIf="chart.indicatorPaths.length > 1" class="uk-button-group">
52
                    <button *ngFor="let indicatorPath of chart.indicatorPaths;"
53
                            class="uk-button"
54
                            (click)="setActiveChart(i, indicatorPath.type)"
55
                            [class.uk-button-secondary]="chartsActiveType.get(i).url === indicatorPath.url">
56
                      {{indicatorPath.type}}
57
                    </button>
58
                  </div>
59
                  <iframe *ngIf="chartsActiveType.get(i).source !== 'fake'"
60
                          [src]="getUrlByStakeHolder(chartsActiveType.get(i))"
61
                          class="uk-width-1-1" height="300"></iframe>
62
                  <img *ngIf="chartsActiveType.get(i).source === 'fake'"
63
                       [src]="getUrlByStakeHolder(chartsActiveType.get(i))"
64
                       class="uk-width-1-1">
65
                </div>
71 66
              </div>
72
              <iframe *ngIf="chartsActiveType.get(i).source !== 'fake'"
73
                      [src]="getUrlByStakeHolder(chartsActiveType.get(i))"
74
                      class="uk-width-1-1 uk-height-medium"></iframe>
75
              <img *ngIf="chartsActiveType.get(i).source === 'fake'"
76
                   [src]="getUrlByStakeHolder(chartsActiveType.get(i))"
77
                   class="uk-width-1-1 uk-height-medium">
78 67
            </div>
79 68
          </div>
80
        </div>
81 69
        </ng-template>
82 70
      </div>
83 71
    </div>

Also available in: Unified diff