diff --git a/assets/app.js b/assets/app.js index 63a5a9b..4ccc75e 100644 --- a/assets/app.js +++ b/assets/app.js @@ -10,7 +10,9 @@ import './styles/app.scss'; // include libraries const $ = require('jquery'); require('@popperjs/core'); // tooltips -const bootstrap = require('bootstrap'); +const bootstrap = require('bootstrap'); // bootstrap 5 +require ('./javascripts/NiceAdmin/main'); // NiceAdmin + // enable popper tooltips (bootstrap tooltips) const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]') diff --git a/assets/images/placeholder-profile.png b/assets/images/placeholder-profile.png new file mode 100755 index 0000000..93c0bb9 Binary files /dev/null and b/assets/images/placeholder-profile.png differ diff --git a/assets/javascripts/NiceAdmin/main.js b/assets/javascripts/NiceAdmin/main.js new file mode 100755 index 0000000..a4bae25 --- /dev/null +++ b/assets/javascripts/NiceAdmin/main.js @@ -0,0 +1,342 @@ +// const bootstrap = require('bootstrap'); // bootstrap 5 needed for tooltips activation + +/** + * Template Name: NiceAdmin + * Template URL: https://bootstrapmade.com/nice-admin-bootstrap-admin-html-template/ + * Updated: Mar 17 2024 with Bootstrap v5.3.3 + * Author: BootstrapMade.com + * License: https://bootstrapmade.com/license/ + */ + +(function () { + "use strict"; + + /** + * Easy selector helper function + */ + const select = (el, all = false) => { + el = el.trim() + if (all) { + return [...document.querySelectorAll(el)] + } else { + return document.querySelector(el) + } + } + + /** + * Easy event listener function + */ + const on = (type, el, listener, all = false) => { + if (all) { + select(el, all).forEach(e => e.addEventListener(type, listener)) + } else { + select(el, all).addEventListener(type, listener) + } + } + + /** + * Easy on scroll event listener + */ + const onscroll = (el, listener) => { + el.addEventListener('scroll', listener) + } + + /** + * Sidebar toggle + */ + if (select('.toggle-sidebar-btn')) { + on('click', '.toggle-sidebar-btn', function (e) { + select('body').classList.toggle('toggle-sidebar') + }) + } + + /** + * Search bar toggle + */ + if (select('.search-bar-toggle')) { + on('click', '.search-bar-toggle', function (e) { + select('.search-bar').classList.toggle('search-bar-show') + }) + } + + /** + * Navbar links active state on scroll + */ + let navbarLinks = select('#navbar .scrollto', true) + const navbarLinksActive = () => { + let position = window.scrollY + 200 + navbarLinks.forEach(navbarLink => { + if (!navbarLink.hash) return + let section = select(navbarLink.hash) + if (!section) return + if (position >= section.offsetTop && position <= (section.offsetTop + section.offsetHeight)) { + navbarLink.classList.add('active') + } else { + navbarLink.classList.remove('active') + } + }) + } + window.addEventListener('load', navbarLinksActive) + onscroll(document, navbarLinksActive) + + /** + * Toggle .header-scrolled class to #header when page is scrolled + */ + let selectHeader = select('#header') + if (selectHeader) { + const headerScrolled = () => { + if (window.scrollY > 100) { + selectHeader.classList.add('header-scrolled') + } else { + selectHeader.classList.remove('header-scrolled') + } + } + window.addEventListener('load', headerScrolled) + onscroll(document, headerScrolled) + } + + /** + * Back to top button + */ + let backToTop = select('.back-to-top') + if (backToTop) { + const toggleBackToTop = () => { + if (window.scrollY > 100) { + backToTop.classList.add('active') + } else { + backToTop.classList.remove('active') + } + } + window.addEventListener('load', toggleBackToTop) + onscroll(document, toggleBackToTop) + } + + /** + * Initiate tooltips - already enabled in assets/app.js + */ + // let tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')) + // let tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { + // return new bootstrap.Tooltip(tooltipTriggerEl) + // }) + + /** + * Initiate quill editors (WYSIWYG text editor) + * Uncomment, install the library and require it to enable + */ + // if (select('.quill-editor-default')) { + // new Quill('.quill-editor-default', { + // theme: 'snow' + // }); + // } + // + // if (select('.quill-editor-bubble')) { + // new Quill('.quill-editor-bubble', { + // theme: 'bubble' + // }); + // } + // + // if (select('.quill-editor-full')) { + // new Quill(".quill-editor-full", { + // modules: { + // toolbar: [ + // [{ + // font: [] + // }, { + // size: [] + // }], + // ["bold", "italic", "underline", "strike"], + // [{ + // color: [] + // }, + // { + // background: [] + // } + // ], + // [{ + // script: "super" + // }, + // { + // script: "sub" + // } + // ], + // [{ + // list: "ordered" + // }, + // { + // list: "bullet" + // }, + // { + // indent: "-1" + // }, + // { + // indent: "+1" + // } + // ], + // ["direction", { + // align: [] + // }], + // ["link", "image", "video"], + // ["clean"] + // ] + // }, + // theme: "snow" + // }); + // } + + /** + * Initiate TinyMCE Editor (WYSIWYG text editor) + * Uncomment, install the library and require it to enable + */ + // const useDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches; + // const isSmallScreen = window.matchMedia('(max-width: 1023.5px)').matches; + // + // tinymce.init({ + // selector: 'textarea.tinymce-editor', + // plugins: 'preview importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media template codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount help charmap quickbars emoticons', + // editimage_cors_hosts: ['picsum.photos'], + // menubar: 'file edit view insert format tools table help', + // toolbar: 'undo redo | bold italic underline strikethrough | fontfamily fontsize blocks | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | forecolor backcolor removeformat | pagebreak | charmap emoticons | fullscreen preview save print | insertfile image media template link anchor codesample | ltr rtl', + // toolbar_sticky: true, + // toolbar_sticky_offset: isSmallScreen ? 102 : 108, + // autosave_ask_before_unload: true, + // autosave_interval: '30s', + // autosave_prefix: '{path}{query}-{id}-', + // autosave_restore_when_empty: false, + // autosave_retention: '2m', + // image_advtab: true, + // link_list: [{ + // title: 'My page 1', + // value: 'https://www.tiny.cloud' + // }, + // { + // title: 'My page 2', + // value: 'http://www.moxiecode.com' + // } + // ], + // image_list: [{ + // title: 'My page 1', + // value: 'https://www.tiny.cloud' + // }, + // { + // title: 'My page 2', + // value: 'http://www.moxiecode.com' + // } + // ], + // image_class_list: [{ + // title: 'None', + // value: '' + // }, + // { + // title: 'Some class', + // value: 'class-name' + // } + // ], + // importcss_append: true, + // file_picker_callback: (callback, value, meta) => { + // /* Provide file and text for the link dialog */ + // if (meta.filetype === 'file') { + // callback('https://www.google.com/logos/google.jpg', { + // text: 'My text' + // }); + // } + // + // /* Provide image and alt text for the image dialog */ + // if (meta.filetype === 'image') { + // callback('https://www.google.com/logos/google.jpg', { + // alt: 'My alt text' + // }); + // } + // + // /* Provide alternative source and posted for the media dialog */ + // if (meta.filetype === 'media') { + // callback('movie.mp4', { + // source2: 'alt.ogg', + // poster: 'https://www.google.com/logos/google.jpg' + // }); + // } + // }, + // templates: [{ + // title: 'New Table', + // description: 'creates a new table', + // content: '
' + // }, + // { + // title: 'Starting my story', + // description: 'A cure for writers block', + // content: 'Once upon a time...' + // }, + // { + // title: 'New list with dates', + // description: 'New List with dates', + // content: '
cdate
mdate

