Skip to content

Commit

Permalink
Migrate to Boostrap 5
Browse files Browse the repository at this point in the history
  • Loading branch information
@semhoun
semhoun committed Sep 1, 2024
1 parent 1a61749 commit cb79257
Show file tree
Hide file tree
Showing 3 changed files with 95 additions and 82 deletions.
6 changes: 6 additions & 0 deletions public/css/skeleton.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
h1 {
color: blue;
}
body {
padding-bottom: 10px;
}
.navbar {
margin-bottom: 10px;
}
142 changes: 72 additions & 70 deletions tmpl/layout.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<!-- Custom CSS -->
<link rel="stylesheet" href="{{ base_url }}/css/skeleton.css">
Expand All @@ -16,74 +16,77 @@
</head>

<body>
<main>
<nav class="navbar navbar-expand-md navbar-light bg-light rounded">
<div class="container">
<a class="navbar-brand" href="{{ url_for('home') }}">Slim 4 Skeleton</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="{{ url_for('home') }}">Slim 4 Skeleton</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>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item{% if is_current_url('home') %} active{% endif %}">
<a class="nav-link" href="{{ url_for('home') }}">
Home
{% if is_current_url('home') %}
<span class="sr-only">(current)</span>
{% endif %}
</a>
</li>
<li class="nav-item{% if is_current_url('blog', {id: '1'}) %} active{% endif %}">
<a class="nav-link" href="{{ url_for('blog', {id: '1'}) }}">
Blog
{% if is_current_url('blog', {id: '1'}) %}
<span class="sr-only">(current)</span>
{% endif %}
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ full_url_for('home') }}404">
404
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ full_url_for('error') }}">
500
</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<div>
{%if uinfo %}
{{ uinfo.lastname }} {{ uinfo.firstname }}
<a class="btn btn-outline-success my-2 my-sm-0" href="{{ url_for('logout') }}">Logout</a>
{% else %}
<a class="btn btn-outline-success my-2 my-sm-0" href="{{ url_for('login') }}">Login</a>
{% endif %}
</div>
</div>
</div>
</nav>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item{% if is_current_url('home') %} active{% endif %}">
<a class="nav-link" href="{{ url_for('home') }}">
Home
{% if is_current_url('home') %}
<span class="sr-only">(current)</span>
{% endif %}
</a>
</li>
<li class="nav-item{% if is_current_url('blog', {id: '1'}) %} active{% endif %}">
<a class="nav-link" href="{{ url_for('blog', {id: '1'}) }}">
Blog
{% if is_current_url('blog', {id: '1'}) %}
<span class="sr-only">(current)</span>
{% endif %}
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ full_url_for('home') }}404">
404
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ full_url_for('error') }}">
500
</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<div class="my-2 my-lg-0">
{%if uinfo %}
{{ uinfo.lastname }} {{ uinfo.firstname }}
<a class="btn btn-outline-success my-2 my-sm-0" href="{{ url_for('logout') }}">Logout</a>
{% else %}
<a class="btn btn-outline-success my-2 my-sm-0" href="{{ url_for('login') }}">Login</a>
{% endif %}
</div>
</div>
</div>
</nav>
<div class="container">
<div class="bg-light p-5 rounded">
{% if flash %}
{% for f in flash %}
<div class="alert alert-primary alert-dismissible fade show" role="alert">
{{ f }}
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
{% endfor %}
{% endif %}

<div class="container mt-4">
{% if flash %}
{% for f in flash %}
<div class="alert alert-primary alert-dismissible fade show" role="alert">
{{ f }}
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
{% endfor %}
{% endif %}

{% block contents %}
{% endblock %}
</div>
{% block contents %}
{% endblock %}
</div>
</div>
</main>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
Expand All @@ -94,9 +97,8 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
{% block scripts %}{% endblock %}
</body>
</html>
29 changes: 17 additions & 12 deletions tmpl/login.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,21 @@
<h1>
Login
</h1>

<form action="{{ url_for('login') }}" method="post">
<div class="form-group">
<label for="exampleInputUsername">Username</label>
<input type="text" name="uname" class="form-control" id="exampleInputUsername" placeholder="Enter username">
</div>
<div class="form-group">
<label for="exampleInputPassword">Password</label>
<input type="password" name="pswd" class="form-control" id="exampleInputPassword" placeholder="Password">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<div class="container">
<form action="{{ url_for('login') }}" method="post">
<div class="row mb-3">
<label class="col-sm-2 col-form-label" for="exampleInputUsername">Username</label>
<div class="col-sm-10">
<input type="text" name="uname" class="form-control" id="exampleInputUsername" placeholder="Enter username">
</div>
</div>
<div class="row mb-3">
<label class="col-sm-2 col-form-label" for="exampleInputPassword">Password</label>
<div class="col-sm-10">
<input type="password" name="pswd" class="form-control" id="exampleInputPassword" placeholder="Password">
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
{% endblock %}

0 comments on commit cb79257

Please sign in to comment.