Project

General

Profile

« Previous | Next » 

Revision 58614

[Connect | Trunk]: Change Curators and Organizations base on new mocks

View differences:

modules/uoa-connect-portal/trunk/src/app/utils/customization/customization.component.ts
54 54

  
55 55
      });*/
56 56

  
57
     // TODO When customization is updated remove trhe followin and update appendCss in index.html
57
     // TODO When customization is updated remove the following and update appendCss in index.html
58 58
    appendCss("");
59 59
    if(typeof document === 'undefined') {
60 60
      return;
61 61
    }
62
    document.documentElement.style.setProperty('--portal-main-color',  '#4687E6');
63
    document.documentElement.style.setProperty('--portal-dark-color', '#2D72D6');
62
    if(this.communityId === 'covid-19') {
63
      document.documentElement.style.setProperty('--portal-main-color',  '#03ADEE');
64
      document.documentElement.style.setProperty('--portal-dark-color', '#F15157');
65
    } else {
66
      document.documentElement.style.setProperty('--portal-main-color',  '#4687E6');
67
      document.documentElement.style.setProperty('--portal-dark-color', '#2D72D6');
68
    }
64 69

  
65 70

  
66 71
  }
modules/uoa-connect-portal/trunk/src/app/curators/curators.component.html
1 1
<schema2jsonld *ngIf="url" [URL]="url" [name]="pageTitle" type="other"></schema2jsonld>
2 2

  
3 3
<ng-container *ngIf="longView else shortView">
4
<!--  <div class="image-front-topbar  uk-section-default uk-position-relative"-->
5
<!--       uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}"-->
6
<!--       tm-header-transparent="light">-->
7
<!--    uk-flex uk-flex-middle-->
8
    <div style=" min-height: 650px;" class="communityBackground uk-section uk-padding-remove-top uk-padding-remove-bottom ">
9
      <div class="uk-align-center">
10
          <breadcrumbs addClass="uk-margin-large-left uk-margin-remove-bottom uk-margin-small-top" [breadcrumbs]="breadcrumbs"></breadcrumbs>
4
  <!--  <div class="image-front-topbar  uk-section-default uk-position-relative"-->
5
  <!--       uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}"-->
6
  <!--       tm-header-transparent="light">-->
7
  <!--    uk-flex uk-flex-middle-->
8
  <div style=" min-height: 650px;"
9
       class="communityBackground uk-section uk-padding-remove-top uk-padding-remove-bottom ">
10
    <div class="uk-align-center">
11
      <breadcrumbs addClass="uk-margin-large-left uk-margin-remove-bottom uk-margin-small-top"
12
                   [breadcrumbs]="breadcrumbs"></breadcrumbs>
11 13

  
12
          <div class="uk-container uk-container-large">
13
            <div *ngIf="showLoading" class="uk-margin-large">
14
              <div class="uk-animation-fade uk-margin-top  uk-width-1-1" role="alert"><span
15
                class="loading-gif  uk-align-center"></span></div>
14
      <div class="uk-container uk-container-large">
15
        <div *ngIf="showLoading" class="uk-margin-large">
16
          <div class="uk-animation-fade uk-margin-top  uk-width-1-1" role="alert"><span
17
              class="loading-gif  uk-align-center"></span></div>
18
        </div>
19
        <!--            && curators.length > 0-->
20
        <div *ngIf="!showLoading">
21
          <div class="uk-margin-medium-top uk-h2">
22
            <span class="">Curators</span>
23
            <!--                <span> ({{curators.length}})</span>-->
24
          </div>
25
          <helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
26
                  [texts]="pageContents['top']"></helper>
27
          <div *ngFor="let curator of curators let i=index;"
28
               class="white-box-with-border uk-margin-top uk-animation-slide-top" uk-grid>
29
            <div class="uk-width-expand uk-padding uk-first-column">
30
              <div class="uk-flex uk-flex-middle">
31
                <div>
32
                  <img *ngIf="curator.photo && curator.photo !== ''" class="uk-border-circle curator-photo"
