Project

General

Profile

1
<div>
2
  <div class="uk-width-1-1 uk-grid">
3
    <div class="uk-width-1-1 uk-first-column uk-margin-bottom">
4
      <div class="uk-float-right">
5
        <a class="grid-view" [class.active]="tilesView" (click)="toggleTiles()">
6
          <i class="fa fa-th"></i>
7
        </a>
8
        <a class="grid-view"  [class.active]="!tilesView" (click)="toggleTiles()">
9
          <i class="fa fa-th-list"></i>
10
        </a>
11
      </div>
12
      <div class="m-b-md">
13
        <h4 class="uk-h4 uk-text-primary uk-scrollspy-inview">
14
          <span><ng-content></ng-content></span>
15
        </h4>
16
      </div>
17
    </div>
18
    <div class="uk-width-1-1">
19
      <div *ngIf="errorMessage" class="uk-alert uk-alert-danger">{{ errorMessage }}</div>
20
      <div *ngIf="loadingMessage" class="loading-big">
21
        <div class="loader-big" style="text-align: center; padding-top: 170px; color: rgb(47, 64, 80); font-weight: bold;">
22
          {{ loadingMessage }}
23
        </div>
24
        <div class="whiteFilm"></div>
25
      </div>
26

    
27
      <!--TILES VIEW-->
28
      <div *ngIf="tilesView && reposOfUser.length>0" class="uk-grid-large uk-grid-margin-large uk-grid repos-grid uk-height-1-1">
29
        <div *ngFor="let repo of reposOfUser" class="uk-width-expand@m uk-width-auto\@m uk-first-column uk-margin-bottom" style="min-width: 300px; max-width: 22%;">
30
          <div class="uk-margin uk-grid-match uk-child-width-1-1 uk-grid-small uk-grid-divider uk-grid uk-scrollspy-inview uk-animation-slide-top-medium uk-grid-stack">
31
            <div class="uk-first-column">
32
              <div class="">
33
                <a class="el-link uk-vertical-align-middle uk-height-1-1" [routerLink]="[getLinkToNext(repo)]">
34
                  <div class="el-item uk-panel uk-scrollspy-inview uk-animation-slide-top-medium" uk-scrollspy-class="">
35
                    <div class="uk-child-width-expand uk-grid-medium uk-flex-middle uk-grid uk-grid-stack" uk-grid="">
36
                      <div class="uk-width-1-3@m uk-first-column" style="width: 90px;">
37
                        <img *ngIf="!repo.logoUrl" class="el-image uk-border-rounded" src="/assets/imgs/yourLogoHere.jpg" alt="">
38
                        <img *ngIf="repo.logoUrl" class="el-image uk-border-rounded" src="{{ repo.logoUrl }}" alt="">
39
                      </div>
40
                      <div class="uk-first-column">
41
                        <h3 class="el-title uk-margin uk-h5 uk-margin-remove-adjacent uk-margin-small-bottom">{{ repo.officialName }}</h3>
42
                        <div class="{{ getBadgeCSS(repo) }}">
43
                          <span *ngIf="parent == 'contentEvents'">(</span>
44
                          {{ getBadgeText(repo) }}
45
                          <span *ngIf="parent == 'contentEvents'"> events)</span>
46
                        </div>
47
                      </div>
48
                    </div>
49
                  </div>
50
                </a>
51
              </div>
52
            </div>
53
          </div>
54
        </div>
55
      </div>
56

    
57
      <!-- LIST VIEW -->
58
      <div *ngIf="!tilesView && reposOfUser.length>0" class="uk-grid-large uk-grid-margin-large uk-grid repos-list">
59
        <div class="uk-width-1-1@m uk-first-column">
60
          <div class="uk-overflow-auto uk-scrollspy-inview uk-animation-slide-top-medium">
61
            <div>
62
              <table class="uk-table uk-table-striped uk-table-middle">
63
                <thead>
64
                  <tr>
65
                    <th class="uk-text-nowrap">Logo</th>
66
                    <th class="uk-text-nowrap">Name</th>
67
                    <th *ngIf="parent == 'metrics'" class="uk-text-nowrap">Status</th>
68
                    <th *ngIf="parent == 'contentEvents'" class="uk-text-nowrap"># of Events</th>
69
                  </tr>
70
                </thead>
71
                <tbody>
72
                  <tr class="el-item" *ngFor="let repo of reposOfUser">
73
                    <!-- SHARED FIELDS -->
74
                    <td class="uk-table-shrink">
75
                      <img *ngIf="repo.logoUrl" class="el-image uk-preserve-width" src="{{ repo.logoUrl }}" style="height: 45px;">
76
                      <img *ngIf="!repo.logoUrl" class="el-image uk-preserve-width" src="assets/imgs/yourLogoHere.jpg" alt="[Repo Logo]" style="height: 45px;">
77
                    </td>
78
                    <td class="uk-text-nowrap uk-table-shrink">
79
                      <a [routerLink]="[getLinkToNext(repo)]">{{ repo.officialName }}</a>
80
                    </td>
81

    
82
                    <!-- SET STATUS OR EVENTS -->
83
                    <td *ngIf="parent == 'metrics'" class="uk-text-nowrap uk-table-shrink">
84
                      <div class="{{ getBadgeCSS(repo) }}">{{ getBadgeText(repo) }}</div>
85
                    </td>
86
                    <td *ngIf="parent=='contentEvents'" class="uk-text-nowrap uk-table-shrink">
87
                      {{ getBadgeText(repo) }}
88
                    </td>
89
                  </tr>
90
                </tbody>
91
              </table>
92
            </div>
93
          </div>
94
        </div>
95
      </div>
96

    
97
    </div>
98

    
99
  </div>
100
</div>
(5-5/7)