Skip to content

Instantly share code, notes, and snippets.

@skerbis

skerbis/Markup.html

Forked from elricco/Markup.html
Created January 16, 2017 13:51
Show Gist options
  • Save skerbis/bc0e9380d12e30a2a773a6e1ab92f4af to your computer and use it in GitHub Desktop.
Save skerbis/bc0e9380d12e30a2a773a6e1ab92f4af to your computer and use it in GitHub Desktop.
Download ZIP
Transfomr Bookatable Booking Table
Raw
bookatable.sass
/* src alwas has to be absolute path
also for background-images */
/* needs JS to be applied */
@font-face
font-family: "ScalaSansWeb W03 Regula1474600"
src: url("http://www.domain.de/assets/fonts/4fef9c2e-e356-44e7-ba89-a35876e92d97.eot?#iefix")
src: url("http://www.domain.de/assets/fonts/4fef9c2e-e356-44e7-ba89-a35876e92d97.eot?#iefix") format("eot"),url("http://www.domain.de/assets/fonts/45514027-316b-4314-892c-9a1129f7a7af.woff2") format("woff2"),url("http://www.domain.de/assets/fonts/5fa27b96-1a59-479b-9257-656e7a5ddaac.woff") format("woff"),url("http://www.domain.de/assets/fonts/9bf8a667-7089-402c-aaba-dd28710a9877.ttf") format("truetype")
//oder
@import url('https://fonts.googleapis.com/css?family=Ubuntu')
*
-moz-osx-font-smoothing: grayscale
-webkit-font-smoothing: antialiased
*
border: 0px none
-moz-border-radius: 0
-webkit-border-radius: 0
border-radius: 0
border-radius: 0 !important
-moz-border-radius: 0 !important
text-shadow: none !important
-moz-text-shadow: none !important
font-family: "ScalaSansWeb W03 Regula1474600",Helvetica,Arial,sans-serif
font-weight: normal !important
html,body
background: transparent none
.ui-mobile,.ui-mobile .ui-page
min-height: auto !important
padding: 0 !important
width: 100%
height: 500px
max-height: 500px
max-width: 500px
min-width: 400px
min-height: 500px
.ui-bar-w
display: none
.ui-mobile,.ui-mobile .ui-page,.ui-footer,.ui-content
background: transparent none
border: 0px none
.ui-overlay-c
background: transparent none
.ui-content
height: 300px
padding: 0
fieldset
position: relative
*.ui-corner-all
-moz-border-radius: 0
-webkit-border-radius: 0
border-radius: 0
.ui-footer
left: auto
width: 170px
bottom: 0
right: 0
height: auto
max-height: auto
.ui-footer .ui-btn
background: #FFFFFF none
border: 1px solid #FFFFFF
-moz-border-radius: 0
-webkit-border-radius: 0
border-radius: 0
margin: 0
.ui-footer .ui-btn.ui-btn-large
height: auto
max-height: auto
.ui-footer .ui-btn.ui-btn-large .ui-btn-inner
border: 0px none
text-align: center
.ui-footer .ui-btn .ui-icon
display: none
#optionsSubmit .ui-btn-inner
padding: 8px 10px
#optionsSubmit .ui-btn-text
display: inline
color: #000000
text-shadow: none
.ui-footer .ui-btn-large .ui-btn-text b
font-size: 18px
fieldset.ui-controlgroup-horizontal
float: right
width: 170px
padding-top: 0px
margin: 0
fieldset.ui-controlgroup-horizontal .ui-select,fieldset.ui-controlgroup-horizontal .ui-btn
margin: 0 0 16px 0
display: block
width: auto
fieldset.ui-controlgroup-horizontal .ui-select .ui-btn-icon-left .ui-btn-inner,fieldset.ui-controlgroup-horizontal .ui-select .ui-btn-icon-right .ui-btn-inner,fieldset.ui-controlgroup-horizontal .ui-btn .ui-btn-icon-left .ui-btn-inner,fieldset.ui-controlgroup-horizontal .ui-btn .ui-btn-icon-right .ui-btn-inner
text-align: center
padding: 8px 10px
fieldset.ui-controlgroup-horizontal .ui-select .ui-btn-icon-left .ui-btn-inner .ui-icon,fieldset.ui-controlgroup-horizontal .ui-select .ui-btn-icon-right .ui-btn-inner .ui-icon,fieldset.ui-controlgroup-horizontal .ui-btn .ui-btn-icon-left .ui-btn-inner .ui-icon,fieldset.ui-controlgroup-horizontal .ui-btn .ui-btn-icon-right .ui-btn-inner .ui-icon
left: auto
right: 10px
border: 0px none
-moz-box-shadow: none
-webkit-box-shadow: none
box-shadow: none
-moz-background-size: auto
-o-background-size: auto
-webkit-background-size: auto
background-size: auto
background-color: transparent
background-image: url(http://www.domain.de/assets/images/pfeil_select.png) !important
background-image: url(http://www.domain.de/assets/images/pfeil_select.svg),none !important
background-position: center right 23%
background-repeat: no-repeat
.ui-select .ui-btn
color: #FFFFFF
background-color: #000000
border: 1px solid #FFFFFF
*zoom: 1
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FF000000', endColorstr='#FF000000')
background-image: -moz-linear-gradient(left, #000000 0%,#000000 100%)
background-image: -webkit-linear-gradient(left, #000000 0%,#000000 100%)
background-image: linear-gradient(to right, #000000 0%,#000000 100%)
-moz-border-radius: 0
-webkit-border-radius: 0
border-radius: 0
.ui-select .ui-btn.ui-focus
-moz-box-shadow: none
-webkit-box-shadow: none
box-shadow: none
border: 1px solid #FFFFFF
.ui-select .ui-btn.ui-controlgroup-last
-moz-border-radius: 0
-webkit-border-radius: 0
border-radius: 0
width: auto
margin: 0
.ui-select .ui-btn .ui-btn-inner
border: 0px none
font-size: 18px
padding: 7px 10px !important
text-shadow: none
.ui-select .ui-btn select
height: 36px
max-height: 36px
.ui-calendar
width: 300px
padding: 0
margin: 0
-moz-border-radius: 0
-webkit-border-radius: 0
border-radius: 0
.ui-calendar
td, th, a
font-size: 18px
table.ui-calendar-body
width: 300px
position: absolute
bottom: 0
left: 0
table.ui-calendar-body thead th
color: #FFFFFF
background: transparent none
border: 0px none
text-transform: capitalize
font-weight: bold
table.ui-calendar-body tbody td
background: transparent none
border: 0px none
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false)
opacity: 1
.ui-calendar .ui-date
background: transparent none !important
border: 1px solid transparent !important
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false)
opacity: 1
div.ui-calendar-head
color: #FFFFFF
background-color: #000000 !important
border: 1px solid #FFFFFF
position: relative
margin-bottom: 20px
*zoom: 1
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FF000000', endColorstr='#FF000000')
background-image: -moz-linear-gradient(left, #000000 0%,#000000 100%)
background-image: -webkit-linear-gradient(left, #000000 0%,#000000 100%)
background-image: linear-gradient(to right, #000000 0%,#000000 100%)
-moz-border-radius: 0
-webkit-border-radius: 0
border-radius: 0
text-shadow: none
div.ui-calendar-head .ui-btn
position: absolute
display: block
div.ui-calendar-head .ui-btn.ui-calendar-next
right: 5px
background-image: url(http://www.domain.de/assets/images/pfeil_rechts.png)
background-image: url(http://www.domain.de/assets/images/pfeil_rechts.svg),none
background-position: center right 23%
background-repeat: no-repeat
div.ui-calendar-head .ui-btn.ui-calendar-prev
left: 5px
background-image: url(http://www.domain.de/assets/images/pfeil_links.png)
background-image: url(http://www.domain.de/assets/images/pfeil_links.svg),none
background-position: center left 23%
background-repeat: no-repeat
.ui-calendar .ui-icon
background: none transparent
.ui-btn-up-w, .ui-btn-hover-w, .ui-btn-down-w
font-family: "ScalaSansWeb W03 Regula1474600",Helvetica,Arial,sans-serif
h4.ui-calendar-heading
font-size: 18px
table.ui-calendar-body tbody td *
text-shadow: none
table.ui-calendar-body tbody td *[data-date$="-01"]:before,table.ui-calendar-body tbody td *[data-date$="-02"]:before,table.ui-calendar-body tbody td *[data-date$="-03"]:before,table.ui-calendar-body tbody td *[data-date$="-04"]:before,table.ui-calendar-body tbody td *[data-date$="-05"]:before,table.ui-calendar-body tbody td *[data-date$="-06"]:before,table.ui-calendar-body tbody td *[data-date$="-07"]:before,table.ui-calendar-body tbody td *[data-date$="-08"]:before,table.ui-calendar-body tbody td *[data-date$="-09"]:before
content: '0'
table.ui-calendar-body tbody td .ui-date
position: relative
table.ui-calendar-body tbody td .ui-date-inactive
font-family: "ScalaSansWeb W03 Regula1474600",Helvetica,Arial,sans-serif
color: #A3A3A3
table.ui-calendar-body tbody td .ui-date-active
font-family: "ScalaSansWeb W03 Regula1474600",Helvetica,Arial,sans-serif
color: #FFFFFF
table.ui-calendar-body tbody td .ui-date-nextmonth
font-family: "ScalaSansWeb W03 Regula1474600",Helvetica,Arial,sans-serif
color: #666666
table.ui-calendar-body tbody td .ui-date-selected
font-family: "ScalaSansWeb W03 Regula1474600",Helvetica,Arial,sans-serif
color: #ffffff
table.ui-calendar-body tbody td .ui-date-selected:before
content: ''
display: block
position: absolute
width: 30px
height: 30px
background-color: #000000
margin-left: -16px
margin-top: -14px
z-index: -1
top: 50%
left: 50%
-moz-border-radius: 20px
-webkit-border-radius: 20px
border-radius: 20px
border: 1px solid #FFFFFF
@media (max-width: 535px)
.ui-mobile,.ui-mobile .ui-page
min-height: auto !important
padding: 0 !important
width: 100%
height: 100%
max-height: 100%
max-width: 100%
min-width: 100%
min-height: 100%
.ui-content
height: 100%
max-height: 100%
fieldset.ui-controlgroup-horizontal
float: none
width: 100%
.ui-calendar
position: static
width: 100%
table.ui-calendar-body
width: 100%
position: relative
.ui-footer
margin-top: 20px
width: 100%
max-width: 100%
.ui-footer-fixed
position: relative
Raw
Markup.html
<div class="reservierung-kalender" id="bookingTableWrapper">
<!-- Start Bookatable Code -->
<script type="text/javascript" src="https://bda.bookatable.com/deploy/lbui.direct.min.js"></script>
<script type="text/javascript">
LBDirect_Embed({
connectionid : "BOOKATABLE-CONNECTION-ID",
language: "de-DE",
});
jQuery(function () {
setTimeout(transformLBD, 10);
});
</script>
<!-- End Bookatable Code -->
</div>
Raw
transformLBD.js
<script type="text/javascript">
function transformLBD() {
if (!jQuery('.reservierung-kalender iframe').length) {
if(jQuery('.reservierung-kalender div[id^="lbuiDirect"] a').length) {
jQuery('.reservierung-kalender div[id^="lbuiDirect"]').css('max-height', '50px');
} else {
setTimeout(transformLBD, 300);
}
return;
}
var frameDoc = jQuery('.reservierung-kalender iframe').contents();
if (!frameDoc.find('body').attr('class')) {
setTimeout(transformLBD, 300);
return;
}
var e = frameDoc[0].createElement('link');
e.rel = 'stylesheet';
e.type = 'text/css';
//href needs the absolute path to css-file
e.href = 'http://www.domain.de/assets/css/bookatable.min_.css';
e.onload = function() {
jQuery('#bookatable').addClass('loaded');
};
frameDoc[0].getElementsByTagName('head')[0].appendChild(e);
jQuery('.reservierung-kalender iframe').css({
background: 'none transparent',
width: '100%',
height: '100%',
borderRadius: 0
});
jQuery('.reservierung-kalender iframe').parent().css({
background: 'none transparent',
width: '100%',
height: 410,
borderRadius: 0
});
}
jQuery('#bookingTableWrapper').children('div').attr('style', '').css({height: '410px', width: '100%'});
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment