Project

General

Profile

« Previous | Next » 

Revision 57129

Finished the first version of the usage statistics pages

View differences:

metrics-usagestats.component.html
1
<div class="uk-section-default uk-section uk-section-small uk-padding-remove-bottom" style="min-height: 325px">
1
<div id="page_content">
2
  <div id="page_content_inner">
3
    <h2 class="heading_b uk-margin-bottom">{{ title }}</h2>
2 4

  
3
  <!-- MARGIN-TOP  -->
4
  <div class="uk-sticky-placeholder" style="height: 84px; margin: 0px;" aria-hidden="true"></div>
5
  <div class="uk-container uk-container-large">
5
    <!-- TOP HELP CONTENT -->
6
    <help-content #topHelperContent [position]="'top'"
7
                  [ngClass]="topHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
8
    </help-content>
6 9

  
7
    <div class="uk-grid-margin uk-grid uk-grid-stack" uk-grid="">
8
      <div class="uk-width-1-1@m uk-first-column">
10
    <div class="uk-grid">
9 11

  
10
        <h1 class="uk-h2">{{ title }}</h1>
12
      <!-- LEFT HELP CONTENT -->
13
      <aside-help-content #leftHelperContent [position]="'left'"
14
                          [ngClass]="leftHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
15
      </aside-help-content>
11 16

  
12
        <!-- TOP HELP CONTENT -->
13
        <help-content #topHelperContent [position]="'top'"
14
                      [ngClass]="topHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
15
        </help-content>
17
      <!-- MIDDLE -->
18
      <div class=" uk-width-expand@m">
16 19

  
17
        <div class="uk-container uk-container-large uk-margin-medium-top uk-margin-medium-bottom">
18
          <div class="uk-grid">
20
        <div *ngIf="errorMessage" class="uk-alert uk-alert-warning">{{ errorMessage }}</div>
21
        <div *ngIf="repo">
19 22

  
20
            <!-- LEFT HELP CONTENT -->
21
            <aside-help-content #leftHelperContent [position]="'left'"
22
                                [ngClass]="leftHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
23
            </aside-help-content>
23
          <h3>Supported Reports</h3>
24 24

  
25
            <!-- MIDDLE -->
26
            <div class=" uk-width-expand@m" style="min-height:500px;">
27

  
28
              <div *ngIf="errorMessage" class="uk-alert uk-alert-warning">{{ errorMessage }}</div>
29
              <div *ngIf="repo">
30
                <h3>Supported Reports</h3>
31

  
32
                <div class="uk-margin uk-grid repositoryTypeSelection">
33
                  <div class="uk-width-1-3 uk-grid-item-match uk-first-column">
34
                    <div class="uk-text-center uk-card uk-card-default uk-card-hover uk-scrollspy-inview uk-animation-slide-top-medium">
35
                      <a [routerLink]="['AR1']" class="uk-position-cover uk-margin-remove-adjacent"></a>
36
                      <div class="uk-card-media-top">
37
                        <img src="../../../assets/imgs/Icons_Reports_wide_AR1.png" alt="" style="width: 100%;">
38
                      </div>
39
                      <div class="uk-card-body">
40
                        <h3 class="el-title uk-margin uk-card-title uk-margin-remove-adjacent uk-margin-small-bottom">
41
                          Article Report 1, number of successful article download requests by month and repository.
42
                        </h3>
43
                      </div>
44
                    </div>
45
                  </div>
46
                  <div class="uk-width-1-3 uk-grid-item-match uk-first-column">
47
                    <div class="uk-text-center uk-card uk-card-default uk-card-hover uk-scrollspy-inview uk-animation-slide-top-medium">
48
                      <a [routerLink]="['IR1']" class="uk-position-cover uk-margin-remove-adjacent"></a>
49
                      <div class="uk-card-media-top">
50
                        <img class="el-image" src="../../../assets/imgs/Icons_Reports_wide_IR1.png" alt="" style="width:100%;">
51
                      </div>
52
                      <div class="uk-card-body">
53
                        <h3 class="el-title uk-margin uk-card-title uk-margin-remove-adjacent uk-margin-small-bottom">
54
                          Item Report 1, number of successful item download requests by month and repository.
55
                        </h3>
56
                      </div>
57
                    </div>
58
                  </div>
59
                  <div class="uk-width-1-3 uk-grid-item-match uk-first-column">
60
                    <div class="uk-text-center uk-card uk-card-default uk-card-hover uk-scrollspy-inview uk-animation-slide-top-medium">
61
                      <a [routerLink]="['RR1']" class="uk-position-cover uk-margin-remove-adjacent"></a>
62
                      <div class="uk-card-media-top">
63
                        <img class="el-image" src="../../../assets/imgs/Icons_Reports_wide_RR1.png" alt="" style="width:100%;">
64
                      </div>
