Pinafore-Web-Client-Frontend/routes/_components/DynamicPageBanner.html

55 lines
1.1 KiB
HTML

<div class="dynamic-page-banner">
<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: flex;
align-items: center;
justify-content: space-between;
margin: 20px 20px 20px;
}
h1.dynamic-page-title {
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
button.dynamic-page-go-back {
font-size: 1.3em;
color: var(--anchor-text);
border: 0;
padding: 0;
background: none;
}
button.dynamic-page-go-back:hover {
text-decoration: underline;
}
button.dynamic-page-go-back::before {
content: '<';
margin-right: 5px;
}
@media (max-width: 767px) {
.dynamic-page-banner {
margin: 20px 10px 20px;
}
h1.dynamic-page-title {
font-size: 1.3em;
}
button.dynamic-page-go-back {
font-size: 1.3em;
}
}
</style>
<script>
export default {
methods: {
onGoBack(e) {
e.preventDefault()
window.history.back();
}
}
}
</script>