removed detail.css, added to individual type widgets

src/public/app/widgets/note_detail.js

@@ -259,8 +259,7 @@ export default class NoteDetailWidget extends TabAwareWidget {
                 "libraries/bootstrap/css/bootstrap.min.css",
                 "stylesheets/print.css",
                 "stylesheets/relation_map.css",
-                "stylesheets/themes.css",
-                "stylesheets/detail.css"
+                "stylesheets/themes.css"
             ],
             debug: true
         });

src/public/app/widgets/type_widgets/book.js

@@ -35,6 +35,76 @@ const ZOOMS = {
 
 const TPL = `
 <div class="note-detail-book note-detail-printable">
+    <style>
+    /*
+     * We have specific CSS file here instead of being part of the respective widgets to also include this in the printing process
+     */
+    
+    .note-detail-book {
+        height: 100%;
+        padding: 10px;
+        position: relative;
+    }
+    
+    .note-detail-book-content {
+        display: flex;
+        flex-wrap: wrap;
+        overflow: auto;
+        height: 100%;
+        align-content: start;
+    }
+    
+    .note-book-card {
+        border-radius: 10px;
+        background-color: var(--accented-background-color);
+        padding: 15px;
+        padding-bottom: 5px;
+        margin: 5px;
+        margin-left: 0;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+        flex-shrink: 0;
+    }
+    
+    .note-book-card .note-book-card {
+        border: 1px solid var(--main-border-color);
+    }
+    
+    .note-book-content {
+        overflow: hidden;
+    }
+    
+    .note-book-card.type-image .note-book-content, .note-book-card.type-file .note-book-content, .note-book-card.type-protected-session .note-book-content {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+    }
+    
+    .note-book-card.type-image .note-book-content img, .note-book-card.type-text .note-book-content img {
+        max-width: 100%;
+        max-height: 100%;
+    }
+    
+    .note-book-title {
+        flex-grow: 0;
+    }
+    
+    .note-book-content {
+        flex-grow: 1;
+    }
+    
+    .note-book-auto-message {
+        background-color: var(--accented-background-color);
+        text-align: center;
+        width: 100%;
+        border-radius: 10px;
+        padding: 5px;
+        margin-top: 5px;
+    }
+    </style>
+
     <div class="btn-group floating-button" style="right: 20px; top: 20px;">
         <button type="button"
                 class="expand-children-button btn icon-button bx bx-move-vertical"
@@ -100,7 +170,7 @@ export default class BookTypeWidget extends TypeWidget {
 
             $card.find('.note-book-children-content').empty();
         });
-        
+
         return this.$widget;
     }
 
@@ -241,4 +311,4 @@ export default class BookTypeWidget extends TypeWidget {
     cleanup() {
         this.$content.empty();
     }
-}
+}

src/public/app/widgets/type_widgets/file.js

@@ -6,9 +6,25 @@ import TypeWidget from "./type_widget.js";
 const TPL = `
 <div class="note-detail-file note-detail-printable">
     <style>
-        .file-table td {
+        .note-detail-file {
+            padding: 10px;
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+        }
+        
+        .file-table th, .file-table td {
+            padding: 5px;
             overflow-wrap: anywhere;
         }
+        
+        .file-preview-content {
+            background-color: var(--accented-background-color);
+            padding: 15px;
+            max-height: 300px;
+            overflow: auto;
+            margin: 10px;
+        }
     </style>
 
     <table class="file-table">

src/public/app/widgets/type_widgets/image.js

@@ -5,6 +5,18 @@ import TypeWidget from "./type_widget.js";
 
 const TPL = `
 <div class="note-detail-image note-detail-printable">
+    <style>
+        .note-detail-image {
+            text-align: center;
+            height: 100%;
+            overflow: auto;
+        }
+        
+        .note-detail-image-view {
+            max-width: 100%;
+        }
+    </style>
+
     <div class="no-print" style="display: flex; justify-content: space-evenly; margin: 10px;">
         <button class="image-download btn btn-sm btn-primary" type="button">Download</button>
 
@@ -139,4 +151,4 @@ class ImageTypeWidget extends TypeWidget {
     }
 }
 
-export default ImageTypeWidget
+export default ImageTypeWidget

src/public/stylesheets/detail.css

@@ -1,97 +0,0 @@
-/*
- * We have specific CSS file here instead of being part of the respective widgets to also include this in the printing process
- */
-
-.note-detail-book {
-    height: 100%;
-    padding: 10px;
-    position: relative;
-}
-
-.note-detail-book-content {
-    display: flex;
-    flex-wrap: wrap;
-    overflow: auto;
-    height: 100%;
-    align-content: start;
-}
-
-.note-book-card {
-    border-radius: 10px;
-    background-color: var(--accented-background-color);
-    padding: 15px;
-    padding-bottom: 5px;
-    margin: 5px;
-    margin-left: 0;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    flex-shrink: 0;
-}
-
-.note-book-card .note-book-card {
-    border: 1px solid var(--main-border-color);
-}
-
-.note-book-content {
-    overflow: hidden;
-}
-
-.note-book-card.type-image .note-book-content, .note-book-card.type-file .note-book-content, .note-book-card.type-protected-session .note-book-content {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-}
-
-.note-book-card.type-image .note-book-content img, .note-book-card.type-text .note-book-content img {
-    max-width: 100%;
-    max-height: 100%;
-}
-
-.note-book-title {
-    flex-grow: 0;
-}
-
-.note-book-content {
-    flex-grow: 1;
-}
-
-.note-book-auto-message {
-    background-color: var(--accented-background-color);
-    text-align: center;
-    width: 100%;
-    border-radius: 10px;
-    padding: 5px;
-    margin-top: 5px;
-}
-
-.note-detail-image {
-    text-align: center;
-    height: 100%;
-    overflow: auto;
-}
-
-.note-detail-image-view {
-    max-width: 100%;
-}
-
-.note-detail-file {
-    padding: 10px;
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-}
-
-.file-table th, .file-table td {
-    padding: 10px;
-    font-size: larger;
-}
-
-.file-preview-content {
-    background-color: var(--accented-background-color);
-    padding: 15px;
-    max-height: 300px;
-    overflow: auto;
-    margin: 10px;
-}

src/services/html_sanitizer.js

@@ -8,8 +8,8 @@ function sanitize(dirtyHtml) {
             // h1 is removed since that should be note's title
             'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'p', 'a', 'ul', 'ol',
             'li', 'b', 'i', 'strong', 'em', 'strike', 'abbr', 'code', 'hr', 'br', 'div',
-            'table', 'thead', 'caption', 'tbody', 'tr', 'th', 'td', 'pre', 'section', 'figure', 'span',
-            'label', 'input'
+            'table', 'thead', 'caption', 'tbody', 'tr', 'th', 'td', 'pre', 'section', 'img',
+            'figure', 'span', 'label', 'input'
         ],
         allowedAttributes: {
             'a': [ 'href', 'class' ],

src/views/desktop.ejs

@@ -81,7 +81,6 @@
 
 <link href="stylesheets/themes.css" rel="stylesheet">
 <link href="stylesheets/style.css" rel="stylesheet">
-<link href="stylesheets/detail.css" rel="stylesheet">
 
 <script>
     $("body").show();

src/views/mobile.ejs

@@ -135,9 +135,8 @@
 
 <link href="stylesheets/themes.css" rel="stylesheet">
 <link href="stylesheets/style.css" rel="stylesheet">
-<link href="stylesheets/detail.css" rel="stylesheet">
 
 <link rel="stylesheet" type="text/css" href="libraries/boxicons/css/boxicons.min.css">
 
 </body>
-</html>
+</html>