33
                       src="{{downloadUrl + curator.photo}}" alt="Curator Photo">
34
                  <img *ngIf="!curator.photo || curator.photo == ''" class="uk-border-circle curator-photo"
35
                       src="../../assets/common-assets/curator-default.png" alt="Curator Photo">
36
                </div>
37
                <div class="uk-width-expand uk-text-large uk-margin-left uk-text-bold">
38
                  {{curator.name}}
39
                </div>
40
              </div>
41
              <div class="uk-margin-medium-top uk-height-max-large uk-overflow-auto">
42
                <div class="uk-text-muted">
43
                  Biography
44
                </div>
45
                <div *ngIf="showMore[i]"> {{curator.bio}}}</div>
46
                <div *ngIf="!showMore[i]">{{_format(curator.bio)}}</div>
47
                <div class="uk-margin-top uk-text-right">
48
                  <a *ngIf="curator.bio.length > maxCharacters && !showMore[i]" class="uk-text-bold"
49
                     (click)="toggle(i)">
50
                    Show more
51
                  </a>
52
                  <a *ngIf="curator.bio.length > maxCharacters && showMore[i]" class="uk-text-bold"
53
                     (click)="toggle(i)">
54
                    Show less
55
                  </a>
56
                </div>
57
              </div>
16 58
            </div>
17
<!--            && curators.length > 0-->
18
            <div *ngIf="!showLoading">
19
              <div class="uk-margin-medium-top uk-h2">
20
                <span class="">Curators</span>
21
<!--                <span> ({{curators.length}})</span>-->
22
              </div>
23
              <helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
24
                      [texts]="pageContents['top']"></helper>
25
              <div *ngFor="let curator of curators let i=index;"
26
                   class="uk-width-1-1 uk-card uk-card-default uk-card-body uk-margin-top uk-animation-slide-top">
27
                <div
28
                  [class]="(curator.affiliations.length > 0 && curator.affiliations.length <= 2)?'uk-grid-divider uk-flex uk-flex-middle':''"
29
                  uk-grid>
30

  
31
                  <div class="uk-width-1-2 uk-first-column">
32
                    <div class="uk-flex uk-flex-middle">
33
                      <div>
34
                        <img *ngIf="curator.photo && curator.photo !== ''" class="uk-border-circle curator-photo"
35
                             src="{{downloadUrl + curator.photo}}" alt="Curator Photo">
36
                        <img *ngIf="!curator.photo || curator.photo == ''" class="uk-border-circle curator-photo"
37
                             src="../../assets/common-assets/curator-default.png" alt="Curator Photo">
38
                      </div>
39
                      <div class="uk-width-expand uk-margin-left uk-text-bold">
40
                        {{curator.name}}
41
                      </div>
42
                    </div>
59
            <div class="uk-width-1-3@m uk-width-1-2@s uk-width-1-1 uk-padding">
60
                <div class="uk-child-width-1-2 uk-flex uk-flex-middle" uk-grid>
61
                  <div class="uk-text-muted uk-width-1-1">
62
                    Affiliations
43 63
                  </div>
44

  
45

  
46
                  <div *ngIf="(curator.affiliations.length > 0 && curator.affiliations.length <= 2)"
47
                       class="uk-width-1-2">
48
                    <div class="uk-flex uk-flex-middle">
49
                      <div class="uk-width-expand uk-margin-left uk-text-meta uk-flex-first">
50
                        Affiliations
51
                      </div>
52
                      <affiliations [longView]="false" [affiliations]="curator.affiliations"
53
                                    [affiliationsInSlider]="curator.affiliations.length"
54
                                    class="uk-width-2-3"></affiliations>
55
                    </div>
56
                  </div>
57

  
58
                  <div *ngIf="(curator.affiliations.length > 2)" class="uk-width-1-1 uk-margin-top">
59
                    <div class="uk-text-meta uk-margin-small-bottom">
60
                      Affiliations
61
                    </div>
62
                    <affiliations [longView]="false" [affiliations]="curator.affiliations"></affiliations>
63
                  </div>
