This repository has been archived by the owner on Aug 31, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdemo-block.html
225 lines (195 loc) · 20.6 KB
/
demo-block.html
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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
<link rel="import" href="../polymer/polymer.html">
<!-- Iron elements -->
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../iron-icon/iron-icon.html">
<link rel="import" href="../iron-image/iron-image.html">
<!-- Paper elements -->
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../paper-material/paper-material.html">
<link rel="import" href="../paper-menu-button/paper-menu-button.html">
<link rel="import" href="../paper-tabs/paper-tabs.html">
<!-- Molecule elements -->
<link rel="import" href="../marked-element/marked-element.html">
<!-- Custom elements -->
<link rel="import" href="content-icons.html">
<link rel="import" href="../social-share-buttons/social-share-buttons.html">
<link rel="import" href="../social-share-buttons/social-share-icons.html">
<!-- Styles -->
<link rel="import" href="shared-markdown-styles.html">
<!--
Material design: [Cards](https://www.google.com/design/spec/components/cards.html)
`demo-block` is a paper-material card w/ header image, markdown support, author footer and sharing button.
Example:
<demo-block
header="Hello World"
body="It's a beautiful day!"></demo-block>
### Styling
The following custom properties and mixins are available for styling:
Custom property | Description | Default
----------------|-------------|----------
`--block-container` | Mixin applied to the entire block section | `{}`
`--block-main-color` | The color of headers, rules, tables, links, etc. | `#616161`
`--block-background-color` | The background color of the block | `#fff`
`--block-content-color` | The color of the content/action text | `#616161`
`--block-header` | Mixin applied to the block header section | `{}`
`--block-content` | Mixin applied to the block content section | `{}`
`--block-actions` | Mixin applied to the block action section | `{}`
@element demo-block
@demo demo/block/index.html
-->
<dom-module id="demo-block">
<template>
<style include="shared-markdown-styles">
:host {
display: block;
}
paper-material {
width: 100%;
min-width: calc(280px + 32px);
border-radius: 3px;
background-color: var(--block-background-color, #fff);
@apply --block-container;
}
paper-material .card-image iron-image {
border-top-left-radius: 3px;
border-top-right-radius: 3px;
width: 100%;
height: 25vmin;
}
paper-material .card-header {
-webkit-font-smoothing: antialiased;
font-size: 34px;
font-weight: 400;
letter-spacing: -.01em;
line-height: 40px;
min-width: 280px;
width: 80%;
padding: 0 16px;
margin: 16px auto 0 auto;
color: var(--block-main-color, #616161);
@apply --block-header;
}
paper-material .card-content {
color: var(--block-content-color, #616161);
width: 80%;
min-width: 280px;
margin: 0 auto;
font-size: 16px;
line-height: 28px;
text-align: justify;
@apply --block-content;
}
paper-material .card-author {
margin: 8px 0;
@apply(--layout-horizontal);
@apply(--layout-center-justified);
@apply(--layout-center);
}
paper-material .card-author iron-image {
width: 48px;
height: 48px;
border-radius: 50%;
}
paper-material .card-author .info {
margin-left: 8px;
}
paper-material .card-author .info > p {
margin: 4px 0;
}
paper-material .card-actions {
@apply(--layout-horizontal);
@apply(--layout-end-justified);
border-top: 1px solid #e8e8e8;
padding: 5px 16px;
position: relative;
color: var(--block-content-color, #616161);
@apply --block-actions;
}
paper-material .card-actions paper-menu-button {
color: var(--block-main-color, #616161);
}
</style>
<paper-material elevation="1">
<div class="card-image">
<iron-image
preload
fade
sizing="cover"
src$="[[headerImage]]"
placeholder="data:image/png;base64,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ycSE//8H+OIHCW5xCQaIRgOyqog5nVTnTjsDA90Hzsx5OiHTS9Xpe59zE/Na1VUHLl269GjyIECAAAECBAgQIECAAIF2AgfbzdiECRAgQIAAAQIECBAgQGAhIBBaCAQIECBAgAABAgQIEGgqIBA2bbxpEyBAgAABAgQIECBAQCC0BggQIECAAAECBAgQINBUQCBs2njTJkCAAAECBAgQIECAgEBoDRAgQIAAAQIECBAgQKCpgEDYtPGmTYAAAQIECBAgQIAAAYHQGiBAgAABAgQIECBAgEBTAYGwaeNNmwABAgQIECBAgAABAgKhNUCAAAECBAgQIECAAIGmAgJh08abNgECBAgQIECAAAECBARCa4AAAQIECBAgQIAAAQJNBQTCpo03bQIECBAgQIAAAQIECAiE1gABAgQIECBAgAABAgSaCgiETRtv2gQIECBAgAABAgQIEBAIrQECBAgQIECAAAECBAg0FRAImzbetAkQIECAAAECBAgQICAQWgMECBAgQIAAAQIECBBoKiAQNm28aRMgQIAAAQIECBAgQEAgtAYIECBAgAABAgQIECDQVEAgbNp40yZAgAABAgQIECBAgIBAaA0QIECAAAECBAgQIECgqYBA2LTxpk2AAAECBAgQIECAAAGB0BogQIAAAQIECBAgQIBAUwGBsGnjTZsAAQIECBAgQIAAAQICoTVAgAABAgQIECBAgACBpgICYdPGmzYBAgQIECBAgAABAgQEQmuAAAECBAgQIECAAAECTQUEwqaNN20CBAgQIECAAAECBAgIhNYAAQIECBAgQIAAAQIEmgoIhE0bb9oECBAgQIAAAQIECBAQCK0BAgQIECBAgAABAgQINBUQCJs23rQJECBAgAABAgQIECAgEFoDBAgQIECAAAECBAgQaCogEDZtvGkTIECAAAECBAgQIEBAILQGCBAgQIAAAQIECBAg0FRAIGzaeNMmQIAAAQIECBAgQICAQGgNECBAgAABAgQIECBAoKmAQNi08aZNgAABAgQIECBAgAABgdAaIECAAAECBAgQIECAQFMBgbBp402bAAECBAgQIECAAAECAqE1QIAAAQIECBAgQIAAgaYCAmHTxps2AQIECBAgQIAAAQIEBEJrgAABAgQIECBAgAABAk0FBMKmjTdtAgQIECBAgAABAgQICITWAAECBAgQIECAAAECBJoKCIRNG2/aBAgQIECAAAECBAgQEAitAQIECBAgQIAAAQIECDQVEAibNt60CRAgQIAAAQIECBAgIBBaAwQIECBAgAABAgQIEGgqIBA2bbxpEyBAgAABAgQIECBAQCC0BggQIECAAAECBAgQINBUQCBs2njTJkCAAAECBAgQIECAgEBoDRAgQIAAAQIECBAgQKCpgEDYtPGmTYAAAQIECBAgQIAAAYHQGiBAgAABAgQIECBAgEBTAYGwaeNNmwABAgQIECBAgAABAgKhNUCAAAECBAgQIECAAIGmAgJh08abNgECBAgQIECAAAECBARCa4AAAQIECBAgQIAAAQJNBQTCpo03bQIECBAgQIAAAQIECAiE1gABAgQIECBAgAABAgSaCgiETRtv2gQIECBAgAABAgQIEBAIrQECBAgQIECAAAECBAg0FRAImzbetAkQIECAAAECBAgQICAQWgMECBAgQIAAAQIECBBoKiAQNm28aRMgQIAAAQIECBAgQEAgtAYIECBAgAABAgQIECDQVEAgbNp40yZAgAABAgQIECBAgIBAaA0QIECAAAECBAgQIECgqYBA2LTxpk2AAAECBAgQIECAAAGB0BogQIAAAQIECBAgQIBAUwGBsGnjTZsAAQIECBAgQIAAAQICoTVAgAABAgQIECBAgACBpgICYdPGmzYBAgQIECBAgAABAgQEQmuAAAECBAgQIECAAAECTQUEwqaNN20CBAgQIECAAAECBAgIhNYAAQIECBAgQIAAAQIEmgoIhE0bb9oECBAgQIAAAQIECBAQCK0BAgQIECBAgAABAgQINBUQCJs23rQJECBAgAABAgQIECAgEFoDBAgQIECAAAECBAgQaCogEDZtvGkTIECAAAECBAgQIEBAILQGCBAgQIAAAQIECBAg0FRAIGzaeNMmQIAAAQIECBAgQICAQGgNECBAgAABAgQIECBAoKmAQNi08aZNgAABAgQIECBAgAABgdAaIECAAAECBAgQIECAQFMBgbBp402bAAECBAgQIECAAAECAqE1QIAAAQIECBAgQIAAgaYCAmHTxps2AQIECBAgQIAAAQIEBEJrgAABAgQIECBAgAABAk0FBMKmjTdtAgQIECBAgAABAgQICITWAAECBAgQIECAAAECBJoKCIRNG2/aBAgQIECAAAECBAgQEAitAQIECBAgQIAAAQIECDQVEAibNt60CRAgQIAAAQIECBAgIBBaAwQIECBAgAABAgQIEGgqIBA2bbxpEyBAgAABAgQIECBAQCC0BggQIECAAAECBAgQINBUQCBs2njTJkCAAAECBAgQIECAgEBoDRAgQIAAAQIECBAgQKCpgEDYtPGmTYAAAQIECBAgQIAAAYHQGiBAgAABAgQIECBAgEBTAYGwaeNNmwABAgQIECBAgAABAgKhNUCAAAECBAgQIECAAIGmAgJh08abNgECBAgQIECAAAECBARCa4AAAQIECBAgQIAAAQJNBQTCpo03bQIECBAgQIAAAQIECAiE1gABAgQIECBAgAABAgSaCgiETRtv2gQIECBAgAABAgQIEBAIrQECBAgQIECAAAECBAg0FRAImzbetAkQIECAAAECBAgQICAQWgMECBAgQIAAAQIECBBoKiAQNm28aRMgQIAAAQIECBAgQEAgtAYIECBAgAABAgQIECDQVEAgbNp40yZAgAABAgQIECBAgIBAaA0QIECAAAECBAgQIECgqYBA2LTxpk2AAAECBAgQIECAAAGB0BogQIAAAQIECBAgQIBAUwGBsGnjTZsAAQIECBAgQIAAAQICoTVAgAABAgQIECBAgACBpgICYdPGmzYBAgQIECBAgAABAgQEQmuAAAECBAgQIECAAAECTQUEwqaNN20CBAgQIECAAAECBAgIhNYAAQIECBAgQIAAAQIEmgoIhE0bb9oECBAgQIAAAQIECBAQCK0BAgQIECBAgAABAgQINBUQCJs23rQJECBAgAABAgQIECAgEFoDBAgQIECAAAECBAgQaCogEDZtvGkTIECAAAECBAgQIEBAILQGCBAgQIAAAQIECBAg0FRAIGzaeNMmQIAAAQIECBAgQICAQGgNECBAgAABAgQIECBAoKmAQNi08aZNgAABAgQIECBAgAABgdAaIECAAAECBAgQIECAQFMBgbBp402bAAECBAgQIECAAAECAqE1QIAAAQIECBAgQIAAgaYCAmHTxps2AQIECBAgQIAAAQIEBEJrgAABAgQIECBAgAABAk0FBMKmjTdtAgQIECBAgAABAgQICITWAAECBAgQIECAAAECBJoKCIRNG2/aBAgQIECAAAECBAgQEAitAQIECBAgQIAAAQIECDQVEAibNt60CRAgQIAAAQIECBAgIBBaAwQIECBA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YwyLAAECBAgQIECAAAEC2QICYbaw+gQIECBAgAABAgQIECgqIBAWbYxhESBAgAABAgQIECBAIFtAIMwWVp8AAQIECBAgQIAAAQJFBQTCoo0xLAIECBAgQIAAAQIECGQLCITZwuoTIECAAAECBAgQIECgqIBAWLQxhkWAAAECBAgQIECAAIFsAYEwW1h9AgQIECBAgAABAgQIFBUQCIs2xrAIECBAgAABAgQIECCQLSAQZgurT4AAAQIECBAgQIAAgaICAmHRxhgWAQIECBAgQIAAAQIEsgUEwmxh9QkQIECAAAECBAgQIFBUQCAs2hjDIkCAAAECBAgQIECAQLaAQJgtrD4BAgQIECBAgAABAgSKCgiERRtjWAQIECBAgAABAgQIEMgWEAizhdUnQIAAAQIECBAgQIBAUQGBsGhjDIsAAQIECBAgQIAAAQLZAgJhtrD6BAgQIECAAAECBAgQKCogEBZtjGERIECAAAECBAgQIEAgW0AgzBZWnwABAgQIECBAgAABAkUFBMKijTEsAgQIECBAgAABAgQIZAsIhNnC6hMgQIAAAQIECBAgQKCogEBYtDGGRYAAAQIECBAgQIAAgWwBgTBbWH0CBAgQIECAAAECBAgUFRAIizbGsAgQIECAAAECBAgQIJAtIBBmC6tPgAABAgQIECBAgACBogICYdHGGBYBAgQIECBAgAABAgSyBQTCbGH1CRAgQIAAAQIECBAgUFRAICzaGMMiQIAAAQIECBAgQIBAtoBAmC2sPgECBAgQIECAAAECBIoKCIRFG2NYBAgQIECAAAECBAgQyBYQCLOF1SdAgAABAgQIECBAgEBRAYGwaGMMiwABAgQIECBAgAABAtkCAmG2sPoECBAgQIAAAQIECBAoKiAQFm2MYREgQIAAAQIECBAgQCBbQCDMFlafAAECBAgQIECAAAECRQUEwqKNMSwCBAgQIECAAAECBAhkCwiE2cLqEyBAgAABAgQIECBAoKiAQFi0MYZFgAABAgQIECBAgACBbAGBMFtYfQIECBAgQIAAAQIECBQVEAiLNsawCBAgQIAAAQIECBAgkC0gEGYLq0+AAAECBAgQIECAAIGiAgJh0cYYFgECBAgQIECAAAECBLIFBMJsYfUJECBAgAABAgQIECBQVEAgLNoYwyJAgAABAgQIECBAgEC2gECYLaw+AQIECBAgQIAAAQIEigoIhEUbY1gECBAgQIAAAQIECBDIFhAIs4XVJ0CAAAECBAgQIECAQFEBgbBoYwyLAAECBAgQIECAAAEC2QICYbaw+gQIECBAgAABAgQIECgqIBAWbYxhESBAgAABAgQIECBAIFtAIMwWVp8AAQIECBAgQIAAAQJFBQTCoo0xLAIECBAgQIAAAQIECGQLCITZwuoTIECAAAECBAgQIECgqIBAWLQxhkWAAAECBAgQIECAAIFsAYEwW1h9AgQIECBAgAABAgQIFBUQCIs2xrAIECBAgAABAgQIECCQLSAQZgurT4AAAQIECBAgQIAAgaICAmHRxhgWAQIECBAgQIAAAQIEsgUEwmxh9QkQIECAAAECBAgQIFBUQCAs2hjDIkCAAAECBAgQIECAQLaAQJgtrD4BAgQIECBAgAABAgSKCgiERRtjWAQIECBAgAABAgQIEMgWEAizhdUnQIAAAQIECBAgQIBAUQGBsGhjDIsAAQIECBAgQIAAAQLZAgJhtrD6BAgQIECAAAECBAgQKCogEBZtjGERIECAAAECBAgQIEAgW0AgzBZWnwABAgQIECBAgAABAkUFBMKijTEsAgQIECBAgAABAgQIZAsIhNnC6hMgQIAAAQIECBAgQKCogEBYtDGGRYAAAQIECBAgQIAAgWwBgTBbWH0CBAgQIECAAAECBAgUFRAIizbGsAgQIECAAAECBAgQIJAtIBBmC6tPgAABAgQIECBAgACBogICYdHGGBYBAgQIECBAgAABAgSyBQTCbGH1CRAgQIAAAQIECBAgUFRAICzaGMMiQIAAAQIECBAgQIBAtoBAmC2sPgECBAgQIECAAAECBIoKCIRFG2NYBAgQIECAAAECBAgQyBYQCLOF1SdAgAABAgQIECBAgEBRAYGwaGMMiwABAgQIECBAgAABAtkCAmG2sPoECBAgQIAAAQIECBAoKiAQFm2MYREgQIAAAQIECBAgQCBbQCDMFlafAAECBAgQIECAAAECRQUEwqKNMSwCBAgQIECAAAECBAhkCwiE2cLqEyBAgAABAgQIECBAoKiAQFi0MYZFgAABAgQIECBAgACBbAGBMFtYfQIECBAgQIAAAQIECBQVEAiLNsawCBAgQIAAAQIECBAgkC0gEGYLq0+AAAECBAgQIECAAIGiAgJh0cYYFgECBAgQIECAAAECBLIFBMJsYfUJECBAgAABAgQIECBQVEAgLNoYwyJAgAABAgQIECBAgEC2gECYLaw+AQIECBAgQIAAAQIEigoIhEUbY1gECBAgQIAAAQIECBDIFhAIs4XVJ0CAAAECBAgQIECAQFEBgbBoYwyLAAECBAgQIECAAAEC2QICYbaw+gQIECBAgAABAgQIECgqIBAWbYxhESBAgAABAgQIECBAIFtAIMwWVp8AAQIECBAgQIAAAQJFBQTCoo0xLAIECBAgQIAAAQIECGQLCITZwuoTIECAAAECBAgQIECgqIBAWLQxhkWAAAECBAgQIECAAIFsAYEwW1h9AgQIECBAgAABAgQIFBUQCIs2xrAIECBAgAABAgQIECCQLSAQZgurT4AAAQIECBAgQIAAgaICAmHRxhgWAQIECBAgQIAAAQIEsgUEwmxh9QkQIECAAAECBAgQIFBUQCAs2hjDIkCAAAECBAgQIECAQLaAQJgtrD4BAgQIECBAgAABAgSKCgiERRtjWAQIECBAgAABAgQIEMgWEAizhdUnQIAAAQIECBAgQIBAUQGBsGhjDIsAAQIECBAgQIAAAQLZAgJhtrD6BAgQIECAAAECBAgQKCogEBZtjGERIECAAAECBAgQIEAgW0AgzBZWnwABAgQIECBAgAABAkUFBMKijTEsAgQIECBAgAABAgQIZAsIhNnC6hMgQIAAAQIECBAgQKCogEBYtDGGRYAAAQIECBAgQIAAgWwBgTBbWH0CBAgQIECAAAECBAgUFRAIizbGsAgQIECAAAECBAgQIJAtIBBmC6tPgAABAgQIECBAgACBogICYdHGGBYBAgQIECBAgAABAgSyBQTCbGH1CRAgQIAAAQIECBAgUFRAICzaGMMiQIAAAQIECBAgQIBAtoBAmC2sPgECBAgQIECAAAECBIoKCIRFG2NYBAgQIECAAAECBAgQyBYQCLOF1SdAgAABAgQIECBAgEBRAYGwaGMMiwABAgQIECBAgAABAtkCAmG2sPoECBAgQIAAAQIECBAoKiAQFm2MYREgQIAAAQIECBAgQCBbQCDMFlafAAECBAgQIECAAAECRQUEwqKNMSwCBAgQIECAAAECBAhkCwiE2cLqEyBAgAABAgQIECBAoKiAQFi0MYZFgAABAgQIECBAgACBbAGBMFtYfQIECBAgQIAAAQIECBQVEAiLNsawCBAgQIAAAQIECBAgkC0gEGYLq0+AAAECBAgQIECAAIGiAgJh0cYYFgECBAgQIECAAAECBLIFBMJsYfUJECBAgAABAgQIECBQVOA/lrnVek5hvqYAAAAASUVORK5CYII="></iron-image>
</div>
<div class="card-header">[[header]]</div>
<div class="card-content">
<marked-element
markdown="[[body]]">
<div class="markdown-html"></div>
</marked-element>
</div>
<div class="card-author">
<iron-image
sizing="contain"
src="[[author.image]]"></iron-image>
<div class="info">
<b>[[author.name]]</b>
<p>[[author.mail]]</p>
</div>
</div>
<div class="card-actions">
<paper-menu-button
no-overlap
horizontal-align="right">
<paper-icon-button icon="content-icons:share" class="dropdown-trigger"></paper-icon-button>
<social-share-buttons class="dropdown-content"
media="[[headerImage]]"
url="[[url]]"
title="[[header]]">
<paper-tabs>
<paper-tab>
<iron-icon class="twitter" data-share-id="twitter" icon="social-share:twitter"></iron-icon>
</paper-tab>
<paper-tab>
<iron-icon class="facebook" data-share-id="facebook" icon="social-share:facebook"></iron-icon>
</paper-tab>
<paper-tab>
<iron-icon class="google" data-share-id="google" icon="social-share:googleplus"></iron-icon>
</paper-tab>
<paper-tab>
<iron-icon class="linkedin" data-share-id="linkedin" icon="social-share:linkedin"></iron-icon>
</paper-tab>
</paper-tabs>
</social-share-button>
</paper-menu-button>
</div>
</paper-material>
</template>
<script>
Polymer({
is: 'demo-block',
properties: {
header: {
type: String
},
headerImage: {
type: String
},
body: {
type: String
},
author: {
type: Object,
value: function() {
return {};
}
},
url: {
type: String,
value: function() {
return window.location.href;
}
}
},
behaviors: [],
listeners: {}
});
</script>
</dom-module>