From 19cdae8adf11d0993c88ba9e6a4acb0e012a7ec5 Mon Sep 17 00:00:00 2001
From: Adam Wallis <adam.wallis@gmail.com>
Date: Tue, 19 Jun 2018 19:18:14 -0400
Subject: [PATCH] Update boostrap to 4.1.1

Updating boostrap required pulling in popper.js (which
required adding sync-exec as a dev dependency). Some
of the templates were updated based on changes from
bootstrap.

Signed-off-by: Adam Wallis <adam.wallis@gmail.com>
---
 {{cookiecutter.app_name}}/assets/js/main.js   |  1 +
 {{cookiecutter.app_name}}/package.json        |  8 +-
 .../templates/nav.html                        | 77 ++++++++++---------
 .../templates/public/about.html               |  4 +-
 .../templates/public/home.html                | 12 +--
 .../templates/public/register.html            |  3 +-
 .../templates/users/members.html              |  6 +-
 7 files changed, 59 insertions(+), 52 deletions(-)

diff --git a/{{cookiecutter.app_name}}/assets/js/main.js b/{{cookiecutter.app_name}}/assets/js/main.js
index bb66bea..ed90e69 100644
--- a/{{cookiecutter.app_name}}/assets/js/main.js
+++ b/{{cookiecutter.app_name}}/assets/js/main.js
@@ -7,6 +7,7 @@
 // JavaScript modules
 require('jquery');
 require('font-awesome-webpack');
+require('popper.js');
 require('bootstrap');
 
 // Your own code
diff --git a/{{cookiecutter.app_name}}/package.json b/{{cookiecutter.app_name}}/package.json
index b1682e8..d723d04 100644
--- a/{{cookiecutter.app_name}}/package.json
+++ b/{{cookiecutter.app_name}}/package.json
@@ -21,9 +21,10 @@
   },
   "homepage": "https://github.com/{{cookiecutter.github_username}}/{{cookiecutter.app_name}}#readme",
   "dependencies": {
-    "bootstrap": "^3.3.7",
+    "bootstrap": "^4.1.1",
     "font-awesome": "^4.7.0",
-    "jquery": "^3.2.1"
+    "jquery": "^3.2.1",
+    "popper.js": "^1.14.3"
   },
   "devDependencies": {
     "babel-core": "^6.25.0",
@@ -45,6 +46,7 @@
     "style-loader": "^0.18.2",
     "url-loader": "^0.5.9",
     "webpack": "^2.6.1",
-    "webpack-dev-server": "^2.4.5"
+    "webpack-dev-server": "^2.4.5",
+    "sync-exec": "^0.6.2"
   }
 }
diff --git a/{{cookiecutter.app_name}}/{{cookiecutter.app_name}}/templates/nav.html b/{{cookiecutter.app_name}}/{{cookiecutter.app_name}}/templates/nav.html
index faeec2d..784bcc1 100644
--- a/{{cookiecutter.app_name}}/{{cookiecutter.app_name}}/templates/nav.html
+++ b/{{cookiecutter.app_name}}/{{cookiecutter.app_name}}/templates/nav.html
@@ -1,49 +1,50 @@
 {% raw %}
-<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
-  <div class="container">
+<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
+  <a class="navbar-brand" href="{{ url_for('public.home') }}">
+    {% endraw %} {{cookiecutter.project_name}} {% raw %}
+  </a>
+  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
+    aria-expanded="false" aria-label="Toggle navigation">
+    <span class="navbar-toggler-icon"></span>
+  </button>
 
-  <!-- Brand and toggle get grouped for better mobile display -->
-  <div class="navbar-header">
-    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
-      <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="{{ url_for('public.home') }}">
-{% endraw %}
-      {{cookiecutter.project_name}}
-{% raw %}
-    </a>
-  </div>
-  <!-- Collect the nav links, forms, and other content for toggling -->
-  <div class="collapse navbar-collapse navbar-ex1-collapse">
-    <ul class="nav navbar-nav">
-      <li><a href="{{ url_for('public.home') }}">Home</a></li>
-      <li><a href="{{ url_for('public.about') }}">About</a></li>
+  <div class="collapse navbar-collapse" id="navbarSupportedContent">
+    <ul class="navbar-nav mr-auto">
+      <li class="nav-item active">
+        <a class="nav-link" href="{{ url_for('public.home') }}">Home
+          <span class="sr-only">(current)</span>
+        </a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="{{ url_for('public.about') }}">About</a>
+      </li>
     </ul>
     {% if current_user and current_user.is_authenticated %}
