TImeline test

by Petr Haluza

HTML

<div class="sidebar left" id="m0">
<div>
<a data-menu="m0" class="toggle-modal"><i class="uicon close" title="zavřít"></i></a>

<center>Jarda Kobliha</center>
<table class="uinfo">
<tr><td>Oddělení:</td><td>Marketing</td></tr>
<tr><td>Pozice:</td><td>Specialista na kde co</td></tr>
<tr>
<td>Vedoucí:</td>
<td>Petr Štefánek
  <nav>
      <a href="mailto:[email protected]"><i class="uicon mail" title="[email protected]"></i></a>
      <a href="skype:stefanekpetr"><i class="uicon skype" title="jardakobliha"></i></a>
      <a href="im:[email protected]"><i class="uicon teams" title="[email protected]"></i></a>
  </nav>
</td>
</tr>
<tr><td>Pracoviště:</td><td>Pobočka Praha</td></tr>
<tr><td>Zaměstnanec od:</td><td>1.1.2000</td></tr>
<tr><td>Velikost bot:</td><td>44</td></tr>
</table>
</div>
</div>


<div class="sidebar" id="m1">
<div>
<a data-menu="m1" class="toggle-modal"><i class="uicon close" title="zavřít"></i></a>

<!-- /den -->
<div class="tmln-wrap">
<h3><time>02.11.2020</time> Úterý</h3>
<div class="tmln-times">  <i>8</i><i>9</i><i>10</i><i>11</i><i>12</i><i>13</i><i>14</i><i>15</i><i>16</i><i>17</i><i>18</i><i>19</i>  </div>
<div class="tmln-spaces">  <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> </div>
<div class="tmln-events">
	<div class="tmln-event meeting" style="left:36%; width:25%" data-tooltip="Porada 12:00 až 14:30">Porada</div>
</div><!-- /tmln-events -->

</div><!-- /tmln-wrap -->
<!-- /den -->
<!-- /den -->
<div class="tmln-wrap">
<h3><time>03.11.2020</time> Středa</h3>
<div class="tmln-times">  <i>8</i><i>9</i><i>10</i><i>11</i><i>12</i><i>13</i><i>14</i><i>15</i><i>16</i><i>17</i><i>18</i><i>19</i>  </div>
<div class="tmln-spaces">  <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> </div>
</div><!-- /tmln-wrap -->
<!-- /den -->
<!-- /den -->
<div class="tmln-wrap">
<h3><time>04.11.2020</time> Čtvrtek</h3>
<div class="tmln-times"> ...

CSS

body {padding:1em; font-family:arial; font-size:13px; background-color:#2c2c2c; background-image: url(https://megabase.1md.cz/css/img/logo100m.png); background-position: center center; background-repeat:no-repeat; height: 100%; }
body * {box-sizing:border-box}

/**/
.uicon.fcb { background-image:url(https://www.img4.cz/source/icons-small/icon-fcb.png)}
.uicon.skype { background-image:url(https://www.img4.cz/source/icons-small/icon-skype.png)}
.uicon.teams { background-image:url(https://www.img4.cz/source/icons-small/icon-teams.png)}
.uicon.phone { background-image:url(https://www.img4.cz/source/icons-small/icon-phone.png)}
.uicon.mail { background-image:url(https://www.img4.cz/source/icons-small/icon-mail.png)}
.uicon.calendar { background-image:url(https://www.img4.cz/source/icons-small/icon-calendar.png)}
.uicon.department { background-image:url(https://www.img4.cz/source/icons-small/icon-department.png)}
.uicon.close { background-image:url(https://www.img4.cz/source/icons-small/icon-close.png)}

.uicon { display:inline-block;height:1em; width:1.3em; vertical-align: text-bottom; background-repeat:no-repeat; background-size:contain; background-position: center center}

.sidebar { opacity: .5;background: white;display: block;right: 0;top: 0;min-width: 250px; max-width:450px; width:95%;bottom: 0;box-shadow: 0 15px 25px 1px rgba(0,0,0,.1);transform: translate3d(105%,0,0);transition: transform .4s ease;will-change: transform,opacity;position: fixed;z-index: 100;overflow-y: scroll;border-radius: 5px 0 0 0;}
.sidebar.left {right:none; left:0; transform: translate3d(-105%,0,0)}
.sidebar.open {    opacity: 1 !important;    pointer-events: all !important;    transition-delay: 0s !important;    transform: translate3d(0,0,0) !important;}
.sidebar > div {padding:2em 1em}
.sidebar .toggle-modal {position: absolute;left: 0;top: 0; cursor:pointer}
.sidebar .toggle-modal i { width: 2em; height: 2em; margin: .25em;}

.nodisplay,
.from760 { display:none}
@media all and...

JavaScript

$(function(){
    jQuery("#gallerySwitch").change(function(){
        $(".presence-list").toggleClass('list');
    });
});

$('.user-msg').click(function() {
    var reducedHeight = $(this).height();
    $(this).css('height', 'auto');
    var fullHeight = $(this).height();
    $(this).height(reducedHeight);
    $(this).addClass('open');
    $(this).animate({height: fullHeight}, 350);
});

 $(".toggle-modal").on("click", function(){
        var dataId = $(this).attr("data-menu");
        $("#" + dataId).toggleClass("open");
});