My List

' + // } + // ], + // template_cdate_format: '[Date Created (CDATE): %m/%d/%Y : %H:%M:%S]', + // template_mdate_format: '[Date Modified (MDATE): %m/%d/%Y : %H:%M:%S]', + // height: 600, + // image_caption: true, + // quickbars_selection_toolbar: 'bold italic | quicklink h2 h3 blockquote quickimage quicktable', + // noneditable_class: 'mceNonEditable', + // toolbar_mode: 'sliding', + // contextmenu: 'link image table', + // skin: useDarkMode ? 'oxide-dark' : 'oxide', + // content_css: useDarkMode ? 'dark' : 'default', + // content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }' + // }); + + /** + * Initiate Bootstrap validation check + */ + const needsValidation = document.querySelectorAll('.needs-validation'); + Array.prototype.slice.call(needsValidation) + .forEach(function (form) { + form.addEventListener('submit', function (event) { + if (!form.checkValidity()) { + event.preventDefault() + event.stopPropagation() + } + + form.classList.add('was-validated') + }, false) + }); + + /** + * Initiate SimpleDatatables + * Uncomment, install the library and require it to enable + */ + // const datatables = select('.datatable', true) + // datatables.forEach(datatable => { + // new simpleDatatables.DataTable(datatable, { + // perPageSelect: [5, 10, 15, ["All", -1]], + // columns: [{ + // select: 2, + // sortSequence: ["desc", "asc"] + // }, + // { + // select: 3, + // sortSequence: ["desc"] + // }, + // { + // select: 4, + // cellClass: "green", + // headerClass: "red" + // } + // ] + // }); + // }) + + /** + * Autoresize echart charts + * Uncomment, install the library and require it to enable + */ + // const mainContainer = select('#main'); + // if (mainContainer) { + // setTimeout(() => { + // new ResizeObserver(function () { + // select('.echart', true).forEach(getEchart => { + // echarts.getInstanceByDom(getEchart).resize(); + // }) + // }).observe(mainContainer); + // }, 200); + // } +})(); diff --git a/assets/styles/NiceAdmin/style.scss b/assets/styles/NiceAdmin/style.scss new file mode 100755 index 0000000..41c80ad --- /dev/null +++ b/assets/styles/NiceAdmin/style.scss @@ -0,0 +1,1233 @@ +/** +* Template Name: NiceAdmin +* Template URL: https://bootstrapmade.com/nice-admin-bootstrap-admin-html-template/ +* Updated: Mar 17 2024 with Bootstrap v5.3.3 +* Author: BootstrapMade.com +* License: https://bootstrapmade.com/license/ +*/ + +/*-------------------------------------------------------------- +# General +--------------------------------------------------------------*/ +:root { + scroll-behavior: smooth; +} + +body { + font-family: "Open Sans", sans-serif; + background: #f6f9ff; + color: #444444; +} + +a { + color: #4154f1; + text-decoration: none; +} + +a:hover { + color: #717ff5; + text-decoration: none; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: "Nunito", sans-serif; +} + +/*-------------------------------------------------------------- +# Main +--------------------------------------------------------------*/ +#main { + margin-top: 60px; + padding: 20px 30px; + transition: all 0.3s; +} + +@media (max-width: 1199px) { + #main { + padding: 20px; + } +} + +/*-------------------------------------------------------------- +# Page Title +--------------------------------------------------------------*/ +.pagetitle { + margin-bottom: 10px; +} + +.pagetitle h1 { + font-size: 24px; + margin-bottom: 0; + font-weight: 600; + color: #012970; +} + +/*-------------------------------------------------------------- +# Back to top button +--------------------------------------------------------------*/ +.back-to-top { + position: fixed; + visibility: hidden; + opacity: 0; + right: 15px; + bottom: 15px; + z-index: 99999; + background: #4154f1; + width: 40px; + height: 40px; + border-radius: 4px; + transition: all 0.4s; +} + +.back-to-top i { + font-size: 24px; + color: #fff; + line-height: 0; +} + +.back-to-top:hover { + background: #6776f4; + color: #fff; +} + +.back-to-top.active { + visibility: visible; + opacity: 1; +} + +/*-------------------------------------------------------------- +# Override some default Bootstrap stylings +--------------------------------------------------------------*/ +/* Dropdown menus */ +.dropdown-menu { + border-radius: 4px; + padding: 10px 0; + animation-name: dropdown-animate; + animation-duration: 0.2s; + animation-fill-mode: both; + border: 0; + box-shadow: 0 5px 30px 0 rgba(82, 63, 105, 0.2); +} + +.dropdown-menu .dropdown-header, +.dropdown-menu .dropdown-footer { + text-align: center; + font-size: 15px; + padding: 10px 25px; +} + +.dropdown-menu .dropdown-footer a { + color: #444444; + text-decoration: underline; +} + +.dropdown-menu .dropdown-footer a:hover { + text-decoration: none; +} + +.dropdown-menu .dropdown-divider { + color: #a5c5fe; + margin: 0; +} + +.dropdown-menu .dropdown-item { + font-size: 14px; + padding: 10px 15px; + transition: 0.3s; +} + +.dropdown-menu .dropdown-item i { + margin-right: 10px; + font-size: 18px; + line-height: 0; +} + +.dropdown-menu .dropdown-item:hover { + background-color: #f6f9ff; +} + +@media (min-width: 768px) { + .dropdown-menu-arrow::before { + content: ""; + width: 13px; + height: 13px; + background: #fff; + position: absolute; + top: -7px; + right: 20px; + transform: rotate(45deg); + border-top: 1px solid #eaedf1; + border-left: 1px solid #eaedf1; + } +} + +@keyframes dropdown-animate { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } + + 0% { + opacity: 0; + } +} + +/* Light Backgrounds */ +.bg-primary-light { + background-color: #cfe2ff; + border-color: #cfe2ff; +} + +.bg-secondary-light { + background-color: #e2e3e5; + border-color: #e2e3e5; +} + +.bg-success-light { + background-color: #d1e7dd; + border-color: #d1e7dd; +} + +.bg-danger-light { + background-color: #f8d7da; + border-color: #f8d7da; +} + +.bg-warning-light { + background-color: #fff3cd; + border-color: #fff3cd; +} + +.bg-info-light { + background-color: #cff4fc; + border-color: #cff4fc; +} + +.bg-dark-light { + background-color: #d3d3d4; + border-color: #d3d3d4; +} + +/* Card */ +.card { + margin-bottom: 30px; + border: none; + border-radius: 5px; + box-shadow: 0px 0 30px rgba(1, 41, 112, 0.1); +} + +.card-header, +.card-footer { + border-color: #ebeef4; + background-color: #fff; + color: #798eb3; + padding: 15px; +} + +.card-title { + padding: 20px 0 15px 0; + font-size: 18px; + font-weight: 500; + color: #012970; + font-family: "Poppins", sans-serif; +} + +.card-title span { + color: #899bbd; + font-size: 14px; + font-weight: 400; +} + +.card-body { + padding: 0 20px 20px 20px; +} + +.card-img-overlay { + background-color: rgba(255, 255, 255, 0.6); +} + +/* Alerts */ +.alert-heading { + font-weight: 500; + font-family: "Poppins", sans-serif; + font-size: 20px; +} + +/* Close Button */ +.btn-close { + background-size: 25%; +} + +.btn-close:focus { + outline: 0; + box-shadow: none; +} + +/* Accordion */ +.accordion-item { + border: 1px solid #ebeef4; +} + +.accordion-button:focus { + outline: 0; + box-shadow: none; +} + +.accordion-button:not(.collapsed) { + color: #012970; + background-color: #f6f9ff; +} + +.accordion-flush .accordion-button { + padding: 15px 0; + background: none; + border: 0; +} + +.accordion-flush .accordion-button:not(.collapsed) { + box-shadow: none; + color: #4154f1; +} + +.accordion-flush .accordion-body { + padding: 0 0 15px 0; + color: #3e4f6f; + font-size: 15px; +} + +/* Breadcrumbs */ +.breadcrumb { + font-size: 14px; + font-family: "Nunito", sans-serif; + color: #899bbd; + font-weight: 600; +} + +.breadcrumb a { + color: #899bbd; + transition: 0.3s; +} + +.breadcrumb a:hover { + color: #51678f; +} + +.breadcrumb .breadcrumb-item::before { + color: #899bbd; +} + +.breadcrumb .active { + color: #51678f; + font-weight: 600; +} + +/* Bordered Tabs */ +.nav-tabs-bordered { + border-bottom: 2px solid #ebeef4; +} + +.nav-tabs-bordered .nav-link { + margin-bottom: -2px; + border: none; + color: #2c384e; +} + +.nav-tabs-bordered .nav-link:hover, +.nav-tabs-bordered .nav-link:focus { + color: #4154f1; +} + +.nav-tabs-bordered .nav-link.active { + background-color: #fff; + color: #4154f1; + border-bottom: 2px solid #4154f1; +} + +/*-------------------------------------------------------------- +# Header +--------------------------------------------------------------*/ +.logo { + line-height: 1; +} + +@media (min-width: 1200px) { + .logo { + width: 280px; + } +} + +.logo img { + max-height: 26px; + margin-right: 6px; +} + +.logo span { + font-size: 26px; + font-weight: 700; + color: #012970; + font-family: "Nunito", sans-serif; +} + +.header { + transition: all 0.5s; + z-index: 997; + height: 60px; + box-shadow: 0px 2px 20px rgba(1, 41, 112, 0.1); + background-color: #fff; + padding-left: 20px; + /* Toggle Sidebar Button */ + /* Search Bar */ +} + +.header .toggle-sidebar-btn { + font-size: 32px; + padding-left: 10px; + cursor: pointer; + color: #012970; +} + +.header .search-bar { + min-width: 360px; + padding: 0 20px; +} + +@media (max-width: 1199px) { + .header .search-bar { + position: fixed; + top: 50px; + left: 0; + right: 0; + padding: 20px; + box-shadow: 0px 0px 15px 0px rgba(1, 41, 112, 0.1); + background: white; + z-index: 9999; + transition: 0.3s; + visibility: hidden; + opacity: 0; + } + + .header .search-bar-show { + top: 60px; + visibility: visible; + opacity: 1; + } +} + +.header .search-form { + width: 100%; +} + +.header .search-form input { + border: 0; + font-size: 14px; + color: #012970; + border: 1px solid rgba(1, 41, 112, 0.2); + padding: 7px 38px 7px 8px; + border-radius: 3px; + transition: 0.3s; + width: 100%; +} + +.header .search-form input:focus, +.header .search-form input:hover { + outline: none; + box-shadow: 0 0 10px 0 rgba(1, 41, 112, 0.15); + border: 1px solid rgba(1, 41, 112, 0.3); +} + +.header .search-form button { + border: 0; + padding: 0; + margin-left: -30px; + background: none; +} + +.header .search-form button i { + color: #012970; +} + +/*-------------------------------------------------------------- +# Header Nav +--------------------------------------------------------------*/ +.header-nav ul { + list-style: none; +} + +.header-nav > ul { + margin: 0; + padding: 0; +} + +.header-nav .nav-icon { + font-size: 22px; + color: #012970; + margin-right: 25px; + position: relative; +} + +.header-nav .nav-profile { + color: #012970; +} + +.header-nav .nav-profile img { + max-height: 36px; +} + +.header-nav .nav-profile span { + font-size: 14px; + font-weight: 600; +} + +.header-nav .badge-number { + position: absolute; + inset: -2px -5px auto auto; + font-weight: normal; + font-size: 12px; + padding: 3px 6px; +} + +.header-nav .notifications { + inset: 8px -15px auto auto !important; +} + +.header-nav .notifications .notification-item { + display: flex; + align-items: center; + padding: 15px 10px; + transition: 0.3s; +} + +.header-nav .notifications .notification-item i { + margin: 0 20px 0 10px; + font-size: 24px; +} + +.header-nav .notifications .notification-item h4 { + font-size: 16px; + font-weight: 600; + margin-bottom: 5px; +} + +.header-nav .notifications .notification-item p { + font-size: 13px; + margin-bottom: 3px; + color: #919191; +} + +.header-nav .notifications .notification-item:hover { + background-color: #f6f9ff; +} + +.header-nav .messages { + inset: 8px -15px auto auto !important; +} + +.header-nav .messages .message-item { + padding: 15px 10px; + transition: 0.3s; +} + +.header-nav .messages .message-item a { + display: flex; +} + +.header-nav .messages .message-item img { + margin: 0 20px 0 10px; + max-height: 40px; +} + +.header-nav .messages .message-item h4 { + font-size: 16px; + font-weight: 600; + margin-bottom: 5px; + color: #444444; +} + +.header-nav .messages .message-item p { + font-size: 13px; + margin-bottom: 3px; + color: #919191; +} + +.header-nav .messages .message-item:hover { + background-color: #f6f9ff; +} + +.header-nav .profile { + min-width: 240px; + padding-bottom: 0; + top: 8px !important; +} + +.header-nav .profile .dropdown-header h6 { + font-size: 18px; + margin-bottom: 0; + font-weight: 600; + color: #444444; +} + +.header-nav .profile .dropdown-header span { + font-size: 14px; +} + +.header-nav .profile .dropdown-item { + font-size: 14px; + padding: 10px 15px; + transition: 0.3s; +} + +.header-nav .profile .dropdown-item i { + margin-right: 10px; + font-size: 18px; + line-height: 0; +} + +.header-nav .profile .dropdown-item:hover { + background-color: #f6f9ff; +} + +/*-------------------------------------------------------------- +# Sidebar +--------------------------------------------------------------*/ +.sidebar { + position: fixed; + top: 60px; + left: 0; + bottom: 0; + width: 300px; + z-index: 996; + transition: all 0.3s; + padding: 20px; + overflow-y: auto; + scrollbar-width: thin; + scrollbar-color: #aab7cf transparent; + box-shadow: 0px 0px 20px rgba(1, 41, 112, 0.1); + background-color: #fff; +} + +@media (max-width: 1199px) { + .sidebar { + left: -300px; + } +} + +.sidebar::-webkit-scrollbar { + width: 5px; + height: 8px; + background-color: #fff; +} + +.sidebar::-webkit-scrollbar-thumb { + background-color: #aab7cf; +} + +@media (min-width: 1200px) { + + #main, + #footer { + margin-left: 300px; + } +} + +@media (max-width: 1199px) { + .toggle-sidebar .sidebar { + left: 0; + } +} + +@media (min-width: 1200px) { + + .toggle-sidebar #main, + .toggle-sidebar #footer { + margin-left: 0; + } + + .toggle-sidebar .sidebar { + left: -300px; + } +} + +.sidebar-nav { + padding: 0; + margin: 0; + list-style: none; +} + +.sidebar-nav li { + padding: 0; + margin: 0; + list-style: none; +} + +.sidebar-nav .nav-item { + margin-bottom: 5px; +} + +.sidebar-nav .nav-heading { + font-size: 11px; + text-transform: uppercase; + color: #899bbd; + font-weight: 600; + margin: 10px 0 5px 15px; +} + +.sidebar-nav .nav-link { + display: flex; + align-items: center; + font-size: 15px; + font-weight: 600; + color: #4154f1; + transition: 0.3; + background: #f6f9ff; + padding: 10px 15px; + border-radius: 4px; +} + +.sidebar-nav .nav-link i { + font-size: 16px; + margin-right: 10px; + color: #4154f1; +} + +.sidebar-nav .nav-link.collapsed { + color: #012970; + background: #fff; +} + +.sidebar-nav .nav-link.collapsed i { + color: #899bbd; +} + +.sidebar-nav .nav-link:hover { + color: #4154f1; + background: #f6f9ff; +} + +.sidebar-nav .nav-link:hover i { + color: #4154f1; +} + +.sidebar-nav .nav-link .bi-chevron-down { + margin-right: 0; + transition: transform 0.2s ease-in-out; +} + +.sidebar-nav .nav-link:not(.collapsed) .bi-chevron-down { + transform: rotate(180deg); +} + +.sidebar-nav .nav-content { + padding: 5px 0 0 0; + margin: 0; + list-style: none; +} + +.sidebar-nav .nav-content a { + display: flex; + align-items: center; + font-size: 14px; + font-weight: 600; + color: #012970; + transition: 0.3; + padding: 10px 0 10px 40px; + transition: 0.3s; +} + +.sidebar-nav .nav-content a i { + font-size: 6px; + margin-right: 8px; + line-height: 0; + border-radius: 50%; +} + +.sidebar-nav .nav-content a:hover, +.sidebar-nav .nav-content a.active { + color: #4154f1; +} + +.sidebar-nav .nav-content a.active i { + background-color: #4154f1; +} + +/*-------------------------------------------------------------- +# Dashboard +--------------------------------------------------------------*/ +/* Filter dropdown */ +.dashboard .filter { + position: absolute; + right: 0px; + top: 15px; +} + +.dashboard .filter .icon { + color: #aab7cf; + padding-right: 20px; + padding-bottom: 5px; + transition: 0.3s; + font-size: 16px; +} + +.dashboard .filter .icon:hover, +.dashboard .filter .icon:focus { + color: #4154f1; +} + +.dashboard .filter .dropdown-header { + padding: 8px 15px; +} + +.dashboard .filter .dropdown-header h6 { + text-transform: uppercase; + font-size: 14px; + font-weight: 600; + letter-spacing: 1px; + color: #aab7cf; + margin-bottom: 0; + padding: 0; +} + +.dashboard .filter .dropdown-item { + padding: 8px 15px; +} + +/* Info Cards */ +.dashboard .info-card { + padding-bottom: 10px; +} + +.dashboard .info-card h6 { + font-size: 28px; + color: #012970; + font-weight: 700; + margin: 0; + padding: 0; +} + +.dashboard .card-icon { + font-size: 32px; + line-height: 0; + width: 64px; + height: 64px; + flex-shrink: 0; + flex-grow: 0; +} + +.dashboard .first-card .card-icon { + color: #4154f1; + background: #f6f6fe; +} + +.dashboard .second-card .card-icon { + color: #2eca6a; + background: #e0f8e9; +} + +.dashboard .third-card .card-icon { + color: #ff771d; + background: #ffecdf; +} + +/* Activity */ +.dashboard .activity { + font-size: 14px; +} + +.dashboard .activity .activity-item .activite-label { + color: #888; + position: relative; + flex-shrink: 0; + flex-grow: 0; + min-width: 64px; +} + +.dashboard .activity .activity-item .activite-label::before { + content: ""; + position: absolute; + right: -11px; + width: 4px; + top: 0; + bottom: 0; + background-color: #eceefe; +} + +.dashboard .activity .activity-item .activity-badge { + margin-top: 3px; + z-index: 1; + font-size: 11px; + line-height: 0; + border-radius: 50%; + flex-shrink: 0; + border: 3px solid #fff; + flex-grow: 0; +} + +.dashboard .activity .activity-item .activity-content { + padding-left: 10px; + padding-bottom: 20px; +} + +.dashboard .activity .activity-item:first-child .activite-label::before { + top: 5px; +} + +.dashboard .activity .activity-item:last-child .activity-content { + padding-bottom: 0; +} + +/* News & Updates */ +.dashboard .news .post-item + .post-item { + margin-top: 15px; +} + +.dashboard .news img { + width: 80px; + float: left; + border-radius: 5px; +} + +.dashboard .news h4 { + font-size: 15px; + margin-left: 95px; + font-weight: bold; + margin-bottom: 5px; +} + +.dashboard .news h4 a { + color: #012970; + transition: 0.3s; +} + +.dashboard .news h4 a:hover { + color: #4154f1; +} + +.dashboard .news p { + font-size: 14px; + color: #777777; + margin-left: 95px; +} + +/* Recent Sales */ +.dashboard .recent-sales { + font-size: 14px; +} + +.dashboard .recent-sales .table thead { + background: #f6f6fe; +} + +.dashboard .recent-sales .table thead th { + border: 0; +} + +.dashboard .recent-sales .dataTable-top { + padding: 0 0 10px 0; +} + +.dashboard .recent-sales .dataTable-bottom { + padding: 10px 0 0 0; +} + +/* Top Selling */ +.dashboard .top-selling { + font-size: 14px; +} + +.dashboard .top-selling .table thead { + background: #f6f6fe; +} + +.dashboard .top-selling .table thead th { + border: 0; +} + +.dashboard .top-selling .table tbody td { + vertical-align: middle; +} + +.dashboard .top-selling img { + border-radius: 5px; + max-width: 60px; +} + +/*-------------------------------------------------------------- +# Icons list page +--------------------------------------------------------------*/ +.iconslist { + display: grid; + max-width: 100%; + grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); + gap: 1.25rem; + padding-top: 15px; +} + +.iconslist .icon { + background-color: #fff; + border-radius: 0.25rem; + text-align: center; + color: #012970; + padding: 15px 0; +} + +.iconslist i { + margin: 0.25rem; + font-size: 2.5rem; +} + +.iconslist .label { + font-family: var(--bs-font-monospace); + display: inline-block; + width: 100%; + overflow: hidden; + padding: 0.25rem; + font-size: 12px; + text-overflow: ellipsis; + white-space: nowrap; + color: #666; +} + +/*-------------------------------------------------------------- +# Profie Page +--------------------------------------------------------------*/ +.profile .profile-card img { + max-width: 120px; +} + +.profile .profile-card h2 { + font-size: 24px; + font-weight: 700; + color: #2c384e; + margin: 10px 0 0 0; +} + +.profile .profile-card h3 { + font-size: 18px; +} + +.profile .profile-card .social-links a { + font-size: 20px; + display: inline-block; + color: rgba(1, 41, 112, 0.5); + line-height: 0; + margin-right: 10px; + transition: 0.3s; +} + +.profile .profile-card .social-links a:hover { + color: #012970; +} + +.profile .profile-overview .row { + margin-bottom: 20px; + font-size: 15px; +} + +.profile .profile-overview .card-title { + color: #012970; +} + +.profile .profile-overview .label { + font-weight: 600; + color: rgba(1, 41, 112, 0.6); +} + +.profile .profile-edit label { + font-weight: 600; + color: rgba(1, 41, 112, 0.6); +} + +.profile .profile-edit img { + max-width: 120px; +} + +/*-------------------------------------------------------------- +# F.A.Q Page +--------------------------------------------------------------*/ +.faq .basic h6 { + font-size: 18px; + font-weight: 600; + color: #4154f1; +} + +.faq .basic p { + color: #6980aa; +} + +/*-------------------------------------------------------------- +# Contact +--------------------------------------------------------------*/ +.contact .info-box { + padding: 28px 30px; +} + +.contact .info-box i { + font-size: 38px; + line-height: 0; + color: #4154f1; +} + +.contact .info-box h3 { + font-size: 20px; + color: #012970; + font-weight: 700; + margin: 20px 0 10px 0; +} + +.contact .info-box p { + padding: 0; + line-height: 24px; + font-size: 14px; + margin-bottom: 0; +} + +.contact .php-email-form .error-message { + display: none; + color: #fff; + background: #ed3c0d; + text-align: left; + padding: 15px; + margin-bottom: 24px; + font-weight: 600; +} + +.contact .php-email-form .sent-message { + display: none; + color: #fff; + background: #18d26e; + text-align: center; + padding: 15px; + margin-bottom: 24px; + font-weight: 600; +} + +.contact .php-email-form .loading { + display: none; + background: #fff; + text-align: center; + padding: 15px; + margin-bottom: 24px; +} + +.contact .php-email-form .loading:before { + content: ""; + display: inline-block; + border-radius: 50%; + width: 24px; + height: 24px; + margin: 0 10px -6px 0; + border: 3px solid #18d26e; + border-top-color: #eee; + animation: animate-loading 1s linear infinite; +} + +.contact .php-email-form input, +.contact .php-email-form textarea { + border-radius: 0; + box-shadow: none; + font-size: 14px; + border-radius: 0; +} + +.contact .php-email-form input:focus, +.contact .php-email-form textarea:focus { + border-color: #4154f1; +} + +.contact .php-email-form input { + padding: 10px 15px; +} + +.contact .php-email-form textarea { + padding: 12px 15px; +} + +.contact .php-email-form button[type=submit] { + background: #4154f1; + border: 0; + padding: 10px 30px; + color: #fff; + transition: 0.4s; + border-radius: 4px; +} + +.contact .php-email-form button[type=submit]:hover { + background: #5969f3; +} + +@keyframes animate-loading { + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(360deg); + } +} + +/*-------------------------------------------------------------- +# Error 404 +--------------------------------------------------------------*/ +.error-404 { + padding: 30px; +} + +.error-404 h1 { + font-size: 180px; + font-weight: 700; + color: #4154f1; + margin-bottom: 0; + line-height: 150px; +} + +.error-404 h2 { + font-size: 24px; + font-weight: 700; + color: #012970; + margin-bottom: 30px; +} + +.error-404 .btn { + background: #51678f; + color: #fff; + padding: 8px 30px; +} + +.error-404 .btn:hover { + background: #3e4f6f; +} + +@media (min-width: 992px) { + .error-404 img { + max-width: 50%; + } +} + +/*-------------------------------------------------------------- +# Footer +--------------------------------------------------------------*/ +.footer { + padding: 20px 0; + font-size: 14px; + transition: all 0.3s; + border-top: 1px solid #cddfff; +} + +.footer .copyright { + text-align: center; + color: #012970; +} + +.footer .credits { + padding-top: 5px; + text-align: center; + font-size: 13px; + color: #012970; +} diff --git a/assets/styles/app.scss b/assets/styles/app.scss index 19b0ca9..823fd4e 100644 --- a/assets/styles/app.scss +++ b/assets/styles/app.scss @@ -1 +1,10 @@ @import "~bootstrap/scss/bootstrap"; +@import "~remixicon/fonts/remixicon.css"; +@import "./NiceAdmin/style"; // NiceAdmin theme +@import url('https://fonts.cdnfonts.com/css/nunito'); // NiceAdmin font +@import url('https://fonts.cdnfonts.com/css/open-sans'); // NiceAdmin font +@import url('https://fonts.cdnfonts.com/css/poppins'); // NiceAdmin font + +#full-height-page-body { + min-height: 50rem; +} diff --git a/package-lock.json b/package-lock.json index c36a458..6bd6788 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,6 +5,9 @@ "packages": { "": { "license": "UNLICENSED", + "dependencies": { + "remixicon": "^4.2.0" + }, "devDependencies": { "@babel/core": "^7.17.0", "@babel/preset-env": "^7.16.0", @@ -7026,6 +7029,11 @@ "jsesc": "bin/jsesc" } }, + "node_modules/remixicon": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/remixicon/-/remixicon-4.2.0.tgz", + "integrity": "sha512-MF5wApNveRh3n0iMVM+lr2nSWrj/rBbSD2eWapuD9ReYRGs5naAUR1BqVBCHGqm286FIS6zwwmUf96QjHQ9l4w==" + }, "node_modules/renderkid": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/renderkid/-/renderkid-3.0.0.tgz", diff --git a/package.json b/package.json index fad1d76..7ddc817 100644 --- a/package.json +++ b/package.json @@ -26,5 +26,8 @@ "dev": "encore dev", "watch": "encore dev --watch", "build": "encore production --progress" + }, + "dependencies": { + "remixicon": "^4.2.0" } } diff --git a/templates/base.html.twig b/templates/base.html.twig index 796ed7d..c0c3dbb 100644 --- a/templates/base.html.twig +++ b/templates/base.html.twig @@ -2,7 +2,7 @@ - {% block title %}Welcome!{% endblock %} - Structura + {% block title %}Accueil{% endblock %} - Structura {% block stylesheets %} {{ encore_entry_link_tags('app') }} @@ -13,6 +13,220 @@ {% endblock %} - {% block body %}{% endblock %} - + {# Top bar #} + + + {# Left sidebar #} + + +
+ {% block breadcrumb %} +
+

