1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
|
<link rel="import" href="../polymer/polymer.html">
<dom-module id="chops-header">
<template>
<style>
:host {
color: var(--chops-header-text-color);
box-sizing: border-box;
background: hsl(221, 67%, 92%);
font-size: 14px;
width: 100%;
height: 50px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
z-index: 100;
}
a {
color: var(--chops-header-text-color);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
#headerTitle {
font-size: 18px;
display: flex;
align-items: center;
@apply --chops-header-title-theme;
}
#headerTitle img {
height: 32px;
width: 32px;
font-size: 10px;
overflow: hidden;
margin: 0;
}
#headerTitle small {
font-size: 14px;
}
#headerTitleText {
display: flex;
align-items: baseline;
}
#headerTitleTextMain {
padding: 0 8px;
}
.header-section {
padding: 0.5em 16px;
display: flex;
align-items: center;
}
@media (max-width: 840px) {
.header-section {
font-size: 0.8em;
min-width: 10%;
text-align: left;
}
}
</style>
<div class="header-section">
<slot name="before-header"></slot>
<div id="headerTitle">
<template is="dom-if" if="[[logoSrc]]">
<a href="/">
<img src$="[[logoSrc]]" alt$="[[appTitle]] Logo" title$="[[appTitle]] Logo" />
</a>
</template>
<span id="headerTitleText">
<a id="headerTitleTextMain" href="/">
[[appTitle]]
</a>
<small>
<slot name="subheader"></slot>
</small>
</span>
</div>
</div>
<div class="header-section">
<slot></slot>
</div>
</template>
<script>
'use strict';
/**
* `chops-header` is a shared header element for ChOps frontends to use.
*
* This element contains two slots for clients to add content. The default
* slot holds content in the header section to the right of the title. And
* the 'subheader' slot holds content which appears next to the title.
*
*
* @customElement
* @polymer
* @demo /demo/chops-header_demo.html
*/
class ChopsHeader extends Polymer.Element {
static get is() {
return 'chops-header';
}
static get properties() {
return {
/* String for the title of the application. */
appTitle: {
type: String,
value: 'Chops App',
},
/* The home URL for the application. Defaults to '/'. */
homeUrl: {
type: String,
value: '/',
},
/* URL for the image location of the application's logo. No logo is
* shown if this is not specified. */
logoSrc: String,
// TODO(zhangtiff): Also make the :host element extend the "header"
// tag once browsers implement extending native elements with web
// components.
role: {
type: String,
reflectToAttribute: true,
},
};
}
}
customElements.define(ChopsHeader.is, ChopsHeader);
</script>
</dom-module>
|
