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:
		
							parent
							
								
									69eb54abf6
								
							
						
					
					
						commit
						47c2742878
					
				
					 1 changed files with 77 additions and 73 deletions
				
			
		| 
						 | 
					@ -210,58 +210,6 @@
 | 
				
			||||||
      </nav><!-- level -->
 | 
					      </nav><!-- level -->
 | 
				
			||||||
    </header>
 | 
					    </header>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    ## 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">${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()}
 | 
					    ${self.body()}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    <div id="whole-page-app">
 | 
					    <div id="whole-page-app">
 | 
				
			||||||
| 
						 | 
					@ -272,17 +220,6 @@
 | 
				
			||||||
    ${self.make_whole_page_component()}
 | 
					    ${self.make_whole_page_component()}
 | 
				
			||||||
    ${self.make_whole_page_app()}
 | 
					    ${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>
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue