@ucd-lib/theme-elements 1.0.3 → 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.
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import {html, LitElement} from 'lit';
|
|
2
|
-
import {render, styles} from "./
|
|
2
|
+
import {render, styles} from "./ucdlib-author-profile.tpl.js";
|
|
3
3
|
import {TaskController} from '../../utils/controllers/task.js';
|
|
4
4
|
|
|
5
5
|
/**
|
|
@@ -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 = {
|
|
@@ -149,7 +151,6 @@ export default class UcdlibAuthorProfile extends LitElement {
|
|
|
149
151
|
this.PENDING = false;
|
|
150
152
|
this.LOADING = false;
|
|
151
153
|
|
|
152
|
-
|
|
153
154
|
this.id = this.results.id;
|
|
154
155
|
|
|
155
156
|
this.nameLast = this.results.nameLast;
|
|
@@ -217,4 +218,4 @@ export default class UcdlibAuthorProfile extends LitElement {
|
|
|
217
218
|
|
|
218
219
|
}
|
|
219
220
|
|
|
220
|
-
customElements.define('ucdlib-
|
|
221
|
+
customElements.define('ucdlib-author-profile', UcdlibAuthorProfile);
|
|
@@ -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:
|
|
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:
|
|
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,16 +163,16 @@ ${this.eController ? html`
|
|
|
151
163
|
${!this.LOADING ? html`
|
|
152
164
|
${this.photo != "Empty" && this.photo != undefined ?
|
|
153
165
|
html`
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
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">|</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">|</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">|</span>`:html`<span class="noApp-pipe">|</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">
|