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 --> </nav><!-- level -->
</header> </header>
## Page Title ${self.body()}
<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 id="whole-page-app">
<div style="float: right;"> <whole-page></whole-page>
% if prev_url: </div>
${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">${self.content_title()}</h1> ${self.render_whole_page_template()}
% endif ${self.make_whole_page_component()}
</div> ${self.make_whole_page_app()}
</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 -->
</body> </body>
</html> </html>
@ -427,7 +364,68 @@
<%def name="render_whole_page_template()"> <%def name="render_whole_page_template()">
<script type="text/x-template" id="whole-page-template"> <script type="text/x-template" id="whole-page-template">
<div> <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> </div>
</script> </script>
</%def> </%def>
@ -437,10 +435,16 @@
let WholePage = { let WholePage = {
template: '#whole-page-template', template: '#whole-page-template',
methods: {} methods: {
changeContentTitle(newTitle) {
this.contentTitleHTML = newTitle
}
},
} }
let WholePageData = {} let WholePageData = {
contentTitleHTML: ${json.dumps(capture(self.content_title))|n}
}
</script> </script>
</%def> </%def>