Accueil

+ +
+ {% endblock %} +
+ {% block body %}{% endblock %} +
+
+ + {# Footer #} + + + + + + diff --git a/templates/home/index.html.twig b/templates/home/index.html.twig index 6e1b9b2..b5d0b74 100644 --- a/templates/home/index.html.twig +++ b/templates/home/index.html.twig @@ -3,23 +3,91 @@ {% block title %}Accueil{% endblock %} {% block body %} - {% if (app.user) %} - User logged in: {{ app.user.username }} -
- Roles: -
- {% for role in app.user.roles %} - {{ role }}
- {% endfor %} - {% else %} - No user logged in - {% endif %} -
- Navigation: -
- Logout -
- {% if is_granted('ROLE_ADMIN') %} - Administration panel - {% endif %} +
+
+ {# Left column #} +
+
+ {# First card #} +
+
+
+
Placeholder card | Subtitle
+
+
+ +
+
+
145
+ 12% + increase +
+
+
+
+
+ + {# Second card #} +
+
+
+
Placeholder card | Subtitle
+
+
+ +
+
+
$3,264
+ 8% + increase +
+
+
+
+
+ + {# Third card #} +
+
+
+
Placeholder card | Subtitle
+
+
+ +
+
+
1244
+ 12% + decrease + +
+
+
+
+
+ + {# Fourth card #} +
+
+
+
Placeholder card | Subtitle
+
More content to come...
+
+
+
+
+
+ + {# Right column #} +
+ {# First card #} +
+
+
Placeholder card | Subtitle
+
More content to come...
+
+
+
+
+
{% endblock %}