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 // JavaScript modules
require('jquery'); require('jquery');
require('font-awesome-webpack'); require('font-awesome-webpack');
require('popper.js');
require('bootstrap'); require('bootstrap');
// Your own code // Your own code

@ -21,9 +21,10 @@
}, },
"homepage": "https://github.com/{{cookiecutter.github_username}}/{{cookiecutter.app_name}}#readme", "homepage": "https://github.com/{{cookiecutter.github_username}}/{{cookiecutter.app_name}}#readme",
"dependencies": { "dependencies": {
"bootstrap": "^3.3.7", "bootstrap": "^4.1.3",
"font-awesome": "^4.7.0", "font-awesome": "^4.7.0",
"jquery": "^3.2.1" "jquery": "^3.2.1",
"popper.js": "^1.14.3"
}, },
"devDependencies": { "devDependencies": {
"babel-core": "^6.25.0", "babel-core": "^6.25.0",
@ -45,6 +46,7 @@
"style-loader": "^0.23.0", "style-loader": "^0.23.0",
"url-loader": "^1.0.1", "url-loader": "^1.0.1",
"webpack": "^2.6.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 %} {% endwith %}
<header>{% block header %}{% endblock %}</header> <header>{% block header %}{% endblock %}</header>
<div class="{% block content_class %}container{% endblock content_class %}">
<div role="main"> <main role="main">
{% with messages = get_flashed_messages(with_categories=true) %} {% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %} {% if messages %}
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
{% for category, message in messages %} {% for category, message in messages %}
<div class="alert alert-{{ category }}"> <div class="alert alert-{{ category }}">
<a class="close" title="Close" href="#" data-dismiss="alert">&times;</a> <a class="close" title="Close" href="#" data-dismiss="alert">&times;</a>
{{message}} {{message}}
</div><!-- end .alert --> </div><!-- end .alert -->
{% endfor %} {% endfor %}
</div><!-- end col-md --> </div><!-- end col-md -->
</div><!-- end row --> </div><!-- end row -->
{% endif %} {% endif %}
{% endwith %} {% endwith %}
{% block content %}{% endblock %} {% block content %}{% endblock %}
</div> </main>
</div><!-- end container -->
{% include "footer.html" %} {% include "footer.html" %}

@ -1,49 +1,50 @@
{% raw %} {% raw %}
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container"> <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="collapse navbar-collapse" id="navbarSupportedContent">
<div class="navbar-header"> <ul class="navbar-nav mr-auto">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <li class="nav-item active">
<span class="sr-only">Toggle navigation</span> <a class="nav-link" href="{{ url_for('public.home') }}">Home
<span class="icon-bar"></span> <span class="sr-only">(current)</span>
<span class="icon-bar"></span> </a>
<span class="icon-bar"></span> </li>
</button> <li class="nav-item">
<a class="navbar-brand" href="{{ url_for('public.home') }}"> <a class="nav-link" href="{{ url_for('public.about') }}">About</a>
{% endraw %} </li>
{{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>
</ul> </ul>
{% if current_user and current_user.is_authenticated %} {% if current_user and current_user.is_authenticated %}
<ul class="nav navbar-nav navbar-right"> <ul class="navbar-nav my-auto">
<li> <li class="nav-item active">
<p class="navbar-text"><a class="navbar-link" href="{{ url_for('user.members') }}">Logged in as {{ current_user.username }}</a></p> <a class="nav-link" href="{{ url_for('user.members') }}">Logged in as {{ current_user.username }}</a>
</li> </li>
<li><a class="navbar-link" href="{{ url_for('public.logout') }}"><i class="fa fa-sign-out"></i></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> </ul>
{% elif form %} {% elif form %}
<ul class="nav navbar-nav navbar-right"> <form class="form-inline" id="loginForm" method="POST" action="/" role="login">
<li><a href="{{ url_for('public.register') }}">Create account</a></li> <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
</ul> <div class="input-group mb-2 mr-sm-2">
<form id="loginForm" method="POST" class="navbar-form form-inline navbar-right" action="/" role="login"> {{ form.username(placeholder="Username", class_="form-control mr-sm-1 my-auto") }} {{ form.password(placeholder="Password",
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/> class_="form-control mr-sm-1 my-auto") }}
<div class="form-group"> <button class="btn btn-light btn-primary m-auto" type="submit">Login</button>
{{ form.username(placeholder="Username", class_="form-control") }}
{{ form.password(placeholder="Password", class_="form-control") }}
</div> </div>
<button type="submit" class="btn btn-default">Log in</button>
</form> </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 %} {% endif %}
</div><!-- /.navbar-collapse --> </div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav> </nav>
{% endraw %} {% endraw %}

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

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

@ -2,7 +2,7 @@
{% extends "layout.html" %} {% extends "layout.html" %}
{% block content %} {% block content %}
<div class="container-narrow"> <div class="container-narrow">
<h1>Register</h1> <h1 class="mt-5">Register</h1>
<br/> <br/>
<form id="registerForm" class="form form-register" method="POST" action="" role="form"> <form id="registerForm" class="form form-register" method="POST" action="" role="form">
{{ form.csrf_token }} {{ form.csrf_token }}
@ -13,6 +13,7 @@
<div class="form-group"> <div class="form-group">
{{form.email.label}} {{form.email.label}}
{{form.email(placeholder="Email", class_="form-control")}} {{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>
<div class="form-group"> <div class="form-group">
{{form.password.label}} {{form.password.label}}
@ -22,7 +23,7 @@
{{form.confirm.label}} {{form.confirm.label}}
{{form.confirm(placeholder="Password (again)", class_="form-control")}} {{form.confirm(placeholder="Password (again)", class_="form-control")}}
</div> </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> </form>
<p><em>Already registered?</em> Click <a href="/">here</a> to login.</p> <p><em>Already registered?</em> Click <a href="/">here</a> to login.</p>
</div> </div>

@ -1,7 +1,9 @@
{% raw %} {% raw %}
{% extends "layout.html" %} {% extends "layout.html" %}
{% block content %} {% block content %}
<h1>Welcome {{ current_user.username }}</h1> <div class="container">
<h3>This is the members-only page.</h3> <h1>Welcome {{ current_user.username }}</h1>
<h3>This is the members-only page.</h3>
</div>
{% endblock %} {% endblock %}
{% endraw%} {% endraw%}

Loading…
Cancel
Save