mirror of
https://github.com/FH-Complete/FHC-Core.git
synced 2026-06-01 12:19:28 +00:00
feature(Cis Color Themes): makes it possible to change color theme of the application
This commit is contained in:
SimonGschnell
@@ -172,6 +172,7 @@ class Stundenplan extends FHCAPI_Controller
|
||||
*/
|
||||
public function getRoomplan()
|
||||
{
|
||||
$this->load->library('StundenplanLib');
|
||||
// form validation
|
||||
$this->load->library('form_validation');
|
||||
$this->form_validation->set_data($_GET);
|
||||
@@ -188,8 +189,7 @@ class Stundenplan extends FHCAPI_Controller
|
||||
$roomplan_data = $this->StundenplanModel->stundenplanGruppierung($this->StundenplanModel->getRoomQuery($ort_kurzbz, $start_date, $end_date));
|
||||
|
||||
$roomplan_data = $this->getDataOrTerminateWithError($roomplan_data);
|
||||
|
||||
$this->expand_object_information($roomplan_data);
|
||||
$this->stundenplanlib->expand_object_information($roomplan_data);
|
||||
|
||||
$this->terminateWithSuccess($roomplan_data);
|
||||
|
||||
@@ -198,6 +198,7 @@ class Stundenplan extends FHCAPI_Controller
|
||||
// gets the reservierungen of a room if the ort_kurzbz parameter is supplied otherwise gets the reservierungen of the stundenplan of a student
|
||||
public function Reservierungen($ort_kurzbz = null)
|
||||
{
|
||||
$this->load->library('StundenplanLib');
|
||||
//form validation
|
||||
$this->load->library('form_validation');
|
||||
$this->form_validation->set_data($_GET);
|
||||
@@ -211,7 +212,6 @@ class Stundenplan extends FHCAPI_Controller
|
||||
$start_date = $this->input->get('start_date', TRUE);
|
||||
$end_date = $this->input->get('end_date', TRUE);
|
||||
|
||||
$this->load->library('StundenplanLib');
|
||||
$result = $this->stundenplanlib->getReservierungen($start_date,$end_date,$ort_kurzbz);
|
||||
$result = $this->getDataOrTerminateWithError($result);
|
||||
$this->terminateWithSuccess($result);
|
||||
|
||||
@@ -144,8 +144,8 @@ class StundenplanLib{
|
||||
}
|
||||
|
||||
|
||||
private function expand_object_information($data){
|
||||
|
||||
public function expand_object_information($data){
|
||||
$this->_ci =& get_instance();
|
||||
foreach ($data as $item)
|
||||
{
|
||||
|
||||
|
||||
@@ -2,7 +2,8 @@
|
||||
$includesArray = array(
|
||||
'title' => 'FH-Complete',
|
||||
'bootstrap5' => true,
|
||||
'fontawesome6' => true
|
||||
'fontawesome6' => true,
|
||||
'customJSs' => 'public/js/helpers/ColorThemeSetting.js'
|
||||
);
|
||||
|
||||
$this->load->view('templates/FHC-Header', $includesArray);
|
||||
|
||||
@@ -4,8 +4,8 @@
|
||||
<!-- Beantragung: Fristen panel -->
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header">
|
||||
<div class="bg-info-subtle accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#Beantragung" aria-expanded="true" aria-controls="Beantragung">
|
||||
<div class="d-flex">
|
||||
<div class="bg-info-subtle accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#Beantragung" aria-expanded="true" aria-controls="Beantragung">
|
||||
|
||||
<i class="me-2 fa fa-lg fa-info-circle" aria-hidden="true"></i> 
|
||||
<?php echo $this->p->t('anrechnung', 'requestAnrechnungInfoFristenTitle'); ?>
|
||||
@@ -22,8 +22,8 @@
|
||||
<!-- Referenzbeispiele ECTS Berechnung panel -->
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header">
|
||||
<div class="bg-info-subtle accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#Referenzbeispiele" aria-expanded="false" aria-controls="Referenzbeispiele">
|
||||
<div class="d-flex">
|
||||
<div class="bg-info-subtle accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#Referenzbeispiele" aria-expanded="false" aria-controls="Referenzbeispiele">
|
||||
<i class="me-2 fa fa-lg fa-info-circle" aria-hidden="true"></i> 
|
||||
<?php echo $this->p->t('anrechnung', 'requestAnrechnungInfoEctsBerechnungTitle'); ?>
|
||||
</div>
|
||||
@@ -54,8 +54,8 @@
|
||||
<!-- Herkunft der Kenntnisse: Angaben panel -->
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header">
|
||||
<div class="bg-info-subtle accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#HerkunftKenntnisse" aria-expanded="false" aria-controls="HerkunftKenntnisse">
|
||||
<div class="d-flex">
|
||||
<div class="bg-info-subtle accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#HerkunftKenntnisse" aria-expanded="false" aria-controls="HerkunftKenntnisse">
|
||||
<i class="me-2 fa fa-lg fa-info-circle" aria-hidden="true"></i> 
|
||||
<?php echo $this->p->t('anrechnung', 'requestAnrechnungInfoHerkunftKenntnisseTitle'); ?>
|
||||
</div>
|
||||
|
||||
+3
-3
@@ -308,9 +308,9 @@
|
||||
"type": "package",
|
||||
"package": {
|
||||
"name": "twbs/bootstrap5",
|
||||
"version": "5.1.3",
|
||||
"version": "5.3",
|
||||
"dist": {
|
||||
"url": "https://github.com/twbs/bootstrap/archive/refs/tags/v5.1.3.zip",
|
||||
"url": "https://github.com/twbs/bootstrap/archive/refs/tags/v5.3.zip",
|
||||
"type": "zip"
|
||||
}
|
||||
}
|
||||
@@ -473,7 +473,7 @@
|
||||
"tinymce/tinymce5": "5.10.*",
|
||||
"tomazdragar/simplecropper": "1.0",
|
||||
"twbs/bootstrap3": "3.4.*",
|
||||
"twbs/bootstrap5": "5.1.*",
|
||||
"twbs/bootstrap5": "5.3.*",
|
||||
|
||||
"vuejs/vuejs3": "3.3.8",
|
||||
"vuejs/vuerouter4": "4.1.3",
|
||||
|
||||
+187
-58
@@ -1,4 +1,5 @@
|
||||
/* basic */
|
||||
@import './CisVariables.css';
|
||||
@import '../components/searchbar/searchbar.css';
|
||||
@import '../components/Sprachen.css';
|
||||
|
||||
@@ -6,57 +7,176 @@ html {
|
||||
font-size: 0.875em;
|
||||
}
|
||||
|
||||
/* variables */
|
||||
:root {
|
||||
--fhc-cis-primary: #00649c;
|
||||
--fhc-cis-primary-hover: #005585;
|
||||
--fhc-cis-header-px: 1rem;
|
||||
--fhc-cis-header-py: .5rem;
|
||||
--fhc-cis-main-px: 1.5rem;
|
||||
--fhc-cis-main-py: 1.5rem;
|
||||
--fhc-cis-menu-lvl-1-bg: #00649c;
|
||||
--fhc-cis-menu-lvl-1-color: #fff;
|
||||
--fhc-cis-menu-lvl-1-bg-hover: #005585;
|
||||
--fhc-cis-menu-lvl-1-color-hover: #fff;
|
||||
--fhc-cis-menu-lvl-2-bg: #343a40;
|
||||
--fhc-cis-menu-lvl-2-color: #fff;
|
||||
--fhc-cis-menu-lvl-2-bg-hover: #2c3136;
|
||||
--fhc-cis-menu-lvl-2-color-hover: #fff;
|
||||
--fhc-cis-menu-lvl-2-color-active: #292b2a;
|
||||
--fhc-cis-menu-lvl-3-bg: #72777A;
|
||||
--fhc-cis-menu-lvl-3-color: #fff;
|
||||
--fhc-cis-menu-lvl-3-bg-hover: #616568;
|
||||
--fhc-cis-menu-lvl-3-color-hover: #fff;
|
||||
--fhc-cis-menu-lvl-4-bg: #ced4da;
|
||||
--fhc-cis-menu-lvl-4-color: #000;
|
||||
--fhc-cis-menu-lvl-4-bg-hover: #d5dae0;
|
||||
--fhc-cis-menu-lvl-4-color-hover: #000;
|
||||
--fhc-cis-menu-lvl-5-bg: #e9ecef;
|
||||
--fhc-cis-menu-lvl-5-color: #000;
|
||||
--fhc-cis-menu-lvl-5-bg-hover: #eceff1;
|
||||
--fhc-cis-menu-lvl-5-color-hover: #000;
|
||||
--fhc-cis-grade-positive: rgb(0, 128, 0);
|
||||
--fhc-cis-grade-negative: rgb(128, 0, 0);
|
||||
.fhc-dark-bg{
|
||||
background-color: var(--fhc-dark);
|
||||
color:var(--fhc-light) !important;
|
||||
}
|
||||
|
||||
.fhc-dark-color {
|
||||
color: var(--fhc-dark);
|
||||
}
|
||||
|
||||
.fhc-dark-bg:hover{
|
||||
filter: brightness(120%);
|
||||
}
|
||||
|
||||
.fhc-primary-color{
|
||||
color: var(--fhc-primary) !important;
|
||||
}
|
||||
|
||||
.fhc-primary-bg {
|
||||
background-color: var(--fhc-primary) !important;
|
||||
}
|
||||
|
||||
.fhc-primary-highlight-bg {
|
||||
background-color: var(--fhc-primary-highlight) !important;
|
||||
}
|
||||
|
||||
.fhc-body-bg{
|
||||
background-color:var(--fhc-background) !important;
|
||||
}
|
||||
|
||||
.fhc-body-color{
|
||||
color: var(--fhc-text) !important;
|
||||
}
|
||||
|
||||
.fhc-secondary-bg{
|
||||
background-color: var(--fhc-secondary) !important;
|
||||
}
|
||||
|
||||
.fhc-secondary-color {
|
||||
color: var(--fhc-secondary) !important;
|
||||
}
|
||||
|
||||
.fhc-tertiary-bg{
|
||||
background-color: var(--fhc-tertiary) !important;
|
||||
}
|
||||
|
||||
.fhc-tertiary-color {
|
||||
color: var(--fhc-tertiary) !important;
|
||||
}
|
||||
|
||||
.fhc-fourth-bg {
|
||||
background-color: var(--fhc-fourth) !important;
|
||||
}
|
||||
|
||||
.fhc-fourth-color {
|
||||
color: var(--fhc-fourth) !important;
|
||||
}
|
||||
|
||||
.fhc-fifth-bg {
|
||||
background-color: var(--fhc-fifth) !important;
|
||||
}
|
||||
|
||||
.fhc-fifth-color {
|
||||
color: var(--fhc-fifth) !important;
|
||||
}
|
||||
|
||||
.fhc-body{
|
||||
color:var(--fhc-text);
|
||||
background-color: var(--fhc-background);
|
||||
border-color: var(--fhc-border);
|
||||
}
|
||||
|
||||
.fhc-secondary {
|
||||
color: var(--fhc-text);
|
||||
background-color: var(--fhc-secondary);
|
||||
border-color: var(--fhc-border);
|
||||
}
|
||||
|
||||
.fhc-tertiary{
|
||||
color: var(--fhc-text);
|
||||
background-color: var(--fhc-tertiary);
|
||||
border-color:var(--fhc-border);
|
||||
}
|
||||
|
||||
.fhc-link-color{
|
||||
color: var(--fhc-link);
|
||||
}
|
||||
|
||||
.fhc-text{
|
||||
color: var(--fhc-text) !important;
|
||||
}
|
||||
|
||||
:root{
|
||||
/* sidebar colors */
|
||||
--fhc-cis-sidebar-bg: var(--fhc-tertiary);
|
||||
--fhc-cis-menu-bg: var(--fhc-tertiary);
|
||||
|
||||
--fhc-cis-header-px: 1rem;
|
||||
--fhc-cis-header-py: .5rem;
|
||||
--fhc-cis-main-px: 1.5rem;
|
||||
--fhc-cis-main-py: 1.5rem;
|
||||
|
||||
--fhc-cis-menu-lvl-1-bg: var(--fhc-primary);
|
||||
--fhc-cis-menu-lvl-1-color: var(--fhc-text);
|
||||
--fhc-cis-menu-lvl-1-bg-hover: var(--fhc-primary-highlight);
|
||||
--fhc-cis-menu-lvl-1-color-hover: var(--fhc-text);
|
||||
|
||||
--fhc-cis-menu-lvl-2-bg: var(--fhc-tertiary);
|
||||
--fhc-cis-menu-lvl-2-color: var(--fhc-text);
|
||||
--fhc-cis-menu-lvl-2-bg-hover: var(--fhc-tertiary-highlight);
|
||||
--fhc-cis-menu-lvl-2-color-hover: var(--fhc-text);
|
||||
|
||||
--fhc-cis-menu-lvl-3-bg: var(--fhc-secondary);
|
||||
--fhc-cis-menu-lvl-3-color: var(--fhc-text);
|
||||
--fhc-cis-menu-lvl-3-bg-hover: var(--fhc-secondary-highlight);
|
||||
--fhc-cis-menu-lvl-3-color-hover: var(--fhc-text);
|
||||
|
||||
--fhc-cis-menu-lvl-4-bg: var(--fhc-fourth);
|
||||
--fhc-cis-menu-lvl-4-color: var(--fhc-text);
|
||||
--fhc-cis-menu-lvl-4-bg-hover: var(--fhc-fourth-highlight);
|
||||
--fhc-cis-menu-lvl-4-color-hover: var(--fhc-text);
|
||||
|
||||
--fhc-cis-menu-lvl-5-bg: var(--fhc-fifth);
|
||||
--fhc-cis-menu-lvl-5-color: var(--fhc-text);
|
||||
--fhc-cis-menu-lvl-5-bg-hover: var(--fhc-fifth-highlight);
|
||||
--fhc-cis-menu-lvl-5-color-hover: var(--fhc-text);
|
||||
--fhc-cis-grade-positive: var(--fhc-success);
|
||||
--fhc-cis-grade-negative: var(--fhc-danger);
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
:root {
|
||||
--fhc-cis-menu-width: 250px;
|
||||
--fhc-cis-header-height: 60px;
|
||||
--fhc-cis-menu-bg: #72777A;
|
||||
}
|
||||
:root {
|
||||
--fhc-cis-menu-width: 250px;
|
||||
--fhc-cis-header-height: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
:root {
|
||||
--fhc-cis-menu-width: 400px;
|
||||
--fhc-cis-header-height: 40px;
|
||||
--fhc-cis-menu-bg: #343a40;
|
||||
}
|
||||
:root {
|
||||
--fhc-cis-menu-width: 400px;
|
||||
--fhc-cis-header-height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
/* lvMenu entry style */
|
||||
#cis-menu .menu-entry {
|
||||
color: var(--fhc-text);
|
||||
}
|
||||
|
||||
[disabled="true"].menu-entry {
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
background-color: var(--fhc-disabled) !important;
|
||||
color: black !important;
|
||||
opacity: 0.75;
|
||||
-webkit-touch-callout: none;
|
||||
/* iOS Safari */
|
||||
-webkit-user-select: none;
|
||||
/* Safari */
|
||||
-khtml-user-select: none;
|
||||
/* Konqueror HTML */
|
||||
-moz-user-select: none;
|
||||
/* Old versions of Firefox */
|
||||
-ms-user-select: none;
|
||||
/* Internet Explorer/Edge */
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#cis-menu .menu-entry:hover{
|
||||
background-color: var(--fhc-cis-primary);
|
||||
color:white;
|
||||
background-color: var(--fhc-primary);
|
||||
color:var(--fhc-light);
|
||||
}
|
||||
|
||||
/* buttons */
|
||||
@@ -199,6 +319,7 @@ html {
|
||||
|
||||
/* searchbar */
|
||||
#nav-search {
|
||||
background-color: var(--fhc-primary);
|
||||
z-index: 1;
|
||||
}
|
||||
#nav-search.me-3 {
|
||||
@@ -227,9 +348,16 @@ html {
|
||||
}
|
||||
|
||||
#cis-main {
|
||||
color: var(--fhc-text);
|
||||
background-color: var(--fhc-background);
|
||||
border-color: var(--fhc-border);
|
||||
padding: var(--fhc-cis-main-py) var(--fhc-cis-main-px);
|
||||
}
|
||||
|
||||
#cis-main .fa-arrow-up-right-from-square {
|
||||
color: var(--fhc-link) !important;
|
||||
}
|
||||
|
||||
#nav-main-sticky {
|
||||
max-height: calc(100vh - var(--fhc-cis-header-height));
|
||||
}
|
||||
@@ -249,10 +377,6 @@ html {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.fhc-active {
|
||||
background-color: var(--fhc-cis-menu-lvl-2-color-active) !important;
|
||||
}
|
||||
|
||||
.fhc-seperator {
|
||||
position: relative;
|
||||
}
|
||||
@@ -265,7 +389,7 @@ html {
|
||||
margin-left: 12.5%;
|
||||
width: 75%; /* Full width of the parent element */
|
||||
height: 1px; /* Height of the border */
|
||||
background: linear-gradient(to right, #ffffff, var(--fhc-cis-primary), #ffffff);
|
||||
background: linear-gradient(to right, var(--fhc-background), var(--fhc-primary), var(--fhc-background));
|
||||
opacity: 0.8; /* Adjust opacity for a subtle fade effect */
|
||||
}
|
||||
|
||||
@@ -299,7 +423,7 @@ html {
|
||||
left: 0;
|
||||
height: var(--fhc-cis-header-height);
|
||||
width: var(--fhc-cis-menu-width);
|
||||
background-color: var(--fhc-cis-primary);
|
||||
background-color: var(--fhc-primary);
|
||||
padding: var(--fhc-cis-header-py) var(--fhc-cis-header-px);
|
||||
z-index: 2;
|
||||
}
|
||||
@@ -331,7 +455,7 @@ html {
|
||||
}
|
||||
#nav-main-toggle .collapsed .fa-arrow-circle-left {
|
||||
transform: scaleX(-1);
|
||||
color: var(--bs-dark);
|
||||
color: var(--fhc-black-40);
|
||||
}
|
||||
#nav-search {
|
||||
position: fixed;
|
||||
@@ -349,7 +473,7 @@ html {
|
||||
#nav-user-btn {
|
||||
border-width: 0;
|
||||
padding: var(--fhc-cis-header-py) var(--fhc-cis-header-px);
|
||||
background-color: var(--fhc-cis-primary);
|
||||
background-color: var(--fhc-primary);
|
||||
}
|
||||
#nav-user-btn img {
|
||||
object-fit: contain;
|
||||
@@ -359,7 +483,7 @@ html {
|
||||
#nav-user-menu {
|
||||
position: absolute;
|
||||
min-width: var(--fhc-cis-menu-width);
|
||||
background-color: var(--fhc-cis-menu-lvl-2-bg);
|
||||
background-color: var(--fhc-dark);
|
||||
}
|
||||
|
||||
#nav-user-menu img {
|
||||
@@ -394,7 +518,7 @@ html {
|
||||
margin-top: var(--fhc-cis-header-height);
|
||||
}
|
||||
#cis-header {
|
||||
background-color: var(--fhc-cis-primary);
|
||||
background-color: var(--fhc-primary);
|
||||
height: var(--fhc-cis-header-height);
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
@@ -431,18 +555,23 @@ html {
|
||||
}
|
||||
#nav-user-menu {
|
||||
position: absolute;
|
||||
background-color: var(--fhc-cis-menu-lvl-2-bg);
|
||||
background-color: var(--fhc-dark);
|
||||
}
|
||||
#nav-main-menu {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
#nav-main{
|
||||
background-color: var(--fhc-cis-sidebar-bg);
|
||||
}
|
||||
|
||||
/* Typography */
|
||||
.fhc-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: end;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
border-bottom: 1px solid var(--fhc-border);
|
||||
margin: 1rem 0;
|
||||
}
|
||||
.fhc-header > h1 {
|
||||
@@ -454,7 +583,7 @@ html {
|
||||
}
|
||||
}
|
||||
.fhc-header > h1 > small {
|
||||
color: #6c757d;
|
||||
color: var(--fhc-secondary);
|
||||
font-size: 1rem;
|
||||
}
|
||||
.fhc-header > h1 > small:before {
|
||||
@@ -465,7 +594,7 @@ html {
|
||||
text-decoration: none;
|
||||
}
|
||||
.fhc-header > a:after {
|
||||
color: var(--bs-body-color);
|
||||
color: var(--fhc-text);
|
||||
content: "\f059";
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
@@ -482,7 +611,7 @@ html {
|
||||
[disabled="true"].fhc-entry {
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
background-color: #dadada !important;
|
||||
background-color: var(--fhc-disabled) !important;
|
||||
color: black !important;
|
||||
-webkit-touch-callout: none; /* iOS Safari */
|
||||
-webkit-user-select: none;/* Safari */
|
||||
|
||||
@@ -0,0 +1,265 @@
|
||||
/* css overrides for static cms content */
|
||||
@import './CisVariablesCms.css';
|
||||
|
||||
/* colors */
|
||||
:root {
|
||||
|
||||
--fhc-black-10:black;
|
||||
--fhc-black-20: #1d2024;
|
||||
--fhc-black-30: #212529;
|
||||
--fhc-black-40: #292b2a;
|
||||
--fhc-black-50: #2B3035;
|
||||
--fhc-black-60: #2c3136;
|
||||
--fhc-black-70: #343a40;
|
||||
|
||||
--fhc-white-10: #FFFFFF;
|
||||
--fhc-white-20:#f6f6f6;
|
||||
--fhc-white-30:#eceff1;
|
||||
--fhc-white-40:#e9ecef;
|
||||
--fhc-white-50:#dee2e6;
|
||||
--fhc-white-60:#d5dae0;
|
||||
--fhc-white-70:#ced4da;
|
||||
--fhc-white-80:#c7cbcf;
|
||||
--fhc-white-90:#aeb3b8;
|
||||
|
||||
--fhc-gray-10: #858f97;
|
||||
--fhc-gray-20: #72777A;
|
||||
--fhc-gray-30: #616568;
|
||||
--fhc-gray-40: #495057;
|
||||
|
||||
--fhc-blue-10: #0a57ca;
|
||||
--fhc-blue-20: #79b7d8;
|
||||
/* --fhc-blue-20: #00649c;*/
|
||||
--fhc-blue-30: #00598d;
|
||||
/*--fhc-blue-40: #005585;*/
|
||||
--fhc-blue-40: #61aed8;
|
||||
--fhc-blue-50: #00507e;
|
||||
|
||||
--fhc-blue-primary: #00649c;
|
||||
--fhc-blue-primary-highlight: #005585;
|
||||
|
||||
--fhc-red-10: #842029;
|
||||
--fhc-red-20: #800000;
|
||||
|
||||
--fhc-green-10: #008000;
|
||||
|
||||
--fhc-beige-10: rgba(245, 233, 215,0.5);
|
||||
--fhc-beige-20: rgba(172, 153, 125,0.5);
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
:root.light{
|
||||
|
||||
|
||||
/* fhc base colors */
|
||||
--fhc-primary: var(--fhc-blue-20);
|
||||
--fhc-primary-highlight: var(--fhc-blue-40);
|
||||
|
||||
--fhc-tertiary: var(--fhc-white-20);
|
||||
--fhc-tertiary-highlight: var(--fhc-white-40);
|
||||
|
||||
--fhc-secondary: var(--fhc-white-40);
|
||||
--fhc-secondary-highlight: var(--fhc-white-60);
|
||||
|
||||
--fhc-fourth: var(--fhc-white-60);
|
||||
--fhc-fourth-highlight: var(--fhc-white-80);
|
||||
|
||||
--fhc-fifth: var(--fhc-white-80);
|
||||
--fhc-fifth-highlight: var(--fhc-white-90);
|
||||
|
||||
/*background*/
|
||||
--fhc-background: var(--fhc-white-10);
|
||||
--fhc-background-highlight: var(--fhc-white-60);
|
||||
|
||||
/*text*/
|
||||
--fhc-text: var(--fhc-black-30);
|
||||
|
||||
/* shadows and borders */
|
||||
--fhc-shadow-20: rgba(0, 0, 0, 0.2);
|
||||
--fhc-shadow-40: rgba(0, 0, 0, 0.4);
|
||||
--fhc-shadow-60: rgba(0, 0, 0, 0.6);
|
||||
--fhc-shadow-80: rgba(0, 0, 0, 0.8);
|
||||
--fhc-box-shadow: var(--fhc-white-50);
|
||||
--fhc-border: var(--fhc-white-50);
|
||||
--fhc-border-highlight: var(--fhc-gray-40);
|
||||
|
||||
/* links */
|
||||
--fhc-link: var(--fhc-blue-10);
|
||||
|
||||
/* disabled */
|
||||
--fhc-disabled: var(--fhc-gray-10);
|
||||
|
||||
/* status colors */
|
||||
--fhc-danger: var(--fhc-red-10);
|
||||
--fhc-success: var(--fhc-green-10);
|
||||
--fhc-dark: var(--fhc-black-30);
|
||||
--fhc-light: var(--fhc-white-50);
|
||||
|
||||
|
||||
}
|
||||
|
||||
:root.dark{
|
||||
|
||||
/* fhc base colors */
|
||||
--fhc-primary: var(--fhc-blue-primary-highlight);
|
||||
--fhc-primary-highlight: var(--fhc-blue-primary);
|
||||
|
||||
--fhc-secondary: var(--fhc-black-70);
|
||||
--fhc-secondary-highlight: var(--fhc-gray-40);
|
||||
|
||||
--fhc-tertiary: var(--fhc-black-50);
|
||||
--fhc-tertiary-highlight: var(--fhc-black-70);
|
||||
|
||||
--fhc-danger: var(--fhc-red-10);
|
||||
|
||||
/*background*/
|
||||
--fhc-background: var(--fhc-black-30);
|
||||
--fhc-background-highlight: var(--fhc-black-20);
|
||||
|
||||
/*text*/
|
||||
--fhc-text: var(--fhc-white-50);
|
||||
|
||||
/* shadows and borders */
|
||||
--fhc-shadow-20: rgba(125, 125, 125, 0.2);
|
||||
--fhc-shadow-40: rgba(125, 125, 125, 0.4);
|
||||
--fhc-shadow-60: rgba(125, 125, 125, 0.6);
|
||||
--fhc-shadow-80: rgba(125, 125, 125, 0.8);
|
||||
--fhc-box-shadow: var(--fhc-gray-40);
|
||||
--fhc-border: var(--fhc-gray-40);
|
||||
--fhc-border-highlight: var(--fhc-white-90);
|
||||
|
||||
/* links */
|
||||
--fhc-link: var(--fhc-white-70);
|
||||
|
||||
/* disabled */
|
||||
--fhc-disabled: var(--fhc-gray-10);
|
||||
|
||||
/* status colors */
|
||||
--fhc-danger: var(--fhc-red-10);
|
||||
--fhc-success: var(--fhc-green-10);
|
||||
--fhc-dark: var(--fhc-black-50);
|
||||
--fhc-light: var(--fhc-white-70);
|
||||
|
||||
}
|
||||
|
||||
:root.purple {
|
||||
|
||||
--fhc-purple-primary: rgb(150, 120, 255);
|
||||
--fhc-purple-primary-highlight: rgb(170, 140, 255);
|
||||
--fhc-purple-5: rgb(245, 240, 255);
|
||||
--fhc-purple-10: rgb(235, 225, 255);
|
||||
--fhc-purple-20: rgb(220, 200, 255);
|
||||
--fhc-purple-30: rgb(200, 170, 255);
|
||||
--fhc-purple-40: rgb(180, 140, 240);
|
||||
--fhc-purple-50: rgb(160, 110, 225);
|
||||
--fhc-purple-60: rgb(140, 90, 210);
|
||||
--fhc-purple-70: rgb(120, 70, 195);
|
||||
--fhc-purple-80: rgb(100, 50, 180);
|
||||
--fhc-purple-90: rgb(80, 30, 165);
|
||||
|
||||
/* fhc base colors */
|
||||
--fhc-primary: var(--fhc-purple-primary-highlight);
|
||||
--fhc-primary-highlight: var(--fhc-purple-primary);
|
||||
|
||||
--fhc-secondary: var(--fhc-purple-30);
|
||||
--fhc-secondary-highlight: var(--fhc-purple-50);
|
||||
|
||||
--fhc-tertiary: var(--fhc-purple-20);
|
||||
--fhc-tertiary-highlight: var(--fhc-purple-40);
|
||||
|
||||
/* background */
|
||||
--fhc-background: var(--fhc-purple-5);
|
||||
--fhc-background-highlight: var(--fhc-purple-10);
|
||||
|
||||
/* text */
|
||||
--fhc-text: var(--fhc-black-20);
|
||||
|
||||
/* shadows and borders */
|
||||
--fhc-shadow-20: rgba(150, 100, 200, 0.2);
|
||||
--fhc-shadow-40: rgba(150, 100, 200, 0.4);
|
||||
--fhc-shadow-60: rgba(150, 100, 200, 0.6);
|
||||
--fhc-shadow-80: rgba(150, 100, 200, 0.8);
|
||||
--fhc-box-shadow: var(--fhc-white-50);
|
||||
--fhc-border: var(--fhc-white-50);
|
||||
--fhc-border-highlight: var(--fhc-gray-40);
|
||||
|
||||
/* links */
|
||||
--fhc-link: var(--fhc-black-50);
|
||||
|
||||
/* disabled */
|
||||
--fhc-disabled: var(--fhc-purple-20);
|
||||
|
||||
/* status colors */
|
||||
--fhc-danger: var(--fhc-red-10);
|
||||
--fhc-success: var(--fhc-green-10);
|
||||
--fhc-dark: var(--fhc-black-20);
|
||||
--fhc-light: var(--fhc-white-70);
|
||||
|
||||
}
|
||||
|
||||
/* fhc primary*/
|
||||
html.dark .bg-primary,
|
||||
html.dark .btn-primary,
|
||||
html.dark .btn-outline-primary {
|
||||
background-color: var(--fhc-primary) !important;
|
||||
border-color: var(--fhc-primary) !important;
|
||||
color: white;
|
||||
}
|
||||
|
||||
html.dark .btn-outline-primary:hover,
|
||||
html.dark .btn-primary:hover {
|
||||
filter: brightness(90%);
|
||||
}
|
||||
|
||||
html.dark .text-primary {
|
||||
color: var(--fhc-primary) !important;
|
||||
}
|
||||
|
||||
html.dark .btn-outline-primary,
|
||||
html.dark .border-primary {
|
||||
border-color: var(--fhc-primary) !important;
|
||||
}
|
||||
|
||||
/* fhc danger*/
|
||||
html.dark .bg-danger,
|
||||
html.dark .btn-danger,
|
||||
html.dark .btn-outline-danger {
|
||||
background-color: var(--fhc-danger) !important;
|
||||
border-color: var(--fhc-danger) !important;
|
||||
color: white;
|
||||
}
|
||||
|
||||
html.dark .btn-outline-danger:hover,
|
||||
html.dark .btn-danger:hover {
|
||||
filter: brightness(90%);
|
||||
}
|
||||
|
||||
html.dark .text-danger {
|
||||
color: var(--fhc-danger) !important;
|
||||
}
|
||||
|
||||
html.dark .border-danger {
|
||||
border-color: var(--fhc-danger) !important;
|
||||
}
|
||||
|
||||
|
||||
html.dark .tabulator,
|
||||
html.dark .tabulator .tabulator-header,
|
||||
html.dark .tabulator .tabulator-header .tabulator-col,
|
||||
html.dark .tabulator .tabulator-table,
|
||||
html.dark .tabulator .tabulator-row {
|
||||
background-color: var(--fhc-tertiary) !important;
|
||||
color: var(--fhc-text) !important;
|
||||
border-color: var(--fhc-border) !important;
|
||||
}
|
||||
|
||||
html.dark .tabulator .tabulator-cell {
|
||||
background-color: var(--fhc-secondary) !important;
|
||||
border-color: var(--fhc-border) !important;
|
||||
}
|
||||
|
||||
html.dark .tabulator .tabulator-header .tabulator-col:hover {
|
||||
background-color: var(--fhc-secondary) !important;
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
/* css overrides for dark mode */
|
||||
html.dark #fhc-cms-content *[style*="color"] {
|
||||
color: var(--fhc-text) !important;
|
||||
}
|
||||
|
||||
/* fhc cms classes */
|
||||
html.dark #fhc-cms-content a {
|
||||
color: var(--fhc-link);
|
||||
}
|
||||
|
||||
html.dark #fhc-cms-content img {
|
||||
background-color: var(--fhc-text);
|
||||
color: var(--fhc-background);
|
||||
}
|
||||
@@ -11,14 +11,14 @@
|
||||
margin-inline-start: 0 !important;
|
||||
}
|
||||
#cms a.btn-outline-primary {
|
||||
color: var(--fhc-cis-primary);
|
||||
border-color: var(--fhc-cis-primary);
|
||||
color: var(--fhc-primary);
|
||||
border-color: var(--fhc-primary);
|
||||
}
|
||||
#cms a.btn-outline-primary:hover,
|
||||
#cms a.btn-outline-primary:focus {
|
||||
color: #fff;
|
||||
background-color: var(--fhc-cis-primary);
|
||||
border-color: var(--fhc-cis-primary);
|
||||
background-color: var(--fhc-primary);
|
||||
border-color: var(--fhc-primary);
|
||||
}
|
||||
#cms a.btn-primary {
|
||||
color: var(--fhc-cis-menu-lvl-1-color);
|
||||
|
||||
+1
-1
@@ -10,7 +10,7 @@
|
||||
font-size: calc(1.325rem + .9vw);
|
||||
}
|
||||
.fhc-header > :first-child > small {
|
||||
color: var(--bs-secondary);
|
||||
color: var(--fhc-secondary);
|
||||
font-size: .65em;
|
||||
padding-inline-start: 1em;
|
||||
}
|
||||
|
||||
@@ -1,8 +1,15 @@
|
||||
:root{
|
||||
--filter-widget-border: var(--fhc-dark);
|
||||
--filter-widget-color: var(--fhc-dark);
|
||||
--filter-widget-primary: var(--fhc-primary);
|
||||
--filter-widget-border-light: var(--fhc-border);
|
||||
}
|
||||
|
||||
.filter-name-title {
|
||||
font-family: inherit;
|
||||
font-size: 16px;
|
||||
line-height: 1.1;
|
||||
color: black;
|
||||
color: var(--filter-widget-color);
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
@@ -26,7 +33,7 @@
|
||||
}
|
||||
|
||||
.drag-and-drop-fields-span {
|
||||
border: 1px solid black;
|
||||
border: 1px solid var(--filter-widget-border);
|
||||
border-radius: 7px;
|
||||
margin-right: 6px;
|
||||
margin-bottom: 10px;
|
||||
@@ -64,7 +71,7 @@
|
||||
right: 100%;
|
||||
height: 100%;
|
||||
margin-right: 3px;
|
||||
border-left: 2px solid #428bca;
|
||||
border-left: 2px solid var(--filter-widget-primary);
|
||||
}
|
||||
|
||||
.selection-after::after {
|
||||
@@ -74,7 +81,7 @@
|
||||
left: 100%;
|
||||
height: 100%;
|
||||
margin-left: 3px;
|
||||
border-right: 2px solid #428bca;
|
||||
border-right: 2px solid var(--filter-widget-primary);
|
||||
}
|
||||
|
||||
.applied-filter-operation {
|
||||
@@ -139,10 +146,10 @@
|
||||
|
||||
.up-down-border {
|
||||
border-top-width: 1px;
|
||||
border-top-color: #ddd;
|
||||
border-top-color: var(--filter-widget-border-light);
|
||||
border-top-style: solid;
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-color: #ddd;
|
||||
border-bottom-color: var(--filter-widget-border-light);
|
||||
border-bottom-style: solid;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,3 +1,9 @@
|
||||
:root{
|
||||
--fhc-filtercomponent-primary: var(--fhc-primary);
|
||||
--fhc-filtercomponent-bg:var(--fhc-background);
|
||||
--fhc-filtercomponent-border:var(--fhc-border);
|
||||
}
|
||||
|
||||
.filter-header-title {
|
||||
text-align: right;
|
||||
}
|
||||
@@ -26,9 +32,9 @@
|
||||
margin-left: 7px;
|
||||
padding: 11px;
|
||||
display: inline-block;
|
||||
background-color: white;
|
||||
background-color: var(--fhc-filtercomponent-bg);
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-color: var(--fhc-filtercomponent-border);
|
||||
border-width: 1px;
|
||||
border-radius: 7px;
|
||||
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
|
||||
@@ -47,7 +53,7 @@
|
||||
right: 100%;
|
||||
height: 100%;
|
||||
margin-right: 3px;
|
||||
border-left: 2px solid #428bca;
|
||||
border-left: 2px solid var(--fhc-filtercomponent-primary);
|
||||
}
|
||||
|
||||
.selection-after::after {
|
||||
@@ -57,7 +63,7 @@
|
||||
left: 100%;
|
||||
height: 100%;
|
||||
margin-left: 3px;
|
||||
border-right: 2px solid #428bca;
|
||||
border-right: 2px solid var(--fhc-filtercomponent-primary);
|
||||
}
|
||||
|
||||
.filter-table-dataset {
|
||||
|
||||
@@ -8,11 +8,13 @@
|
||||
|
||||
}
|
||||
|
||||
|
||||
a.form-underline-content{
|
||||
color: var(--fhc-link);
|
||||
}
|
||||
|
||||
.form-underline .form-underline-content{
|
||||
border-width: 1px;
|
||||
border-color: transparent transparent #dee2e6 transparent;
|
||||
border-color: transparent transparent var(--fhc-border) transparent;
|
||||
border-style: solid;
|
||||
padding-bottom: 0.25rem;
|
||||
padding-left: 0.5rem;
|
||||
|
||||
@@ -1,4 +1,8 @@
|
||||
:root{
|
||||
--myLv-disabled: var(--fhc-disabled);
|
||||
}
|
||||
|
||||
.unavailable, .unavailable:hover{
|
||||
color: #565e647f !important;
|
||||
color: var(--myLv-disabled) !important;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
@@ -1,13 +1,24 @@
|
||||
/*
|
||||
* Hederer
|
||||
*/
|
||||
|
||||
:root{
|
||||
--nav-component-bg: var(--fhc-secondary);
|
||||
--nav-component-border: var(--fhc-border);
|
||||
--nav-component-color: var(--fhc-text);
|
||||
--nav-left-component-border: var(--fhc-border);
|
||||
--nav-left-component-bg: var(--fhc-secondary);
|
||||
--nav-left-component-color: var(--fhc-primary);
|
||||
--nav-left-component-hover: var(--fhc-secondary-highlight);
|
||||
}
|
||||
|
||||
.navbar-header {
|
||||
background-color: #f8f8f8;
|
||||
background-color: var(--nav-component-bg);
|
||||
padding-top: 0px;
|
||||
padding-bottom: 0px;
|
||||
padding-left: 10px;
|
||||
border-style: solid;
|
||||
border-color: #e7e7e7;
|
||||
border-color: var(--nav-component-border);
|
||||
border-width: 0 0 1px;
|
||||
}
|
||||
|
||||
@@ -15,7 +26,7 @@
|
||||
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
|
||||
font-size: 18px;
|
||||
line-height: 1.42857143;
|
||||
color: #5e5e5e !important;
|
||||
color: var(--nav-component-color) !important;
|
||||
padding-top: 15px !important;
|
||||
padding-right: 7px !important;
|
||||
padding-left: 7px !important;
|
||||
@@ -34,8 +45,8 @@
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
width: 250px;
|
||||
border-right: 1px solid #e7e7e7;
|
||||
background-color: #f8f8f8;
|
||||
border-right: 1px solid ;
|
||||
background-color:var(--nav-left-component-bg);
|
||||
}
|
||||
|
||||
.navbar-left-side ul {
|
||||
@@ -43,7 +54,7 @@
|
||||
}
|
||||
|
||||
.navbar-left-side ul li {
|
||||
border-bottom: 1px solid #e7e7e7;
|
||||
border-bottom: 1px solid var(--nav-left-component-border);
|
||||
}
|
||||
|
||||
.left-side-menu-second-level {
|
||||
@@ -67,7 +78,7 @@
|
||||
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 1.42857143;
|
||||
color: #23527c;
|
||||
color: var(--nav-left-component-color);
|
||||
padding-top: 10px !important;
|
||||
padding-bottom: 10px !important;
|
||||
padding-left: 7px !important;
|
||||
@@ -76,7 +87,7 @@
|
||||
}
|
||||
|
||||
.left-side-menu-link-entry:hover {
|
||||
background-color: #eee;
|
||||
background-color: var(--nav-left-component-hover);
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
@@ -1,11 +1,14 @@
|
||||
|
||||
|
||||
:root{
|
||||
--profil-border: var(--fhc-border);
|
||||
--profil-tabulator-shadow:var(--fhc-shadow-20);
|
||||
}
|
||||
|
||||
|
||||
.image-lock{
|
||||
height:22px;
|
||||
width:21px;
|
||||
background-color:white;
|
||||
background-color:var(--profil-border);
|
||||
position:absolute;
|
||||
/* top: 1px is important, otherwise it goes over the border of the thumbnail*/
|
||||
top:1px;
|
||||
@@ -18,7 +21,7 @@
|
||||
|
||||
.tabulator-collapsed-row{
|
||||
padding:15px;
|
||||
background-color: rgba(0,0,0,0.1);
|
||||
background-color: var(--profil-tabulator-shadow);
|
||||
|
||||
}
|
||||
|
||||
|
||||
@@ -1,9 +1,13 @@
|
||||
.sprachen-entry{
|
||||
background-color: var(--fhc-cis-primary-hover);
|
||||
background-color: var(--fhc-primary);
|
||||
}
|
||||
|
||||
.sprachen-entry:hover {
|
||||
background-color: var(--fhc-primary);
|
||||
}
|
||||
|
||||
[selected="true"].sprachen-entry {
|
||||
background-color: var(--fhc-cis-primary);
|
||||
background-color: var(--fhc-primary-highlight);
|
||||
}
|
||||
|
||||
.sprachen-entry.btn {
|
||||
|
||||
@@ -1,14 +1,44 @@
|
||||
:root{
|
||||
--fhc-calendar-pane-height: calc(100vh - 220px);
|
||||
--fhc-calendar-past: #F5E9D7
|
||||
--calendar-pane-height: calc(100vh - 220px);
|
||||
|
||||
--calendar-primary: var(--fhc-primary);
|
||||
--calendar-border: var(--fhc-border);
|
||||
--calendar-border-highlight: var(--fhc-border-highlight);
|
||||
--calendar-text: var(--fhc-text);
|
||||
--calendar-text-light: var(--fhc-text);
|
||||
--calendar-bg: var(--fhc-background);
|
||||
--calendar-hour-indicator-bg: var(--fhc-background);
|
||||
--calendar-week-page-header-background: var(--fhc-background);
|
||||
--calendar-week-page-header-color: var(--fhc-text);
|
||||
--calendar-week-page-header-border: var(--fhc-border);
|
||||
--calendar-week-page-header-hover-background: var(--fhc-background-highlight);
|
||||
--calendar-all-day-event-background: var(--fhc-background);
|
||||
--calendar-past: var(--fhc-beige-10);
|
||||
}
|
||||
|
||||
.fhc-calendar-week-page-header {
|
||||
background-color: #e9ecef;
|
||||
:root.dark{
|
||||
--calendar-past: var(--fhc-beige-20);
|
||||
}
|
||||
|
||||
.fhc-calendar-hour-indicator{
|
||||
border-top: 1px solid var(--calendar-border);
|
||||
}
|
||||
|
||||
.fhc-calendar-hour-indicator span{
|
||||
background-color: var(--calendar-hour-indicator-bg) !important;
|
||||
}
|
||||
|
||||
.fhc-calendar-week-page-header{
|
||||
color: var(--calendar-text);
|
||||
background-color: var(--calendar-week-page-header-background);
|
||||
}
|
||||
|
||||
.fhc-calendar-week-page-header > div {
|
||||
border-right: 1px solid var(--calendar-border);
|
||||
}
|
||||
|
||||
.fhc-calendar-week-page-header > div:hover{
|
||||
background-color: #dddfe2;
|
||||
background-color: var(--calendar-week-page-header-hover-background);
|
||||
}
|
||||
|
||||
.fhc-calendar-months .col-4,
|
||||
@@ -70,7 +100,7 @@
|
||||
}
|
||||
|
||||
.fhc-calendar-week-page .all-day-event-border{
|
||||
box-shadow: 1px 1px 0 #dee2e6;
|
||||
box-shadow: 1px 1px 0 var(--fhc-box-shadow);
|
||||
}
|
||||
|
||||
.fhc-calendar-week-page .all-day-event{
|
||||
@@ -85,7 +115,7 @@
|
||||
grid-template-columns:repeat(7,1fr);
|
||||
width:100%;
|
||||
z-index:3;
|
||||
background-color:white;
|
||||
background-color:var(--calendar-all-day-event-background);
|
||||
}
|
||||
|
||||
.fhc-calendar-week-page .all-day-event-container::before {
|
||||
@@ -95,12 +125,12 @@
|
||||
bottom: 0;
|
||||
left: -3em;
|
||||
right: 100%;
|
||||
background-color: white;
|
||||
box-shadow: 1px 1px 0 #dee2e6;
|
||||
background-color: var(--calendar-all-day-event-background);
|
||||
box-shadow: 1px 1px 0 var(--fhc-box-shadow);
|
||||
}
|
||||
|
||||
.fhc-calendar-day-page .all-day-event-border {
|
||||
box-shadow: 0 0 0 1px #dee2e6;
|
||||
box-shadow: 0 0 0 1px var(--fhc-box-shadow);
|
||||
}
|
||||
|
||||
.fhc-calendar-day-page .all-day-event {
|
||||
@@ -116,13 +146,13 @@
|
||||
grid-template-columns: 3em 1fr;
|
||||
width: 100%;
|
||||
z-index: 3;
|
||||
background-color:white;
|
||||
box-shadow: 1px 1px 0 #dee2e6;
|
||||
background-color:var(--calendar-all-day-event-background);
|
||||
box-shadow: 1px 1px 0 var(--fhc-box-shadow);
|
||||
}
|
||||
|
||||
/* grid hour lines of the Stundenplan use box-shadow instead of border because box-shadow renders consistently on different viewports*/
|
||||
.box-shadow-border{
|
||||
box-shadow: 0 0 0 1px #dee2e6 !important;
|
||||
box-shadow: 0 0 0 1px var(--calendar-border) !important;
|
||||
}
|
||||
|
||||
.fhc-calendar-no-events-overlay{
|
||||
@@ -137,7 +167,7 @@
|
||||
margin:auto;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: linear-gradient(120deg, white, gray );
|
||||
background-image: linear-gradient(120deg, var(--fhc-background), var(--fhc-dark) );
|
||||
opacity: .7;
|
||||
}
|
||||
.fhc-calendar-day-page {
|
||||
@@ -150,9 +180,7 @@
|
||||
.fhc-calendar-day-page .flex-column > .flex-grow-1 {
|
||||
padding-left: 3em;
|
||||
}
|
||||
.fhc-calendar-day-page .flex-column {
|
||||
border-right: 1px solid #dee2e6;
|
||||
}
|
||||
|
||||
.fhc-calendar-day-page .events {
|
||||
display: grid;
|
||||
grid-template-columns: 3em 1fr;
|
||||
@@ -164,11 +192,19 @@
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.fhc-calendar-month-page-day{
|
||||
color: var(--calendar-text) !important;
|
||||
}
|
||||
|
||||
.fhc-calendar-month-page-day.fhc-calendar-past:not(.fhc-calendar-month-page-day-focusday) {
|
||||
color: var(--fhc-text) !important;
|
||||
}
|
||||
|
||||
.fhc-calendar-lg .fhc-calendar-month-page-day,
|
||||
.fhc-calendar-lg .fhc-calendar-month-page-weekday,
|
||||
.fhc-calendar-md .fhc-calendar-month-page-day,
|
||||
.fhc-calendar-md .fhc-calendar-month-page-weekday {
|
||||
border: solid 1px #dee2e6;
|
||||
border: solid 1px var(--calendar-border);
|
||||
}
|
||||
.fhc-calendar-lg .fhc-calendar-month-page-day,
|
||||
.fhc-calendar-md .fhc-calendar-month-page-day {
|
||||
@@ -178,7 +214,7 @@
|
||||
}
|
||||
.fhc-calendar-lg .fhc-calendar-month-page-day.active,
|
||||
.fhc-calendar-md .fhc-calendar-month-page-day.active {
|
||||
border-color: var(--bs-secondary);
|
||||
border-color: var(--calendar-border-highlight);
|
||||
}
|
||||
/*.fhc-calendar-lg .fhc-calendar-month-page-day .events,*/
|
||||
/*.fhc-calendar-md .fhc-calendar-month-page-day .events {*/
|
||||
@@ -223,8 +259,8 @@
|
||||
}
|
||||
|
||||
.fhc-calendar-month-page-weekday:hover {
|
||||
background-color:#37789c;
|
||||
color:white;
|
||||
background-color:var(--calendar-primary);
|
||||
color:var(--calendar-text-light);
|
||||
|
||||
}
|
||||
|
||||
@@ -237,14 +273,14 @@
|
||||
|
||||
|
||||
.fhc-calendar-past {
|
||||
background-color: var(--fhc-calendar-past);
|
||||
border-color: #E8E8E8;
|
||||
background-color: var(--calendar-past);
|
||||
border-color: var(--calendar-border);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.fhc-calendar-month-page-day-focusday {
|
||||
border-color: black !important;
|
||||
background-color: white;
|
||||
border-color: var(--calendar-border-highlight) !important;
|
||||
background-color: var(--calendar-bg);
|
||||
position: relative;
|
||||
animation: dash-animation 2.5s linear infinite;
|
||||
}
|
||||
@@ -276,20 +312,20 @@
|
||||
bottom:0;
|
||||
left:0;
|
||||
right:0;
|
||||
box-shadow: inset 0 0 0 2px black !important;
|
||||
box-shadow: inset 0 0 0 2px var(--calendar-border) !important;
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.fhc-calendar-sm .fhc-calendar-month-page-day.active .no,
|
||||
.fhc-calendar-xs .fhc-calendar-month-page-day.active .no {
|
||||
background-color: rgba(var(--bs-info-rgb), 0.25);
|
||||
background-color: var(--calendar-primary);
|
||||
border-radius: 50%;
|
||||
font-weight: bold;
|
||||
}
|
||||
.fhc-calendar-sm .fhc-calendar-month-page-day:not(.active):hover .no,
|
||||
.fhc-calendar-xs .fhc-calendar-month-page-day:not(.active):hover .no {
|
||||
background-color: rgba(var(--bs-secondary-rgb), 0.25);
|
||||
background-color: var(--calendar-primary);
|
||||
border-radius: 50%;
|
||||
}
|
||||
/*.fhc-calendar-sm .fhc-calendar-month-page-day .no,*/
|
||||
@@ -317,6 +353,57 @@
|
||||
}
|
||||
|
||||
.selectedEvent {
|
||||
background-color: #00649c !important;
|
||||
color: white;
|
||||
background-color: var(--calendar-primary) !important;
|
||||
color: var(--calendar-text-light);
|
||||
}
|
||||
|
||||
.fhc-calendar-day-page .curTimeIndicator{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
pointer-events: none;
|
||||
padding-left: 7rem;
|
||||
margin-top: -1px;
|
||||
z-index: 2;
|
||||
border-color: var(--calendar-border)!important;
|
||||
}
|
||||
|
||||
.fhc-calendar-week-page .curTimeIndicator {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
pointer-events: none;
|
||||
padding-left: 1rem;
|
||||
margin-top: -1px;
|
||||
z-index: 2;
|
||||
border-color: var(--calendar-border) !important;
|
||||
}
|
||||
|
||||
.fhc-calendar-week-page .past::before{
|
||||
content:"";
|
||||
background-color: var(--calendar-past);
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
opacity: 0.5;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.fhc-calendar-week-page .overlay {
|
||||
background-color: var(--calendar-past);
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.fhc-calendar-day-page .overlay {
|
||||
background-color: var(--calendar-past);
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
opacity: 0.5;
|
||||
}
|
||||
@@ -1,6 +1,21 @@
|
||||
@import './calendar.css';
|
||||
@import './dashboard/news.css';
|
||||
|
||||
:root{
|
||||
--dashboard-danger: var(--fhc-danger);
|
||||
--fhc-dashboard-grid-size: 4;
|
||||
}
|
||||
|
||||
@media(max-width: 577px) {
|
||||
:root {
|
||||
--fhc-dashboard-grid-size: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.core-dashboard a{
|
||||
color: var(--fhc-link);
|
||||
}
|
||||
|
||||
.empty-tile-hover {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
@@ -16,18 +31,11 @@
|
||||
}
|
||||
|
||||
.alert-danger .form-check-input:checked {
|
||||
border-color: #842029;
|
||||
background-color: #842029;
|
||||
border-color: var(--dashboard-danger);
|
||||
background-color: var(--dashboard-danger);
|
||||
}
|
||||
|
||||
:root {
|
||||
--fhc-dashboard-grid-size: 4;
|
||||
}
|
||||
@media(max-width: 577px) {
|
||||
:root {
|
||||
--fhc-dashboard-grid-size: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.mirror-x {
|
||||
transform: scaleX(-1);
|
||||
@@ -40,5 +48,8 @@
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
#deleteBookmark i{
|
||||
color: var(--fhc-danger);
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -1,5 +1,10 @@
|
||||
:root{
|
||||
--news-widget-height: 1;
|
||||
--news-widget-bg: var(--fhc-primary);
|
||||
--news-widget-highlight-color: var(--fhc-primary-highlight);
|
||||
--news-widget-border: var(--fhc-border);
|
||||
--news-widget-border-highlight: var(--fhc-border-highlight);
|
||||
--news-widget-text-light: var(--fhc-text);
|
||||
}
|
||||
|
||||
|
||||
@@ -48,31 +53,26 @@
|
||||
|
||||
.fhc-news-menu-item {
|
||||
padding: 0.375rem;
|
||||
color: var(--fhc-cis-menu-lvl-1-color);
|
||||
color: var(--news-widget-text-light);
|
||||
min-height: 5%;
|
||||
max-height: 30%;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: #00649c;
|
||||
border: 1px solid #f1f1f1;
|
||||
background-color: var(--news-widget-bg);
|
||||
border: 1px solid var(--news-widget-border);
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease, border-color 0.2s ease; /* Smooth transition */
|
||||
}
|
||||
|
||||
.fhc-news-menu-item:hover {
|
||||
background-color: var(--fhc-cis-menu-lvl-1-bg-hover);
|
||||
border-color: #f1f1f1;
|
||||
}
|
||||
|
||||
.fhc-news-menu-item:active {
|
||||
background-color: var(--fhc-cis-menu-lvl-1-color-hover);
|
||||
border-color: #f1f1f1;
|
||||
background-color: var(--news-widget-highlight-color);
|
||||
border-color: var(--news-widget-border-highlight);
|
||||
}
|
||||
|
||||
.fhc-news-menu-item.selected {
|
||||
background-color: var(--fhc-cis-menu-lvl-1-bg-hover);
|
||||
border-right: 2px solid #fff;
|
||||
background-color: var(--news-widget-highlight-color);
|
||||
border: 2px solid var(--news-widget-border-highlight);
|
||||
|
||||
}
|
||||
|
||||
|
||||
@@ -5,28 +5,35 @@
|
||||
|
||||
@import url(./switches.css);
|
||||
|
||||
#search-filter{
|
||||
border: 1px solid #ced4da;
|
||||
:root{
|
||||
--searchbar-shadow: var(--fhc-shadow-40);
|
||||
}
|
||||
|
||||
|
||||
.searchbar_settings {
|
||||
position: absolute;
|
||||
position: absolute;
|
||||
z-index: 9999;
|
||||
background-color: #343a40;
|
||||
background-color: var(--fhc-dark);
|
||||
}
|
||||
|
||||
.searchbar_results {
|
||||
position: absolute;
|
||||
z-index: 9998;
|
||||
background-color: #fff;
|
||||
border: 1px solid lightgrey;
|
||||
background-color: var(--fhc-background);
|
||||
border: 1px solid var(--fhc-border);
|
||||
padding: .5rem;
|
||||
top: 100%;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
box-shadow: 2px 2px 4px rgba(0, 0, 0, .4);
|
||||
box-shadow: 2px 2px 4px var(--searchbar-shadow);
|
||||
}
|
||||
|
||||
.searchbar_results a{
|
||||
color: var(--fhc-link);
|
||||
}
|
||||
|
||||
.searchbar_results a:not(a~i) {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.searchbar_results_scroller {
|
||||
@@ -35,7 +42,7 @@
|
||||
}
|
||||
|
||||
.searchbar_result {
|
||||
border-bottom: 1px solid lightgrey;
|
||||
border-bottom: 1px solid var(--fhc-border);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,23 +1,24 @@
|
||||
:root{
|
||||
--fhc-switches-checked-bg: var(--fhc-light);
|
||||
--fhc-switches-unchecked-bg: var(--fhc-disabled);
|
||||
--fhc-switches-shadow: var(--fhc-shadow-20);
|
||||
}
|
||||
|
||||
.fhc-switches:checked {
|
||||
background-color: white !important;
|
||||
border-color: white !important;
|
||||
background-color: var(--fhc-switches-checked-bg) !important;
|
||||
border-color: transparent;
|
||||
background-position: right center !important;
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23000000'/%3e%3c/svg%3e") !important;
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='black'/%3e%3c/svg%3e") !important;
|
||||
}
|
||||
|
||||
.fhc-switches {
|
||||
background-color: var(--bs-gray-600) !important;
|
||||
border-color: var(--bs-gray-600) !important;
|
||||
background-color: var(--fhc-switches-unchecked-bg) !important;
|
||||
border-color: transparent;
|
||||
background-position: left center !important;
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%238e99a3'/%3e%3c/svg%3e") !important;
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%236b747a'/%3e%3c/svg%3e") !important;
|
||||
}
|
||||
|
||||
.fhc-switches:focus {
|
||||
box-shadow: 0 0 0 .25rem rgba(108, 117, 125,.25);
|
||||
box-shadow: 0 0 0 .25rem var(--fhc-switches-shadow);
|
||||
}
|
||||
|
||||
/*.form-switch .form-check-input:checked {
|
||||
|
||||
|
||||
rgb(52, 58, 64)*/
|
||||
|
||||
|
||||
@@ -3,9 +3,9 @@
|
||||
Author : bambi
|
||||
*/
|
||||
:root {
|
||||
--fhc-verticalsplit-vsplitter-bg-color: #eee;
|
||||
--fhc-verticalsplit-vsplitter-border-color: #eee;
|
||||
--fhc-verticalsplit-vsplitter-splitactions-color: #000;
|
||||
--fhc-verticalsplit-vsplitter-bg-color: var(--fhc-background);
|
||||
--fhc-verticalsplit-vsplitter-border-color: var(--fhc-border);
|
||||
--fhc-verticalsplit-vsplitter-splitactions-color: var(--fhc-dark);
|
||||
}
|
||||
|
||||
.verticalsplitted {
|
||||
|
||||
@@ -24,46 +24,6 @@
|
||||
border-color: #DEE2E6 !important;
|
||||
}
|
||||
|
||||
.bg-info-subtle{
|
||||
background-color: #D9EDF7 !important;
|
||||
color: #31708F !important;
|
||||
border-style: solid !important;
|
||||
border-width: 1px !important;
|
||||
border-color: #BCE8F1 !important;
|
||||
}
|
||||
|
||||
.bg-warning-subtle{
|
||||
background-color: #FFF3CD !important;
|
||||
color: #664D03 !important;
|
||||
border-style: solid !important;
|
||||
border-width: 1px !important;
|
||||
border-color: #FFE69C !important;
|
||||
}
|
||||
|
||||
.bg-success-subtle{
|
||||
background-color: #D1E7DD !important;
|
||||
color: #0A3622 !important;
|
||||
border-style: solid !important;
|
||||
border-width: 1px !important;
|
||||
border-color: #A3CFBB !important;
|
||||
}
|
||||
|
||||
.bg-danger-subtle{
|
||||
background-color: #F8D7DA !important;
|
||||
color: #672B31 !important;
|
||||
border-style: solid !important;
|
||||
border-width: 1px !important;
|
||||
border-color: #F1AEB5 !important;
|
||||
}
|
||||
|
||||
.bg-primary-subtle{
|
||||
background-color: #CFE2FF !important;
|
||||
color: #052C65 !important;
|
||||
border-style: solid !important;
|
||||
border-width: 1px !important;
|
||||
border-color: #9EC5FE !important;
|
||||
}
|
||||
|
||||
|
||||
/* html attribute disabled and title don't work together, sets the pointer-event to auto in order to see the title toolip */
|
||||
.btn:disabled {
|
||||
|
||||
@@ -136,13 +136,7 @@ export default {
|
||||
},
|
||||
overlayStyle() {
|
||||
return {
|
||||
'background-color': '#F5E9D7',
|
||||
'position': 'absolute',
|
||||
'pointer-events': 'none',
|
||||
'z-index': 2,
|
||||
height: this.getDayTimePercent + '%',
|
||||
opacity: 0.5,
|
||||
overflow: 'hidden'
|
||||
}
|
||||
},
|
||||
pageHeaderStyle() {
|
||||
@@ -178,7 +172,7 @@ export default {
|
||||
'padding-left': '3.5rem',
|
||||
'margin-top': '-1px',
|
||||
'z-index': 2,
|
||||
'border-color': '#00649C!important',
|
||||
'border-color': 'var(--fhc-border)',
|
||||
top: this.hourPosition + 'px',
|
||||
left: 0,
|
||||
right: 0,
|
||||
@@ -190,14 +184,7 @@ export default {
|
||||
},
|
||||
curIndicatorStyle() {
|
||||
return {
|
||||
'pointer-events': 'none',
|
||||
'padding-left': '7rem',
|
||||
'margin-top': '-1px',
|
||||
'z-index': 2,
|
||||
'border-color': '#00649C!important',
|
||||
top: this.getDayTimePercent + '%',
|
||||
left: 0,
|
||||
right: 0,
|
||||
}
|
||||
},
|
||||
noEventsCondition() {
|
||||
@@ -280,8 +267,7 @@ export default {
|
||||
}
|
||||
|
||||
if(this.date.compare(this.todayDate)) {
|
||||
styleObj['backgroundImage'] = 'linear-gradient(to bottom, #F5E9D7 '+this.getDayTimePercent+'%, #FFFFFF '+this.getDayTimePercent+'%)'
|
||||
styleObj['border-color'] = '#E8E8E8';
|
||||
styleObj['backgroundImage'] = 'linear-gradient(to bottom, var(--calendar-past) '+this.getDayTimePercent+'%, transparent '+this.getDayTimePercent+'%)'
|
||||
// styleObj.opacity = 0.5; // would opaque the whole column
|
||||
}
|
||||
|
||||
@@ -390,7 +376,7 @@ export default {
|
||||
<div class="fhc-calendar-day-page h-100">
|
||||
<div class="row m-0 h-100">
|
||||
<div style="overflow:auto" class="col-12 col-xl-6 p-0 h-100">
|
||||
<div class="d-flex flex-column h-100">
|
||||
<div class="d-flex flex-column h-100 border">
|
||||
<div ref="header" class="fhc-calendar-week-page-header d-grid border-2 border-bottom text-center" :style="pageHeaderStyle">
|
||||
<div type="button" class="flex-grow-1" :title="dayText.heading" @click.prevent="changeToMonth(day)">
|
||||
<div class="fw-bold">{{dayText.tag}}</div>
|
||||
@@ -432,16 +418,16 @@ export default {
|
||||
|
||||
|
||||
<div >
|
||||
<h1 v-if="noEventsCondition" class="m-0 text-secondary" ref="noEventsText" :style="noLvStyle">{{ $p.t('lehre/noLvFound') }}</h1>
|
||||
<h1 v-if="noEventsCondition" class="m-0 bs-body" ref="noEventsText" :style="noLvStyle">{{ $p.t('lehre/noLvFound') }}</h1>
|
||||
<div class="events position-relative" :class="{'fhc-calendar-no-events-overlay':noEventsCondition}" ref="events" @mousemove="calcHourPosition" @mouseleave="hourPosition = null">
|
||||
<Transition>
|
||||
<div v-if="hourPosition && !noEventsCondition" class="position-absolute border-top small" :style="indicatorStyle">
|
||||
<span class="border border-top-0 px-2 bg-white">{{hourPositionTime}}</span>
|
||||
<span class="border border-top-0 px-2">{{hourPositionTime}}</span>
|
||||
</div>
|
||||
</Transition>
|
||||
<Transition>
|
||||
<div v-if="lookingAtToday && !noEventsCondition" class="position-absolute border-top small" :style="curIndicatorStyle">
|
||||
<span class="border border-top-0 px-2 bg-white">{{curTime}}</span>
|
||||
<div v-if="lookingAtToday && !noEventsCondition" class="curTimeIndicator border-top small" :style="curIndicatorStyle">
|
||||
<span class="border border-top-0 px-2">{{curTime}}</span>
|
||||
</div>
|
||||
</Transition>
|
||||
<div :id="hourGridIdentifier(hour)" v-for="hour in hours" :key="hour" class="position-absolute box-shadow-border" :style="hourGridStyle(hour)"></div>
|
||||
@@ -450,7 +436,7 @@ export default {
|
||||
</div>
|
||||
<div v-for="(day,dayindex) in eventsPerDayAndHour" :key="day" class=" day border-start" :style="dayGridStyle(day)">
|
||||
|
||||
<div v-if="lookingAtToday && !noEventsCondition" :style="overlayStyle"></div>
|
||||
<div v-if="lookingAtToday && !noEventsCondition" class="overlay" :style="overlayStyle"></div>
|
||||
<div v-for="event in day.events" :key="event" :style="eventGridStyle(day,event)" v-contrast
|
||||
:selected="event.orig == selectedEvent" class="fhc-entry mx-2 small rounded overflow-hidden" >
|
||||
<!-- desktop version of the page template, parent receives slotProp mobile = false -->
|
||||
|
||||
@@ -123,7 +123,7 @@ export default {
|
||||
if(day.getDate() === this.todayDate.getDate()
|
||||
&& day.getMonth() === this.todayDate.getMonth()
|
||||
&& day.getFullYear() === this.todayDate.getFullYear()) {
|
||||
styleObj['background-color'] = '#00649c'; // fh blau
|
||||
styleObj['background-color'] = 'var(--fhc-primary)';
|
||||
styleObj.color = 'white';
|
||||
}
|
||||
|
||||
@@ -137,8 +137,8 @@ export default {
|
||||
},
|
||||
template: /*html*/`
|
||||
<div class="fhc-calendar-month-page" :class="{'show-weeks': showWeeks}">
|
||||
<div v-if="showWeeks" class=" bg-light fw-bold border-top border-bottom text-center"></div>
|
||||
<div v-for="day in weeks[0].days" :key="day" class="bg-light fw-bold border-top border-bottom text-center">
|
||||
<div v-if="showWeeks" class=" fw-bold border-top border-bottom text-center"></div>
|
||||
<div v-for="day in weeks[0].days" :key="day" class=" fw-bold border-top border-bottom text-center">
|
||||
{{dayText[day]}}
|
||||
</div>
|
||||
<template v-for="week in weeks"
|
||||
|
||||
@@ -63,6 +63,11 @@ export default {
|
||||
const now = new Date();
|
||||
return String(now.getHours()).padStart(2, '0') + ':' + String(now.getMinutes()).padStart(2, '0');
|
||||
},
|
||||
curIndicatorStyle() {
|
||||
return {
|
||||
top: this.getDayTimePercent + '%',
|
||||
}
|
||||
},
|
||||
pageHeaderStyle(){
|
||||
return {
|
||||
'z-index': 4,
|
||||
@@ -74,27 +79,11 @@ export default {
|
||||
},
|
||||
overlayStyle() {
|
||||
return {
|
||||
'background-color': '#F5E9D7',
|
||||
'position': 'absolute',
|
||||
'pointer-events': 'none',
|
||||
'z-index': 2,
|
||||
height: this.getDayTimePercent + '%',
|
||||
width: this.laneWidth + 'px',
|
||||
opacity: 0.5
|
||||
}
|
||||
},
|
||||
indicatorStyle() {
|
||||
return {
|
||||
'pointer-events': 'none',
|
||||
'padding-left': '3.5rem',
|
||||
'margin-top': '-1px',
|
||||
'z-index': 2,
|
||||
'border-color': '#00649C!important',
|
||||
top: this.hourPosition + 'px',
|
||||
left: 0,
|
||||
right: 0,
|
||||
}
|
||||
},
|
||||
|
||||
hours(){
|
||||
// returns an array with elements starting at 7 and ending at 24
|
||||
return [...Array(24).keys()].filter(hour => hour >= 7 && hour <= 24);
|
||||
@@ -171,16 +160,16 @@ export default {
|
||||
d.getDate() === this.todayDate.getDate()
|
||||
)
|
||||
},
|
||||
curIndicatorStyle() {
|
||||
|
||||
indicatorStyle() {
|
||||
return {
|
||||
'pointer-events': 'none',
|
||||
'padding-left': '1rem',
|
||||
'padding-left': '3.5rem',
|
||||
'margin-top': '-1px',
|
||||
'z-index': 2,
|
||||
'border-color': '#00649C!important',
|
||||
top: this.getDayTimePercent + '%',
|
||||
width: this.laneWidth + 'px'
|
||||
'border-color': 'var(--fhc-border)',
|
||||
top: this.hourPosition + 'px',
|
||||
left: 0,
|
||||
right: 0,
|
||||
}
|
||||
},
|
||||
getDayTimePercent() {
|
||||
@@ -211,14 +200,12 @@ export default {
|
||||
'grid-template-rows': 'repeat(' + (this.hours.length * 60 / this.smallestTimeFrame) + ', 1fr)',
|
||||
}
|
||||
if(day.isPast) {
|
||||
styleObj['background-color'] = '#F5E9D7'
|
||||
styleObj['border-color'] = '#E8E8E8';
|
||||
styleObj.opacity = 0.5;
|
||||
//styleObj['background-color'] = 'var(--calendar-past)'
|
||||
styleObj['border-color'] = 'var(--fhc-border)';
|
||||
} else if (day.isToday) {
|
||||
|
||||
styleObj['backgroundImage'] = 'linear-gradient(to bottom, #F5E9D7 '+this.getDayTimePercent+'%, #FFFFFF '+this.getDayTimePercent+'%)'
|
||||
styleObj['border-color'] = '#E8E8E8';
|
||||
styleObj.opacity = 0.5;
|
||||
//styleObj['backgroundImage'] = 'linear-gradient(to bottom, var(--calendar-past) '+this.getDayTimePercent+'%, transparent '+this.getDayTimePercent+'%)'
|
||||
styleObj['border-color'] = 'var(--fhc-border)';
|
||||
}
|
||||
|
||||
return styleObj
|
||||
@@ -335,7 +322,7 @@ export default {
|
||||
},
|
||||
template: /*html*/`
|
||||
<div ref="page" class="fhc-calendar-week-page" style="min-width: 700px;">
|
||||
<div class="d-flex flex-column">
|
||||
<div class="d-flex flex-column">
|
||||
<div class="fhc-calendar-week-page-header d-grid border-2 border-bottom text-center" :style="pageHeaderStyle" >
|
||||
<div type="button" v-for="day in days" :key="day" class="flex-grow-1" :title="dayText[day]?.heading" @click.prevent="changeToDay(day)">
|
||||
<div class="fw-bold">{{dayText[day]?.tag}}</div>
|
||||
@@ -357,7 +344,7 @@ export default {
|
||||
:style="{'background-color': event?.color, 'margin-bottom':'1px'}"
|
||||
class="d-grid m-1 small rounded overflow-hidden fhc-entry"
|
||||
v-contrast
|
||||
>
|
||||
>
|
||||
<slot class="p-1" name="weekPage" :event="event" :day="day">
|
||||
<p>this is a placeholder which means that no template was passed to the Calendar Page slot</p>
|
||||
</slot>
|
||||
@@ -366,22 +353,22 @@ export default {
|
||||
</div>
|
||||
</div>
|
||||
<div class="events position-relative" :ref="'eventsRef'+week" @mousemove="calcHourPosition" @mouseleave="hourPosition = null">
|
||||
<div :id="hourGridIdentifier(hour)" v-for="hour in hours" :key="hour" class="position-absolute box-shadow-border" :style="hourGridStyle(hour)"></div>
|
||||
<div :id="hourGridIdentifier(hour)" v-for="hour in hours" :key="hour" class="position-absolute box-shadow-border" :style="hourGridStyle(hour)"></div>
|
||||
<Transition>
|
||||
<div v-if="hourPosition" class="position-absolute border-top small" :style="indicatorStyle">
|
||||
<span class="border border-top-0 px-2 bg-white">{{hourPositionTime}}</span>
|
||||
<div v-if="hourPosition" class="fhc-calendar-hour-indicator position-absolute small" :style="indicatorStyle" >
|
||||
<span class=" border border-top-0 px-2 ">{{hourPositionTime}}</span>
|
||||
</div>
|
||||
</Transition>
|
||||
<div class="hours">
|
||||
<div v-for="hour in hours" :style="getGridStyle" :key="hour" class="text-muted text-end small" :ref="'hour' + hour">{{hour}}:00</div>
|
||||
</div>
|
||||
<div v-for="(day,dayindex) in eventsPerDayAndHour" :key="day" class=" day border-start position-relative" :style="dayGridStyle(day)">
|
||||
<div v-for="(day,dayindex) in eventsPerDayAndHour" :key="day" :class="{'past':day.isPast}" class=" day border-start position-relative" :style="dayGridStyle(day)">
|
||||
<Transition>
|
||||
<div v-if="day.isToday" class="position-absolute border-top small" :style="curIndicatorStyle">
|
||||
<span class="border border-top-0 px-2 bg-white">{{curTime}}</span>
|
||||
<div v-if="day.isToday" class="border-top small curTimeIndicator" :style="curIndicatorStyle">
|
||||
<span class="fhc-body-bg border border-top-0 px-2">{{curTime}}</span>
|
||||
</div>
|
||||
</Transition>
|
||||
<div v-if="day.isToday" :style="overlayStyle"></div>
|
||||
<div v-if="day.isToday" class="overlay" :style="overlayStyle"></div>
|
||||
<div v-for="event in day.events" :key="event" @click.prevent="weekPageClick(event.orig, day)"
|
||||
:selected="event.orig == selectedEvent"
|
||||
:style="eventGridStyle(day,event)"
|
||||
|
||||
@@ -88,7 +88,9 @@ export default {
|
||||
},
|
||||
template: /*html*/ `
|
||||
<!-- div that contains the content -->
|
||||
<component ref="content" :is="computeContentType" v-if="content" :content="content" :content_id="content_id_internal" />
|
||||
<div id="fhc-cms-content" v-if="content">
|
||||
<component ref="content" :is="computeContentType" :content="content" :content_id="content_id_internal" />
|
||||
</div>
|
||||
<p v-else>No content is available to display</p>
|
||||
`,
|
||||
};
|
||||
|
||||
@@ -85,26 +85,36 @@ export default {
|
||||
.then(() => {
|
||||
Axios.get(el.href)
|
||||
.then((res) => {
|
||||
// TODO(chris): check for success then show message and/or reload
|
||||
location = location;
|
||||
// TODO(chris): check for success then show message and/or reload
|
||||
location = location;
|
||||
})
|
||||
.catch((err) => console.error("ERROR:", err));
|
||||
})
|
||||
.catch(() => {});
|
||||
});
|
||||
});
|
||||
document.querySelectorAll("#cms [data-href]").forEach((el) => {
|
||||
document.querySelectorAll("#cms [data-href]").forEach((el) => {
|
||||
el.href = el.dataset.href.replace(
|
||||
/^ROOT\//,
|
||||
FHC_JS_DATA_STORAGE_OBJECT.app_root
|
||||
/^ROOT\//,
|
||||
FHC_JS_DATA_STORAGE_OBJECT.app_root
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll("[href]").forEach((element) => {
|
||||
let orignal_href = element.getAttribute("href");
|
||||
let new_href = replaceRelativeLegacyLink(orignal_href);
|
||||
element.href = new_href;
|
||||
});
|
||||
document.querySelectorAll("[href]").forEach((element) => {
|
||||
let orignal_href = element.getAttribute("href");
|
||||
let new_href = replaceRelativeLegacyLink(orignal_href);
|
||||
element.href = new_href;
|
||||
});
|
||||
|
||||
document.querySelectorAll("[style*=background-color]").forEach((element) => {
|
||||
if (element.style.backgroundColor == "rgb(255, 255, 255)"){
|
||||
element.style.backgroundColor = "var(--fhc-background)";
|
||||
}
|
||||
if(element.querySelector("*[style*=background-color]")){
|
||||
element.style.backgroundColor = "var(--fhc-secondary)";
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
template: /*html*/ `
|
||||
<!-- div that contains the content -->
|
||||
|
||||
@@ -80,7 +80,7 @@ export default {
|
||||
<hr/>
|
||||
<pagination v-show="content?true:false" :page_size="page_size" @page="page=$event.page; loadNewPageContent($event)" :maxPageCount="maxPageCount">
|
||||
</pagination>
|
||||
<div class="container-fluid">
|
||||
<div class="container-fluid mt-4">
|
||||
<div class="row">
|
||||
<div class="col" v-html="content">
|
||||
</div>
|
||||
|
||||
@@ -26,7 +26,7 @@ components:{
|
||||
StudiengangVertretung,
|
||||
},
|
||||
template:/*html*/`
|
||||
|
||||
<div id="fhc-studiengang-informationen">
|
||||
<template v-if="studiengang?.bezeichnung && semester">
|
||||
<div class="card card-body mb-3">
|
||||
<div class="mb-1">
|
||||
@@ -35,7 +35,7 @@ template:/*html*/`
|
||||
</div>
|
||||
<div class="mb-1">
|
||||
<h2 class="mb-1 pb-0">Moodle:</h2>
|
||||
<a class="mb-1" target="_blank" :href="moodleLink">{{studiengang?.kurzbzlang}}</a>
|
||||
<a class="fhc-link-color mb-1" target="_blank" :href="moodleLink">{{studiengang?.kurzbzlang}}</a>
|
||||
</div>
|
||||
<div :class="{'mb-1':studiengang?.zusatzinfo_html}">
|
||||
<h2 class="mb-1 pb-0">{{$p.t('lehre','studiensemester')}}: </h2>
|
||||
@@ -72,6 +72,7 @@ template:/*html*/`
|
||||
<template v-if="jahrgangsvertr && Array.isArray(jahrgangsvertr) && jahrgangsvertr.length >0">
|
||||
<studiengang-vertretung :title="$p.t('studiengangInformation', 'Jahrgangsvertretung')" :vertretungsList="jahrgangsvertr"></studiengang-vertretung>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
`,
|
||||
computed:{
|
||||
|
||||
@@ -20,16 +20,16 @@ export default {
|
||||
<img :src="base64Image" alt="mitarbeiter_foto" style="width: 110px; height: auto; object-fir:scale-down;" class="card-img-top" >
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h6 class="text-center card-title mb-0">{{fullname}} <a v-if="profilViewLink" :href="profilViewLink"><i class="ms-2 fa fa-arrow-up-right-from-square" style="color:#00649C"></i></a></h6>
|
||||
<h6 class="text-center card-title mb-0">{{fullname}} <a v-if="profilViewLink" :href="profilViewLink"><i class="ms-2 fa fa-arrow-up-right-from-square fhc-primary-color" ></i></a></h6>
|
||||
</div>
|
||||
<hr class="my-0">
|
||||
<div class="card-body">
|
||||
|
||||
|
||||
<div class="flex flex-column gap-3">
|
||||
<div class="mb-3">
|
||||
<span>
|
||||
<i class="fa fa-phone me-2"></i>
|
||||
<a :href="phone.link">{{phone.number}}</a>
|
||||
<a class="fhc-link-color" :href="phone.link">{{phone.number}}</a>
|
||||
</span>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
@@ -41,7 +41,7 @@ export default {
|
||||
<div>
|
||||
<span>
|
||||
<i class="fa-regular fa-envelope me-2"></i>
|
||||
<a :href="email_link" v-html="formattedEmail"></a>
|
||||
<a class="fhc-link-color" :href="email_link" v-html="formattedEmail"></a>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -12,7 +12,7 @@ export default {
|
||||
<div class="card-body">
|
||||
<p v-for="vertretung in vertretungsList">
|
||||
<a v-if="profilViewLink(vertretung.uid)" :href="profilViewLink(vertretung.uid)">
|
||||
<i class="me-2 fa fa-arrow-up-right-from-square" style="color:#00649C"></i>
|
||||
<i class="me-2 fa fa-arrow-up-right-from-square fhc-primary-color" ></i>
|
||||
</a>
|
||||
{{vertretungFormatedName(vertretung,false)}}
|
||||
</p>
|
||||
|
||||
@@ -0,0 +1,51 @@
|
||||
export default {
|
||||
data:()=>{
|
||||
return{
|
||||
theme:'light',
|
||||
themes:['light','dark','purple'],
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
toggleTheme(theme){
|
||||
if(!theme) return;
|
||||
|
||||
for(const theme of this.themes){
|
||||
document.documentElement.classList.remove(theme);
|
||||
}
|
||||
document.documentElement.classList.add(theme);
|
||||
|
||||
document.body.setAttribute("data-bs-theme", theme);
|
||||
|
||||
let stylesheet = document.querySelector('link[href*="primevue/resources/themes"]');
|
||||
if(theme =="dark"){
|
||||
stylesheet.attributes.href.value = stylesheet.attributes.href.value.replace("bootstrap4-light-blue", "bootstrap4-dark-blue");
|
||||
}else if(theme =="light"){
|
||||
stylesheet.attributes.href.value = stylesheet.attributes.href.value.replace("bootstrap4-dark-blue", "bootstrap4-light-blue");
|
||||
}
|
||||
|
||||
localStorage.setItem("theme",theme);
|
||||
this.theme = theme;
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
nextTheme(){
|
||||
return this.themes[(this.themes.indexOf(this.theme) + 1) % this.themes.length];
|
||||
},
|
||||
},
|
||||
mounted(){
|
||||
const theme =localStorage.getItem("theme");
|
||||
if(this.themes.includes(theme)){
|
||||
this.theme = theme;
|
||||
}
|
||||
this.toggleTheme(this.theme);
|
||||
|
||||
},
|
||||
template:/*html*/`
|
||||
|
||||
<button @click="toggleTheme(nextTheme)" class="fhc-primary-highlight-bg align-self-center btn btn-secondary rounded-5">
|
||||
<i v-if="theme == 'light'" class="fa-solid fa-moon fhc-text"></i>
|
||||
<i v-else-if="theme == 'dark'" class="fa-solid fa-sun fhc-text"></i>
|
||||
<i v-else-if="theme == 'purple'" class="fa-solid fa-wine-bottle"></i>
|
||||
</button>
|
||||
`
|
||||
}
|
||||
@@ -1,12 +1,14 @@
|
||||
import CisMenuEntry from "./Menu/Entry.js";
|
||||
import FhcSearchbar from "../searchbar/searchbar.js";
|
||||
import CisSprachen from "./Sprachen.js"
|
||||
import DarkTheme from "./DarkTheme.js";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
CisMenuEntry,
|
||||
FhcSearchbar,
|
||||
CisSprachen,
|
||||
DarkTheme,
|
||||
},
|
||||
props: {
|
||||
rootUrl: String,
|
||||
@@ -103,10 +105,15 @@ export default {
|
||||
<button id="nav-main-btn" class="navbar-toggler rounded-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#nav-main" aria-controls="nav-main" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<fhc-searchbar ref="searchbar" id="nav-search" style="background-color:var(--fhc-cis-primary)" class="fhc-searchbar w-100 py-1 py-lg-2" :searchoptions="searchbaroptions" :searchfunction="searchfunction"></fhc-searchbar>
|
||||
<a id="nav-logo" class="d-none d-lg-block" :href="rootUrl">
|
||||
<img :src="logoUrl" alt="Logo">
|
||||
</a>
|
||||
<fhc-searchbar ref="searchbar" id="nav-search" class="fhc-searchbar w-100 py-1 py-lg-2" :searchoptions="searchbaroptions" :searchfunction="searchfunction"></fhc-searchbar>
|
||||
<div id="nav-logo" class="d-none d-lg-block">
|
||||
<div class="d-flex h-100">
|
||||
<a :href="rootUrl">
|
||||
<img :src="logoUrl" alt="Logo">
|
||||
</a>
|
||||
<dark-theme></dark-theme>
|
||||
</div>
|
||||
</div>
|
||||
<div id="nav-user">
|
||||
<button id="nav-user-btn" class="btn btn-link rounded-0" type="button" data-bs-toggle="collapse" data-bs-target="#nav-user-menu" aria-expanded="false" aria-controls="nav-user-menu">
|
||||
<img :src="avatarUrl" class="bg-dark avatar rounded-circle border border-dark"/>
|
||||
@@ -115,19 +122,19 @@ export default {
|
||||
@[\`shown.bs.collapse\`]="handleShowNavUser"
|
||||
@[\`hide.bs.collapse\`]="handleHideNavUser"
|
||||
id="nav-user-menu" class="top-100 end-0 collapse list-unstyled" aria-labelledby="nav-user-btn">
|
||||
<li class="btn-level-2"><a class="btn btn-level-2 rounded-0 d-block" :href="site_url + '/Cis/Profil'" id="menu-profil">Profil</a></li>
|
||||
<li class="btn-level-2">
|
||||
<li><a class="fhc-dark-bg btn rounded-0 d-block" :href="site_url + '/Cis/Profil'" id="menu-profil">Profil</a></li>
|
||||
<li >
|
||||
<cis-sprachen @languageChanged="fetchMenu"></cis-sprachen>
|
||||
</li>
|
||||
<li class="btn-level-2"><hr class="dropdown-divider m-0 "></li>
|
||||
<li><a class="btn btn-level-2 rounded-0 d-block" :href="logoutUrl">Logout</a></li>
|
||||
<li><hr class="dropdown-divider m-0 "></li>
|
||||
<li ><a class="fhc-dark-bg btn rounded-0 d-block" :href="logoutUrl">Logout</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<nav id="nav-main" class="offcanvas offcanvas-start bg-dark" tabindex="-1" aria-labelledby="nav-main-btn" data-bs-backdrop="false">
|
||||
<nav id="nav-main" class="offcanvas offcanvas-start" tabindex="-1" aria-labelledby="nav-main-btn" data-bs-backdrop="false">
|
||||
<div id="nav-main-sticky">
|
||||
<div id="nav-main-toggle" class="position-static d-none d-lg-block bg-dark">
|
||||
<button type="button" class="btn bg-dark text-light rounded-0 p-1 d-flex align-items-center" data-bs-toggle="collapse" data-bs-target=".nav-menu-collapse" aria-expanded="true" aria-controls="nav-sprachen nav-main-menu">
|
||||
<i class="fa fa-arrow-circle-left"></i>
|
||||
<div id="nav-main-toggle" class="position-static d-none d-lg-block ">
|
||||
<button type="button" class="btn text-light rounded-0 p-1 d-flex align-items-center" data-bs-toggle="collapse" data-bs-target=".nav-menu-collapse" aria-expanded="true" aria-controls="nav-sprachen nav-main-menu">
|
||||
<i class="fa fa-arrow-circle-left fhc-text"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="offcanvas-body p-0">
|
||||
|
||||
@@ -115,7 +115,7 @@ export default {
|
||||
:''
|
||||
}}</th>
|
||||
<td>
|
||||
<a v-if="event.ort_content_id" :href="getOrtContentLink"><i class="fa fa-arrow-up-right-from-square me-1" style="color:#00649C"></i></a>
|
||||
<a v-if="event.ort_content_id" :href="getOrtContentLink"><i class="fa fa-arrow-up-right-from-square me-1 fhc-primary-color" ></i></a>
|
||||
{{event.ort_kurzbz}}
|
||||
</td>
|
||||
</tr>
|
||||
@@ -135,7 +135,7 @@ export default {
|
||||
}}</th>
|
||||
<td>
|
||||
<div v-for="lektor in event.lektor" class="d-block">
|
||||
<a v-if="lektorenLinks[lektor.kurzbz]" :href="lektorenLinks[lektor.kurzbz]"><i class="fa fa-arrow-up-right-from-square me-1" style="color:#00649C"></i></a>
|
||||
<a v-if="lektorenLinks[lektor.kurzbz]" :href="lektorenLinks[lektor.kurzbz]"><i class="fa fa-arrow-up-right-from-square me-1 fhc-primary-color" ></i></a>
|
||||
{{lektor.kurzbz}}
|
||||
</div>
|
||||
</td>
|
||||
|
||||
@@ -63,7 +63,7 @@ export default {
|
||||
<div style="min-height:150px; min-width:150px;" class="col-12 col-lg-6 col-xl-4" v-for="(menuItem, index) in menu" :key="index">
|
||||
<a :id="menuItem.name" :class="{'dropdown-toggle':menuItem.c4_moodle_links?.length }" role="button" :href="c4_link(menuItem)"
|
||||
:disabled="c4_disabled(menuItem)" :data-bs-toggle="menuItem.c4_moodle_links?.length?'dropdown':null"
|
||||
class="menu-entry p-2 w-100 text-wrap border border-1 rounded-3 d-flex flex-column align-items-center justify-content-center text-center text-decoration-none link-dark h-100">
|
||||
class="menu-entry p-2 w-100 text-wrap border border-1 rounded-3 d-flex flex-column align-items-center justify-content-center text-center text-decoration-none link h-100">
|
||||
<img :src="menuItem.c4_icon" :alt="menuItem.name" />
|
||||
<p @click="selectMenu(menuItem)" class="w-100 mt-2">{{menuItem.name}}</p>
|
||||
<p v-for="([text,link],index) in menuItem.c4_linkList" @click.stop="selectMenu(menuItem,index)" class="mt-1 w-100" :index="index">{{text}}</p>
|
||||
|
||||
@@ -219,25 +219,25 @@ const RoomInformation = {
|
||||
</span>
|
||||
</template>
|
||||
<template #weekPage="{event,day}">
|
||||
<div @click="showModal(event?.orig)" type="button" class=" border border-secondary border d-flex flex-column align-items-center justify-content-evenly h-100">
|
||||
<span>{{event?.orig.topic}}</span>
|
||||
<span v-for="lektor in event?.orig.lektor">{{lektor.kurzbz}}</span>
|
||||
<span>{{event?.orig.ort_kurzbz}}</span>
|
||||
<div @click="showModal(event)" type="button" class=" border border-secondary border d-flex flex-column align-items-center justify-content-evenly h-100">
|
||||
<span>{{event?.topic}}</span>
|
||||
<span v-for="lektor in event?.lektor">{{lektor.kurzbz}}</span>
|
||||
<span>{{event?.ort_kurzbz}}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #dayPage="{event,day,mobile}">
|
||||
<div @click="mobile? showModal(event?.orig):null" type="button" class="fhc-entry border border-secondary border row h-100 justify-content-center align-items-center text-center">
|
||||
<div @click="mobile? showModal(event):null" type="button" class="fhc-entry border border-secondary border row h-100 justify-content-center align-items-center text-center">
|
||||
<div class="col ">
|
||||
<p>{{ $p.t('lehre/lehrveranstaltung') }}:</p>
|
||||
<p class="m-0">{{event?.orig.topic}}</p>
|
||||
<p class="m-0">{{event?.topic}}</p>
|
||||
</div>
|
||||
<div class="col ">
|
||||
<p>{{ $p.t('lehre/lektor') }}:</p>
|
||||
<p class="m-0" v-for="lektor in event?.orig.lektor">{{lektor.kurzbz}}</p>
|
||||
<p class="m-0" v-for="lektor in event?.lektor">{{lektor.kurzbz}}</p>
|
||||
</div>
|
||||
<div class="col ">
|
||||
<p>{{ $p.t('profil/Ort') }}: </p>
|
||||
<p class="m-0">{{event?.orig.ort_kurzbz}}</p>
|
||||
<p class="m-0">{{event?.ort_kurzbz}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -48,11 +48,11 @@ export default {
|
||||
// returns a suitable color for the given grade
|
||||
if (this.positiv)
|
||||
{
|
||||
return 'var(--fhc-cis-grade-positive)';
|
||||
return 'var(--fhc-success)';
|
||||
}
|
||||
else
|
||||
{
|
||||
return 'var(--fhc-cis-grade-negative)';
|
||||
return 'var(--fhc-danger)';
|
||||
}
|
||||
},
|
||||
is_organisatorische_einheit(){
|
||||
@@ -179,9 +179,9 @@ export default {
|
||||
<i :class="[menuItem.c4_icon2 ? menuItem.c4_icon2 : 'fa-solid fa-pen-to-square', !menuItem.c4_link ? 'unavailable' : null ]"></i>
|
||||
</div>
|
||||
<a
|
||||
class="text-decoration-none text-truncate"
|
||||
class="fhc-body text-decoration-none text-truncate"
|
||||
:id="'moodle_links_'+lehrveranstaltung_id"
|
||||
:class="{'link-dark':menuItem.c4_link, 'unavailable':!menuItem.c4_link, 'dropdown-toggle':menuItem.c4_moodle_links?.length }"
|
||||
:class="{ 'unavailable':!menuItem.c4_link, 'dropdown-toggle':menuItem.c4_moodle_links?.length }"
|
||||
:target="menuItem.c4_target"
|
||||
:href="c4_link(menuItem) ? c4_link(menuItem) : null">
|
||||
{{ menuItem.phrase ? $p.t(menuItem.phrase) : menuItem.name}}
|
||||
|
||||
@@ -114,7 +114,7 @@ export default {
|
||||
<td>
|
||||
<ul v-if="lektorNames.length" class="list-unstyled mb-0">
|
||||
<li v-for="name in new Set(lektorNames)" :key="name">
|
||||
<a :href="lektorNamesLinks[name]?lektorNamesLinks[name]:null"><i class="fa fa-arrow-up-right-from-square me-1" style="color:#00649C"></i></a>
|
||||
<a :href="lektorNamesLinks[name]?lektorNamesLinks[name]:null"><i class="fa fa-arrow-up-right-from-square me-1 fhc-primary-color" ></i></a>
|
||||
{{name}}
|
||||
</li>
|
||||
</ul>
|
||||
@@ -128,7 +128,7 @@ export default {
|
||||
<td>
|
||||
<ul class="list-unstyled mb-0">
|
||||
<li v-for="name in lvLeitung" :key="name">
|
||||
<a :href="lektorNamesLinks[name]?lektorNamesLinks[name]:null"><i class="fa fa-arrow-up-right-from-square me-1" style="color:#00649C"></i></a>
|
||||
<a :href="lektorNamesLinks[name]?lektorNamesLinks[name]:null"><i class="fa fa-arrow-up-right-from-square me-1 fhc-primary-color" ></i></a>
|
||||
{{name}}
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@@ -19,7 +19,7 @@ export default {
|
||||
|
||||
<!-- column 1 in the address row -->
|
||||
<div class="col-1 text-center">
|
||||
<i class="fa fa-location-dot fa-lg" style="color:#00649C "></i>
|
||||
<i class="fa fa-location-dot fa-lg fhc-link-color" ></i>
|
||||
</div>
|
||||
|
||||
<div class="col-11 col-sm-8 col-xl-11 col-xxl-8 order-1">
|
||||
|
||||
@@ -174,9 +174,9 @@ export default {
|
||||
<div class="align-middle text-center"><i role="button" @click="showEditProfilModal(item)" class="fa fa-eye"></i></div>
|
||||
</template>
|
||||
<template v-else >
|
||||
<div class="align-middle text-center" ><i style="color:#00639c" @click="showEditProfilModal(item)" role="button" class="fa fa-edit"></i></div>
|
||||
<div class="align-middle text-center" ><i @click="showEditProfilModal(item)" role="button" class="fa fa-edit fhc-primary-color"></i></div>
|
||||
</template>
|
||||
<div class="align-middle text-center"><i style="color:red" role="button" @click="deleteRequest(item)" class="fa fa-trash"></i></div>
|
||||
<div class="align-middle text-center"><i role="button" @click="deleteRequest(item)" class="text-danger fa fa-trash"></i></div>
|
||||
</div>
|
||||
</td>
|
||||
</template>
|
||||
|
||||
@@ -14,7 +14,7 @@ export default{
|
||||
template:/*html*/`
|
||||
<div class="gy-2 row align-items-center justify-content-center">
|
||||
<div class="col-1 text-center" >
|
||||
<i class="fa-solid " :class="{...(data.kontakt.includes('@')?{'fa-envelope':true}:{'fa-phone':true})}" style="color:rgb(0, 100, 156)"></i>
|
||||
<i class="fa-solid fhc-link-color" :class="{...(data.kontakt.includes('@')?{'fa-envelope':true}:{'fa-phone':true})}" ></i>
|
||||
</div>
|
||||
<div :class="{...(data.anmerkung? {'col-11':true, 'col-md-6':true, 'col-xl-11':true, 'col-xxl-6':true} : {'col-10':true, 'col-xl-9':true, 'col-xxl-10':true})}">
|
||||
<!-- rendering KONTAKT emails -->
|
||||
|
||||
@@ -20,10 +20,10 @@ export default {
|
||||
<div class="col-12 ">
|
||||
<div class="row">
|
||||
<div class="col-1 ">
|
||||
<i class="fa-solid fa-envelope" style="color: #00649C;"></i>
|
||||
<i class="fa-solid fa-envelope fhc-link-color" ></i>
|
||||
</div>
|
||||
<div class="col">
|
||||
<a :href="verteiler.mailto"><b>{{verteiler.gruppe_kurzbz}}</b></a>
|
||||
<a class="fhc-link-color" :href="verteiler.mailto"><b>{{verteiler.gruppe_kurzbz}}</b></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -22,7 +22,7 @@ export default {
|
||||
<div v-for="email in data" class="col-12 ">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-1 text-center">
|
||||
<i class="fa-solid fa-envelope" style="color:rgb(0, 100, 156)"></i>
|
||||
<i class="fa-solid fa-envelope fhc-link-color" ></i>
|
||||
</div>
|
||||
<div class="col-11">
|
||||
<div class="form-underline">
|
||||
|
||||
@@ -49,7 +49,7 @@ export default {
|
||||
<span v-else-if="key == 'semester' && entry.value" class="form-underline-content">
|
||||
{{ entry.value }}
|
||||
<a class="ms-auto mb-2" target="_blank" :href="getLinkSemesterListe">
|
||||
<i class="fa fa-arrow-up-right-from-square me-1"></i>
|
||||
<i class="fa fa-arrow-up-right-from-square me-1 fhc-link-color"></i>
|
||||
</a>
|
||||
</span>
|
||||
|
||||
@@ -57,7 +57,7 @@ export default {
|
||||
<span v-else-if="key =='verband' && entry.value" class="form-underline-content">
|
||||
{{ entry.value }}
|
||||
<a class="ms-auto mb-2" target="_blank" :href="getLinkVerbandListe">
|
||||
<i class="fa fa-arrow-up-right-from-square me-1"></i>
|
||||
<i class="fa fa-arrow-up-right-from-square me-1 fhc-link-color"></i>
|
||||
</a>
|
||||
</span>
|
||||
|
||||
@@ -65,7 +65,7 @@ export default {
|
||||
<span v-else-if="key == 'gruppe' && entry.value" class="form-underline-content">
|
||||
{{ entry.value }}
|
||||
<a class="ms-auto mb-2" target="_blank" :href="getLinkGruppeListe">
|
||||
<i class="fa fa-arrow-up-right-from-square me-1"></i>
|
||||
<i class="fa fa-arrow-up-right-from-square me-1 fhc-link-color"></i>
|
||||
</a>
|
||||
</span>
|
||||
|
||||
|
||||
@@ -248,7 +248,7 @@ export default {
|
||||
this.profilUpdateStates["Pending"];
|
||||
|
||||
let html = `<div class="d-flex justify-content-evenly align-items-center">
|
||||
<button class="btn border-primary border-2" id="showButton"><i class="fa-solid fa-eye" style="color: #0d6efd;"></i></button>
|
||||
<button class="btn border-primary border-2" id="showButton"><i class="fa-solid fa-eye fhc-primary-color"></i></button>
|
||||
${
|
||||
STATUS_PENDING ?
|
||||
`<button class="btn border-success border-2" id="acceptButton"><i class='fa fa-lg fa-circle-check text-success'></i></button>
|
||||
|
||||
@@ -76,7 +76,7 @@ export default {
|
||||
const val = cell.getValue()
|
||||
if(val) {
|
||||
return '<div style="display: flex; justify-content: center; align-items: center; height: 100%">' +
|
||||
'<a href="'+val+'"><i class="fa fa-arrow-up-right-from-square me-1" style="color:#00649C"></i></a></div>'
|
||||
'<a href="'+val+'"><i class="fa fa-arrow-up-right-from-square me-1 fhc-primary-color" ></i></a></div>'
|
||||
} else {
|
||||
return '<div style="display: flex; justify-content: center; align-items: center; height: 100%">' +
|
||||
'-</div>'
|
||||
|
||||
@@ -23,7 +23,7 @@ export default {
|
||||
template:/*html*/`
|
||||
<div class="container">
|
||||
<div class="row justify-content-center align-items-center flex-nowrap overflow-hidden">
|
||||
<button v-for="lang in allActiveLanguages" @click.prevent="changeLanguage(lang.sprache)" class="col text-white sprachen-entry btn text-center w-100" :selected="$p.user_language.value==lang.sprache">{{lang.bezeichnung}}</button>
|
||||
<button v-for="lang in allActiveLanguages" @click.prevent="changeLanguage(lang.sprache)" class="col fhc-text sprachen-entry btn text-center w-100" :selected="$p.user_language.value==lang.sprache">{{lang.bezeichnung}}</button>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
|
||||
@@ -191,7 +191,7 @@ export default {
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<button class="btn btn-light w-100" @click="filter = ''">
|
||||
<button class="btn fhc-tertiary w-100" @click="filter = ''">
|
||||
<small :class="{'fw-bold':filter===''}">{{$p.t('ui','alle')}}: <b>{{ count.alle }}</b></small>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -187,8 +187,8 @@ export default {
|
||||
<i class="fa-solid fa-spinner fa-pulse fa-3x"></i>
|
||||
</div>
|
||||
<template v-else-if="allEventsGrouped.size" v-for="([key, value], index) in allEventsGrouped" :key="index" style="margin-top: 8px;">
|
||||
<div class="card-header d-grid p-0">
|
||||
<button class="btn btn-link link-secondary text-decoration-none" @click="setCalendarMaximized">{{ key.format({dateStyle: "full"}, $p.user_locale.value)}}</button>
|
||||
<div class=" card-header d-grid p-0">
|
||||
<button class="btn fhc-tertiary text-decoration-none" @click="setCalendarMaximized">{{ key.format({dateStyle: "full"}, $p.user_locale.value)}}</button>
|
||||
</div>
|
||||
<div role="button" @click="showLvUebersicht(evt)" v-for="evt in value" :key="evt.id" class="list-group-item small" :style="getEventStyle(evt)">
|
||||
<template v-if="evt.type=='moodle'">
|
||||
|
||||
@@ -175,8 +175,8 @@ export default {
|
||||
<i class="fa fa-edit me-1"></i>
|
||||
</a>
|
||||
<!--DELETE BOOKMARK-->
|
||||
<a href="#" @click.prevent="removeLink(link.bookmark_id)" v-show="configMode || editModeIsActive">
|
||||
<i class="fa fa-regular fa-trash-can" style="color: #e01b24;"></i>
|
||||
<a id="deleteBookmark" href="#" @click.prevent="removeLink(link.bookmark_id)" v-show="configMode || editModeIsActive">
|
||||
<i class="fa fa-regular fa-trash-can"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -33,14 +33,14 @@ export default {
|
||||
template: /*html*/`
|
||||
<form ref="searchform" class="d-flex me-3" :class="searchoptions.cssclass" action="javascript:void(0);"
|
||||
@focusin="this.searchfocusin" @focusout="this.searchfocusout">
|
||||
<div ref="searchbox" class="h-100 input-group me-2 bg-white">
|
||||
<span style="background-color:inherit" class="input-group-text">
|
||||
<div ref="searchbox" class="h-100 input-group me-2">
|
||||
<span class="input-group-text">
|
||||
<i class="fa-solid fa-magnifying-glass"></i>
|
||||
</span>
|
||||
<input @keyup="this.search" @focus="this.showsearchresult"
|
||||
v-model="this.searchsettings.searchstr" class="form-control"
|
||||
type="search" :placeholder="'Search: '+ search_types_string" aria-label="Search">
|
||||
<button data-bs-toggle="collapse" data-bs-target="#searchSettings" aria-expanded="false" aria-controls="searchSettings" ref="settingsbutton" class="btn btn-outline-secondary" type="button" id="search-filter"><i class="fas fa-cog"></i></button>
|
||||
<span data-bs-toggle="collapse" data-bs-target="#searchSettings" aria-expanded="false" aria-controls="searchSettings" ref="settingsbutton" class="input-group-text" type="button"><i class="fas fa-cog"></i></span>
|
||||
</div>
|
||||
|
||||
<div v-show="this.showresult"
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
let theme = localStorage.getItem("theme");
|
||||
if (theme == 'dark') {
|
||||
document.body.setAttribute("data-bs-theme", theme);
|
||||
document.documentElement.classList.add('dark');
|
||||
}
|
||||
Reference in New Issue
Block a user