@ucd-lib/theme-elements 1.2.6 → 1.2.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/brand/ucd-theme-pagination/ucd-theme-pagination.js +45 -79
  2. package/brand/ucd-theme-pagination/ucd-theme-pagination.tpl.js +31 -2
  3. package/package.json +1 -1
  4. package/ucdlib/ucdlib-header/ucdlib-header.tpl.js +10 -2
  5. package/ucdlib/ucdlib-primary-nav/ucdlib-primary-nav.tpl.js +4 -0
package/brand/ucd-theme-pagination/ucd-theme-pagination.js CHANGED
@@ -39,51 +39,18 @@ export default class UcdThemePagination extends LitElement {
39
39
 
40
40
  static get properties() {
41
41
  return {
42
- basePath : {
43
- type: String,
44
- attribute: 'base-path'
45
- },
46
- queryParams: {
47
- type: String,
48
- attribute: 'query-params'
49
- },
50
- useHash : {
51
- type: Boolean,
52
- attribute: 'use-hash'
53
- },
54
- currentPage : {
55
- type : Number,
56
- attribute: 'current-page',
57
- reflect: true
58
- },
59
- maxPages : {
60
- type : Number,
61
- attribute : 'max-pages'
62
- },
63
- visibleLinkCount : {
64
- type : Number,
65
- attribute : 'visible-link-count'
66
- },
67
- disableLabel : {
68
- type: Boolean,
69
- attribute : 'disable-label'
70
- },
71
- _pages : {
72
- type: Array
73
- },
74
- ellipses : {
75
- type: Boolean,
76
- attribute : 'ellipses'
77
- },
78
- xs_screen : {
79
- type: Boolean,
80
- attribute : 'xs-screen'
81
- },
82
- size : {
83
- type: String,
84
- attribute : 'size'
85
- }
86
-
42
+ basePath : { type: String, attribute: 'base-path' },
43
+ queryParams: { type: String, attribute: 'query-params' },
44
+ useHash : { type: Boolean, attribute: 'use-hash' },
45
+ currentPage : { type : Number, attribute: 'current-page', reflect: true },
46
+ maxPages : { type : Number, attribute : 'max-pages' },
47
+ visibleLinkCount : { type : Number, attribute : 'visible-link-count' },
48
+ disableLabel : { type: Boolean, attribute : 'disable-label' },
49
+ _pages : { type: Array },
50
+ ellipses : { type: Boolean, attribute : 'ellipses' },
51
+ xs_screen : { type: Boolean, attribute : 'xs-screen' },
52
+ size : { type: String, attribute : 'size' },
53
+ darkmode : { type: Boolean, attribute : 'darkmode' },
87
54
  };
88
55
  }
89
56
 
@@ -108,10 +75,11 @@ export default class UcdThemePagination extends LitElement {
108
75
  this.ellipses = false;
109
76
  this.xs_screen = false;
110
77
  this.size = '';
78
+ this.darkmode = false;
111
79
 
112
80
  this.screen_check = (window.innerWidth <= this.breakPoints.mobileBreakPoint) ? true : false;
113
81
 
114
- this.render = render.bind(this);
82
+ this.render = render.bind(this);
115
83
  }
116
84
 
117
85
  /**
@@ -120,37 +88,31 @@ export default class UcdThemePagination extends LitElement {
120
88
  */
121
89
  willUpdate(props) {
122
90
  if( props.has('currentPage') || props.has('maxPages') ) {
123
-
124
- if( this.xs_screen && this.screen_check ) {
125
- let pages = [this.currentPage];
126
- this._pages = pages; // Mobile Pagination
91
+ if( this.ellipses && this.maxPages >= 8 ) {
92
+ this._pages = this._renderEllipse();
93
+ } else if ( this.ellipses && this.maxPages < 8 ) {
94
+ this._pages = this._renderOriginal();
127
95
  } else {
128
- if( this.ellipses && this.maxPages >= 8 ) {
129
- this._pages = this._renderEllipse();
130
- } else if ( this.ellipses && this.maxPages < 8 ) {
131
- this._pages = this._renderOriginal();
132
- } else {
133
- let startIndex = Math.floor(this.currentPage - (this.visibleLinkCount/2));
134
-
135
- if( startIndex < 0 ) {
136
- startIndex = 0;
137
- } else if ( (this.currentPage + (this.visibleLinkCount/2)) > this.maxPages ) {
138
- startIndex -= Math.ceil(this.currentPage + (this.visibleLinkCount/2)) - this.maxPages - 1;
139
- }
140
- if( startIndex < 0 ) {
141
- startIndex = 0;
142
- }
143
-
144
- let endIndex = startIndex + this.visibleLinkCount;
145
- if( endIndex > this.maxPages ) endIndex = this.maxPages;
146
-
147
- let pages = [];
148
- for( let i = startIndex; i < endIndex; i++ ) {
149
- pages.push(i+1);
150
- }
151
- this._pages = pages;
152
- }
153
- } // Desktop Pagination
96
+ let startIndex = Math.floor(this.currentPage - (this.visibleLinkCount/2));
97
+
98
+ if( startIndex < 0 ) {
99
+ startIndex = 0;
100
+ } else if ( (this.currentPage + (this.visibleLinkCount/2)) > this.maxPages ) {
101
+ startIndex -= Math.ceil(this.currentPage + (this.visibleLinkCount/2)) - this.maxPages - 1;
102
+ }
103
+ if( startIndex < 0 ) {
104
+ startIndex = 0;
105
+ }
106
+
107
+ let endIndex = startIndex + this.visibleLinkCount;
108
+ if( endIndex > this.maxPages ) endIndex = this.maxPages;
109
+
110
+ let pages = [];
111
+ for( let i = startIndex; i < endIndex; i++ ) {
112
+ pages.push(i+1);
113
+ }
114
+ this._pages = pages;
115
+ }
154
116
  }
155
117
  }
156
118
 
@@ -186,10 +148,14 @@ export default class UcdThemePagination extends LitElement {
186
148
  args.class += ' pager__item--current';
187
149
  }
188
150
 
151
+ if( this.darkmode ) {
152
+ args.class += ' darkmode';
153
+ }
154
+
189
155
  if( !this.basePath && !this.useHash ) {
190
- return html `<li class="pager__item ${args.class || ''}">
156
+ return html `<li class="pager__item ${args.class || ''}">
191
157
  ${((this.currentPage == 1 && args.label == "Prev") || (this.currentPage == this.maxPages && args.label == "Next") ) ?
192
- html`<a style="pointer-events: none; cursor: default; color:#999999; background: white" tabindex="1" @click="${this._onPageClicked}" page="${page}">${args.label || page}</a>`:
158
+ html`<a style="pointer-events: none; cursor: default; color: ${this.darkmode ? '#cccccc' : '#999999'}; background: ${this.darkmode ? 'transparent' : 'white'}" tabindex="1" @click="${this._onPageClicked}" page="${page}">${args.label || page}</a>`:
193
159
  html`<a style="cursor:pointer;" tabindex="1" @click="${this._onPageClicked}" page="${page}">${args.label || page}</a>`
194
160
  }
195
161
  </li>`;
@@ -198,7 +164,7 @@ export default class UcdThemePagination extends LitElement {
198
164
  let href = (this.useHash ? '#' : '') + (this.basePath || '/') + page + (this.queryParams ? '?' + this.queryParams : '');
199
165
  return html`<li class="pager__item ${args.class || ''}">
200
166
  ${((this.currentPage == 1 && args.label == "Prev") || (this.currentPage == this.maxPages && args.label == "Next") ) ?
201
- html` <a style="pointer-events: none; cursor: default; color:#999999; background:white;" href="${href}">${args.label || page}</a>`:
167
+ html` <a style="pointer-events: none; cursor: default; color: ${this.darkmode ? '#cccccc' : '#999999'}; background: ${this.darkmode ? 'transparent' : 'white'};" href="${href}">${args.label || page}</a>`:
202
168
  html` <a href="${href}">${args.label || page}</a>`
203
169
  }
204
170
  </li>`;
package/brand/ucd-theme-pagination/ucd-theme-pagination.tpl.js CHANGED
@@ -33,6 +33,35 @@ export function styles() {
33
33
  align-items: center;
34
34
  }
35
35
  }
36
+
37
+ .pager__item.darkmode a {
38
+ color: white;
39
+ }
40
+
41
+ .pager .darkmode span {
42
+ color: white;
43
+ }
44
+
45
+ .pager__item--current.darkmode a {
46
+ background-color: #FFBF00;
47
+ color: #002851;
48
+ }
49
+
50
+ .pager__item.darkmode:hover a {
51
+ color: #002851 !important;
52
+ }
53
+
54
+ .pager__item--previous.pager__item--current.darkmode,
55
+ .pager__item--previous.pager__item--current.darkmode:hover,
56
+ .pager__item--next.pager__item--current.darkmode,
57
+ .pager__item--next.pager__item--current.darkmode:hover {
58
+ background-color: transparent;
59
+ }
60
+
61
+ .pager__item--previous.pager__item--current.darkmode:hover a,
62
+ .pager__item--next.pager__item--current.darkmode:hover a {
63
+ color: #cccccc !important;
64
+ }
36
65
  `;
37
66
 
38
67
  return [normalizeCss, resetCss, paginationCss, elementStyles];
@@ -44,7 +73,7 @@ return html`
44
73
  <ul class="pager">
45
74
  ${this.xs_screen ?
46
75
  html`
47
- <div class="xs-screen">
76
+ <div class="xs-screen${this.darkmode ? ' darkmode' : ''}">
48
77
  ${this._renderLink(
49
78
  this.currentPage-1,
50
79
  {label: 'Prev', class: 'pager__item--previous', noHighlight: false}
@@ -58,7 +87,7 @@ return html`
58
87
  )}
59
88
  </div>
60
89
 
61
- <div class="default">
90
+ <div class="default${this.darkmode ? ' darkmode' : ''}">
62
91
  ${this._renderLink(
63
92
  this.currentPage-1,
64
93
  {label: 'Prev', class: 'pager__item--previous', noHighlight: false}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ucd-lib/theme-elements",
3
- "version": "1.2.6",
3
+ "version": "1.2.8",
4
4
  "description": "Custom elements for the UCD brand theme",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/ucdlib/ucdlib-header/ucdlib-header.tpl.js CHANGED
@@ -25,7 +25,7 @@ export function styles() {
25
25
  #nav-bar .ucd-logo {
26
26
  height: 1.25rem;
27
27
  position: relative;
28
- top: .95rem;
28
+ top: -10px;
29
29
  margin: 0 1rem;
30
30
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="16.157"><path fill="white" d="M58.865 4.877c.101.661 1.101 5.405 1.101 5.405h-2.194l1.093-5.405zm-8.328 11.03h5.806l.438-1.947h4.144l.554 1.947h5.806L61.846.403h-6.087l-5.222 15.504zM36.284.402h5.624c5.107 0 9.007 2.277 9.007 7.974 0 4.591-3.18 7.529-7.645 7.529l-6.986-.009V.402zm5.524 11.052h.376c1.843 0 3.207-1.072 3.207-3.096 0-2.179-1.21-3.395-3.234-3.395h-.349v6.491zM32.941.888l.296 2.545c.071.604.426 2.052-.011 1.858-.276-.121-.502-.776-.726-1.36-.114-.295-.658-1.695-.801-1.799-.685-.501-2.401-1.064-3.561-1.069-3.521-.013-5.847 2.509-5.847 6.982 0 3.208 1.582 7.061 5.607 7.061 1.441 0 4.201-.443 4.952-2.436.339-.9.65-1.703.876-1.459.166.177-.05.899-.15 1.289-.474 1.847-.501 2.406-.65 2.479-1.818.885-4.15 1.178-6.191 1.178-6.485 0-8.726-3.678-8.726-7.354 0-6.379 4.032-9.021 10.286-8.791 1.58.058 3.163.334 4.646.876M13.784 1.171L12.745.819c-.35-.306.075-.391.075-.391s1.5.271 5.24-.036c0 0 .328.062.103.319l-1.228.511c-.798.338-.798.143-.798.994l-.007 7.902c0 6.178-6.47 6.039-7.73 6.039-.6 0-6.488 0-6.488-4.961V2.834c0-1.46.159-1.419-.338-1.591L.071.695S-.183.347.269.368c1.227.06 3.004.316 7.133.024 0 0 .362.085.125.342l-1.201.339c-.95.414-.825.098-.849 1.045l.028 8.248c0 2.021 1.07 4.524 4.395 4.524 4.585 0 4.627-3.854 4.627-4.71l.009-8.167c.049-.77-.052-.551-.752-.842M87.65 14.715l1.6-4.111.281.23c.982.781 2.316 1.443 3.574 1.471 1.127.023 1.676-.268 1.527-1.191-.113-.693-.916-.812-1.417-.91l-1.103-.213c-2.143-.39-3.941-1.673-3.941-4.104 0-3.677 3.262-5.737 6.544-5.737 1.726 0 3.306.424 4.786 1.36L98.11 5.156c-.762-.533-1.918-1.285-3.377-1.337-.482-.018-1.58.229-1.229 1.312.152.462.833.657 1.252.755l1.241.292c2.325.526 4.003 1.81 4.003 4.432 0 3.699-3.281 5.529-6.542 5.529-1.901 0-4.106-.527-5.808-1.424M80.979.403h5.492v15.504h-5.492zM74.684.402h5.72l-5.843 15.503h-4.644L64.09.402h5.704l2.442 9.354z"/></svg>') no-repeat;
31
31
  width: 7.7rem;
@@ -208,6 +208,14 @@ ${this.isDemo ? html`
208
208
  }
209
209
  }
210
210
  @media (min-width: ${this.mobileWidth}px) {
211
+ .menu--closed .off-canvas--left {
212
+ transform: none !important;
213
+ }
214
+ .off-canvas {
215
+ position: initial !important;
216
+ width: auto !important;
217
+ background-color: transparent !important;
218
+ }
211
219
  .l-header .l-navbar {
212
220
  width: 100%;
213
221
  height: auto;
@@ -221,7 +229,7 @@ ${this.isDemo ? html`
221
229
  width: 100%;
222
230
  }
223
231
  .menu--hidden .off-canvas__container {
224
- display: grid;
232
+ display: grid !important;
225
233
  grid-template-areas: "nav quick search logo";
226
234
  }
227
235
  .l-nav-horizontal {
package/ucdlib/ucdlib-primary-nav/ucdlib-primary-nav.tpl.js CHANGED
@@ -361,6 +361,10 @@ return html`
361
361
  }
362
362
  }
363
363
 
364
+ .primary-nav a:hover, .primary-nav__nolink:hover {
365
+ background-color: #ffbf00 !important;
366
+ }
367
+
364
368
  </style>
365
369
  <nav
366
370
  id=${this._classPrefix}