WordPress.org
Get WordPress

Plugin Directory

Changeset 3306149


Ignore:
Timestamp:
06/04/2025 06:07:54 AM (10 months ago)
Author:
curato
Message:

Facelift Belegungsplan

Location:
bookyt/trunk
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • bookyt/trunk/css/belegungsplan.css

    r3275782 r3306149  
     1/* ??????????????????????????????????????????????????????????????????????????????
     2   1) Farb-Variablen (CSS-Custom-Properties) in .bookyt_kalender
     3   ??????????????????????????????????????????????????????????????????????????????? */
    14.bookyt_kalender {
    2     color: #333;
    3 }
    4 
     5    /* Grundfarben */
     6    --bp-color-text:                    #333333;
     7    --bp-color-bg:                      #ffffff;
     8    --bp-color-bg-alt:                  #f5f5f5;
     9    --bp-color-bg-alt-2:                #e8e8e8;
     10    --bp-color-border:                  #cccccc;
     11    /* Termin-Farbe */
     12    --bp-color-appointment-bg:          #005a9e;
     13    --bp-color-appointment-text:        #ffffff;
     14    /* Hover */
     15    --bp-color-hover:                   #e0e0e0;
     16    /* Überschriften */
     17    --bp-color-category-heading-bg:     #dddddd;
     18    /* Resource-Spalte (linke Spalte) */
     19    --bp-color-resource-bg:             #fafafa;
     20}
     21
     22/* ??????????????????????????????????????????????????????????????????????????????
     23   2) Alle bestehenden Styles, nun mit CSS-Variablen belegt
     24   ??????????????????????????????????????????????????????????????????????????????? */
     25
     26/* Textfarbe und allgemeiner Hintergrund */
     27.bookyt_kalender {
     28    color: var(--bp-color-text);
     29    background: var(--bp-color-bg);
     30}
     31
     32/* Tabs-Navigation */
    533.bookyt_kalender .ui-tabs .ui-tabs-nav {
    634    padding: 0;
    735    margin: 0;
    8     background: #fff;
     36    background: var(--bp-color-bg);
    937    border: none;
    10     border-bottom: 1px solid #eee;
    11 }
    12 
     38    border-bottom: 1px solid var(--bp-color-border);
     39}
     40
     41/* Einzelne Tab-Links */
    1342.bookyt_kalender .ui-tabs .ui-tabs-nav li a {
    1443    display: block;
    … …  
    1645    font-size: 1em;
    1746    text-decoration: none;
    18     color: #333;
    19     background: #f0f0f0;
    20     border-right: 1px solid #ccc;
     47    color: var(--bp-color-text);
     48    background: var(--bp-color-bg-alt);
     49    border-right: 1px solid var(--bp-color-border);
    2150    outline: none;
    2251}
    2352
     53/* Aktiver Tab */
    2454.bookyt_kalender .ui-tabs .ui-tabs-nav li.ui-tabs-active a {
    25     background: #fff;
     55    background: var(--bp-color-bg);
    2656    border: none;
    27     color: #000;
     57    color: var(--bp-color-text);
    2858    outline: none;
    2959}
    3060
     61/* Tabs-Panel (Inhalt) */
    3162.bookyt_kalender .ui-tabs .ui-tabs-panel {
    3263    border: none;
    33     padding: 0;
    34     padding-top:10px;
    35     padding-bottom: 10px;
    36     background: #fff;
    37 }
    38 
     64    padding: 10px 0; /* oben und unten jeweils 10px */
     65    background: var(--bp-color-bg);
     66}
     67
     68/* Steuerungsknöpfe, Select und Date?Picker */
    3969.bookyt_kalender .controls {
    4070    display: flex;
    … …  
    5282    height: 40px;
    5383    line-height: 24px;
    54     border: 1px solid #ccc;
     84    border: 1px solid var(--bp-color-border);
    5585    border-radius: 3px;
    56     background: #f7f7f7;
    57     color: #333;
     86    background: var(--bp-color-bg-alt);
     87    color: var(--bp-color-text);
    5888    box-sizing: border-box;
    5989}
    … …  
    6292.bookyt_kalender .controls select:hover,
    6393.bookyt_kalender .controls input[type="date"]:hover {
    64     background: #e7e7e7;
    65 }
    66 
    67 .bookyt_kalender #calendar {
     94    background: var(--bp-color-hover);
     95}
     96
     97/* Container für den Kalender (horizontal scrollbar) */
     98.bookyt_kalender #calendar,
     99.bookyt_kalender .calendar-container {
    68100    overflow-x: auto;
    69101    padding: 10px;
    70102}
    71103
    72 /* Wichtige Änderungen hier: table-layout bleibt auto,
    73    damit die übrigen Spalten (Events) sich ausdehnen können. */
     104/* ????????????????????????????????????????????????????????????????????????????
     105   Tabellen-Stil
     106   ???????????????????????????????????????????????????????????????????????????? */
    74107.bookyt_kalender table {
    75108    border-collapse: collapse;
    76109    margin-top: 10px;
    77     /* table-layout: auto => die übrigen Spalten weiten sich,
    78        Ressourcenspalte bleibt dank inline-block auf max-width: 300px. */
    79110    table-layout: auto;
    80111    width: 100%;
    … …  
    83114.bookyt_kalender th,
    84115.bookyt_kalender td {
    85     border: 1px solid #eee;
     116    border: 1px solid var(--bp-color-border);
    86117    padding: 5px;
    87118    word-wrap: break-word;
    … …  
    91122    text-overflow: ellipsis;
    92123    text-align: left;
    93 }
    94 
    95 /* Ressourcenspalte: fester Hintergrund, fett,
    96    max. 300px, abgeschnittener Text (inline-block + ellipsis) */
     124    background: var(--bp-color-bg);
     125    color: var(--bp-color-text);
     126}
     127
     128/* Kopfzeilen (z. B. die kleinen Tageszahlen) */
     129.bookyt_kalender th.small-header {
     130    background: var(--bp-color-bg-alt-2);
     131    color: var(--bp-color-text);
     132    font-weight: normal;
     133    text-align: center;
     134}
     135
     136/* Kategorie-Überschrift (ganze Zeile) */
     137.bookyt_kalender .category-heading {
     138    background: var(--bp-color-category-heading-bg);
     139    font-weight: normal;
     140    text-align: left;
     141    color: var(--bp-color-text);
     142}
     143
     144/* Ressourcenspalte (erste Spalte in jeder Zeile) */
    97145.bookyt_kalender .resource {
    98     background: #f9f9f9;
     146    background: var(--bp-color-resource-bg);
    99147    font-weight: bold;
    100148    min-width: 80px;
    … …  
    105153}
    106154
     155/* Abwechselnde Zeilenfarbe (z. B. für extra Lesbarkeit) */
     156.bookyt_kalender tr:nth-child(even) td:not(.resource):not(.appointment) {
     157    background: var(--bp-color-bg-alt);
     158}
     159
     160/* Terminzelle (appointment) */
    107161.bookyt_kalender .appointment {
    108     background: #ddd;
    109     color: #000;
     162    background: var(--bp-color-appointment-bg);
     163    color: var(--bp-color-appointment-text);
    110164    font-size: 0.8em;
    111165    padding: 2px;
    112166    margin: 1px;
    113167    text-align: left;
    114 }
    115 
    116 .bookyt_kalender .category-heading {
    117     background: #fff;
    118     font-weight: normal;
    119     text-align: left;
    120 }
    121 
     168    border-radius: 2px;       /* leicht abgerundet wirkt moderner */
     169}
     170
     171/* Hover-Effekt auf leeren Terminzellen (kein .appointment) */
     172.bookyt_kalender td[data-resource]:not(.appointment):hover {
     173    background: var(--bp-color-hover);
     174}
     175
     176/* Responsive Schriftgrößen und Abstände */
    122177@media (max-width: 768px) {
    123178    .bookyt_kalender th,
    … …  
    133188        padding: 6px 10px;
    134189    }
    135     /* Bei schmalen Bildschirmen kann die Ressourcenspalte etwas kleiner werden */
    136190    .bookyt_kalender .resource {
    137191        max-width: 150px;
    … …  
    139193}
    140194
     195/* Feinjustierung der aktiven/hover-Klassen bei Tabs */
    141196.bookyt_kalender .ui-tabs .ui-tabs-nav li.ui-tabs-active,
    142 .bookyt_kalender .ui-tabs .ui-tabs-nav li.ui-tabs-hover{
     197.bookyt_kalender .ui-tabs .ui-tabs-nav li.ui-tabs-hover {
    143198    margin-bottom: unset;
    144199    padding-bottom: unset;
    145200}
    146 
    147 
    148 .bookyt_kalender .calendar-container table td[data-resource]:not(.appointment):hover{
    149     background: #eee;
    150 }

  • bookyt/trunk/index.php

    r3275782 r3306149  
    44Plugin URI: https://bookyt.de/services/wordpress-plugin
    55Description: Integration Bookyt Vermietsoftware in deine Wordpress Seite
    6 Version: 2.14
     6Version: 2.15
    77Author: Philipp Stäbler (PHCOM GmbH)
    88Author URI: https://phcom.de/

  • bookyt/trunk/js/belegungsplan.js

    r3275782 r3306149  
    22
    33jQuery(document).ready(function($) {
     4
     5    if($("#bookyt_belegungsplan_tabs_container").length==0){
     6        return;
     7    }
    48
    59    // Datenquelle aus dem data-Attribut (enthält jetzt alle Termine, die direkt an Ressourcen gebunden sind)

  • bookyt/trunk/js/functions.js

    r3254011 r3306149  
    2929
    3030                var goTo = url+"/?station_id="+para.station_id+"&fahrzeugsubgruppe_id="+para.gruppe+"&start="+day+"&stop="+para.dauer;
    31 
    3231                bookytNeueBuchung(goTo);
    33 
    34 
    35 
    36 
    37                 //window.location.href=goTo;
    3832            },
    3933
Note: See TracChangeset for help on using the changeset viewer.