Skip to content

Commit v0.10

Jump to bottom
kwmccabe edited this page Apr 17, 2018 · 8 revisions

v0.10 - Flask-Bootstrap, base.html, navbar_main.html

Files changed (8)

File web/app/init.py MODIFIED

 from flask import Flask
+from flask_bootstrap import Bootstrap
 from config import config
 
+bootstrap = Bootstrap()

 ...
     init_logging(app)
 
+    bootstrap.init_app(app)
+
     from .main import main as main_blueprint
     app.register_blueprint(main_blueprint)

File web/app/main/templates/base.html ADDED

  • Extend the Flask-Bootstrap layout bootstrap/base.html.
  • Add /static/js/flaskapp.js to head scripts.
  • Add /static/css/flaskapp.css to head stylesheets.
  • Create {% block body %} containing {% block navbar %}, {% block header %}, {% block main %}, and {% block footer %}.
+{% extends "bootstrap/base.html" %}
+
+<!-- BLOCK: html_attribs -->
+{% block html_attribs %}{{super()}} lang="en"{% endblock %}
+
+<!-- BLOCK: metas -->
+{% block metas %}{{super()}}{% endblock %}
+
+<!-- BLOCK: styles -->
+{% block styles %}
+    {% block scripts %}{{super()}}
+        <script src="{{url_for('static', filename='js/flaskapp.js')}}"></script>
+    {% endblock %}
+    {{super()}}
+    <link rel="stylesheet" href="{{url_for('static', filename='css/flaskapp.css')}}">
+{% endblock %}
+
+<!-- BLOCK: body_attribs -->
+{% block body_attribs %}{{super()}}{% endblock %}
+
+<!-- BLOCK: title -->
+{% block title %}{{super()}}FlaskApp{% endblock %}
+
+<!-- BLOCK: body, navbar, header, main, footer, scripts -->
+{% block body %}
+
+    {% block navbar %}{% include 'navbar_main.html' %}{% endblock %}
+    {% block header %}
+    <div id="header" class="container-fluid">
+        <div class="row">
+            <div id="header_left" class="col-md-4">
+                {% block header_left %}
+<img id="site_logo" src="/static/media/dot_blank.gif" width="100" />
+<span id="site_title">FlaskApp</span>
+                {% endblock %}
+            </div>
+            <div id="header_center" class="col-md-4 text-center">
+                {% block header_center %}{% endblock %}
+            </div>
+            <div id="header_right" class="col-md-4 text-right">
+                {% block header_right %}{% endblock %}
+            </div>
+        </div>
+        <div class="row">
+            <div id="breadcrumb" class="col-md-12">
+                <ol class="breadcrumb">
+                {% block breadcrumb %}<li><a href="{{ url_for('main.main_home') }}">Home</a></li>{% endblock %}
+                </ol>
+            </div>
+        </div>
+    </div>
+    <hr id="header_hr" size="1"/>
+    {% endblock %}
+
+    {% block main %}
+    <div id="main" class="container-fluid layout-1col">
+        <div class="row">
+            <div id="content" class="col-md-12">
+                {% block content %}block content{% endblock %}
+            </div>
+        </div>
+    </div>
+    {% endblock %}
+
+    {% block footer %}
+    <hr id="footer_hr" size="1"/>
+    <div id="footer" class="container-fluid">
+        <div class="row">
+            <div id="footer_left" class="col-md-4">
+                <p>{% block footer_left %}{% endblock %}</p>
+            </div>
+            <div id="footer_center" class="col-md-4 text-center">
+                <p>{% block footer_center %}<b>&lt;PDXCodeGuild /&gt;</b>{% endblock %}</p>
+            </div>
+            <div id="footer_right" class="col-md-4 text-right">
+                <p>{% block footer_right %}{% endblock %}</p>
+            </div>
+        </div>
+    </div>
+    {% endblock %}
+
+{% endblock %}
+
+
+{# end web/app/main/templates/base.html #}

File web/app/main/templates/index.html MODIFIED

  • Extend base template app/main/templates/base.html.
  • Update {% block title %}.
  • Update {% block content %}.
+{% extends "base.html" %}
+
+{% block title %}{{super()}} - Home{% endblock %}
+
+{% block content %}
 <h1>{{ page_title }}</h1>
 <p>template = /web/app/main/templates/index.html</p>
+{% endblock %}

File web/app/main/templates/navbar_main.html ADDED

+<nav id="navbar_main" class="navbar navbar-default">
+  <div class="container-fluid">
+
+    <div class="navbar-header">
+      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-main-collapse" aria-expanded="false">
+        <span class="sr-only">Toggle navigation</span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+      </button>
+      <a class="navbar-brand" href="/">FlaskApp</a>
+    </div>
+
+    <div class="collapse navbar-collapse" id="navbar-main-collapse">
+      <ul class="nav navbar-nav">
+        <!-- li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li -->
+        <li><a href="#">ItemOne</a></li>
+        <li><a href="#">ItemTwo</a></li>
+        <li class="dropdown">
+          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">ItemThree <span class="caret"></span></a>
+          <ul class="dropdown-menu">
+            <li><a href="#">ItemFour</a></li>
+            <li role="separator" class="divider"></li>
+            <li><a href="#">ItemFive</a></li>
+            <li><a href="#">ItemSix</a></li>
+          </ul>
+        </li>
+      </ul>
+      <form class="navbar-form navbar-right">
+        <div class="form-group">
+          <input type="text" class="form-control" placeholder="Search">
+        </div>
+        <button type="submit" class="btn btn-default">Submit</button>
+      </form>
+    </div><!-- end class="collapse navbar-collapse" -->
+
+  </div><!-- end class="container-fluid" -->
+</nav><!-- end id="navbar_main" -->
+
+{# end web/app/main/templates/navbar_main.html #}

File web/app/static/css/flaskapp.css MODIFIED

 @charset "utf-8";
 
-/* set a temporary body color to confirm this css is included */
-body { background-color: #f5f5f5; }
+body {}
+#header { min-height: 80px; }
+#main   { min-height: 320px; }
+#footer { min-height: 80px; }
+
+#site_logo {
+    margin: 15px;
+    border: 1px dotted black;
+}
+#site_title {
+    font-weight: 500;
+    font-size: 36px;
+    color: mediumblue;
+}
+
+div#breadcrumb > ol {
+    margin-bottom: 0;
+    background-color: #ffffff;
+}

