Move the "HUD" content title section into WholePage component

that way, ThisPage can dynamically trigger a change in the title HTML
This commit is contained in:
Lance Edgar 2019-08-03 17:56:18 -05:00
parent 69eb54abf6
commit 47c2742878

View file

@ -210,78 +210,15 @@
</nav><!-- level -->
</header>
## Page Title
<section id="content-title" class="hero is-primary">
<div class="container">
% if capture(self.content_title):
${self.body()}
% if show_prev_next is not Undefined and show_prev_next:
<div style="float: right;">
% if prev_url:
${h.link_to(u"« Older", prev_url, class_='button autodisable')}
% else:
${h.link_to(u"« Older", '#', class_='button', disabled='disabled')}
% endif
% if next_url:
${h.link_to(u"Newer »", next_url, class_='button autodisable')}
% else:
${h.link_to(u"Newer »", '#', class_='button', disabled='disabled')}
% endif
</div>
% endif
<div id="whole-page-app">
<whole-page></whole-page>
</div>
<h1 class="title">${self.content_title()}</h1>
% endif
</div>
</section>
<div class="content-wrapper">
## Page Body
<section id="page-body">
% if request.session.peek_flash('error'):
% for error in request.session.pop_flash('error'):
<div class="notification is-warning">
<!-- <button class="delete"></button> -->
${error}
</div>
% endfor
% endif
% if request.session.peek_flash():
% for msg in request.session.pop_flash():
<div class="notification is-info">
<!-- <button class="delete"></button> -->
${msg}
</div>
% endfor
% endif
## ##############################
## whole page
## ##############################
${self.body()}
<div id="whole-page-app">
<whole-page></whole-page>
</div>
${self.render_whole_page_template()}
${self.make_whole_page_component()}
${self.make_whole_page_app()}
</section>
## Footer
<footer class="footer">
<div class="content">
${base_meta.footer()}
</div>
</footer>
</div><!-- content-wrapper -->
${self.render_whole_page_template()}
${self.make_whole_page_component()}
${self.make_whole_page_app()}
</body>
</html>
@ -427,7 +364,68 @@
<%def name="render_whole_page_template()">
<script type="text/x-template" id="whole-page-template">
<div>
<this-page></this-page>
## Page Title
<section id="content-title" class="hero is-primary">
<div class="container">
% if capture(self.content_title):
% if show_prev_next is not Undefined and show_prev_next:
<div style="float: right;">
% if prev_url:
${h.link_to(u"« Older", prev_url, class_='button autodisable')}
% else:
${h.link_to(u"« Older", '#', class_='button', disabled='disabled')}
% endif
% if next_url:
${h.link_to(u"Newer »", next_url, class_='button autodisable')}
% else:
${h.link_to(u"Newer »", '#', class_='button', disabled='disabled')}
% endif
</div>
% endif
<h1 class="title" v-html="contentTitleHTML"></h1>
% endif
</div>
</section>
<div class="content-wrapper">
## Page Body
<section id="page-body">
% if request.session.peek_flash('error'):
% for error in request.session.pop_flash('error'):
<div class="notification is-warning">
<!-- <button class="delete"></button> -->
${error}
</div>
% endfor
% endif
% if request.session.peek_flash():
% for msg in request.session.pop_flash():
<div class="notification is-info">
<!-- <button class="delete"></button> -->
${msg}
</div>
% endfor
% endif
<this-page
v-on:change-content-title="changeContentTitle">
</this-page>
</section>
## Footer
<footer class="footer">
<div class="content">
${base_meta.footer()}
</div>
</footer>
</div><!-- content-wrapper -->
</div>
</script>
</%def>
@ -437,10 +435,16 @@
let WholePage = {
template: '#whole-page-template',
methods: {}
methods: {
changeContentTitle(newTitle) {
this.contentTitleHTML = newTitle
}
},
}
let WholePageData = {}
let WholePageData = {
contentTitleHTML: ${json.dumps(capture(self.content_title))|n}
}
</script>
</%def>