Projektový přehled

by Petr Haluza

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<div class="cont">

  <div id="gantt-controll"><input id="test" min="4" max="10" value='10' step="1" onchange="showVal(this.value)" type="range"/></div>

  <div id="gantt">

	<div id="gantt-left">

        <div class="gantt-row gantt-head">
           <div></div>
           <div>Název ukolu</div>
           <div>Začátek</div>
           <div>Konec</div>
           <div>Dní</div>
           <div>Status</div>
           <div>%</div>
           <div>Přiřazeno</div>
        </div>

        <div class="gantt-row">
<div>🏁</div><div><span>Projekt:</span> <a href="#">Nový web HAL3000 který nebude mít takhle dlouhý název</a></div><div>26.10.</div><div>8.11.</div><div>9</div><div class="inProgress">Probíhá</div><div>25<i>%</i></div><div>?</div>
        </div>

        <div class="gantt-row g-phase">
<div>f1</div><div><span>Fáze 1:</span> <a href="#">Grafický návrh</a></div><div>26.10.</div><div>2.11.</div><div>5</div><div class="inProgress">Probíhá</div><div>50<i>%</i></div><div>RAM,HAP</div>
        </div>

        <div class="gantt-row">
<div>1.1</div><div><a href="#">Grafický návrh frontend</a></div><div>26.10.</div><div>30.10.</div><div>3</div><div class="completed">Hotovo</div><div>100<i>%</i></div><div>HAP</div>
        </div>

        <div class="gantt-row">
<div>1.2</div><div><a href="#">Grafický návrh backend</a></div><div class="g-alert">30.10.</div><div class="g-alert">2.11.</div><div>3</div><div class="notStarted">Nezačalo</div><div>0<i>%</i></div><div>HAP</div>
        </div>

        <div class="gantt-row...

CSS

:root {
  --gantt-row-height: 24px;
  --gantt-row-padding: 4px;
  --gantt-cell-border: 1px solid #cde}

* { font: normal 13px Arial, sans-serif; box-sizing: border-box}
.cont { width: 98%; border: 1px solid red; padding: 5px; margin:4em auto; max-width:1900px;}

#gantt {display:flex}
#gantt .gantt-row {display:flex}

#gantt-left .gantt-head,
#gantt-right .days {background-color: #003F821F; color: #336B6B;}

#gantt-left {padding-top:var(--gantt-row-height);max-width:75%;}
#gantt-left .gantt-row > div {display:inline-block; height: var(--gantt-row-height); padding: var(--gantt-row-padding); margin-left:-1px; border:var(--gantt-cell-border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;text-align:right}
#gantt-left .gantt-row > div:nth-child(1) {width:30px;color:#69b}
#gantt-left .gantt-row > div:nth-child(2) {width:calc(100% - 254px); text-align:left}
#gantt-left .gantt-row > div:nth-child(3),
#gantt-left .gantt-row > div:nth-child(4) {width:55px}
#gantt-left .gantt-row > div:nth-child(5) {width:30px}
#gantt-left .gantt-row > div:nth-child(6) {width:75px}
#gantt-left .gantt-row > div:nth-child(7) {width:35px;text-overflow: clip;}
#gantt-left .gantt-row > div:nth-child(8) {width:85px}
#gantt-left .gantt-row > div span {font-size:.85em; color:#369}
#gantt-left .gantt-row > div > a {color:#036}
#gantt-left .gantt-row > div > i {font-size: .75em}


#gantt-right {overflow-x:scroll;flex-grow:1;min-width:25%;}
#g-timeline-wrap {width:100%}
.g-timeline-body { border-collapse: collapse; width: 100%;table-layout: fixed; /* ! */ position:relative}
.g-timeline-body tr { position:relative}
.g-timeline-body td { height:var(--gantt-row-height); border:var(--gantt-cell-border);}
 
/* aktualni den(4) a weekendy (2 a 7) */
.g-timeline-body tr:not(.months) td:nth-child(6) {background-image:linear-gradient(90deg, rgba(240,0,0,0) 45%,rgba(240,0,0,.5) 46%, rgba(240,0,0,.5) 54%, rgba(240,0,0,0) 55%)}
.g-timeline-body tr:not(.months) td:nth-child(2),
.g-timeline-body...

JavaScript

function setZoom(zoom,el) {
      
      transformOrigin = [0,0];
	    el = el || instance.getContainer();
	    var p = ["webkit", "moz", "ms", "o"],
            s = "scaleX(" + zoom + ")",
            oString = (transformOrigin[0] * 100) + "% " + (transformOrigin[1] * 100) + "%";

	    for (var i = 0; i < p.length; i++) {
	        el.style[p[i] + "Transform"] = s;
	        el.style[p[i] + "TransformOrigin"] = oString;
	    }

	    el.style["transform"] = s;
	    el.style["transformOrigin"] = oString;
      
}

//setZoom(.5,document.getElementsByClassName('container')[0]); //nastaveno při spusteni

function showVal(a){
   var zoomScale = Number(a)/10;
   setZoom(zoomScale,document.getElementsByClassName('g-timeline-body')[0])
}