-    <ul class="nav navbar-nav navbar-right">
-        <li>
-            <p class="navbar-text"><a class="navbar-link" href="{{ url_for('user.members') }}">Logged in as {{ current_user.username }}</a></p>
-        </li>
-        <li><a class="navbar-link" href="{{ url_for('public.logout') }}"><i class="fa fa-sign-out"></i></a></li>
-
+    <ul class="navbar-nav my-auto">
+      <li class="nav-item active">
+        <a class="nav-link" href="{{ url_for('user.members') }}">Logged in as {{ current_user.username }}</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="{{ url_for('public.logout') }}">
+          <i class="fa fa-sign-out"></i>
+        </a>
+      </li>
     </ul>
     {% elif form %}
-    <ul class="nav navbar-nav navbar-right">
-      <li><a href="{{ url_for('public.register') }}">Create account</a></li>
-    </ul>
-    <form id="loginForm" method="POST" class="navbar-form form-inline navbar-right" action="/" role="login">
-      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
-      <div class="form-group">
-        {{ form.username(placeholder="Username", class_="form-control") }}
-        {{ form.password(placeholder="Password", class_="form-control") }}
+    <form class="form" id="loginForm" method="POST" action="/" role="login">
+      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
+      <div class="input-group mb-2 mr-sm-2">
+        {{ form.username(placeholder="Username", class_="form-control mr-sm-1 my-auto") }} {{ form.password(placeholder="Password",
+        class_="form-control mr-sm-1 my-auto") }}
+        <button class="btn btn-light btn-primary m-auto" type="submit">submit</button>
       </div>
-      <button type="submit" class="btn btn-default">Log in</button>
     </form>
+    <ul class="navbar-nav my-auto">
+      <li class="nav-item">
+        <a class="nav-link navbar-text" href="{{ url_for('public.register') }}">Create account</a>
+      </li>
+    </ul>
     {% endif %}
   </div><!-- /.navbar-collapse -->
-  </div><!-- /.container -->
 </nav>
-{% endraw %}
+{% endraw %}
\ No newline at end of file
diff --git a/{{cookiecutter.app_name}}/{{cookiecutter.app_name}}/templates/public/about.html b/{{cookiecutter.app_name}}/{{cookiecutter.app_name}}/templates/public/about.html
index 1d31fad..7365ee4 100644
--- a/{{cookiecutter.app_name}}/{{cookiecutter.app_name}}/templates/public/about.html
+++ b/{{cookiecutter.app_name}}/{{cookiecutter.app_name}}/templates/public/about.html
@@ -2,9 +2,9 @@
 {% extends "layout.html" %}
 
 {% block content %}
-<div class="body-content">
+<div class="container">
+    <h1>About</h1>
     <div class="row">
-      <h1>About</h1>
       <p>This template was created by <a href="http://github.com/sloria/">Steven Loria</a> for use with the <a href="http://github.com/audreyr/cookiecutter/">cookiecutter</a> package by <a href="http://github.com/audreyr/">Audrey Roy</a>.</p>
     </div>
 </div>
diff --git a/{{cookiecutter.app_name}}/{{cookiecutter.app_name}}/templates/public/home.html b/{{cookiecutter.app_name}}/{{cookiecutter.app_name}}/templates/public/home.html
index 3485a6d..4a8476b 100644
--- a/{{cookiecutter.app_name}}/{{cookiecutter.app_name}}/templates/public/home.html
+++ b/{{cookiecutter.app_name}}/{{cookiecutter.app_name}}/templates/public/home.html
@@ -2,30 +2,30 @@
 {% extends "layout.html" %}
 {% block content %}
 <!-- Main jumbotron for a primary marketing message or call to action -->
-<div class="jumbotron">
+<div class="jumbotron my-2">
 {% endraw %}
   <h1>Welcome to {{ cookiecutter.project_name }}</h1>
 {% raw %}