64
                  <div class="uk-width-1-1 uk-first-column uk-margin-top uk-height-max-large uk-overflow-auto">
65
                    <div class="uk-text-meta uk-margin-small-bottom">
66
                      Biography
67
                    </div>
68
                    <div class="uk-margin-top">
69
                      <p *ngIf="showMore[i]" class="biography"> {{curator.bio}}}</p>
70
                      <p *ngIf="!showMore[i]" class="biography">{{_format(curator.bio)}}</p>
71
                    </div>
72
                  </div>
73
                  <div class="uk-width-1-1 uk-margin-top uk-text-right">
74
                    <a *ngIf="curator.bio.length > maxCharacters && !showMore[i]" class="uk-text-bold"
75
                       (click)="toggle(i)">
76
                      Show more
64
                  <div *ngFor="let affiliation of curator.affiliations">
65
                    <span *ngIf="!affiliation.website_url">
66
                      <img [src]="affiliation.logo_url" [alt]="affiliation.name">
67
                    </span>
68
                    <a *ngIf="affiliation.website_url" [href]="affiliation.website_url">
69
                      <img [src]="affiliation.logo_url" [alt]="affiliation.name">
77 70
                    </a>
78
                    <a *ngIf="curator.bio.length > maxCharacters && showMore[i]" class="uk-text-bold"
79
                       (click)="toggle(i)">
80
                      Show less
81
                    </a>
82 71
                  </div>
83 72
                </div>
84 73
              </div>
85 74
            </div>
86
            <helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0"
87
                    [texts]="pageContents['bottom']"></helper>
88
          </div>
75
        </div>
76
        <helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0"
77
                [texts]="pageContents['bottom']"></helper>
89 78
      </div>
90 79
    </div>
91
<!--  </div>-->
80
  </div>
81
  <!--  </div>-->
92 82
</ng-container>
93 83
<ng-template #shortView>
94 84
  <div class="uk-grid">
......
98 88
    <span class="uk-width-expand uk-padding-remove space">
99 89
      <span *ngFor="let curator of curators let i=index;">
100 90
<!--      <span>-->
101
<!--        <img *ngIf="curator.photo && curator.photo !== ''" class="uk-border-circle curator-photo"-->
102
<!--             src="{{downloadUrl + curator.photo}}" alt="Curator Photo">-->
103
<!--        <img *ngIf="!curator.photo || curator.photo == ''" class="uk-border-circle curator-photo"-->
104
<!--             src="../../assets/common-assets/curator-default.png" alt="Curator Photo">-->
105
<!--      </span>-->
91
        <!--        <img *ngIf="curator.photo && curator.photo !== ''" class="uk-border-circle curator-photo"-->
92
        <!--             src="{{downloadUrl + curator.photo}}" alt="Curator Photo">-->
93
        <!--        <img *ngIf="!curator.photo || curator.photo == ''" class="uk-border-circle curator-photo"-->
94
        <!--             src="../../assets/common-assets/curator-default.png" alt="Curator Photo">-->
95
        <!--      </span>-->
106 96

  
107 97
        <a>
108 98
          <span class="user-circle-background">
109 99
            <svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
110
              <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"></path>
100
              <path
101
                  d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"></path>
111 102
              <path d="M0 0h24v24H0z" fill="none"></path>
112 103
            </svg>
113 104
          </span>
114 105
          {{curator.name}}
115 106
        </a>
116 107
        <span class="default-dropdown uk-margin-remove-top uk-padding-medium uk-width-medium"
117
             uk-dropdown="pos: bottom-left; mode:click; ">
108
              uk-dropdown="pos: bottom-left; mode:click; ">
118 109
          <span class="uk-grid uk-grid-stack">
119 110
            <span class="uk-first-column uk-flex uk-flex-middle uk-grid">
120 111
              <span>
modules/uoa-connect-portal/trunk/src/app/affiliations/affiliations.component.html
9 9
      <span *ngIf="organization.logo_url == null || organization.logo_url == ''" class="uk-icon">
10 10
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" icon="image" ratio="2.5"><circle cx="16.1" cy="6.1"
11 11
                                                                                                     r="1.1"></circle><rect
