glyphicons replaced with font awesome

comic/templates/base.html

@@ -15,9 +15,10 @@
 
     <!-- Bootstrap core CSS -->
     {% bootstrap_css %}
-    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/t/bs/dt-1.10.11,b-colvis-1.1.2,r-2.0.2/datatables.min.css"/>
+    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/dt-1.10.21/b-1.6.2/b-colvis-1.6.2/r-2.2.4/datatables.min.css"/>
     <!-- Custom styles for this template -->
     <link href="{% static "css/base.css" %}" rel="stylesheet">
+    <link href="{% static "font-awesome/css/all.css" %}" rel="stylesheet">
 
 
   </head>
@@ -60,8 +61,14 @@
     ================================================== -->
     <!-- Placed at the end of the document so the pages load faster -->
     {% bootstrap_javascript jquery='full' %}
-    <script type="text/javascript" src="https://cdn.datatables.net/t/bs/dt-1.10.11,b-colvis-1.1.2,r-2.0.2/datatables.min.js"></script>
+    <script type="text/javascript" src="https://cdn.datatables.net/v/bs4/dt-1.10.21/b-1.6.2/b-colvis-1.6.2/r-2.2.4/datatables.min.js"></script>
+    <script type="text/javascript" src="{% static "js/js.cookie.js" %}"></script>
  {% block script %}
  {% endblock %}
   </body>
 </html>
+
+
+
+
+

comic/templates/comic/comic_list.html

@@ -16,7 +16,7 @@
         <thead>
         <tr>
             <th id="select-all"><input type="checkbox" id="select-all-cb"></th>
-            <th><center><span class="glyphicon glyphicon-file"></span></center></th>
+            <th style="text-align: center;"><span class="fa fa-file"></span></th>
             <th width="100%">File/Folder</th>
             <th>Status</th>
         </tr>

comic/util.py

@@ -91,7 +91,7 @@ class DirFile:
 
     def populate_directory(self, directory, user):
         self.name = directory.name
-        self.icon = "glyphicon-folder-open"
+        self.icon = "fa-folder-open"
         self.selector = urlsafe_base64_encode(directory.selector.bytes)
         self.location = "/comic/{0}/".format(self.selector)
         self.label = generate_dir_status(user, directory)
@@ -99,14 +99,14 @@ class DirFile:
 
     def populate_comic(self, comic, user):
         if type(comic) == str:
-            self.icon = "glyphicon-remove"
+            self.icon = "fa-exclamation-circle"
             self.name = comic
             self.selector = "0"
             self.location = "/"
             self.label = '<center><span class="label label-danger">Error</span></center>'
             self.type = "book"
         else:
-            self.icon = "glyphicon-book"
+            self.icon = "fa-book"
             self.name = comic.file_name
             status, created = ComicStatus.objects.get_or_create(comic=comic, user=user)
             if created:

comic/views.py

@@ -64,7 +64,7 @@ def comic_list(request, directory_selector=False):
 @login_required
 @require_POST
 def comic_list_json(request, directory_selector=False):
-    icon_str = '<span class="glyphicon {0}"></span>'
+    icon_str = '<span class="fa {0}"></span>'
     if directory_selector:
         directory_selector = uuid.UUID(bytes=urlsafe_base64_decode(directory_selector))
         directory = Directory.objects.get(selector=directory_selector)
@@ -109,7 +109,7 @@ def recent_comics(request):
 def recent_comics_json(request):
     start = int(request.POST["start"])
     end = start + int(request.POST["length"])
-    icon = '<span class="glyphicon glyphicon-book"></span>'
+    icon = '<span class="fa fa-book"></span>'
     comics = ComicBook.objects.all()
     response_data = dict()
     response_data["recordsTotal"] = comics.count()

static/css/base.css

@@ -1,42 +1,46 @@
-.navbar {
+/*.navbar {*/
-    margin: 0px;
+/*    margin: 0px;*/
-}
+/*}*/
-.starter-template {
+/*.starter-template {*/
-  padding: 40px 15px;
+/*  padding: 40px 15px;*/
-  text-align: center;
+/*  text-align: center;*/
-}
+/*}*/
-/* Sticky footer styles
+/*!* Sticky footer styles*/
--------------------------------------------------- */
+/*-------------------------------------------------- *!*/
-html {
+/*html {*/
-  position: relative;
+/*  position: relative;*/
-  min-height: 100%;
+/*  min-height: 100%;*/
-}
+/*}*/
-body {
+/*body {*/
-  /* Margin bottom by footer height */
+/*  !* Margin bottom by footer height *!*/
-  margin-bottom: 80px;
+/*  margin-bottom: 80px;*/
-}
+/*}*/
-.footer {
+/*.footer {*/
-  position: absolute;
+/*  position: absolute;*/
-  bottom: 0;
+/*  bottom: 0;*/
-  width: 100%;
+/*  width: 100%;*/
-  /* Set the fixed height of the footer here */
+/*  !* Set the fixed height of the footer here *!*/
-  height: 80px;
+/*  height: 80px;*/
-  background-color: #f5f5f5;
+/*  background-color: #f5f5f5;*/
-}
+/*}*/
-.comic_box {
+/*.comic_box {*/
-  width: auto;
+/*  width: auto;*/
-}
+/*}*/
 
-#dropdown-list{
+/*#dropdown-list{*/
- max-height: 300px;
+/* max-height: 300px;*/
- overflow: auto;
+/* overflow: auto;*/
- box-shadow: none;
+/* box-shadow: none;*/
- }
+/* }*/
 
- td a {
+/* td a {*/
-    display:block;
+/*    display:block;*/
-    width:100%;
+/*    width:100%;*/
- }
+/* }*/
- tr.clickable-row {
+/* tr.clickable-row {*/
-    cursor: pointer;
+/*    cursor: pointer;*/
- }
+/* }*/
+
+#comic_list caption {
+  caption-side: top;
+}