@ucd-lib/theme-elements 1.0.1 → 1.1.0

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 (3) hide show
  1. package/package.json +1 -1
  2. package/{brand/ucd-theme-author-profile/ucd-theme-author-profile.js → ucdlib/ucdlib-author-profile/ucdlib-author-profile.js} +11 -12
  3. package/{brand/ucd-theme-author-profile/ucd-theme-author-profile.tpl.js → ucdlib/ucdlib-author-profile/ucdlib-author-profile.tpl.js} +24 -12
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ucd-lib/theme-elements",
3
- "version": "1.0.1",
3
+ "version": "1.1.0",
4
4
  "description": "Custom elements for the UCD brand theme",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/{brand/ucd-theme-author-profile/ucd-theme-author-profile.js → ucdlib/ucdlib-author-profile/ucdlib-author-profile.js} RENAMED
@@ -1,5 +1,5 @@
1
1
  import {html, LitElement} from 'lit';
2
- import {render, styles} from "./ucd-theme-author-profile.tpl.js";
2
+ import {render, styles} from "./ucdlib-author-profile.tpl.js";
3
3
  import {TaskController} from '../../utils/controllers/task.js';
4
4
 
5
5
  /**
@@ -8,7 +8,7 @@ import {TaskController} from '../../utils/controllers/task.js';
8
8
  * @property {String} email - Email to reference person
9
9
  * @property {String} domain - Specify the domain to choose from
10
10
  *
11
- * <ucdlib-author-profile domain="sandbox" email='sabaggett@ucdavis.edu></ucdlib-author-profile>
11
+ * <ucdlib-theme-author-profile domain="sandbox" email='sabaggett@ucdavis.edu></ucdlib-theme-author-profile>
12
12
  */