65
                      <div class="uk-card-body">
66
                        <h3 class="el-title uk-margin uk-card-title uk-margin-remove-adjacent uk-margin-small-bottom">
67
                          Repository Report 1, number of successful item downloads for all repositories participating in the usage statistics service.
68
                        </h3>
69
                      </div>
70
                    </div>
71
                  </div>
72
                  <div *ngIf="repo.datasourceType === 'journal'" class="uk-width-1-3 uk-grid-item-match uk-first-column">
73
                    <div class="uk-text-center uk-card uk-card-default uk-card-hover uk-scrollspy-inview uk-animation-slide-top-medium">
74
                      <a [routerLink]="['JR1']" class="uk-position-cover uk-margin-remove-adjacent"></a>
75
                      <div class="uk-card-media-top">
76
                        <img class="el-image" src="../../../assets/imgs/Icons_Reports_wide_JR1.png" alt="" style="width:100%;">
77
                      </div>
78
                      <div class="uk-card-body">
79
                        <h2 class="el-title uk-margin uk-card-title uk-margin-remove-adjacent uk-margin-small-bottom">
80
                          Journal Report 1, number of successful full-text article requests by month and journal.
81
                        </h2>
82
                      </div>
83
                    </div>
84
                  </div>
85
                  <div class="uk-width-1-3 uk-grid-item-match uk-first-column">
86
                    <div class="uk-text-center uk-card uk-card-default uk-card-hover uk-scrollspy-inview uk-animation-slide-top-medium">
87
                      <a [routerLink]="['BR1']" class="uk-position-cover uk-margin-remove-adjacent"></a>
88
                      <div class="uk-card-media-top">
89
                        <img class="el-image" src="../../../assets/imgs/Icons_Reports_wide_BR1.png" alt="" style="width:100%;">
90
                      </div>
91
                      <div class="uk-card-body">
92
                        <h3 class="el-title uk-margin uk-card-title uk-margin-remove-adjacent uk-margin-small-bottom">
93
                          Book Report 1, number of successful title requests by month and title.
94
                        </h3>
95
                      </div>
96
                    </div>
97
                  </div>
98
                  <div class="uk-width-1-3 uk-grid-item-match uk-first-column">
99
                    <div class="uk-text-center uk-card uk-card-default uk-card-hover uk-scrollspy-inview uk-animation-slide-top-medium">
100
                      <a [routerLink]="['BR2']" class="uk-position-cover uk-margin-remove-adjacent"></a>
101
                      <div class="uk-card-media-top">
102
                        <img class="el-image" src="../../../assets/imgs/Icons_Reports_wide_BR2.png" alt="" style="width:100%;">
103
                      </div>
104
                      <div class="uk-card-body">
105
                        <h3 class="el-title uk-margin uk-card-title uk-margin-remove-adjacent uk-margin-small-bottom">
106
                          Book Report 2, number of successful section requests by month and title.
107
                        </h3>
108
                      </div>
109
                    </div>
110
                  </div>
25
          <div class="uk-grid uk-grid-match repositoryTypeSelection" data-uk-grid-margin="">
26
            <div class="uk-width-medium-1-3 uk-row-first">
27
              <div class="uk-text-center md-card md-card-default md-card-hover uk-scrollspy-inview uk-animation-slide-top-medium" uk-scrollspy-class="">
28
                <a [routerLink]="['AR1']" class="el-link uk-position-cover uk-margin-remove-adjacent"></a>
29
                <div class="uk-card-media-top">
30
                  <img class="el-image" src="../../../assets/imgs/Icons_Reports_wide_AR1.png" alt="" style="width: 100%;">
111 31
                </div>
112

  
32
                <div class="uk-card-body">
33
                  <h3 class="el-title uk-margin uk-card-title uk-margin-remove-adjacent uk-margin-small-bottom">
34
                    Article Report 1, number of successful article download requests by month and repository.
35
                  </h3>
36
                </div>
113 37
              </div>
114

  
115 38
            </div>
39
            <div class="uk-width-medium-1-3">
40
              <div class="uk-margin uk-text-center md-card md-card-default md-card-hover uk-scrollspy-inview uk-animation-slide-top-medium" uk-scrollspy-class="" data-id="" style="">
41
                <a [routerLink]="['IR1']" class="el-link uk-position-cover uk-margin-remove-adjacent" href=""></a>
42
                <div class="uk-card-media-top">
43
                  <img class="el-image" src="../../../assets/imgs/Icons_Reports_wide_IR1.png" alt="" style="width:100%;">
44
                </div>
45
                <div class="uk-card-body">
46
                  <h3 class="el-title uk-margin uk-card-title uk-margin-remove-adjacent uk-margin-small-bottom" >
47
                    Item Report 1, number of successful item download requests by month and repository.
48
                  </h3>
49
                </div>
