Cleanup [SLE-192]

public/assets/client/list/client-list-loading.js

@@ -2,7 +2,7 @@ import {getClientProfileCardHtml} from "./client-list-profile-card.html.js?v=0.4
 import {
     displayClientProfileCardLoadingPlaceholder,
     removeClientCardContentPlaceholder
-} from "./client-list-content-placeholder.js?v=0.4.0";
+} from "./client-list-skeleton-loader.js?v=0.4.0";
 import {fetchData} from "../../general/ajax/fetch-data.js?v=0.4.0";
 import {
     disableMouseWheelClickScrolling,

public/assets/client/note/client-read-template-note.html.js

@@ -61,12 +61,12 @@ export function getClientNoteLoadingPlaceholderHtml() {
     <!-- Textarea container-->
     <div class="client-note-lower-placeholder-container">
         <!-- Text line inside textarea container -->
-        <div class="text-line-content-placeholder client-note-first-text-line-placeholder">
+        <div class="text-line-skeleton-loader client-note-first-text-line-placeholder">
             <div class="moving-loading-placeholder-part-wrapper">
                 <div class="moving-loading-placeholder-part"></div>
             </div>
         </div>
-        <div class="text-line-content-placeholder client-note-second-text-line-placeholder">
+        <div class="text-line-skeleton-loader client-note-second-text-line-placeholder">
             <div class="moving-loading-placeholder-part-wrapper">
                 <div class="moving-loading-placeholder-part"></div>
             </div>

public/assets/general/page-component/content-placeholder/client-read-note-placeholder.css → public/assets/client/read/client-read-note-skeleton-loader.css

@@ -1,4 +1,4 @@
-/*This file is in the content-placeholder folder and not the client-read folder to be found faster and serve as
+/*This file is in the skeleton-loader folder and not the client-read folder to be found faster and serve as
 inspiration when creating new content placeholder*/
 
 .client-note-loading-placeholder {

public/assets/general/ajax/ajax-util/fail-handler.js

@@ -5,7 +5,7 @@ import {fetchTranslations} from "../fetch-translation-data.js?v=0.4.0";
 
 // List of words that are used in modal box and need to be translated
 let wordsToTranslate = [
-    __('Access denied please log in and try again'),
+    __('Access denied, please log in and try again'),
     __('Forbidden. Not allowed to access this area or function'),
     __('Please try again and report the error to an administrator'),
 ];
@@ -50,7 +50,7 @@ export async function handleFail(response, domFieldId = null) {
         }
 
         // If response data doesn't contain login url
-        errorMsg += `<br>${translated['Access denied please refresh the page and try again']}.`;
+        errorMsg += `<br>${translated['Access denied, please refresh the page and try again']}.`;
     }
 
     const statusMessageMap = {

public/assets/general/general-css/default.css → public/assets/general/general-css/colors.css

@@ -70,60 +70,6 @@
     --btn-red-color: #da5f52;
 }
 
-/* Default styles for common HTML elements (tag name as selectors) */
-body, html {
-    min-height: 100vh;
-    margin: 0;
-    padding: 0;
-    overflow-x: hidden; /* Needed for flash messages sliding in */
-}
-
-* {
-    /* border-box specifies that the borders and padding should be attributed to element's width
-    and height and not overflowing to the parent.
-    https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing */
-    box-sizing: border-box;
-    /*font-family: Comfortaa, DM-Sans, Geneva, AppleGothic, sans-serif;*/
-    font-family: SF-Pro-Text, CenturyGothic, Geneva, AppleGothic, sans-serif;
-    /*letter-spacing: 2px;*/
-    transition: background-color 250ms, color 250ms, border-color 250ms;
-}
-
-a {
-    color: var(--primary-text-color);
-}
-
-h2, h1, h3 {
-    color: var(--title-color);
-    /*text-shadow: 0 0px 5px rgba(255, 255, 255, 0.4);*/
-    font-family: SF-Pro Display, Helvetica, sans-serif;
-    font-weight: bold;
-}
-
-h1 {
-    font-size: 3em;
-}
-
-h2 {
-    font-size: 2em;
-}
-
-h3 {
-    font-size: 1.5em;
-}
-
-a {
-    text-decoration: none;
-}
-
-a:hover:not(a.currently-editable):not(#nav-container a):not(a.btn) {
-    /*text-shadow: 0 0 1px black;*/
-    /*font-weight: bold;*/
-    /*text-decoration: none;*/
-    text-decoration: underline;
-    /*font-weight: 500;*//*The issue with making text bold is that it expands the container the link is in*/
-}
-
 @font-face {
     font-family: Comfortaa;
     src: url(../general-font/Comfortaa.ttf);

public/assets/general/general-css/layout.css

@@ -3,9 +3,61 @@ especially elements from the layout/layout.html.php */
 
 /* mobile first min-width sets base and content is adapted to computers. */
 @media (min-width:100px)  {
-    body {
+    /* Default styles for common HTML elements (tag name as selectors) */
+    body, html {
+        min-height: 100vh;
+        margin: 0;
+        padding: 0;
+        overflow-x: hidden; /* Needed for flash messages sliding in */
         background: var(--background-color);
     }
+
+    * {
+        /* border-box specifies that the borders and padding should be attributed to element's width
+        and height and not overflowing to the parent.
+        https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing */
+        box-sizing: border-box;
+        /*font-family: Comfortaa, DM-Sans, Geneva, AppleGothic, sans-serif;*/
+        font-family: SF-Pro-Text, CenturyGothic, Geneva, AppleGothic, sans-serif;
+        /*letter-spacing: 2px;*/
+        transition: background-color 250ms, color 250ms, border-color 250ms;
+    }
+
+    a {
+        color: var(--primary-text-color);
+    }
+
+    h2, h1, h3 {
+        color: var(--title-color);
+        /*text-shadow: 0 0px 5px rgba(255, 255, 255, 0.4);*/
+        font-family: SF-Pro Display, Helvetica, sans-serif;
+        font-weight: bold;
+    }
+
+    h1 {
+        font-size: 3em;
+    }
+
+    h2 {
+        font-size: 2em;
+    }
+
+    h3 {
+        font-size: 1.5em;
+    }
+
+    a {
+        text-decoration: none;
+    }
+
+    a:hover:not(a.currently-editable):not(#nav-container a):not(a.btn) {
+        /*text-shadow: 0 0 1px black;*/
+        /*font-weight: bold;*/
+        /*text-decoration: none;*/
+        text-decoration: underline;
+        /*font-weight: 500;*//*The issue with making text bold is that it expands the container the link is in*/
+    }
+
     #wrapper{
         display: flex;
         flex-direction: column;

public/assets/general/general-font/fonts.css

@@ -0,0 +1,70 @@
+@font-face {
+    font-family: Comfortaa;
+    src: url(../general-font/Comfortaa.ttf);
+}
+
+@font-face {
+    font-family: SF-Pro-Text;
+    src: url(../general-font/SF-Pro/SF-Pro.ttf) format('truetype');
+    font-weight: normal;
+}
+
+@font-face {
+    font-family: SF-Pro-Text;
+    src: url(../general-font/SF-Pro/SF-Pro-Text-Regular.otf) ;
+    font-weight: normal;
+}
+
+@font-face {
+    font-family: SF-Pro-Text;
+    src: url(../general-font/SF-Pro/SF-Pro-Text-Bold.otf);
+    font-weight: bold;
+}
+
+@font-face {
+    font-family: SF-Pro-Text;
+    src: url(../general-font/SF-Pro/SF-Pro-Text-Medium.otf);
+    font-weight: 500;
+}
+
+@font-face {
+    font-family: SF-Pro-Text;
+    src: url(../general-font/SF-Pro/SF-Pro-Text-Thin.otf);
+    font-weight: 300;
+}
+
+@font-face {
+    font-family: SF-Pro Display;
+    src: url(../general-font/SF-Pro/SF-Pro-Display-Heavy.otf);
+    font-weight: 800;
+}
+
+@font-face {
+    font-family: SF-Pro Display;
+    src: url(../general-font/SF-Pro/SF-Pro-Display-Bold.otf);
+    font-weight: bold;
+}
+
+@font-face {
+    font-family: SF-Pro Display;
+    src: url(../general-font/SF-Pro/SF-Pro-Display-Semibold.otf);
+    font-weight: 500;
+}
+
+@font-face {
+    font-family: SF-Pro Display;
+    src: url(../general-font/SF-Pro/SF-Pro-Display-Medium.otf);
+    font-weight: 400;
+}
+
+@font-face {
+    font-family: SF-Pro Display;
+    src: url(../general-font/SF-Pro/SF-Pro-Display-Regular.otf);
+    font-weight: 300;
+}
+
+
+@font-face {
+    font-family: DM-Sans;
+    src: url(../general-font/DMSans-Regular.ttf);
+}

public/assets/general/page-component/contenteditable/contenteditable-main.js

@@ -17,6 +17,11 @@ export function makeFieldEditable(field) {
         field.innerHTML = '';
     }
 
+    // Disable drop of the field otherwise it'd be possible to drag the field and drop the html it in the same field
+    field.addEventListener('drop', (e) => {
+        e.preventDefault();
+    });
+
     // Slick would be to replace the word "edit" of the edit icon with "save" for the save button but that puts a dependency
     // on the id name that can be avoided when just appending a word
     let saveBtnId = editIcon.id + '-save';

public/assets/general/page-component/flash-message/flash-message.css

@@ -187,12 +187,11 @@
     .flash-close-btn {
         position: absolute;
         display: none;
-        /*top: -10px; !* Large font size and time symbol retty small it has to be pushed upwards*!*/
         right: 10px;
         height: 20px;
         font-size: 30px;
         font-weight: 300;
-        color: #6e6e6e;
+        color: black;
         cursor: pointer;
         align-self: flex-start;
     }
@@ -283,6 +282,8 @@
         top: 30px;
         transform: initial;
         width: auto;
+        /*Make space behind moved 30px down flash container clickable*/
+        pointer-events: none;
     }
 
     .flash {
@@ -293,6 +294,8 @@
         margin: 15px 0 10px 0px;
         transform: translateX(130%);
         white-space: break-spaces;
+        /*Allow pointer events on the flash message after removing it on the container*/
+        pointer-events: auto;
     }
 
     .flash-slide-in {

public/assets/general/page-component/panel/panel.css

@@ -28,7 +28,6 @@
         margin-bottom: 0;
         /*padding: 12px 20px 20px 20px;*/
         padding: 20px;
-        color: var(--primary-text-color);
         font-size: 1.5em;
         font-weight: 600;
         display: inline-block;
@@ -57,7 +56,7 @@
     }
 
     .panel-content a:hover {
-        /* Without the important keyword it does not work. I think the specificity is in default.css is too high because
+        /* Without the important keyword it does not work. The specificity is in layout.css is too high because
          of the :not() selectors */
         text-decoration: none !important;
         background: none;

public/assets/general/page-component/content-placeholder/content-placeholder.css → public/assets/general/page-component/skeleton-loader/skeleton-loader.css

@@ -1,13 +1,13 @@
 :root {
-    --content-placeholder-moving-part-colors: rgba(251, 251, 251, .05),
+    --skeleton-loader-moving-part-colors: rgba(251, 251, 251, .05),
     rgba(251, 251, 251, .3),
     rgba(251, 251, 251, .6),
     rgba(251, 251, 251, .3),
     rgba(251, 251, 251, .05);
 }
 
 [data-theme="dark"] {
-    --content-placeholder-moving-part-colors: rgba(80, 80, 80, .05),
+    --skeleton-loader-moving-part-colors: rgba(80, 80, 80, .05),
     rgba(80, 80, 80, .3),
     rgba(80, 80, 80, 0.6),
     rgba(80, 80, 80, .3),
@@ -31,12 +31,12 @@
     height: 100%;
     width: 45%;
     background-image: linear-gradient(to left,
-    var(--content-placeholder-moving-part-colors));
+    var(--skeleton-loader-moving-part-colors));
     animation: loading 1s infinite;
     z-index: 9;
 }
 
-.text-line-content-placeholder {
+.text-line-skeleton-loader {
     height: 18px;
     margin-left: 25px;
     margin-right: 25px;

public/assets/general/page-component/textarea/auto-resizing-textarea.js

@@ -30,7 +30,7 @@ export function initAutoResizingTextareaElements() {
     }
 
     function resizeTextarea() {
-        // Textareas have default 2px padding and if not set it returns 0px
+        // Textarea elements have default 2px padding and if not set it returns 0px
         let padding = window.getComputedStyle(this).getPropertyValue('padding-bottom');
         // getPropertyValue('padding-bottom') returns "px" at the end it needs to be removed to be added to scrollHeight
         padding = parseInt(padding.replace('px', ''));

public/assets/user/list/user-list-loading.js

@@ -1,7 +1,7 @@
 import {
     displayUserCardLoadingPlaceholder,
     removeUserCardContentPlaceholder
-} from "./user-list-content-placeholder.js?v=0.4.0";
+} from "./user-list-skeleton-loader.js?v=0.4.0";
 import {fetchData} from "../../general/ajax/fetch-data.js?v=0.4.0";
 import {addUsersToDom} from "./user-list-card-dom-appending.js?v=0.4.0";
 import {

public/assets/user/list/user-list-main.js

@@ -1,4 +1,4 @@
 import {loadUserList} from "./user-list-loading.js?v=0.4.0";
 
-// Load users at page startup - this function cannot be here as it's used by the dashboard for loading in tailored wrapper
+// Load users at page startup - this function cannot be in this file as it's used by the dashboard for loading in tailored wrapper
 loadUserList();