From c1383ea22b60aafb70c3950a2ef5c5291b5c15ed Mon Sep 17 00:00:00 2001 From: samuelgfeller Date: Thu, 4 Apr 2024 18:07:28 +0200 Subject: [PATCH] Cleanup [SLE-192] --- .../assets/client/list/client-list-loading.js | 2 +- ...er.css => client-list-skeleton-loader.css} | 0 ...lder.js => client-list-skeleton-loader.js} | 0 .../note/client-read-template-note.html.js | 4 +- .../client-read-note-skeleton-loader.css} | 2 +- .../general/ajax/ajax-util/fail-handler.js | 4 +- ...switch.css => dark-mode-toggle-switch.css} | 0 .../general-css/{default.css => colors.css} | 54 -------------- public/assets/general/general-css/layout.css | 54 +++++++++++++- public/assets/general/general-font/fonts.css | 70 +++++++++++++++++++ .../assets/general/general-img/edit-icon.svg | 17 ----- .../material-outline-edit-icon.svg | 3 - .../contenteditable/contenteditable-main.js | 5 ++ .../flash-message/flash-message.css | 7 +- .../general/page-component/panel/panel.css | 3 +- .../skeleton-loader.css} | 8 +-- .../textarea/auto-resizing-textarea.js | 2 +- public/assets/user/list/user-list-loading.js | 2 +- public/assets/user/list/user-list-main.js | 2 +- ...lder.css => user-list-skeleton-loader.css} | 0 ...holder.js => user-list-skeleton-loader.js} | 0 public/assets/user/user.css | 3 +- templates/authentication/login.html.php | 7 +- .../authentication/reset-password.html.php | 9 +-- templates/client/client-read.html.php | 10 +-- templates/client/clients-list.html.php | 2 +- templates/dashboard/dashboard.html.php | 6 +- templates/layout/layout.html.php | 3 +- templates/user/user-list.html.php | 6 +- templates/user/user-read.html.php | 6 +- 30 files changed, 175 insertions(+), 116 deletions(-) rename public/assets/client/list/{client-list-loading-placeholder.css => client-list-skeleton-loader.css} (100%) rename public/assets/client/list/{client-list-content-placeholder.js => client-list-skeleton-loader.js} (100%) rename public/assets/{general/page-component/content-placeholder/client-read-note-placeholder.css => client/read/client-read-note-skeleton-loader.css} (90%) rename public/assets/general/dark-mode/{dark-mode-switch.css => dark-mode-toggle-switch.css} (100%) rename public/assets/general/general-css/{default.css => colors.css} (76%) create mode 100644 public/assets/general/general-font/fonts.css delete mode 100644 public/assets/general/general-img/edit-icon.svg delete mode 100644 public/assets/general/general-img/material-outline-edit-icon.svg rename public/assets/general/page-component/{content-placeholder/content-placeholder.css => skeleton-loader/skeleton-loader.css} (79%) rename public/assets/user/list/{user-list-content-placeholder.css => user-list-skeleton-loader.css} (100%) rename public/assets/user/list/{user-list-content-placeholder.js => user-list-skeleton-loader.js} (100%) diff --git a/public/assets/client/list/client-list-loading.js b/public/assets/client/list/client-list-loading.js index dbe7b67d..73c3f585 100644 --- a/public/assets/client/list/client-list-loading.js +++ b/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, diff --git a/public/assets/client/list/client-list-loading-placeholder.css b/public/assets/client/list/client-list-skeleton-loader.css similarity index 100% rename from public/assets/client/list/client-list-loading-placeholder.css rename to public/assets/client/list/client-list-skeleton-loader.css diff --git a/public/assets/client/list/client-list-content-placeholder.js b/public/assets/client/list/client-list-skeleton-loader.js similarity index 100% rename from public/assets/client/list/client-list-content-placeholder.js rename to public/assets/client/list/client-list-skeleton-loader.js diff --git a/public/assets/client/note/client-read-template-note.html.js b/public/assets/client/note/client-read-template-note.html.js index ddf019dc..778f700b 100644 --- a/public/assets/client/note/client-read-template-note.html.js +++ b/public/assets/client/note/client-read-template-note.html.js @@ -61,12 +61,12 @@ export function getClientNoteLoadingPlaceholderHtml() {
-
+
-
+
diff --git a/public/assets/general/page-component/content-placeholder/client-read-note-placeholder.css b/public/assets/client/read/client-read-note-skeleton-loader.css similarity index 90% rename from public/assets/general/page-component/content-placeholder/client-read-note-placeholder.css rename to public/assets/client/read/client-read-note-skeleton-loader.css index 26e1b5f6..67c38d60 100644 --- a/public/assets/general/page-component/content-placeholder/client-read-note-placeholder.css +++ b/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 { diff --git a/public/assets/general/ajax/ajax-util/fail-handler.js b/public/assets/general/ajax/ajax-util/fail-handler.js index ee3bc02c..f083d71e 100644 --- a/public/assets/general/ajax/ajax-util/fail-handler.js +++ b/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 += `
${translated['Access denied please refresh the page and try again']}.`; + errorMsg += `
${translated['Access denied, please refresh the page and try again']}.`; } const statusMessageMap = { diff --git a/public/assets/general/dark-mode/dark-mode-switch.css b/public/assets/general/dark-mode/dark-mode-toggle-switch.css similarity index 100% rename from public/assets/general/dark-mode/dark-mode-switch.css rename to public/assets/general/dark-mode/dark-mode-toggle-switch.css diff --git a/public/assets/general/general-css/default.css b/public/assets/general/general-css/colors.css similarity index 76% rename from public/assets/general/general-css/default.css rename to public/assets/general/general-css/colors.css index 1a8955fa..9f10aecd 100644 --- a/public/assets/general/general-css/default.css +++ b/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); diff --git a/public/assets/general/general-css/layout.css b/public/assets/general/general-css/layout.css index ccdf0145..0403dc9d 100644 --- a/public/assets/general/general-css/layout.css +++ b/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; diff --git a/public/assets/general/general-font/fonts.css b/public/assets/general/general-font/fonts.css new file mode 100644 index 00000000..33a025c2 --- /dev/null +++ b/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); +} \ No newline at end of file diff --git a/public/assets/general/general-img/edit-icon.svg b/public/assets/general/general-img/edit-icon.svg deleted file mode 100644 index c3ca4e91..00000000 --- a/public/assets/general/general-img/edit-icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - - - - - diff --git a/public/assets/general/general-img/material-outline-edit-icon.svg b/public/assets/general/general-img/material-outline-edit-icon.svg deleted file mode 100644 index 71fa809a..00000000 --- a/public/assets/general/general-img/material-outline-edit-icon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/public/assets/general/page-component/contenteditable/contenteditable-main.js b/public/assets/general/page-component/contenteditable/contenteditable-main.js index baafdd39..345c81a3 100644 --- a/public/assets/general/page-component/contenteditable/contenteditable-main.js +++ b/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'; diff --git a/public/assets/general/page-component/flash-message/flash-message.css b/public/assets/general/page-component/flash-message/flash-message.css index bf59f0ff..3f072873 100644 --- a/public/assets/general/page-component/flash-message/flash-message.css +++ b/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 { diff --git a/public/assets/general/page-component/panel/panel.css b/public/assets/general/page-component/panel/panel.css index 295796dd..b0526e33 100644 --- a/public/assets/general/page-component/panel/panel.css +++ b/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; diff --git a/public/assets/general/page-component/content-placeholder/content-placeholder.css b/public/assets/general/page-component/skeleton-loader/skeleton-loader.css similarity index 79% rename from public/assets/general/page-component/content-placeholder/content-placeholder.css rename to public/assets/general/page-component/skeleton-loader/skeleton-loader.css index f466aa5f..d7ad6a1d 100644 --- a/public/assets/general/page-component/content-placeholder/content-placeholder.css +++ b/public/assets/general/page-component/skeleton-loader/skeleton-loader.css @@ -1,5 +1,5 @@ :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), @@ -7,7 +7,7 @@ } [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; diff --git a/public/assets/general/page-component/textarea/auto-resizing-textarea.js b/public/assets/general/page-component/textarea/auto-resizing-textarea.js index 6f5c3f2c..fd2dbd73 100644 --- a/public/assets/general/page-component/textarea/auto-resizing-textarea.js +++ b/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', '')); diff --git a/public/assets/user/list/user-list-loading.js b/public/assets/user/list/user-list-loading.js index 09374ad4..7ffa97cd 100644 --- a/public/assets/user/list/user-list-loading.js +++ b/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 { diff --git a/public/assets/user/list/user-list-main.js b/public/assets/user/list/user-list-main.js index 6834df17..c0ee513e 100644 --- a/public/assets/user/list/user-list-main.js +++ b/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(); \ No newline at end of file diff --git a/public/assets/user/list/user-list-content-placeholder.css b/public/assets/user/list/user-list-skeleton-loader.css similarity index 100% rename from public/assets/user/list/user-list-content-placeholder.css rename to public/assets/user/list/user-list-skeleton-loader.css diff --git a/public/assets/user/list/user-list-content-placeholder.js b/public/assets/user/list/user-list-skeleton-loader.js similarity index 100% rename from public/assets/user/list/user-list-content-placeholder.js rename to public/assets/user/list/user-list-skeleton-loader.js diff --git a/public/assets/user/user.css b/public/assets/user/user.css index 3af49ad1..97dae3b9 100644 --- a/public/assets/user/user.css +++ b/public/assets/user/user.css @@ -64,7 +64,7 @@ } #user-activity-container 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: var(--background-accent-3-color); @@ -74,7 +74,6 @@ margin-top: 0; margin-bottom: 0; padding: 12px 30px 20px 30px; - color: var(--primary-text-color); background: var(--background-accent-3-color); border-radius: 10px 10px 0 0; font-size: 1.7em; diff --git a/templates/authentication/login.html.php b/templates/authentication/login.html.php index 828934de..a14a8666 100644 --- a/templates/authentication/login.html.php +++ b/templates/authentication/login.html.php @@ -1,6 +1,7 @@ ' . - /*Form error message is hardcoded in the backend with styling html tags*/$formErrorMessage . + /*Form error message is hardcoded in the backend with styling html tags*/ + $formErrorMessage . '' : '' ?> diff --git a/templates/authentication/reset-password.html.php b/templates/authentication/reset-password.html.php index ab920d49..260868e9 100644 --- a/templates/authentication/reset-password.html.php +++ b/templates/authentication/reset-password.html.php @@ -32,12 +32,13 @@ 'layout/assets.html.php', [ 'stylesheets' => [ - 'assets/general/page-component/flash-message/flash-message.css', - 'assets/general/page-component/form/form.css', + 'assets/general/general-css/colors.css', + 'assets/general/general-font/fonts.css', 'assets/general/general-css/layout.css', 'assets/general/general-css/general.css', - 'assets/general/general-css/default.css', - 'assets/authentication/login.css' + 'assets/authentication/login.css', + 'assets/general/page-component/flash-message/flash-message.css', + 'assets/general/page-component/form/form.css', ], // The type="module" allows the use of import and export inside a JS file. 'jsModules' => ['assets/general/general-js/default.js', 'assets/authentication/password-reset-main.js'], diff --git a/templates/client/client-read.html.php b/templates/client/client-read.html.php index b00eb06f..5a0d6814 100644 --- a/templates/client/client-read.html.php +++ b/templates/client/client-read.html.php @@ -1,9 +1,9 @@ setLayout('layout/layout.html.php'); @@ -17,8 +17,8 @@ 'assets/general/page-component/modal/alert-modal.css', 'assets/general/page-component/loader/animated-checkmark.css', 'assets/general/page-component/button/plus-button.css', - 'assets/general/page-component/content-placeholder/content-placeholder.css', - 'assets/general/page-component/content-placeholder/client-read-note-placeholder.css', + 'assets/general/page-component/skeleton-loader/skeleton-loader.css', + 'assets/client/read/client-read-note-skeleton-loader.css', 'assets/general/page-component/contenteditable/contenteditable.css', // page-specific css has to come last to overwrite other styles 'assets/client/note/client-note.css', diff --git a/templates/client/clients-list.html.php b/templates/client/clients-list.html.php index 0d8671e5..554670f7 100644 --- a/templates/client/clients-list.html.php +++ b/templates/client/clients-list.html.php @@ -22,7 +22,7 @@ // post.css has to come last to overwrite other styles 'assets/general/page-component/form/form.css', 'assets/general/page-component/filter-chip/filter-chip.css', - 'assets/general/page-component/content-placeholder/content-placeholder.css', + 'assets/general/page-component/skeleton-loader/skeleton-loader.css', 'assets/general/page-component/button/plus-button.css', 'assets/general/page-component/modal/form-modal.css', 'assets/client/list/client-list.css', diff --git a/templates/dashboard/dashboard.html.php b/templates/dashboard/dashboard.html.php index ac70893a..1f0afa61 100644 --- a/templates/dashboard/dashboard.html.php +++ b/templates/dashboard/dashboard.html.php @@ -10,15 +10,15 @@ $this->setLayout('layout/layout.html.php'); $this->addAttribute('css', [ 'assets/client/read/client-read.css', - 'assets/general/page-component/content-placeholder/content-placeholder.css', - 'assets/general/page-component/content-placeholder/client-read-note-placeholder.css', + 'assets/general/page-component/skeleton-loader/skeleton-loader.css', + 'assets/client/read/client-read-note-skeleton-loader.css', 'assets/client/list/client-list-loading-placeholder.css', 'assets/client/list/client-list.css', // For clients 'assets/general/page-component/contenteditable/contenteditable.css', // For notes 'assets/general/page-component/loader/animated-checkmark.css', // Note loader 'assets/client/note/client-note.css', // Note css 'assets/general/page-component/filter-chip/filter-chip.css', // User - 'assets/user/list/user-list-content-placeholder.css', // User + 'assets/user/list/user-list-skeleton-loader.css', // User 'assets/user/list/user-list.css', // User 'assets/general/page-component/panel/panel.css', 'assets/dashboard/dashboard.css', diff --git a/templates/layout/layout.html.php b/templates/layout/layout.html.php index b010f868..b87f9c4c 100644 --- a/templates/layout/layout.html.php +++ b/templates/layout/layout.html.php @@ -27,7 +27,8 @@ // Define layout assets $layoutCss = [ 'assets/general/general-css/general.css', - 'assets/general/general-css/default.css', + 'assets/general/general-css/colors.css', + 'assets/general/general-font/fonts.css', 'assets/general/general-css/layout.css', 'assets/navbar/side-navbar.css', 'assets/general/page-component/flash-message/flash-message.css', diff --git a/templates/user/user-list.html.php b/templates/user/user-list.html.php index ce417ff4..330ba1ca 100644 --- a/templates/user/user-list.html.php +++ b/templates/user/user-list.html.php @@ -11,10 +11,10 @@ 'assets/general/page-component/form/form.css', 'assets/general/page-component/button/plus-button.css', 'assets/general/page-component/modal/form-modal.css', - 'assets/general/page-component/content-placeholder/content-placeholder.css', - 'assets/user/list/user-list-content-placeholder.css', + 'assets/general/page-component/skeleton-loader/skeleton-loader.css', + 'assets/user/list/user-list-skeleton-loader.css', 'assets/user/list/user-list.css', - // post.css has to come last to overwrite other styles + // user-list.css has to come last to overwrite other styles ]); // Js files that import things from other js files $this->addAttribute( diff --git a/templates/user/user-read.html.php b/templates/user/user-read.html.php index ee194605..76c3d4af 100644 --- a/templates/user/user-read.html.php +++ b/templates/user/user-read.html.php @@ -18,10 +18,10 @@ 'assets/general/page-component/form/form.css', 'assets/general/page-component/modal/alert-modal.css', 'assets/general/page-component/modal/form-modal.css', - // profile.css has to come last to overwrite other styles - 'assets/general/dark-mode/dark-mode-switch.css', + 'assets/general/dark-mode/dark-mode-toggle-switch.css', 'assets/general/page-component/contenteditable/contenteditable.css', 'assets/user/user.css', + // user.css has to come last to overwrite other styles ]); @@ -30,7 +30,7 @@ ['assets/user/read/user-read-update-main.js', 'assets/general/dark-mode/dark-mode.js',] ); -// Store client id on the page in element for js to read it +// Store user id on the page in element for js to read it ?>