Optimizing mobile layout
This commit is contained in:
franzz committed
1 parent
856975652d
commit
725c72a6aa
5 files changed
+70
-20
No files matched your search
+1
-1
@@ -21,7 +21,7 @@
|
||||
<header>
|
||||
<div id="nav">
|
||||
<div id="ugc_days"></div>
|
||||
<div id="ugc_dates"><select name="days"></select><i class="fa fa-down"></i></div>
|
||||
<div id="ugc_dates"><select name="days"></select></div>
|
||||
<div id="btn_settings" class="button no_bg fa fa-settings"></div>
|
||||
</div>
|
||||
<div class="title"><time id="date"></time></div>
|
||||
|
||||
+12
-13
@@ -100,13 +100,15 @@ function Film(oSettings)
|
||||
.data('rank', this.getRank())
|
||||
.data('id', this.id())
|
||||
.append($('<img>', {'class':'bg', 'src':this.backgroundPoster()}))
|
||||
.append($('<img>', {'class':'poster', 'src':this.backgroundPoster()}))
|
||||
.append($('<div>', {'class':'poster-container'}).append($('<img>', {'class':'poster', 'src':this.backgroundPoster()})))
|
||||
.append($('<div>', {'class':'info'})
|
||||
.append($('<p>', {'class':'title'})
|
||||
.append($('<a>', {'class':'name', 'target':'_blank', 'href':this.consts.ugc_url+'film.html?id='+this.id()})
|
||||
.append($('<i>', {'class':'fa fa-fw inline fa-film'}))
|
||||
.append(this.name()))
|
||||
.append($('<span>', {'class':'edito'+(this.edito()?' fa fa-edito':'')}).text(this.edito()?' '+this.edito():'')))
|
||||
.append(this.name())))
|
||||
.append($('<p>', {'class':'edito'+(!this.edito()?' hide':'')})
|
||||
.append($('<i>', {'class':'fa fa-fw inline fa-edito'}))
|
||||
.append($('<span>').text(this.edito())))
|
||||
.append($('<p>', {'class':'trailer'})
|
||||
.append($('<a>', {'target':'_blank', 'href':this.trailer()})
|
||||
.append($('<i>', {'class':'fa fa-fw inline fa-trailer'}))
|
||||
@@ -140,18 +142,21 @@ function Film(oSettings)
|
||||
else if(sLang=='VFSTF') self.feedback('Hiding hearing-impaired version ('+sLang+') of "'+self.name()+'" @'+sCinema)
|
||||
else
|
||||
{
|
||||
var $Timetable = $('<p>')
|
||||
var $CinemaBox = $('<div>');
|
||||
$('<p>', {'class':'cinema_lang'})
|
||||
.append($('<a>', {'class':'cinema', 'target':'_blank', 'href':self.consts.ugc_url+'cinemaAction!execute.action?page=7&id='+iCinemaId})
|
||||
.append($('<i>', {'class':'fa fa-fw inline fa-cinema'}))
|
||||
.append($('<span>', {'class':'cinema_name'}).text(sCinema)))
|
||||
.append($('<span>', {'class':'lang'}).text(sLang))
|
||||
.appendTo(self.anchor().find('.timetable'));
|
||||
.appendTo($CinemaBox);
|
||||
|
||||
var $Timetable = $('<p>', {'class':'screening'});
|
||||
$.each(asTimetable.sort(self.timeCompare), function(iKey, oTime){
|
||||
$Timetable
|
||||
.append($('<a>', {'class':'button', 'href':oTime.booking, 'target':'_blank', 'title':'Book screening'}).text(oTime.time))
|
||||
.append(' '); //for line break
|
||||
});
|
||||
self.anchor().find('.timetable').append($CinemaBox.append($Timetable));
|
||||
}
|
||||
});
|
||||
};
|
||||
@@ -569,14 +574,8 @@ function getUgcPage(sPath, asData, fOnSuccess, fOnFail, sType)
|
||||
|
||||
function buffer(bActive)
|
||||
{
|
||||
if(bActive)
|
||||
{
|
||||
$('.film').add('header').fadeTo(0, 0);
|
||||
}
|
||||
else
|
||||
{
|
||||
$('.film').not('.banned').add('header').fadeTo('slow', 1);
|
||||
}
|
||||
if(bActive) $('main').add('header').fadeTo(0, 0);
|
||||
else $('main').add($('.film').not('.banned')).add('header').fadeTo('slow', 1);
|
||||
$('#buffer').toggle(bActive);
|
||||
$('footer').add('#feedback').toggle(!bActive);
|
||||
}
|
||||
|
||||
@@ -8,4 +8,15 @@
|
||||
#ugc_dates {
|
||||
display:none;
|
||||
}
|
||||
|
||||
main .film .info .title,
|
||||
main .film .info .edito,
|
||||
main .film .info .cinema_lang,
|
||||
main .film .info .screening {
|
||||
display:inline-block;
|
||||
}
|
||||
main .film .info .edito .fa-edito {
|
||||
margin-right:0;
|
||||
margin-left:0.5em;
|
||||
}
|
||||
}
|
||||
@@ -1,20 +1,60 @@
|
||||
@media (max-width: 40.5em) {
|
||||
|
||||
/* Header */
|
||||
|
||||
body {
|
||||
padding:0;
|
||||
}
|
||||
|
||||
header #nav {
|
||||
font-size:2.5em;
|
||||
margin: -0.4em -0.4em 0.4em; /* 1 / 2.5em */
|
||||
padding: 0.4em;
|
||||
background:#CCC;
|
||||
margin: 0;
|
||||
padding: calc(2em / 2.5) calc(1em / 2.5);
|
||||
background:white url(../images/logo_ugc.png) 50% 50% / 3em auto no-repeat;
|
||||
}
|
||||
|
||||
header #nav #ugc_days {
|
||||
display:none;
|
||||
}
|
||||
|
||||
header #nav #btn_settings {
|
||||
padding: 0.25em 0.25em 0 0;
|
||||
padding: 0.5em 0.5em 0 0;
|
||||
}
|
||||
|
||||
#ugc_days {
|
||||
header .title {
|
||||
display:none;
|
||||
}
|
||||
|
||||
/* Main */
|
||||
|
||||
main {
|
||||
margin-top:0;
|
||||
border-top:1px solid #666;
|
||||
}
|
||||
|
||||
main .film {
|
||||
margin-bottom:0;
|
||||
border-bottom:1px solid #666;
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
padding: 1em;
|
||||
width: calc(100% - 2em)
|
||||
}
|
||||
|
||||
main .film .poster-container {
|
||||
}
|
||||
|
||||
main .film .bg {
|
||||
display:none;
|
||||
}
|
||||
|
||||
main .film .info {
|
||||
font-size: 2em;
|
||||
padding:0 0 0 0.5em;
|
||||
width: calc(100% - 0.5em - #{$poster_size});
|
||||
}
|
||||
|
||||
#buffer {
|
||||
width: 6em;
|
||||
height: 6em;
|
||||
|
||||
+1
-1
@@ -1,5 +1,5 @@
|
||||
@CHARSET "UTF-8";/*! normalize.css v3.0.2 | MIT License | git.io/normalize */img,legend{border:0}legend,td,th{padding:0}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,optgroup,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre,textarea{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}table{border-collapse:collapse;border-spacing:0}/*!
|
||||
* Font Awesome 4.3.0 by @davegandy - http://fontawesome.io - @fontawesome
|
||||
* License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
|
||||
*/@font-face{font-family:'FontAwesome';src:url("fontawesome-webfont.eot?v=4.3.0");src:url("fontawesome-webfont.eot?#iefix&v=4.3.0") format("embedded-opentype"),url("fontawesome-webfont.woff2?v=4.3.0") format("woff2"),url("fontawesome-webfont.woff?v=4.3.0") format("woff"),url("fontawesome-webfont.ttf?v=4.3.0") format("truetype"),url("fontawesome-webfont.svg?v=4.3.0#fontawesomeregular") format("svg");font-weight:normal;font-style:normal}.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transform:translate(0, 0)}.fa-lg{font-size:1.33333333em;line-height:0.75em;vertical-align:-15%}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-fw{width:1.28571429em;text-align:center}.fa-ul{padding-left:0;margin-left:2.14285714em;list-style-type:none}.fa-ul>li{position:relative}.fa-li{position:absolute;left:-2.14285714em;width:2.14285714em;top:0.14285714em;text-align:center}.fa-li.fa-lg{left:-1.85714286em}.fa-border{padding:.2em .25em .15em;border:solid 0.08em #eeeeee;border-radius:.1em}.pull-right{float:right}.pull-left{float:left}.fa.pull-left{margin-right:.3em}.fa.pull-right{margin-left:.3em}.fa-spin{-webkit-animation:fa-spin 2s infinite linear;animation:fa-spin 2s infinite linear}.fa-pulse{-webkit-animation:fa-spin 1s infinite steps(8);animation:fa-spin 1s infinite steps(8)}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.fa-rotate-90{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);-webkit-transform:scale(-1, 1);-ms-transform:scale(-1, 1);transform:scale(-1, 1)}.fa-flip-vertical{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);-webkit-transform:scale(1, -1);-ms-transform:scale(1, -1);transform:scale(1, -1)}:root .fa-rotate-90,:root .fa-rotate-180,:root .fa-rotate-270,:root .fa-flip-horizontal,:root .fa-flip-vertical{filter:none}.fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:middle}.fa-stack-1x,.fa-stack-2x{position:absolute;left:0;width:100%;text-align:center}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#ffffff}.fa-gear:before{content:"\f013"}.fa-bold:before{content:"\f032"}.fa-italic:before{content:"\f033"}.fa-underline:before{content:"\f0cd"}.fa-ol:before{content:"\f0cb"}.fa-ul:before{content:"\f03a"}body{margin:0;padding:1em;font-family:'Open Sans', sans-serif;font-size:1em;color:#222;background:white;min-width:30em}a{text-decoration:none;color:#222}a:hover{color:#08288B}h1{color:#08288B;margin:0 0 0.8em 0}h2{margin:0 0 1em 0;font-size:1.7em}select{border:none;background:transparent;color:#666;padding-right:1.5em}select+.fa-down{margin-left:-1em;color:#666}.inline{margin-right:0.5em}.button{background:#666;color:white;padding:0.1em 0.4em;border-radius:3px;cursor:pointer}.button:hover,.button.clicked{background:#08288B;color:white}.button.square{padding:0.2em}.button.no_bg{background:inherit;color:#666}.button.no_bg:hover,.button.no_bg.clicked{background:inherit;color:#08288B}.fa-film:before{content:"\f008"}.fa-trailer:before{content:"\f144"}.fa-spinner{color:#08288B;font-size:2em}.fa-spinner:before{content:"\f110"}.fa-cinema:before{content:"\f017"}.fa-date:before{content:"\f133"}.fa-power:before{content:"\f1b0"}.fa-edito:before{content:"\f0e7"}.fa-feedback:before{content:"\f0b0"}.fa-settings:before{content:"\f013"}.fa-ok:before{content:"\f00c"}.fa-down:before{content:"\f0d7"}header{margin:0;text-align:center}header #nav{text-align:left;position:relative;margin-bottom:0.7em}header #nav #btn_settings{font-size:1.5em;margin:0;padding:0 0.25em 0 0;position:absolute;right:0;top:0}header .title{color:#08288B;display:inline-block;padding-left:113px;background:url(../images/logo_ugc.png) 0 50% no-repeat}header .title time{display:inline-block;font-size:2em;padding:1.5em 0 1.5em 0.75em}main{margin-top:1em}#buffer{position:fixed;top:0px;left:0px;right:0px;bottom:0px;width:2em;height:2em;margin:auto;padding:0px}.film{position:relative;background:white;margin-bottom:1em;overflow:hidden;-webkit-box-shadow:1px 1px 2px 1px rgba(0,0,0,0.5);-moz-box-shadow:1px 1px 2px 1px rgba(0,0,0,0.5);box-shadow:1px 1px 2px Line truncated
|
||||
*/@font-face{font-family:'FontAwesome';src:url("fontawesome-webfont.eot?v=4.3.0");src:url("fontawesome-webfont.eot?#iefix&v=4.3.0") format("embedded-opentype"),url("fontawesome-webfont.woff2?v=4.3.0") format("woff2"),url("fontawesome-webfont.woff?v=4.3.0") format("woff"),url("fontawesome-webfont.ttf?v=4.3.0") format("truetype"),url("fontawesome-webfont.svg?v=4.3.0#fontawesomeregular") format("svg");font-weight:normal;font-style:normal}.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transform:translate(0, 0)}.fa-lg{font-size:1.33333333em;line-height:0.75em;vertical-align:-15%}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-fw{width:1.28571429em;text-align:center}.fa-ul{padding-left:0;margin-left:2.14285714em;list-style-type:none}.fa-ul>li{position:relative}.fa-li{position:absolute;left:-2.14285714em;width:2.14285714em;top:0.14285714em;text-align:center}.fa-li.fa-lg{left:-1.85714286em}.fa-border{padding:.2em .25em .15em;border:solid 0.08em #eeeeee;border-radius:.1em}.pull-right{float:right}.pull-left{float:left}.fa.pull-left{margin-right:.3em}.fa.pull-right{margin-left:.3em}.fa-spin{-webkit-animation:fa-spin 2s infinite linear;animation:fa-spin 2s infinite linear}.fa-pulse{-webkit-animation:fa-spin 1s infinite steps(8);animation:fa-spin 1s infinite steps(8)}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.fa-rotate-90{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);-webkit-transform:scale(-1, 1);-ms-transform:scale(-1, 1);transform:scale(-1, 1)}.fa-flip-vertical{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);-webkit-transform:scale(1, -1);-ms-transform:scale(1, -1);transform:scale(1, -1)}:root .fa-rotate-90,:root .fa-rotate-180,:root .fa-rotate-270,:root .fa-flip-horizontal,:root .fa-flip-vertical{filter:none}.fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:middle}.fa-stack-1x,.fa-stack-2x{position:absolute;left:0;width:100%;text-align:center}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#ffffff}.fa-gear:before{content:"\f013"}.fa-bold:before{content:"\f032"}.fa-italic:before{content:"\f033"}.fa-underline:before{content:"\f0cd"}.fa-ol:before{content:"\f0cb"}.fa-ul:before{content:"\f03a"}body{margin:0;padding:1em;font-family:'Open Sans', sans-serif;font-size:1em;color:#222;background:white;min-width:30em}a{text-decoration:none;color:#222}a:hover{color:#08288B}h1{color:#08288B;margin:0 0 0.8em 0}h2{margin:0 0 1em 0;font-size:1.7em}select{border:none;background:transparent;color:#666}.hide{display:none}.inline{margin-right:0.5em}.button{background:#666;color:white;padding:0.1em 0.4em;border-radius:3px;cursor:pointer}.button:hover,.button.clicked{background:#08288B;color:white}.button.square{padding:0.2em}.button.no_bg{background:none;color:#666}.button.no_bg:hover,.button.no_bg.clicked{background:inherit;color:#08288B}.fa-film:before{content:"\f008"}.fa-trailer:before{content:"\f144"}.fa-spinner{color:#08288B;font-size:2em}.fa-spinner:before{content:"\f110"}.fa-cinema:before{content:"\f017"}.fa-date:before{content:"\f133"}.fa-power:before{content:"\f1b0"}.fa-edito:before{content:"\f0e7"}.fa-feedback:before{content:"\f0b0"}.fa-settings:before{content:"\f013"}.fa-ok:before{content:"\f00c"}.fa-down:before{content:"\f0d7"}header{margin:0;text-align:center}header #nav{text-align:left;position:relative;margin-bottom:0.7em}header #nav #btn_settings{font-size:1.5em;margin:0;padding:0 0.25em 0 0;position:absolute;right:0;top:0}header .title{color:#08288B;display:inline-block;padding-left:113px;background:url(../images/logo_ugc.png) 0 50% no-repeat}header .title time{display:inline-block;font-size:2em;padding:1.5em 0 1.5em 0.75em}main{margin-top:1em}#buffer{position:fixed;top:0px;left:0px;right:0px;bottom:0px;width:2em;height:2em;margin:auto;padding:0px}.film{position:relative;display:inline-block;background:white;margin-bottom:1em;overflow:hidden;width:100%;-webkit-box-shadow:1px 1px 2px 1px rgba(0,0,0,0.5);-moz-box-shadow:1px 1px 2px 1px rgba(0,0,0,0.5);box-shadow:1px 1px 2px 1px rgba(0,0,0,0Line truncated
|
||||
/*# sourceMappingURL=ugc.css.map */
|
||||
Reference in new issue
Block a user