12
          fill="none" stroke="#000" x="0.5" y="2.5" width="19" height="15"></rect><polyline fill="none" stroke="#000"
13
                                                                                            stroke-width="1.01"
14
                                                                                            points="4,13 8,9 13,14"></polyline><polyline
15
          fill="none" stroke="#000" stroke-width="1.01" points="11,12 12.5,10.5 16,14"></polyline></svg>
12
            fill="none" stroke="#000" x="0.5" y="2.5" width="19" height="15"></rect><polyline fill="none" stroke="#000"
13
                                                                                              stroke-width="1.01"
14
                                                                                              points="4,13 8,9 13,14"></polyline><polyline
15
            fill="none" stroke="#000" stroke-width="1.01" points="11,12 12.5,10.5 16,14"></polyline></svg>
16 16
      </span>
17 17
    </div>
18 18
  </div>
19 19
  <div *ngIf="organization.name && fullView" class="uk-card-body uk-padding-remove-horizontal uk-padding-remove-top">
20 20
    <span class="uk-text-bold uk-text-small">{{organization.name.slice(0, 100)}}</span><span
21
    *ngIf="organization.name.length > 100">...</span>
21
      *ngIf="organization.name.length > 100">...</span>
22 22
  </div>
23 23
</ng-template>
24 24

  
......
33 33
       uk-scrollspy="cls: uk-animation-fade; target: > div > .uk-card; repeat: false"
34 34
       uk-grid>
35 35

  
36
    <div *ngFor="let affiliation of affiliations">
37
      <div class="uk-card uk-card-default uk-card-small uk-padding-small">
36
    <div *ngFor="let affiliation of affiliations;">
37
      <div class="uk-card communityCard">
38 38
        <a *ngIf="affiliation.website_url" target="_blank" [href]="affiliation.website_url" class="affiliation-content">
39 39
          <ng-container *ngTemplateOutlet="card; context: { organization: affiliation, fullView: true}"></ng-container>
40 40
        </a>
......
45 45
    </div>
46 46
  </div>
47 47

  
48
  <div *ngIf="communityFirstPage"
49
       class="uk-margin-large-top uk-margin uk-text-center uk-text-large uk-text-meta uk-text-bold">
48
  <h3 *ngIf="communityFirstPage"
49
       class="uk-margin-large-top uk-text-center uk-text-muted uk-text-bold">
50 50
    Supporting Organizations
51
<!--    ({{affiliations.length}})-->
52
  </div>
51
    <!--    ({{affiliations.length}})-->
52
  </h3>
53 53

  
54 54
  <div *ngIf="!longView" [class]="'uk-position-relative uk-visible-toggle'" tabindex="-1"
55 55
       [attr.uk-slider]="sliderOptions">
56 56
    <div
57
      [class]="'uk-align-center uk-width-'+(affiliations.length >= affiliationsInSlider ? affiliationsInSlider : affiliations.length)+'-'+affiliationsInSlider">
58
      <ul class="uk-slider-items uk-grid-small" uk-height-match="target: > li > .uk-card" uk-grid>
57
        [class]="'uk-align-center uk-width-'+(affiliations.length >= affiliationsInSlider ? affiliationsInSlider : affiliations.length)+'-'+affiliationsInSlider">
58
      <ul class="uk-slider-items uk-grid-small" uk-height-match="target: > li > .affiliation" uk-grid>
59 59
        <li *ngFor="let affiliation of affiliations"
60 60
            [class]="'affiliation-element uk-width-1-'+(affiliations.length >= affiliationsInSlider ? affiliationsInSlider : affiliations.length)">
61
          <div class="uk-card uk-card-small uk-card-default uk-flex uk-flex-middle uk-flex-center uk-padding-small"
61
          <div class="affiliation uk-flex uk-flex-middle uk-flex-center uk-padding-small"
62 62
               [attr.uk-tooltip]="(affiliation.name) ? affiliation.name : 'cls: uk-invisible'">
63 63
            <a *ngIf="affiliation.website_url" target="_blank" [href]="affiliation.website_url"
