pinafore/routes/_components/DynamicPageBanner.html

73 lines
1.5 KiB
HTML
Raw Normal View History

<div class="dynamic-page-banner {{icon ? 'dynamic-page-with-icon' : ''}}">
{{#if icon}}
<svg class="dynamic-page-banner-svg">
<use xlink:href={{icon}} />
</svg>
{{/if}}
2018-01-23 05:16:27 +00:00
<h1 class="dynamic-page-title">{{title}}</h1>
<button type="button"
class="dynamic-page-go-back"
on:click="onGoBack(event)">Back</button>
</div>
<style>
.dynamic-page-banner {
display: grid;
2018-01-23 05:16:27 +00:00
align-items: center;
2018-01-28 02:41:41 +00:00
margin: 20px 20px 20px;
grid-template-columns: 1fr min-content;
grid-column-gap: 10px;
}
.dynamic-page-banner.dynamic-page-with-icon {
grid-template-columns: min-content 1fr min-content;
}
.dynamic-page-banner-svg {
width: 24px;
height: 24px;
fill: var(--body-text-color);
2018-01-23 05:16:27 +00:00
}
.dynamic-page-title {
2018-01-23 05:16:27 +00:00
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dynamic-page-go-back {
2018-01-23 05:16:27 +00:00
font-size: 1.3em;
color: var(--anchor-text);
border: 0;
padding: 0;
background: none;
justify-self: flex-end;
2018-01-23 05:16:27 +00:00
}
.dynamic-page-go-back:hover {
2018-01-23 05:16:27 +00:00
text-decoration: underline;
}
.dynamic-page-go-back::before {
2018-01-23 05:16:27 +00:00
content: '<';
margin-right: 5px;
}
2018-01-29 00:34:18 +00:00
@media (max-width: 767px) {
.dynamic-page-banner {
2018-01-31 06:40:40 +00:00
margin: 20px 10px 20px;
2018-01-29 00:34:18 +00:00
}
.dynamic-page-title {
2018-01-31 06:40:40 +00:00
font-size: 1.3em;
2018-01-29 00:34:18 +00:00
}
.dynamic-page-go-back {
2018-01-31 06:40:40 +00:00
font-size: 1.3em;
2018-01-29 00:34:18 +00:00
}
}
2018-01-23 05:16:27 +00:00
</style>
<script>
export default {
data: () => ({
icon: void 0
}),
2018-01-23 05:16:27 +00:00
methods: {
2018-04-20 04:38:01 +00:00
onGoBack (e) {
2018-01-23 05:16:27 +00:00
e.preventDefault()
2018-02-09 06:44:05 +00:00
window.history.back()
2018-01-23 05:16:27 +00:00
}
}
}
</script>