13
13
  export default class UcdlibAuthorProfile extends LitElement {
14
14
  static get properties() {
@@ -29,7 +29,8 @@ export default class UcdlibAuthorProfile extends LitElement {
29
29
  positionTitle: {type: String},
30
30
  photo: {type: Object},
31
31
  department: {type: String},
32
- domain: {type: String}
32
+ domain: {type: String},
33
+ sidebar: {type: Boolean}
33
34
  };
34
35
  }
35
36
 
@@ -46,6 +47,7 @@ export default class UcdlibAuthorProfile extends LitElement {
46
47
  this.results = {};
47
48
  this.email = '';
48
49
  this.domain = '';
50
+
49
51
  this.errorMessage = 'This is not an email.';
50
52
 
51
53
  this.svgIcon = {
@@ -73,21 +75,19 @@ export default class UcdlibAuthorProfile extends LitElement {
73
75
 
74
76
 
75
77
  /**
76
- * @method firstUpdated
78
+ * @method updated
77
79
  *
78
- * @description updated when the page first renders
80
+ * @description request user data when email or domain changes
79
81
  *
80
- * @param {Object} changedProperties
82
+ * @param {Object} props
81
83
  *
82
84
  */
83
- firstUpdated(){
84
- if(this.email != ''){
85
+ updated(props){
86
+ if( props.has('email') || props.has('domain') ){
87
+ if( !this.email ) return;
85
88
  this.eController = new TaskController(this, this._requestUrl());
86
-
87
- this.requestUpdate();
88
89
  }
89
90
  }
90
-
91
91
 
92
92
  /**
93
93
  * @method validationLink
@@ -151,7 +151,6 @@ export default class UcdlibAuthorProfile extends LitElement {
151
151
  this.PENDING = false;
152
152
  this.LOADING = false;
153
153
 
154
-
155
154
  this.id = this.results.id;
156
155
 
157
156
  this.nameLast = this.results.nameLast;
package/{brand/ucd-theme-author-profile/ucd-theme-author-profile.tpl.js → ucdlib/ucdlib-author-profile/ucdlib-author-profile.tpl.js} RENAMED
@@ -40,6 +40,11 @@ export function render() {
40
40
  width: 33.3%;
41
41
  height:18px;
42
42
  }
43
+ .side-bar{
44
+ display: inline-grid;
45
+ grid-template-columns: 15% 85%;
46
+ width:100%;
47
+ }
43
48
  .container {
44
49
  display: inline-grid;
45
50
  grid-template-columns: 15% 85%;
@@ -75,14 +80,14 @@ export function render() {
75
80
  display:inline-block;
76
81
  }
77
82
  .name {
78
- color:var(--ucd-blue-80);
83
+ color: #13639e;
79
84
  margin-bottom:0;
80
85
  }
81
86
  .title {
82
87
  margin-bottom:0;
83
88
  }
84
89
  .info {
85
- color:var(--ucd-blue-80);
90
+ color: #13639e;
86
91
  margin-bottom:0;
87
92
  }
88
93
  .svg-icon {
@@ -106,6 +111,12 @@ export function render() {
106
111
  display:none;
107
112
  }
108
113
 
114
+ @media (min-width:992px) {
115
+ .side-bar{
116
+ grid-template-columns: 25% 75%;
117
+ }
118
+ }
119
+
109
120
  @media (max-width: 800px) {
110
121
 
111
122
  .contact-list {
@@ -127,6 +138,7 @@ export function render() {
127
138
  .container {
128
139
  grid-template-columns: 35% 65%;
129
140
  }
141
+
130
142
  .photo {
131
143
  width:80%;
132
144
  height:80%;
@@ -151,21 +163,21 @@ ${this.eController ? html`
151
163
  ${!this.LOADING ? html`
152
164
  ${this.photo != "Empty" && this.photo != undefined ?
153
165
  html`
154
- <div class="container">
155
- <div class="photo"><img src="${this.photo.link}" alt="${this.photoAlt}"></div>
156
- <div class="text_container">
157
- <h3 class="name"><a class="name" href="">${this.nameFirst} ${this.nameLast}</a></h3>
158
- <p class="title">${this.positionTitle} <span class="pipe">&#124;</span> ${this.department}</p>
159
- <p class="contact-list">${this.contactPhone ? html`${this.svgIcon.phone} <a class="info" href="tel:${this.contactPhone}">${this.contactPhone}</a> <span class="pipe">&#124;</span>`: html``}</p>
160
- <p class="contact-list">${this.contactEmail ? html`${this.svgIcon.email} <a class="info" href="mailto:${this.contactEmail}">${this.contactEmail}</a> ${this.contactAppointmentUrl ? html`<span class="pipe">&#124;</span>`:html`<span class="noApp-pipe">&#124;</span>`}`: html``}</p>
161
- <p class="contact-list">${this.contactAppointmentUrl ? html`${this.svgIcon.calendar} <a class="info" href="${this.contactAppointmentUrl ? this.contactAppointmentUrl:"#"}">Book an Appointment</a>`: html``}</p>
166
+ <div class="${this.sidebar ? 'side-bar':'container'}">
167
+ <div class="photo"><img src="${this.photo.link}" alt="${this.photoAlt}"></div>
168
+ <div class="text_container">
169
+ <h3 class="name"><a class="name" href="">${this.nameFirst} ${this.nameLast}</a></h3>
170
+ <p class="title">${this.positionTitle} <span class="pipe">&#124;</span> ${this.department}</p>
171
+ <p class="contact-list">${this.contactPhone ? html`${this.svgIcon.phone} <a class="info" href="tel:${this.contactPhone}">${this.contactPhone}</a> <span class="pipe">&#124;</span>`: html``}</p>
172
+ <p class="contact-list">${this.contactEmail ? html`${this.svgIcon.email} <a class="info" href="mailto:${this.contactEmail}">${this.contactEmail}</a> ${this.contactAppointmentUrl ? html`<span class="pipe">&#124;</span>`:html`<span class="noApp-pipe">&#124;</span>`}`: html``}</p>
173
+ <p class="contact-list">${this.contactAppointmentUrl ? html`${this.svgIcon.calendar} <a class="info" href="${this.contactAppointmentUrl ? this.contactAppointmentUrl:"#"}">Book an Appointment</a>`: html``}</p>
174
+ </div>
162
175
  </div>
163
- </div>
164
176
  `
165
177
  :html`
166
178
  <div class="container-no-image">
167
179
  <div class="text_container">
168
- <h3 class="name"><a class="name" href="">${this.nameFirst} ${this.nameLast}</a></h3>
180
+ <h3 class="name"><a class="name" href="${this.link}">${this.nameFirst} ${this.nameLast}</a></h3>
169
181
  <p class="title">${this.positionTitle} <span class="pipe">&#124;</span> ${this.department}</p>
170
182
  <p class="contact-list">${this.contactPhone ? html`${this.svgIcon.phone} <a class="info" href="tel:${this.contactPhone}">${this.contactPhone}</a> <span class="pipe">&#124;</span> `: html``}</p>
171
183
  <p class="contact-list">${this.contactEmail ? html`${this.svgIcon.email} <a class="info" href="mailto:${this.contactEmail}">${this.contactEmail}</a> ${this.contactAppointmentUrl ? html`<span class="pipe">&#124;</span>`:html`<span class="noApp-pipe">&#124;</span>`}`: html``}</p>