Merge pull request #359 from Hiyorimi/bootstrap4

Bootstrap4
master
Steven Loria 6 years ago committed by GitHub
commit 6739104ef7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 1
      {{cookiecutter.app_name}}/assets/js/main.js
  2. 8
      {{cookiecutter.app_name}}/package.json
  3. 36
      {{cookiecutter.app_name}}/{{cookiecutter.app_name}}/templates/layout.html
  4. 77
      {{cookiecutter.app_name}}/{{cookiecutter.app_name}}/templates/nav.html
  5. 6
      {{cookiecutter.app_name}}/{{cookiecutter.app_name}}/templates/public/about.html
  6. 22
      {{cookiecutter.app_name}}/{{cookiecutter.app_name}}/templates/public/home.html
  7. 5
      {{cookiecutter.app_name}}/{{cookiecutter.app_name}}/templates/public/register.html
  8. 6
      {{cookiecutter.app_name}}/{{cookiecutter.app_name}}/templates/users/members.html

@ -7,6 +7,7 @@
// JavaScript modules
require('jquery');
require('font-awesome-webpack');
require('popper.js');
require('bootstrap');
// Your own code

@ -21,9 +21,10 @@
},
"homepage": "https://github.com/{{cookiecutter.github_username}}/{{cookiecutter.app_name}}#readme",
"dependencies": {
"bootstrap": "^3.3.7",
"bootstrap": "^4.1.3",
"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.23.0",
"url-loader": "^1.0.1",
"webpack": "^2.6.1",
"webpack-dev-server": "^3.1.5"
"webpack-dev-server": "^3.1.5",
"sync-exec": "^0.6.2"
}
}

@ -32,28 +32,26 @@
{% endwith %}
<header>{% block header %}{% endblock %}</header>
<div class="{% block content_class %}container{% endblock content_class %}">
<div role="main">
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
<div class="row">
<div class="col-md-12">
{% for category, message in messages %}
<div class="alert alert-{{ category }}">
<a class="close" title="Close" href="#" data-dismiss="alert">&times;</a>
{{message}}
</div><!-- end .alert -->
{% endfor %}
</div><!-- end col-md -->
</div><!-- end row -->
{% endif %}
{% endwith %}
<main role="main">
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
<div class="row">
<div class="col-md-12">
{% for category, message in messages %}
<div class="alert alert-{{ category }}">
<a class="close" title="Close" href="#" data-dismiss="alert">&times;</a>
{{message}}
</div><!-- end .alert -->
{% endfor %}
</div><!-- end col-md -->
</div><!-- end row -->
{% endif %}
{% endwith %}
{% block content %}{% endblock %}
</div>
{% block content %}{% endblock %}
</main>
</div><!-- end container -->
{% include "footer.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-inline" 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">Login</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 %}

@ -2,10 +2,10 @@
{% extends "layout.html" %}
{% block content %}
<div class="body-content">
<div class="container">
<h1 class="mt-5">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>
<p class="lead">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>
{% endblock %}

@ -3,29 +3,31 @@
{% block content %}
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
{% 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><a href="https://github.com/sloria/cookiecutter-flask" class="btn btn-primary btn-large">Learn more &raquo;</a></p>
<div class="container">
{% endraw %}
<h1 class="display-3">Welcome to {{ cookiecutter.project_name }}</h1>
{% raw %}
<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>
</div><!-- /.jumbotron -->
<div class="body-content">
<div class="container">
<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-outline-secondary" 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-outline-secondary">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-outline-secondary">Official website &raquo;</a></p>
</div>
</div><!-- /.row -->
</div>

@ -2,7 +2,7 @@
{% extends "layout.html" %}
{% block content %}
<div class="container-narrow">
<h1>Register</h1>
<h1 class="mt-5">Register</h1>
<br/>
<form id="registerForm" class="form form-register" method="POST" action="" role="form">
{{ form.csrf_token }}
@ -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>

@ -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%}

Loading…
Cancel
Save