-  <p>This is a starter Flask template. It includes Bootstrap 3, jQuery 2, Flask-SQLAlchemy, WTForms, and various testing utilities out of the box.</p>
+  <p>This is a starter Flask template. It includes Bootstrap 4, jQuery 3, Flask-SQLAlchemy, WTForms, and various testing utilities out of the box.</p>
   <p><a href="https://github.com/sloria/cookiecutter-flask" class="btn btn-primary btn-large">Learn more &raquo;</a></p>
 </div><!-- /.jumbotron -->
 
 <div class="body-content">
   <div class="row">
     <div class="col-lg-4">
-      <h2><i class="fa fa-code"></i> Bootstrap 3</h2>
+      <h2><i class="fa fa-code"></i> Bootstrap 4</h2>
       <p>Sleek, intuitive, and powerful mobile-first front-end framework for faster and easier web development.</p>
-      <p><a class="btn btn-default" href="http://getbootstrap.com/">Official website &raquo;</a></p>
+      <p><a class="btn btn-primary" href="http://getbootstrap.com/">Official website &raquo;</a></p>
     </div>
     <div class="col-lg-4">
       <h2><i class="fa fa-flask"></i> SQLAlchemy</h2>
       <p>SQLAlchemy is the Python SQL toolkit and Object Relational Mapper that gives application developers the full power and flexibility of SQL.</p>
-      <p><a href="http://www.sqlalchemy.org/" class="btn btn-default">Official website &raquo;</a></p>
+      <p><a href="http://www.sqlalchemy.org/" class="btn btn-primary">Official website &raquo;</a></p>
    </div>
     <div class="col-lg-4">
       <h2><i class="fa fa-edit"></i> WTForms</h2>
       <p>WTForms is a flexible forms validation and rendering library for python web development.</p>
-      <p><a href="http://wtforms.simplecodes.com/" class="btn btn-default">Official website &raquo;</a></p>
+      <p><a href="http://wtforms.simplecodes.com/" class="btn btn-primary">Official website &raquo;</a></p>
     </div>
   </div><!-- /.row -->
 </div>
diff --git a/{{cookiecutter.app_name}}/{{cookiecutter.app_name}}/templates/public/register.html b/{{cookiecutter.app_name}}/{{cookiecutter.app_name}}/templates/public/register.html
index 7a97035..1629089 100644
--- a/{{cookiecutter.app_name}}/{{cookiecutter.app_name}}/templates/public/register.html
+++ b/{{cookiecutter.app_name}}/{{cookiecutter.app_name}}/templates/public/register.html
@@ -13,6 +13,7 @@
             <div class="form-group">
                 {{form.email.label}}
                 {{form.email(placeholder="Email", class_="form-control")}}
+                <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
             </div>
             <div class="form-group">
                 {{form.password.label}}
@@ -22,7 +23,7 @@
                 {{form.confirm.label}}
                 {{form.confirm(placeholder="Password (again)", class_="form-control")}}
             </div>
-            <p><input class="btn btn-default btn-submit" type="submit" value="Register"></p>
+            <p><input class="btn btn-primary" type="submit" value="Register"></p>
     </form>
     <p><em>Already registered?</em> Click <a href="/">here</a> to login.</p>
 </div>
diff --git a/{{cookiecutter.app_name}}/{{cookiecutter.app_name}}/templates/users/members.html b/{{cookiecutter.app_name}}/{{cookiecutter.app_name}}/templates/users/members.html
index 5179bfb..6bd2c26 100644
--- a/{{cookiecutter.app_name}}/{{cookiecutter.app_name}}/templates/users/members.html
+++ b/{{cookiecutter.app_name}}/{{cookiecutter.app_name}}/templates/users/members.html
@@ -1,7 +1,9 @@
 {% raw %}
 {% extends "layout.html" %}
 {% block content %}
-    <h1>Welcome {{ current_user.username }}</h1>
-    <h3>This is the members-only page.</h3>
+    <div class="container">
+        <h1>Welcome {{ current_user.username }}</h1>
+        <h3>This is the members-only page.</h3>
+    </div>
 {% endblock %}
 {% endraw%}