Updated to Bootstrap 5 and Python dependencies.

YounesRamadi · Jan 18, 2022 · acb5f91 · acb5f91
1 parent 029efed
commit acb5f91
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 75 deletions.
diff --git a/README.md b/README.md
@@ -1,8 +1,8 @@
 # Fastapi Web Starter
 
-Please read the Medium article at [https://shinichiokada.medium.com/](https://shinichiokada.medium.com/) ([Building a Website Starter with FastAPI](https://levelup.gitconnected.com/building-a-website-starter-with-fastapi-92d077092864)).
+Updated: 2022-01-18
 
-[Please sign up for more free resources.](https://mailchi.mp/ae9891ba897a/codewithshin)
+[https://shinichiokada.medium.com/](https://shinichiokada.medium.com/) ([Building a Website Starter with FastAPI](https://levelup.gitconnected.com/building-a-website-starter-with-fastapi-92d077092864)).
 
 ## Overview
 
@@ -25,26 +25,21 @@ This repo includes all the file and it is ready to deploy to Heroku.
 See requirements.txt for updates.
 
 ```sh
-- requests==2.26.0
-- fastapi==0.70.0
-- uvicorn==0.15.0
-- python-dotenv==0.19.1
-- aiofiles==0.7.0
-- python-multipart==0.0.5
-- jinja2==3.0.2
-- Markdown==3.3.4
-- pytest==6.2.5
-- Pillow==8.4.0
+requests==2.27.1
+fastapi==0.72.0
+uvicorn==0.17.0
+python-dotenv==0.19.2
+aiofiles==0.8.0
+python-multipart==0.0.5
+jinja2==3.0.3
+Markdown==3.3.6
+pytest==6.2.5
 ```
 
 ## Installation & Usage
 
 ```bash
 $ git clone [email protected]:shinokada/fastapi-web-starter.git
-# Or using downloaded zip file 
-$ unzip fastapi-web-starter.zip
-
-# change the directory
 $ cd fastapi-web-starter
 # install packages
 $ pip install -r requirements.txt

diff --git a/requirements.txt b/requirements.txt
@@ -1,9 +1,9 @@
-requests==2.26.0
-fastapi==0.70.0
-uvicorn==0.15.0
-python-dotenv==0.19.1
-aiofiles==0.7.0
+requests==2.27.1
+fastapi==0.72.0
+uvicorn==0.17.0
+python-dotenv==0.19.2
+aiofiles==0.8.0
 python-multipart==0.0.5
-jinja2==3.0.2
-Markdown==3.3.4
+jinja2==3.0.3
+Markdown==3.3.6
 pytest==6.2.5
diff --git a/static/css/style3.css b/static/css/style3.css
@@ -123,37 +123,22 @@ a:focus {
     padding: 10px;
     font-size: 1.1em;
     display: block;
+
 }
 
 #sidebar ul li a:hover {
     color: #7386D5;
     background: #fff;
 }
 
-#sidebar ul li.active>a,
-a[aria-expanded="true"] {
-    color: #fff;
-    background: #6d7fcc;
+#sidebar .dropdown-menu{
+    width: 95%;
 }
 
 a[data-toggle="collapse"] {
     position: relative;
 }
 
-.dropdown-toggle::after {
-    display: block;
-    position: absolute;
-    top: 50%;
-    right: 20px;
-    transform: translateY(-50%);
-}
-
-ul ul a {
-    font-size: 0.9em !important;
-    padding-left: 30px !important;
-    background: #6d7fcc;
-}
-
 ul.CTAs {
     padding: 20px;
 }
@@ -166,11 +151,6 @@ ul.CTAs a {
     margin-bottom: 5px;
 }
 
-a.download {
-    background: #fff;
-    color: #7386D5;
-}
-
 a.article,
 a.article:hover {
     background: #6d7fcc !important;
@@ -189,4 +169,18 @@ a.article:hover {
     position: absolute;
     top: 0;
     right: 0;
-}
+}
+
+#sidebarCollapse span{
+    color: #fff;
+}
+
+#sidebarCollapse i{
+    color: #fff;
+}
+
+/* Nav */
+.navbar-nav {
+    justify-content: end;
+    width:100%;
+}
diff --git a/templates/base.html b/templates/base.html
@@ -12,9 +12,8 @@
     <title>{% block title %}{% endblock %} FastAPI Starter</title>
     <link rel="icon" href="{{ url_for('static', path='/images/favicon.ico') }}" sizes="32x32" />
 
-    <!-- Bootstrap CSS CDN -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
-        integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
+    <!-- Bootstrap 5 CSS CDN -->
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
     <!-- Custom CSS -->
     <link href="{{ url_for('static', path='/css/style3.css') }}" rel="stylesheet">
     <link href="{{ url_for('static', path='/css/mystyle.css') }}" rel="stylesheet">
@@ -51,10 +50,8 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
         integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
         crossorigin="anonymous"></script>
-    <!-- Bootstrap JS -->
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
-        integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
-        crossorigin="anonymous"></script>
+    <!-- Bootstrap 5 JS -->
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
     <!-- jQuery Custom Scroller CDN -->
     <script
         src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>

diff --git a/templates/include/sidebar.html b/templates/include/sidebar.html
@@ -10,24 +10,16 @@ <h3>FastAPI Web Starter</h3>
 
     <ul class="list-unstyled components">
         <li class="active">
-            <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false">Home</a>
-            <ul class="collapse list-unstyled" id="homeSubmenu">
-                <li>
-                    <a href="/">Home</a>
-                </li>
-                <li>
-                    <a href="https://google.com">Google</a>
-                </li>
-            </ul>
+            <a href="/">Home</a>
         </li>
-        <li>
-            <a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false">Pages</a>
-            <ul class="collapse list-unstyled" id="pageSubmenu">
+        <li class="dropdown">
+            <a href="#"class="dropdown-toggle" id="dropdownMenuButton1"  data-bs-toggle="dropdown" aria-expanded="false">Pages</a>
+            <ul class="dropdown-menu" id="dropdownMenuButton1">
                 <li>
-                    <a href="/page/about">About</a>
+                    <a href="/page/about" class="dropdown-item">About</a>
                 </li>
                 <li>
-                    <a href="/page/info">Information</a>
+                    <a href="/page/info"class="dropdown-item">Information</a>
                 </li>
             </ul>
         </li>

diff --git a/templates/include/topnav.html b/templates/include/topnav.html
@@ -1,18 +1,14 @@
 <nav class="navbar navbar-expand-lg navbar-light bg-light">
     <div class="container-fluid">
-
         <button type="button" id="sidebarCollapse" class="btn btn-info">
             <i class="fas fa-align-left"></i>
-            <span>Toggle Sidebar</span>
         </button>
-        <button class="btn btn-dark d-inline-block d-lg-none ml-auto" type="button" data-toggle="collapse"
-            data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
-            aria-label="Toggle navigation">
-            <i class="fas fa-align-justify"></i>
+        <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>
 
         <div class="collapse navbar-collapse" id="navbarSupportedContent">
-            <ul class="nav navbar-nav ml-auto">
+            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                 <li class="nav-item {{'active' if active_page == 'unsplash' }}">
                     <a class="nav-link" href="/unsplash">Unsplash</a>
                 </li>