xxxxxxxxxx1
<!-- Navbar -->2
<nav class="navbar navbar-expand-lg navbar-dark special-color-dark">3
4
<!-- Navbar brand -->5
<a class="navbar-brand text-uppercase" href="#">Navbar</a>6
7
<!-- Collapse button -->8
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent2"9
aria-controls="navbarSupportedContent2" aria-expanded="false" aria-label="Toggle navigation">10
<span class="navbar-toggler-icon"></span>11
</button>12
13
<!-- Collapsible content -->14
<div class="collapse navbar-collapse" id="navbarSupportedContent2">15
16
<!-- Links -->17
<ul class="navbar-nav mr-auto">18
19
<!-- Features -->20
<li class="nav-item dropdown mega-dropdown active">21
<a class="nav-link dropdown-toggle text-uppercase" id="navbarDropdownMenuLink2" data-toggle="dropdown"22
aria-haspopup="true" aria-expanded="false">Features23
<span class="sr-only">(current)</span>24
</a>25
<div class="dropdown-menu mega-menu v-2 z-depth-1 special-color py-5 px-3" aria-labelledby="navbarDropdownMenuLink2">26
<div class="row">27
<div class="col-md-6 col-xl-3 sub-menu mb-xl-0 mb-4">28
<h6 class="sub-title text-uppercase font-weight-bold white-text">Featured</h6>29
<ul class="list-unstyled">30
<li>31
<a class="menu-item pl-0" href="#!">32
<i class="fas fa-caret-right pl-1 pr-3"></i>Lorem ipsum dolor sit amet33
</a>34
</li>35
<li>36
<a class="menu-item pl-0" href="#!">37
<i class="fas fa-caret-right pl-1 pr-3"></i>Consectetur adipiscing elit38
</a>39
</li>40
<li>41
<a class="menu-item pl-0" href="#!">42
<i class="fas fa-caret-right pl-1 pr-3"></i>Sed do eiusmod tempor incididunt43
</a>44
</li>45
<li>46
<a class="menu-item pl-0" href="#!">47
<i class="fas fa-caret-right pl-1 pr-3"></i>Ut labore et dolore magna48
</a>49
</li>50
<li>51
<a class="menu-item pl-0" href="#!">52
<i class="fas fa-caret-right pl-1 pr-3"></i>Ut enim ad minim veniam53
</a>54
</li>55
</ul>56
</div>57
<div class="col-md-6 col-xl-3 sub-menu mb-xl-0 mb-4">58
<h6 class="sub-title text-uppercase font-weight-bold white-text">Related</h6>59
<ul class="list-unstyled">60
<li>61
<a class="menu-item pl-0" href="#!">62
<i class="fas fa-caret-right pl-1 pr-3"></i>Quis nostrud exercitation63
</a>64
</li>65
<li>66
<a class="menu-item pl-0" href="#!">67
<i class="fas fa-caret-right pl-1 pr-3"></i>Duis aute irure dolor in68
</a>69
</li>70
<li>71
<a class="menu-item pl-0" href="#!">72
<i class="fas fa-caret-right pl-1 pr-3"></i>Laboris nisi ut aliquip ex ea commodo consequat73
</a>74
</li>75
<li>76
<a class="menu-item pl-0" href="#!">77
<i class="fas fa-caret-right pl-1 pr-3"></i>Reprehenderit in voluptate78
</a>79
</li>80
<li>81
<a class="menu-item pl-0" href="#!">82
<i class="fas fa-caret-right pl-1 pr-3"></i>Esse cillum dolore eu fugiat nulla pariatur83
</a>84
</li>85
</ul>86
</div>87
<div class="col-md-6 col-xl-3 sub-menu mb-md-0 mb-xl-0 mb-4">88
<h6 class="sub-title text-uppercase font-weight-bold white-text">Design</h6>89
<ul class="list-unstyled">90
<li>91
<a class="menu-item pl-0" href="#!">92
<i class="fas fa-caret-right pl-1 pr-3"></i>Excepteur sint occaecat93
</a>94
</li>95
<li>96
<a class="menu-item pl-0" href="#!">97
<i class="fas fa-caret-right pl-1 pr-3"></i>Sunt in culpa qui officia98
</a>99
</li>100
<li>101
<a class="menu-item pl-0" href="#!">102
<i class="fas fa-caret-right pl-1 pr-3"></i>Sed ut perspiciatis unde omnis iste natus error103
</a>104
</li>105
<li>106
<a class="menu-item pl-0" href="#!">107
<i class="fas fa-caret-right pl-1 pr-3"></i>Mollit anim id est laborum108
</a>109
</li>110
<li>111
<a class="menu-item pl-0" href="#!">112
<i class="fas fa-caret-right pl-1 pr-3"></i>Accusantium doloremque laudantium113
</a>114
</li>115
</ul>116
</div>117
<div class="col-md-6 col-xl-3 sub-menu mb-0">118
<h6 class="sub-title text-uppercase font-weight-bold white-text">Programming</h6>119
<ul class="list-unstyled">120
<li>121
<a class="menu-item pl-0" href="#!">122
<i class="fas fa-caret-right pl-1 pr-3"></i>Totam rem aperiam eaque123
</a>124
</li>125
<li>126
<a class="menu-item pl-0" href="#!">127
<i class="fas fa-caret-right pl-1 pr-3"></i>Beatae vitae dicta sun128
</a>129
</li>130
<li>131
<a class="menu-item pl-0" href="#!">132
<i class="fas fa-caret-right pl-1 pr-3"></i>Quae ab illo inventore veritatis et quasi133
architecto134
</a>135
</li>136
<li>137
<a class="menu-item pl-0" href="#!">138
<i class="fas fa-caret-right pl-1 pr-3"></i>Nemo enim ipsam voluptatem139
</a>140
</li>141
<li>142
<a class="menu-item pl-0" href="#!">143
<i class="fas fa-caret-right pl-1 pr-3"></i>Neque porro quisquam est144
</a>145
</li>146
</ul>147
</div>148
</div>149
</div>150
</li>151
<!-- Technology -->152
<li class="nav-item dropdown mega-dropdown">153
<a class="nav-link dropdown-toggle text-uppercase" id="navbarDropdownMenuLink3" data-toggle="dropdown"154
aria-haspopup="true" aria-expanded="false">Technology</a>155
<div class="dropdown-menu mega-menu v-2 z-depth-1 special-color py-5 px-3" aria-labelledby="navbarDropdownMenuLink3">156
<div class="row">157
<div class="col-md-12 col-xl-4 sub-menu mb-xl-0 mb-4">158
<h6 class="sub-title text-uppercase font-weight-bold white-text">Featured</h6>159
<!--Featured image-->160
<a href="#!" class="view overlay z-depth-1 p-0 mb-2">161
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/8-col/img%20(37).jpg" class="img-fluid"162
alt="First sample image">163
<div class="mask rgba-white-slight"></div>164
</a>165
<a class="news-title font-weight-bold pl-0" href="#!">Lorem ipsum dolor sit</a>166
<p class="font-small text-uppercase white-text">167
<i class="fas fa-clock-o pr-2" aria-hidden="true"></i>July 17, 2017 / <i class="far fa-comments px-1"168
aria-hidden="true"></i> 20169
</p>170
</div>171
<div class="col-md-6 col-xl-4 sub-menu mb-md-0 mb-4">172
<h6 class="sub-title text-uppercase font-weight-bold white-text">Related</h6>173
<ul class="list-unstyled">174
<li>175
<a class="menu-item pl-0" href="#!">176
<i class="fas fa-caret-right pl-1 pr-3"></i>Quis nostrud exercitation177
</a>178
</li>179
<li>180
<a class="menu-item pl-0" href="#!">181
<i class="fas fa-caret-right pl-1 pr-3"></i>Duis aute irure dolor in182
</a>183
</li>184
<li>185
<a class="menu-item pl-0" href="#!">186
<i class="fas fa-caret-right pl-1 pr-3"></i>Laboris nisi ut aliquip ex ea commodo consequat187
</a>188
</li>189
<li>190
<a class="menu-item pl-0" href="#!">191
<i class="fas fa-caret-right pl-1 pr-3"></i>Reprehenderit in voluptate192
</a>193
</li>194
<li>195
<a class="menu-item pl-0" href="#!">196
<i class="fas fa-caret-right pl-1 pr-3"></i>Esse cillum dolore eu fugiat nulla pariatur197
</a>198
</li>199
</ul>200
</div>201
<div class="col-md-6 col-xl-4 sub-menu mb-0">202
<h6 class="sub-title text-uppercase font-weight-bold white-text">Design</h6>203
<ul class="list-unstyled">204
<li>205
<a class="menu-item pl-0" href="#!">206
<i class="fas fa-caret-right pl-1 pr-3"></i>Excepteur sint occaecat207
</a>208
</li>209
<li>210
<a class="menu-item pl-0" href="#!">211
<i class="fas fa-caret-right pl-1 pr-3"></i>Sunt in culpa qui officia212
</a>213
</li>214
<li>215
<a class="menu-item pl-0" href="#!">216
<i class="fas fa-caret-right pl-1 pr-3"></i>Sed ut perspiciatis unde omnis iste natus error217
</a>218
</li>219
<li>220
<a class="menu-item pl-0" href="#!">221
<i class="fas fa-caret-right pl-1 pr-3"></i>Mollit anim id est laborum222
</a>223
</li>224
<li>225
<a class="menu-item pl-0" href="#!">226
<i class="fas fa-caret-right pl-1 pr-3"></i>Accusantium doloremque laudantium227
</a>228
</li>229
</ul>230
</div>231
</div>232
</div>233
</li>234
<!-- Lifestyle -->235
<li class="nav-item dropdown mega-dropdown">236
<a class="nav-link dropdown-toggle text-uppercase" id="navbarDropdownMenuLink4" data-toggle="dropdown"237
aria-haspopup="true" aria-expanded="false">Lifestyle</a>238
<div class="dropdown-menu mega-menu v-2 z-depth-1 special-color py-5 px-3" aria-labelledby="navbarDropdownMenuLink4">239
<div class="row">240
<div class="col-md-6 col-xl-3 sub-menu mb-4">241
<h6 class="sub-title text-uppercase font-weight-bold white-text">Featured</h6>242
<ul class="list-unstyled">243
<li>244
<a class="menu-item pl-0" href="#!">245
<i class="fas fa-caret-right pl-1 pr-3"></i>Lorem ipsum dolor sit amet246
</a>247
</li>248
<li>249
<a class="menu-item pl-0" href="#!">250
<i class="fas fa-caret-right pl-1 pr-3"></i>Consectetur adipiscing elit251
</a>252
</li>253
<li>254
<a class="menu-item pl-0" href="#!">255
<i class="fas fa-caret-right pl-1 pr-3"></i>Sed do eiusmod tempor incididunt256
</a>257
</li>258
<li>259
<a class="menu-item pl-0" href="#!">260
<i class="fas fa-caret-right pl-1 pr-3"></i>Ut labore et dolore magna261
</a>262
</li>263
<li>264
<a class="menu-item pl-0" href="#!">265
<i class="fas fa-caret-right pl-1 pr-3"></i>Ut enim ad minim veniam266
</a>267
</li>268
</ul>269
</div>270
<div class="col-md-6 col-xl-3 sub-menu mb-4 mb-xl-0">271
<h6 class="sub-title text-uppercase font-weight-bold white-text">Related</h6>272
<!--Featured image-->273
<a href="#!" class="view overlay z-depth-1 p-0 mb-2">274
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/6-col/img%20(43).jpg" class="img-fluid"275
alt="First sample image">276
<div class="mask rgba-white-slight"></div>277
</a>278
<a class="news-title font-weight-bold pl-0" href="#!">Lorem ipsum dolor sit</a>279
<p class="font-small text-uppercase white-text">280
<i class="fas fa-clock-o pr-2" aria-hidden="true"></i>July 17, 2017 / <i class="far fa-comments px-1"281
aria-hidden="true"></i> 20282
</p>283
</div>284
<div class="col-md-6 col-xl-3 sub-menu mb-md-0 mb-xl-0 mb-4">285
<h6 class="sub-title text-uppercase font-weight-bold white-text">Design</h6>286
<!--Featured image-->287
<a href="#!" class="view overlay z-depth-1 p-0 mb-2">288
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/6-col/img%20(44).jpg" class="img-fluid"289
alt="First sample image">290
<div class="mask rgba-white-slight"></div>291
</a>292
<a class="news-title font-weight-bold pl-0" href="#!">Ut labore et dolore magna</a>293
<p class="font-small text-uppercase white-text">294
<i class="fas fa-clock-o pr-2" aria-hidden="true"></i>July 16, 2017 / <i class="far fa-comments px-1"295
aria-hidden="true"></i> 25296
</p>297
</div>298
<div class="col-md-6 col-xl-3 sub-menu mb-0">299
<h6 class="sub-title text-uppercase font-weight-bold white-text">Programming</h6>300
<ul class="list-unstyled">301
<li>302
<a class="menu-item pl-0" href="#!">303
<i class="fas fa-caret-right pl-1 pr-3"></i>Totam rem aperiam eaque304
</a>305
</li>306
<li>307
<a class="menu-item pl-0" href="#!">308
<i class="fas fa-caret-right pl-1 pr-3"></i>Beatae vitae dicta sun309
</a>310
</li>311
<li>312
<a class="menu-item pl-0" href="#!">313
<i class="fas fa-caret-right pl-1 pr-3"></i>Quae ab illo inventore veritatis et quasi314
architecto315
</a>316
</li>317
<li>318
<a class="menu-item pl-0" href="#!">319
<i class="fas fa-caret-right pl-1 pr-3"></i>Nemo enim ipsam voluptatem320
</a>321
</li>322
<li>323
<a class="menu-item pl-0" href="#!">324
<i class="fas fa-caret-right pl-1 pr-3"></i>Neque porro quisquam est325
</a>326
</li>327
</ul>328
</div>329
</div>330
</div>331
</li>332
333
</ul>334
<!-- Links -->335
336
<!-- Search form -->337
<form class="form-inline">338
<div class="md-form my-0">339
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">340
</div>341
</form>342
343
</div>344
<!-- Collapsible content -->345
346
</nav>347
<!-- Navbar -->348
349
<!-- table - stafle --> 350
<div class="dma-main-view">351
<table class="dma-main-view-table">352
<tr>353
<!-- buttons on the left -->354
<td class="dma-main-view-1st-col">355
<button type="button" class="btn-vertical btn-outline-primary waves-effect dma-group-rooms" related-group="*">Vše</button>356
<button type="button" class="btn-vertical btn-outline-success waves-effect dma-group-rooms" related-group="sid2">Velké</button>357
<button type="button" class="btn-vertical btn-outline-warning waves-effect dma-group-rooms" related-group="sid1">Malé</button>358
<button type="button" class="btn-vertical btn-outline-danger waves-effect dma-group-rooms" related-group="sid3">Posledn</button>359
</td>360
<td class="dma-main-view-2nd-col deep-purple">361
<button type="button" class="btn dma-small-grey-button waves-effect" title="$text$" onclick="javascript: dma_show_hide_panels(this);">>></button>362
363
<div class="Index-StafleContainer">364
<div class="Index-AboveGridContainer">365
<div class="Index-ContainerLeftUpper"><div>366
XXXX367
</div></div>368
<div class="Index-DatesAboveGridContainer">369
</div>370
</div> 371
372
<div class="Index-MainGridContainer">373
<div class="Index-Stay" style="--day-offset: 2">ZZZ</div>374
</div>375
</div>376
</td>377
<td class="dma-main-view-3rd-col" id="DmaRightPanel">378
<nav class="navbar navbar-expand-md navbar-dark dma-grey-color mb-0 waves-effect">379
<!-- Just an image -->380
<a class="navbar-brand" href="#!">381
<img src="../img/add.png" height="24" data-toggle="collapse" data-target="#collapseArrivals" alt="Dnešní p?íjezdy">382
</a>383
<!-- Breadcrumb-->384
<div class="mr-auto">385
<ol class="breadcrumb d-inline-flex pl-0 pt-0">386
<li class="breadcrumb-item"><a class="black-text font-weight-normal" href="#!" data-toggle="collapse" data-target="#collapseArrivals"387
aria-expanded="false" aria-controls="collapseExample">Dnešní p?íjezdy</a></li>388
</ol>389
</div>390
391
<!-- Collapsible element -->392
<div class="collapse show" id="collapseArrivals">393
<div class="mt-3">394
No arrivals395
</div>396
</div>397
</td>398
</tr>399
</table> 400
</div>401
402
xxxxxxxxxx1
/* Define some global variables */2
:root {3
--stay-width: 79; /* Sirka pobytu */4
--num-rooms: 1; /* Pocet pokoju v gridu */5
--stay-height: 32; /* Vyska radku */6
--dates-height: 34; /* Vyska radku s datumy */7
--room-width: 100; /* Sirka leveho sloupce s pokoji */8
--days-back: 400; /* Pocet dni dozadu ve staflich */9
--days-ahead: 1000; /* Pocet dni dopredu ve staflich */10
}11
12
.dma-main-view { /* Main view in the main Stafle screen */13
width: 100%;14
position: absolute; 15
left: 0px;16
right: 0px; 17
bottom: 0px;18
top: 3.5rem;19
}20
21
.dma-main-view-table { /* Table in the main view that consumes the whole area */22
border: 0px;23
width: 100%;24
height: 100%;25
table-layout: fixed;26
}27
28
.dma-main-view-table td {29
vertical-align: top;30
}31
32
.dma-main-view-1st-col { /* 1st column in the main view */33
width: 40px !important;34
overflow: hidden;35
36
}37
38
.dma-main-view-2nd-col {39
position: relative;40
}41
42
.dma-main-view-3rd-col-hidden { /* Collapsed last column */43
display: none;44
}45
46
47
.dma-main-view-3rd-col { /* Normal last column */48
width: 400px;49
}50
51
.dma-modal-large { /* Modal form large in the index */52
max-width: 990px !important;53
}54
55
@media (min-width: 992px) {56
.modal .modal-full-height.dma-modal-large {57
width: 90%;58
max-width: 90%; } }59
@media (min-width: 992px) and (min-width: 992px) {60
.modal .modal-full-height.dma-modal-large {61
width: 800px;62
max-width: 800px; } }63
@media (min-width: 992px) and (min-width: 1200px) {64
.modal .modal-full-height.dma-modal-large {65
width: 1000px;66
max-width: 1000px; } }67
68
@media (min-width: 320px) {69
.dma-main-view-3rd-col { width: 50%; }70
.dma-modal-largeX { width: 100% !important; }71
}72
73
@media (min-width: 576px) {74
.dma-main-view-3rd-col { width: 40%; }75
.dma-modal-largeX { width: 100% !important; }76
}77
78
@media (min-width: 768px) {79
.dma-main-view-3rd-col { width: 35%; }80
.dma-modal-largeX { width: 100% !important; }81
}82
83
@media (min-width: 992px) {84
.dma-main-view-3rd-col { width: 30%; }85
.dma-modal-largeX { width: 990px !important; }86
}87
88
@media (min-width: 1200px) {89
.dma-main-view-3rd-col { width: 400px; }90
.dma-modal-largeX { width: 990px !important; }91
}92
93
94
95
/* Used by the panels on the right of the main view */ 96
.dma-grey-color { 97
background-color: #E0E0E0 !important; 98
padding: 0.1rem 0.5rem !important;99
} 100
101
/* Tables in the right panel have shadowed first row */ 102
.dma-table-right-panel { 103
}104
105
.dma-table-right-panel thead tr th {106
background-color: #F0F0F0 !important;107
font-weight: 400;108
} 109
110
/* Vertical button - used on the left of the main window */111
.btn-vertical {112
display: inline-block;113
left: -20px;114
width: 80px;115
font-weight: 400;116
text-align: center;117
white-space: nowrap;118
vertical-align: middle;119
-webkit-user-select: none;120
-moz-user-select: none;121
-ms-user-select: none;122
user-select: none;123
border: 1px solid transparent;124
transform:rotate(-90deg);125
-webkit-transform:rotate(-90deg);126
-ms-transform:rotate(-90deg); /* IE 9 */127
-moz-transform:rotate(-90deg); /* Firefox */128
-o-transform:rotate(-90deg); /* Opera */ 129
padding: 0.1rem 0.125rem !important;130
margin: 1.7rem 0.0rem !important;131
font-size: 1rem;132
border-radius: 0.25rem;133
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;134
}135
136
@media screen and (prefers-reduced-motion: reduce) {137
.btn-vertical {138
transition: none;139
}140
}141
142
.btn-vertical:hover, .btn-vertical:focus {143
text-decoration: none;144
}145
146
.btn-vertical:focus, .btn-vertical.focus {147
outline: 0;148
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);149
}150
151
.btn-vertical.disabled, .btn-vertical:disabled {152
opacity: 0.65;153
}154
155
.btn-vertical:not(:disabled):not(.disabled) {156
cursor: pointer;157
}158
159
a.btn-vertical.disabled,160
fieldset:disabled a.btn-vertical {161
pointer-events: none;162
}163
164
/* Small button to minimize the right panel */165
.dma-small-grey-button {166
background-color: #E0E0E0 !important;167
color: #000000 !important;168
margin: 0px;169
float: right;170
padding: 0.6rem 0.6rem;171
font-size: 1rem !important;172
z-index: 1;173
}174
.dma-small-grey-button:hover {175
background-color: #879ca7; }176
.dma-small-grey-button:focus, .dma-small-grey-button.focus {177
-webkit-box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);178
box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15); }179
.dma-small-grey-button:focus, .dma-small-grey-button:active, .dma-small-grey-button.active {180
background-color: #4a5b64; }181
.dma-small-grey-button.dropdown-toggle {182
background-color: #78909c !important; }183
.dma-small-grey-button.dropdown-toggle:hover, .dma-small-grey-button.dropdown-toggle:focus {184
background-color: #879ca7 !important; }185
.dma-small-grey-button:not([disabled]):not(.disabled):active, .dma-small-grey-button:not([disabled]):not(.disabled).active,186
.show > .dma-small-grey-button.dropdown-toggle {187
-webkit-box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);188
box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);189
background-color: #4a5b64 !important; }190
.dma-small-grey-button:not([disabled]):not(.disabled):active:focus, .dma-small-grey-button:not([disabled]):not(.disabled).active:focus,191
.show > .dma-small-grey-button.dropdown-toggle:focus {192
-webkit-box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);193
box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15); 194
}195
196
197
/* Index - stafle container */198
.Index-StafleContainer {199
width: 98%;200
max-height: 98%;201
margin: 10px;202
border: 0px;203
padding: 0px;204
overflow: hidden;205
height: calc((var(--num-rooms) * var(--stay-height) + var(--dates-height) + 17) * 1px);206
background-color: white;207
position: absolute;208
} 209
210
/* Container above the grid */211
.Index-AboveGridContainer {212
width: 100%; 213
height: calc(var(--dates-height) * 1px); 214
position: relative;215
left: 0px;216
top: 0px;217
overflow: hidden;218
background-color: white;219
border: 0px;220
padding: 0px;221
margin: 0px;222
} 223
224
/* Container for the gap in the left upper corner */225
.Index-ContainerLeftUpper {226
width: calc(var(--room-width) * 1px);227
height: calc(var(--dates-height) * 1px);228
positionX: static;229
border: 0px;230
overflow: hidden; 231
background-color: pink;232
text-align: center;233
displayX: inline-block; 234
cursor: default;235
float: left; 236
} 237
238
239
/* Panel with the dates above the grid */240
.Index-DatesAboveGridContainer {241
width: 5000px; 242
height: calc(var(--dates-height)*1px); 243
left: calc(var(--room-width) * 1px);244
top: 0px;245
position: absolute;246
display: inline-block;247
overflow: hidden;248
background-color: green;249
border: 0px;250
padding: 0px;251
margin: 0px;252
} 253
254
/* Hlavni container pro stafle - obsahuje pobyty */255
.Index-MainGridContainer {256
width: auto;257
max-height: 98%;258
margin: 10px;259
positionX: static;260
topX: calc(var(--dates-height) * 1px);261
leftX: calc(var(--room-width) * 1px);262
overflow-y: hidden;263
overflow-x: auto;264
265
Xwidth: 100%; 266
height: calc((var(--num-rooms) * var(--stay-height) + 16) * 1px);267
background-color: blue;268
border: 0px;269
padding: 0px;270
margin: 0px;271
}272
273
/* Sirka scrollbaru pro container */274
.xxxIndex-MainGridContainer::-webkit-scrollbar {275
width: 16px;276
}277
278
/* Invisible control to set the width of the container */279
.Index-ContainerWidthControl {280
top: calc((var(--dates-height) - 1) * 1px);281
width: 1px;282
height: 1px;283
left: calc( (var(--stay-width) * (var(--days-back) + var(--days-ahead))) * 1px);284
position: absolute;285
} 286
287
/* Control for the room on the left */288
.Index-StafleRoom {289
width: calc(var(--room-width) * 1px);290
height: calc(var(--stay-height) * 1px);291
position: relative;292
background-color: white;293
border: 0px;294
overflow: hidden; 295
background-color: yellow;296
text-align: center;297
top: 0px;298
left: 0px;299
display: table; 300
cursor: default; 301
} 302
303
.Index-StafleRoom div {304
display: table-cell;305
vertical-align: middle;306
padding-top: 1px;307
}308
309
.Index-Stay {310
--num-days: 1;311
--day-offset: 0;312
--room-offset: 0;313
width: calc(var(--stay-width) * var(--num-days) * 1px);314
left: calc((var(--stay-width) * var(--day-offset) + var(--room-width)) * 1px);315
height: calc(var(--stay-height)*1px);316
top: calc((var(--room-offset) * var(--stay-height) + var(--dates-height)) * 1px);317
position: absolute;318
overflow: hidden;319
background-color: red;320
border: solid 1px #c0c0c0;321
cursor: pointer; 322
} 323
324
.Index-Date {325
--day-offset: 0;326
width: calc(var(--stay-width) * 1px);327
left: calc((var(--stay-width) * var(--day-offset) + var(--room-width)) * 1px);328
height: calc(var(--dates-height)*1px);329
top: 0px;330
position: absolute;331
background-color: #e0e0e0;332
font-weight: bold;333
font-size: 12px;334
text-align: center;335
border: 1px solid #808080;336
cursor: default; 337
}338
339
/* FILE */340
341
342
/**************** DMA Custom CSS *******************/343
344
345
/* Allow sequence buttons on the grids */346
.fa {347
display: inline-block;348
font: normal normal normal 14px/1 Arial;349
font-size: inherit;350
text-rendering: auto;351
-webkit-font-smoothing: antialiased;352
-moz-osx-font-smoothing: grayscale;353
}354
355
356
.fa-sort:before,.fa-unsorted:before{ content:url(../img/up-down.png); /* URL of the arrows button */ }357
358
.float-right {359
float: right!important;360
}361
362
/* Browse table options */363
table.dataTable thead {364
cursor: pointer;365
}366
367
table.dataTable tbody tr td {368
cursor: pointer;369
}370
371
/* Delete button on the browse grids */372
table.dataTable tbody tr td .dma-delete-button {373
cursor: pointer;374
width: 20px !important; 375
height: 19px !important;376
}377
378
table.dataTable tbody tr td .dma-delete-button::before {379
content: url(../img/delete-small.png) !important;380
}381
382
/* Disabled delete button on the browse grids */383
table.dataTable tbody tr td .dma-delete-button-disabled {384
cursor: not-allowed;385
width: 20px !important; 386
height: 19px !important;387
} 388
389
.dma-delete-button-disabled::before {390
content: url(../img/delete-small-disabled.png) !important;391
} 392
393
394
/* This class is generated automatically as a container for browse grids, make some padding otherwise the table is spread to the sides */395
#dtBrowseData_wrapper { 396
padding: 0rem 1rem;397
}398
399
/* This container will contain the Add and other buttons above the browse grid */400
.pnlBrowseDataButtons {401
margin: 1rem 0rem;402
}403
404
/* Fix the colors of the paging numbers on browse form */405
.pagination .page-item.active .page-link {406
color: #000 !important;407
} 408
409
/* We don't want a shadow-box around the card (edit form) */410
.card-no-box {411
-webkit-box-shadow: 0 0px !important;412
box-shadow: 0 0px !important;413
}414
415
/* Image on the delete confirmation button */416
.fa-close:before, .fa-remove:before, .fa-times::before {417
content: url('../img/delete-cross.PNG'); 418
}419
420
.rotateIn {421
-webkit-animation-name: rotateIn;422
animation-name: rotateIn;423
}424
.animated {425
-webkit-animation-duration: 1s;426
animation-duration: 1s;427
-webkit-animation-fill-mode: both;428
animation-fill-mode: both;429
}430
431
/* form row aligned */432
.dma-form-row-right {433
float: right !important;434
padding-right: 2rem !important;435
}436
437
.dma-form-row-center { /* does not work */438
margin: 0 auto !important;439
}440
441
.dma-align-left { /* Cols in edit rows (on form) aligned left because checkbox is centered */442
text-align: left !important; 443
} 444
445
.datepicker {446
max-width: 160px !important;447
} 448
449
/* Icon of the calendar next to the datepicker field */450
.dma-calendar-icon {451
height: 24px !important;452
width: 24px !important;453
position: absolute; 454
top: 6px;455
left: 130px; 456
cursor: pointer;457
z-index: 1040;458
}459
460
.dma-calendar-icon::before {461
content: url(../img/calendar-red.png); 462
}463
464
/* Icon of the color picker next to the color edit field */465
.dma-color-picker {466
height: 24px !important;467
width: 80px !important;468
position: absolute;469
top: 6px;470
right: 6px;471
cursor: pointer;472
z-index: 1040;473
}474
475
/* Color panel in the browse form that displays the color */476
.dma-browse-color {477
height: 22px;478
width: 70px;479
border: 1px solid #C0C0C0;480
text-align: center;481
text-shadow: 1px 1px #000000;482
color: white;483
padding: 0px;484
} 485
486
/* Make sure that the combobox text is grey */487
.select-wrapper .select-dropdown {488
color: #757575 !important;489
}490
491
/* The label of the combobox must be aligned to the left */492
.select-wrapper+label {493
left: 4px !important;494
}495
496
497
/* If an error is raised for a field, make sure it is shown - standard mdbootstrap behavior does not seem to work */498
.was-validated .dma-invalid .invalid-feedback {499
display: block !important;500
}501
502
/* When a field is disabled in the form, make the font grey */503
.md-form .form-control:disabled, .md-form .form-control[readonly] {504
color: #b0b0b0 !important;505
}506
507
.select-wrapper input.select-dropdown:disabled { /* Make combo grey if disabled */508
color: rgba(0,0,0,0.3) !important;509
}510
511
512
/* Iframe in the dialogs */513
.dma-iframe {514
overflow-x:hidden; 515
overflow-y:auto; 516
width: 99%; 517
/* height: 380px; */518
border: 0px; 519
padding: 2px;520
min-height: 450px;521
}522
523
/* This will make the compact megamenu overlap the content below */524
.navbar-expand-lg { z-index: 2000 !important; }525
1
1
Console errors: 0