64 64
               class="affiliation-content">
65 65
              <ng-container
66
                *ngTemplateOutlet="card; context: { organization: affiliation, fullView: false}"></ng-container>
66
                  *ngTemplateOutlet="card; context: { organization: affiliation, fullView: false}"></ng-container>
67 67
            </a>
68 68
            <span *ngIf="!affiliation.website_url" class="affiliation-content">
69 69
              <ng-container *ngTemplateOutlet="card; context: { organization: affiliation}"></ng-container>
......
81 81
       class="uk-position-center-right uk-padding uk-height-1-1 uk-flex"
82 82
       href="#" uk-slidenav-next uk-slider-item="next"></a>
83 83
  </div>
84
  <div *ngIf="communityFirstPage"
85
       [class]="'uk-align-center uk-width-'+(affiliations.length >= affiliationsInSlider ? affiliationsInSlider : affiliations.length)+'-'+affiliationsInSlider">
86
    <a routerLink="/organizations" class="uk-align-right uk-link portal-link">
87
      See Details >
84
  <div *ngIf="communityFirstPage">
85
    <a routerLink="/organizations" class="uk-align-right portal-link uk-flex uk-flex-middle">
86
      <span>See Details</span>
87
      <span uk-icon="chevron-right"></span>
88 88
    </a>
89 89
  </div>
90 90
</ng-container>
modules/uoa-connect-portal/trunk/src/assets/customization.css
1

  
2

  
3 1
.communityPanelBackground:not(bottom) {
4 2
    border-style: solid;
5
    border-color: #4C9CD5;
3
    border-color: var(--portal-main-color);
6 4
    border-width: 0px;
7 5
}
8 6

  
9 7
.communityPanelBackground,
10 8
.communityPanelBackground .uk-section-primary {
11
    background-color: #4C9CD5;
9
    background-color: var(--portal-main-color);
12 10
}
13 11

  
14 12
.communityPanelBackground {
......
67 65
.uk-tab>.uk-active>a,
68 66
.uk-tab>*>a:focus,
69 67
.uk-tab>*>a:hover {
70
    color: #4C9CD5;
68
    color: var(--portal-main-color);
71 69
}
72 70

  
73 71
.uk-link:hover,
......
82 80
.uk-tab>.uk-active>a,
83 81
.uk-navbar-nav>li.uk-active>a,
84 82
.uk-navbar-container:not(.uk-navbar-transparent) .uk-navbar-nav>li.uk-active>a {
85
    color: #2D72D6;
83
    color: var(--portal-dark-color) !important;
86 84
}
87 85

  
88 86
.communityBorder {
89
    border-color: #4C9CD5;
87
    border-color: var(--portal-main-color);
90 88
    border-style: solid;
91 89
    border-width: 2px;
92 90
    border-radius: 6px;
......
135 133

  
136 134
.communityPanelBackground .uk-button:not(.ignoreCommunityPanelBackground) {
137 135
    background-color: #ffffff !important;
138
    /*color: #4C9CD5 !important;*/
136
    /*color: var(--portal-main-color) !important;*/
139 137
    color: black !important;
140 138
    border-color: #ffffff !important;
141 139
    border-style: solid !important;
......
145 143

  
146 144
.communityPanelBackground .uk-button:not(.ignoreCommunityPanelBackground):hover {
147 145
    background-color: #eeeeee !important;
148
    /*color: #4C9CD5 !important;*/
146
    /*color: var(--portal-main-color) !important;*/
149 147
    color: black !important;
150 148
    border-color: #eeeeee !important;
151 149
}
......
186 184
}
187 185

  
188 186
/*CONNECT REDESIGN*/
187
.uk-text-muted {
188
    color: #666 !important;
189
}
190

  
191
.uk-card-default {
192
    color: #212121 !important;
193
}
194

  
195
.portal-link:hover {
196
    text-decoration: none !important;
197
    color: var(--portal-dark-color) !important;
198
}
199

  
200
.uk-slidenav {
201
    background: none !important;
202
}

Also available in: Unified diff