File web/app/templates/hello.html MODIFIED

  • Extend base template app/main/templates/base.html.
  • Update {% block title %}.
  • Update {% block content %}.
+{% extends "base.html" %}
+
+{% block title %}{{super()}} - Hello{% endblock %}
+
+{% block content %}
 <h1>{{ page_title }}</h1>
 <p>template = /web/app/templates/hello.html</p>
+{% endblock %}

File web/config.py MODIFIED

  • Add config values for Flask-Bootstrap.
     SECRET_KEY = os.environ.get('SECRET_KEY') or 'kp-cUHRAYH1n-sPaJICcEE2kOpU62mCk'
     LOG_FILE = _basedir+'/logs/flaskapp.log'
     LOG_LEVEL = logging.ERROR  # CRITICAL,ERROR,WARNING,INFO,DEBUG,NOTSET
+    BOOTSTRAP_USE_MINIFIED = True
+    BOOTSTRAP_SERVE_LOCAL = True
 
     @staticmethod
     def init_app(app):

File web/requirements.txt MODIFIED

  • Add Flask-Bootstrap to list of required pip updates.
 Flask==0.12.2
+Flask-Bootstrap==3.3.7.1
 gunicorn==19.7.1
 Jinja2==2.9.6

Commit-v0.9 | Commit-v0.10 | Commit-v0.11

Clone this wiki locally