50
              </div>
51
            </div>
52
            <div class="uk-width-medium-1-3">
53
              <div class="uk-margin uk-text-center md-card md-card-default md-card-hover uk-scrollspy-inview uk-animation-slide-top-medium" uk-scrollspy-class="" data-id="" style="">
54
                <a [routerLink]="['RR1']" class="el-link uk-position-cover uk-margin-remove-adjacent"></a>
55
                <div class="uk-card-media-top">
56
                  <img class="el-image" src="../../../assets/imgs/Icons_Reports_wide_RR1.png" alt="" style="width:100%;">
57
                </div>
58
                <div class="uk-card-body">
59
                  <h3 class="el-title uk-margin uk-card-title uk-margin-remove-adjacent uk-margin-small-bottom">
60
                    Repository Report 1, number of successful item downloads for all repositories participating in the usage statistics service.
61
                  </h3>
62
                </div>
63
              </div>
64
            </div>
65
          </div>
66
          <div class="uk-grid uk-grid-match repositoryTypeSelection" data-uk-grid-margin="">
67
            <div class="uk-width-medium-1-3 uk-row-first">
68
              <div class="uk-text-center md-card md-card-default md-card-hover uk-scrollspy-inview uk-animation-slide-top-medium" uk-scrollspy-class="">
69
                <a [routerLink]="['BR1']" class="el-link uk-position-cover uk-margin-remove-adjacent"></a>
70
                <div class="uk-card-media-top">
71
                  <img class="el-image" src="../../../assets/imgs/Icons_Reports_wide_BR1.png" alt="" style="width: 100%;">
72
                </div>
73
                <div class="uk-card-body">
74
                  <h3 class="el-title uk-margin uk-card-title uk-margin-remove-adjacent uk-margin-small-bottom">
75
                    Book Report 1, number of successful title requests by month and title.
76
                  </h3>
77
                </div>
78
              </div>
79
            </div>
80
            <div class="uk-width-medium-1-3">
81
              <div class="uk-margin uk-text-center md-card md-card-default md-card-hover uk-scrollspy-inview uk-animation-slide-top-medium" uk-scrollspy-class="" data-id="" style="">
82
                <a [routerLink]="['BR2']" class="el-link uk-position-cover uk-margin-remove-adjacent" href=""></a>
83
                <div class="uk-card-media-top">
84
                  <img class="el-image" src="../../../assets/imgs/Icons_Reports_wide_BR2.png" alt="" style="width:100%;">
85
                </div>
86
                <div class="uk-card-body">
87
                  <h3 class="el-title uk-margin uk-card-title uk-margin-remove-adjacent uk-margin-small-bottom" >
88
                    Book Report 2, number of successful section requests by month and title.
89
                  </h3>
90
                </div>
91
              </div>
92
            </div>
93
            <div *ngIf="repo.datasourceType === 'journal'" class="uk-width-medium-1-3">
94
              <div class="uk-margin uk-text-center md-card md-card-default md-card-hover uk-scrollspy-inview uk-animation-slide-top-medium" uk-scrollspy-class="" data-id="" style="">
95
                <a [routerLink]="['JR1']" class="el-link uk-position-cover uk-margin-remove-adjacent"></a>
96
                <div class="uk-card-media-top">
97
                  <img class="el-image" src="../../../assets/imgs/Icons_Reports_wide_JR1.png" alt="" style="width:100%;">
98
                </div>
99
                <div class="uk-card-body">
100
                  <h3 class="el-title uk-margin uk-card-title uk-margin-remove-adjacent uk-margin-small-bottom">
101
                    Journal Report 1, number of successful full-text article requests by month and journal.
102
                  </h3>
103
                </div>
104
              </div>
105
            </div>
106
          </div>
116 107

  
117
            <!-- RIGHT HELP CONTENT -->
118
            <aside-help-content #rightHelperContent [position]="'right'"
119
                                [ngClass]="rightHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
120
            </aside-help-content>
121

  
122
          </div>
123 108
        </div>
124 109

  
110
      </div>
125 111

  
126
        <!-- BOTTOM HELP CONTENT -->
127
        <help-content #bottomHelperContent [position]="'bottom'"
128
                      [ngClass]="bottomHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
129
        </help-content>
112
      <!-- RIGHT HELP CONTENT -->
113
      <aside-help-content #rightHelperContent [position]="'right'"
114
                          [ngClass]="rightHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
115
      </aside-help-content>
130 116

  
117
    </div>
131 118

  
132
      </div>
133
    </div>
119
    <!-- BOTTOM HELP CONTENT -->
120
    <help-content #bottomHelperContent [position]="'bottom'"
121
                  [ngClass]="bottomHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
122
    </help-content>
123

  
134 124
  </div>
135 125
</div>
136 126

  
127

  

Also available in: Unified diff