From 63f714d5a78b765c117ebf6bbdfdbd748dd45644 Mon Sep 17 00:00:00 2001 From: George Halkiadakis Date: Thu, 4 May 2023 03:02:01 +0300 Subject: authentication; invitation; activation; base form setup --- public/assets/css/admin.css | 90 ++++------- public/assets/css/class.css | 345 +---------------------------------------- public/assets/js/invitation.md | 51 ++++++ 3 files changed, 90 insertions(+), 396 deletions(-) create mode 100644 public/assets/js/invitation.md (limited to 'public/assets') diff --git a/public/assets/css/admin.css b/public/assets/css/admin.css index 4bd8718..58fcc45 100644 --- a/public/assets/css/admin.css +++ b/public/assets/css/admin.css @@ -5,31 +5,31 @@ --class-btn-grey-light: #c9c9c999; } -.classroom .manage { +.office .manage { width: 100%; max-width: 1600px; margin: 0 auto 2em; } -.classroom .manage.maximized { max-width: 1960px; } -.classroom .manage.minimized { max-width: 960px; } -.classroom .manage.edit-post { max-width: 1420px; } +.office .manage.maximized { max-width: 1960px; } +.office .manage.minimized { max-width: 960px; } +.office .manage.edit-post { max-width: 1420px; } -.classroom .edit-post textarea[name=intro] { height: 12vh; } -.classroom .edit-post textarea[name=body] { +.office .edit-post textarea[name=intro] { height: 12vh; } +.office .edit-post textarea[name=body] { height: calc(100vh - 492px); min-height:320px; font-family: Consolas, 'Ubuntu Mono','Courier New', Courier, monospace; color: #333; } -.classroom .edit-post .post-media button.over-bar { margin: -26px 0 0 0; } -.classroom .edit-post .post-media ul { +.office .edit-post .post-media button.over-bar { margin: -26px 0 0 0; } +.office .edit-post .post-media ul { border: 1px solid #ccc; border-radius: 4px; padding: 6px; } -.classroom .edit-post .post-media ul li { +.office .edit-post .post-media ul li { border-bottom: 1px solid #ddd; list-style-type: none; padding: 3px 6px; @@ -38,77 +38,77 @@ justify-content: space-between; align-items: center; } -.classroom .edit-post .post-media ul li:last-child { border-bottom: none ;} -.classroom .edit-post .post-media ul li:hover { background: #eee; } +.office .edit-post .post-media ul li:last-child { border-bottom: none ;} +.office .edit-post .post-media ul li:hover { background: #eee; } -.classroom .manage h2 { +.office .manage h2 { font-size: 20px; color: #445; margin: 20px 0; } -.classroom .manage.edit-post textarea { width: 100% !important;} -.classroom .manage.edit-post .select2-selection { min-height: 34px; } +.office .manage.edit-post textarea { width: 100% !important;} +.office .manage.edit-post .select2-selection { min-height: 34px; } -.classroom .manage.edit-post select#status.published { +.office .manage.edit-post select#status.published { background-color: #5cb85c; border-color: #4cae4c; color: #fff; text-align: center; } -.classroom .manage.edit-post select#status option { +.office .manage.edit-post select#status option { background: #fff; color: #333; } /* --- optional fields: defaut=hide --- */ -.classroom .edit-post .optional label { +.office .edit-post .optional label { margin-bottom: 1em; padding-bottom: .5em; border-bottom: 1px solid var(--class-btn-grey-light) } -.classroom .edit-post .optional label.show { +.office .edit-post .optional label.show { margin-bottom: unset; border: none; } -.classroom .edit-post .optional label:hover { +.office .edit-post .optional label:hover { cursor: pointer; color: var(--class-btn-blue); } -.classroom .edit-post .optional label::after { float: right; content: "+"; } -.classroom .edit-post .optional label.show::after { content: "–"; } -.classroom .edit-post .optional label + div { display: none; } -.classroom .edit-post .optional label.show + div { display: block; } +.office .edit-post .optional label::after { float: right; content: "+"; } +.office .edit-post .optional label.show::after { content: "–"; } +.office .edit-post .optional label + div { display: none; } +.office .edit-post .optional label.show + div { display: block; } .alert.alert-info.title-bar { min-height: 52px; margin-top: 20px; } .alert.alert-info.title-bar button { margin-left: 8px; } -.classroom .title-bar { +.office .title-bar { display: flex; justify-content: space-between; align-items: center; padding: 8px 8px 8px 16px; } -.classroom .action-btn button { float: right; } +.office .action-btn button { float: right; } -.classroom .top-bar { padding: 4px 0; } +.office .top-bar { padding: 4px 0; } -.classroom .top-bar .breadcrumb .btn { +.office .top-bar .breadcrumb .btn { margin-left: 0; margin-right: 8px; border-radius: 3px; color: var(--class-btn-blue); } -.classroom .top-bar .btn:hover { +.office .top-bar .btn:hover { background-color: var(--class-btn-grey-light); } -.classroom .top-bar .btn.selected { +.office .top-bar .btn.selected { color: #fff; background-color: var(--class-btn-blue); } @@ -116,35 +116,9 @@ /* --- dataTables --- */ -.classroom .manage .dataTable tbody tr:hover { background: #f8f8f8; } -.classroom .manage .dataTable .dt-actions { width: 48px; text-align: right } +.office .manage .dataTable tbody tr:hover { background: #f8f8f8; } +.office .manage .dataTable .dt-actions { width: 48px; text-align: right } /* --- unpublished posts -- */ -.classroom .manage .dataTable .fa-eye-slash { color: #999; } - - -.classroom .js-copy:hover::after { - opacity: 0; - pointer-events: none; - background: #ddd7; - border-radius: 2px; - content: "Copy"; - padding: .25em .75em; - position: absolute; - z-index: 10; - transform-origin: top; - margin-top: -16px; - transform: translate(-50%, 0); -} - -.classroom .js-copy.copied:hover::after { - content: "Αντιγράφηκε"; - opacity: 1; - margin-top: -22px; - transform: translate(-50%, 0); - transition: all 0.18s ease-out 0.18s; - background: #eee; - border: 1px solid #ddd9; -} +.office .manage .dataTable .fa-eye-slash { color: #999; } - \ No newline at end of file diff --git a/public/assets/css/class.css b/public/assets/css/class.css index 5252975..4747507 100644 --- a/public/assets/css/class.css +++ b/public/assets/css/class.css @@ -1,7 +1,7 @@ -/** Classroom sections +/** Office sections * (main layout css-classes) * ----------------------------------------------------------------------------- - * .classroom { + * .office { * .top-bar { * .breadcrumb * .admin @@ -37,7 +37,7 @@ * ---------------------------------------------------------------------------- */ -.classroom .top-bar { +.office .top-bar { display: flex; justify-content: space-between; align-items: center; @@ -47,348 +47,17 @@ background: var(--light-grey-bgr); } -.classroom .top-bar .breadcrumb { margin: 0; padding: 0; background: none; } - -.classroom .top-bar .fa, -.classroom .top-bar .fas { +.office .top-bar .fa, +.office .top-bar .fas { width: 32px; text-align: center; } - -.classroom .main-content { +.office .main-content { padding: 1.5em; max-width: 1440px; min-height: calc(100vh - 345px); } - -/* category list menu - * ----------------------------------------------------------------------------- - */ - -.classroom .side-bar { padding-right: 1em; } - - -.classroom .side-bar h3 { - font-weight: 600; font-size: 1em; - color: var(--class-blue); -} - - /* --- ul > li > a --- */ - -.classroom .side-bar ul { list-style: none; padding: 0; } -.classroom .side-bar ul li { margin: 0.5em 0; } -.classroom .side-bar ul li a { - display: flex; - padding: .2em; - background: #4442; - border-radius: 6px; - transition: background 0.3s; -} -.classroom .side-bar ul li a:hover, -.classroom .side-bar ul li a:active { - background: #cde; - text-decoration: none; -} - -/* --- li > a > span --- */ - -.classroom .side-bar ul li a span { - display: block; - align-self: center; - padding: .3em; -} -.classroom .side-bar ul li a .label { - font-size: 13px; - color: var(--class-blue-dark); - flex-grow: 1; - text-align: left; - padding-left: 1em; - border-radius: 6px; - white-space: normal; - font-weight: 400; -} - -/* --- inner --- */ - -.classroom .side-bar ul .inner { - padding-left: 1em; - overflow: hidden; - display: none; -} -.classroom .side-bar ul .inner.show { display: block; } - -/* --- has-childs | toggler --- */ - -.classroom .side-bar ul li a.has-childs { background: #9bf4; } -.classroom .side-bar ul li a.has-childs:hover { background: #cde;} - -.classroom .side-bar ul li a.has-childs .label { - font-weight: 600; - border-radius: 6px 0 0 6px; - width: calc(100% - 36px); -} - -.classroom .side-bar ul li a.has-childs .toggler { - text-align: center; - width: 32px; - font-size: 15px; - border-radius: 4px; - background: #7774; - font-weight: 700; -} -.classroom .side-bar ul li a.has-childs .toggler:hover { - background: var(--class-blue); - color: #fff; -} -.classroom .side-bar ul li a.selected { - background: var(--class-orange-opaque); -} -.classroom .side-bar ul li a:hover, -.classroom .side-bar ul li a:active, -.classroom .side-bar ul li a:focus, -.classroom .side-bar ul li a:visited, -.classroom .side-bar ul li a:link, -.classroom .side-bar ul li a span:hover, -.classroom .side-bar ul li a span:active, -.classroom .side-bar ul li a span:focus, -.classroom .side-bar ul li a span:visited, -.classroom .side-bar ul li a span:link, -.classroom .side-bar ul li a span:target { text-decoration: none !important; } - - - -.classroom .lesson-view img { max-width: 100%; } - - - -/** breadcrumb - * ----------------------------------------------------------------------------- - */ - -.classroom .breadcrumb a { counter-reset: var(--class-blue); font-size: 14px; } -.classroom .breadcrumb i.fas { padding-top: 7px; font-size: 12px; } - - - - -/** content - * ----------------------------------------------------------------------------- - */ - -.classroom .content--wrapper { - max-width: 1024px; - width: 100%; - margin: 1em auto; - padding: 0 2em 2em 2em; -} -.classroom .content h2 { - font-weight: 700; - font-size: 24px; - padding: 8px 3em 1em 0; /* 1em 3em 1em 0; */ - color: var(--class-blue-dark); -} -.classroom .content h3 { - font-weight: 600; font-size: 1.4em; - padding: 1em 3em 1em 0; - color: var(--class-blue); - border-bottom: 1px dashed var(--class-blue-opaque); -} -.classroom .content h3 span { font-weight: 400; color: #444; } -.classroom .content p { - line-height: 150%; - padding: 5px 0; -} - -/* --- post: medias -- */ -/* DEPRICATED: not needed -.classroom .content--wrapper .medias { - padding: 2em 0 1em; - border-top: 1px solid var(--class-grey-background); -} -.classroom .content--wrapper .medias ol li { - margin-left: -12px; - padding: 2px 8px; -} -.classroom .content--wrapper .medias ol li::marker { - font-size: 12px; - color: #999; -} -*/ - -/* --- post: tags --- */ - -.classroom .content--wrapper .tags { - padding: 2em 0 1em; - border-top: 1px solid var(--class-grey-background); -} -.classroom .content--wrapper .tags a { - color: #444; - background-color: var(--class-grey-background); - padding: 6px 12px; - margin: 6px; - border-radius: 3px; -} - - - -.classroom .course-view h5 { padding-top: 2em; } - -/** sub-categories on category page - * ----------------------------------------------------------------------------- - */ -/* -.classroom .category-childs { margin: 1em; padding: 1em; } - -.classroom .category-childs a { - display: inline-block; - margin: .5em; - padding: .2em 2em; - border-radius: 2em; - border: 1px solid var(--class-blue); - line-height: 2em; - font-weight: 600; - transition: background 0.3s; -} - -.classroom .category-childs a:hover { - background-color: var(--class-blue); - color: #fffe; - text-decoration: none; -} - -*/ - - - -/** articles-list - * ----------------------------------------------------------------------------- - * 22 | Title of artivle - * July | path / of / categories - * 2023 | * some intro of article - * ----------------------------------------------------------------------------- - */ -.classroom .post-card { - padding-top: .75em; - margin: 0; - border-bottom: 1px solid #7773; - display: flex; -} -.classroom .post-card .post-card--content { - flex-grow: 1; - width: calc(100% - 90px); -} -.classroom .post-card h3 { padding: 0; margin: 0; border: none; font-size: 20px; } -.classroom .post-card h3 a { display: block; } -.classroom .post-card h3 a:hover { color: #f47920; } -.classroom .post-card .category { color: #566; } -.classroom .post-card .intro { - font-style: italic; - font-size: 16px; -} -/* --- date block --- */ -.classroom .date { - display: flex; - flex-direction: column; - width: 90px; -} -.classroom .date p { - padding: 0; margin: 0; - line-height: 115%; - text-align: center; -} -.classroom .date .day { font-size: 24px; color: var(--class-blue-opaque); } -.classroom .date .month { font-size: 16px; color: #555; } -.classroom .date .year { font-size: 12px; color: #666; } - - - - -.classroom .content-form h3 { color: #369; opacity: 0.9; } - - - - -/** post (article) - * ----------------------------------------------------------------------------- - */ - - - -.classroom .lesson-view h2 { padding-bottom: 0; font-size: 24px; } - -.classroom .lesson-view h2 span { float:right; margin-right: -3em;} - -.classroom .lesson-view pre { padding: 1em; background: #f5f5f6;} - -.classroom .lesson-view .intro { - font-style: italic; - font-size: 18px; - color: var(--class-blue-dark); - padding-bottom: 1em; -} - -.classroom .lesson-view .post--date { - padding: 0; - color: var(--class-blue); -} - -.classroom .article-body img { - display: block; - max-width: 100%; - margin: 1em auto; -} -/* -.classroom .article-body a.modal-toggler { - padding: 0 16px; - background: #def; - color: #334; - border-radius: 3px; - text-decoration: none; - border: 1px solid var(--class-blue-opaque); -} -.classroom .article-body a.modal-toggler:hover { background: var(--class-blue); color: #fff; } -*/ -.classroom .article-body table { - margin: 20px auto; - min-width: 67%; - border-spacing: 6px 0; - border-collapse: separate; -} -.classroom .article-body table tr { margin: 4px; } -.classroom .article-body table thead th { - color: var(--class-btn-blue); - border-bottom: 3px solid var(--class-blue); - padding: 0 8px; - text-align: revert-layer; -} -.classroom .article-body table tbody td { - padding: 6px 8px; - border-bottom: 1px solid var(--class-grey-background); -} - - - -.classroom footer { - margin: 2em 0 0 0; - padding: 2.5em 0; - font-size: .87em; - background: #f5f6f7; -} -.classroom footer a { - color: #024; - text-decoration: none; - padding: 2px 36px 2px 4px; - border-radius: 3px; -} -.classroom footer a:hover { color: #fff; background: #369 ; } -.classroom footer h4 { font-size: 20px; } -.classroom footer .no-list-mark ul { padding-left: 0; margin-left: 0; list-style: none; } -.classroom footer .no-list-mark ul li { margin: 0 0 4px 0; } - - -.classroom .page-container { max-width: 1024px; } - -iframe .ytp-chrome-top-buttons { display: none !important; } \ No newline at end of file +.office .page-container { max-width: 1024px; } diff --git a/public/assets/js/invitation.md b/public/assets/js/invitation.md new file mode 100644 index 0000000..ebcf0f7 --- /dev/null +++ b/public/assets/js/invitation.md @@ -0,0 +1,51 @@ +# SELECT2 HANDLING + +handling select2 properties (case-study javascript code) + + +## get all options' loop through all ... + + opts = $('#sector').select2()[0].options + for(i=0; i { let id = get_id_of_text(control, t); + if (id !== false) ids.push(id); + }) + control.val(ids).change(); + } + select2_set_multi_text( $('#tags') , ['crime', '90s']) /* call */ + -- cgit v1.2.3