Optimizing mobile layout

masks/index.html

@@ -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>

script/ugc.js

@@ -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);
 }

style/_big_screen.scss

@@ -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;
+	}
 }

style/_small_screen.scss

@@ -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;