franzz/ugc
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

adding dates to pick from

Browse Source
This commit is contained in:
Franzz
2015-08-23 20:24:29 +02:00
parent 6da97fb569
commit 4b634c0937
7 changed files with 372 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
masks/index.html
View File

@@ -8,34 +8,36 @@
<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic' type='text/css'> <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic' type='text/css'>
<link rel="stylesheet" href="style/ugc.css" type="text/css" /> <link rel="stylesheet" href="style/ugc.css" type="text/css" />
<script type="text/javascript" src="script/jquery.js"></script> <script type="text/javascript" src="script/jquery.js"></script>
<script type="text/javascript" src="script/film.js"></script> <script type="text/javascript" src="script/ugc.js"></script>
<title>UGC Clone</title> <title>UGC Clone</title>
<script type="text/javascript"> <script type="text/javascript">
//Parameters
var oDate = new Date(/*'2015-08-15'*/);
if(oDate.getHours()==23) oDate.setDate(oDate.getDate() + 1);
$(document).ready(function(){ $(document).ready(function(){
var oAffiche = new Affiche(oDate); var oUgc = new Ugc();
oAffiche.loadCinemas(); oUgc.loadCinemas();
}); });
</script> </script>
</head> </head>
<body> <body>
<header> <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="btn_settings" class="button no_bg fa fa-settings"></div>
</div>
<div class="title"><time id="date"></time></div> <div class="title"><time id="date"></time></div>
<div id="btn_settings" class="fa fa-settings"></div>
</header> </header>
<main> <main>
<div id="buffer"><i class="fa fa-spinner fa-spin"></i></div> <div id="buffer"><i class="fa fa-spinner fa-spin"></i></div>
</main> </main>
<div id="feedback"> <div id="feedback">
<h2><i class="fa fa-icon fa-feedback"></i>Filtered films</h2> <h2><i class="fa inline fa-feedback"></i>Filtered films</h2>
<div id="feed_content"></div> <div id="feed_content"></div>
</div> </div>
<footer><i class="fa fa-icon fa-power"></i>Designed &amp; powered by Franzz, licensed under GPLv3.</footer> <footer><i class="fa inline fa-power"></i>Designed &amp; powered by Franzz, licensed under GPLv3.</footer>
<div class="background"></div>
<div id="settings"> <div id="settings">
<h1>Theaters<span id="ok_settings" class="button square fa fa-ok"></span></h1> <h1>Theaters<span id="ok_settings" class="button no_bg square fa fa-ok"></span></h1>
<div id="buffer_settings"><i class="fa fa-spinner fa-spin"></i></div>
<ul class="cinemas"></ul> <ul class="cinemas"></ul>
</div> </div>
</body> </body>

400
script/film.js → script/ugc.js
View File

@@ -1,7 +1,8 @@
function Film() function Film(oSettings)
{ {
var self = this; var self = this;
this.consts = {'ugc_url':'http://www.ugc.fr/', 'process_url':'index.php'}; this.consts = {'ugc_url':'http://www.ugc.fr/', 'process_url':'index.php'};
this.settings = oSettings;
this._attr = {}; this._attr = {};
this._anchor = {}; this._anchor = {};
this._ban = {status:false, reason:''}; this._ban = {status:false, reason:''};
@@ -103,12 +104,12 @@ function Film()
.append($('<div>', {'class':'info'}) .append($('<div>', {'class':'info'})
.append($('<p>', {'class':'title'}) .append($('<p>', {'class':'title'})
.append($('<a>', {'class':'name', 'target':'_blank', 'href':this.consts.ugc_url+'film.html?id='+this.id()}) .append($('<a>', {'class':'name', 'target':'_blank', 'href':this.consts.ugc_url+'film.html?id='+this.id()})
.append($('<i>', {'class':'fa fa-fw fa-icon fa-film'})) .append($('<i>', {'class':'fa fa-fw inline fa-film'}))
.append(this.name())) .append(this.name()))
.append($('<span>', {'class':'edito'+(this.edito()?' fa fa-edito':'')}).text(this.edito()?' '+this.edito():''))) .append($('<span>', {'class':'edito'+(this.edito()?' fa fa-edito':'')}).text(this.edito()?' '+this.edito():'')))
.append($('<p>', {'class':'trailer'}) .append($('<p>', {'class':'trailer'})
.append($('<a>', {'target':'_blank', 'href':this.trailer()}) .append($('<a>', {'target':'_blank', 'href':this.trailer()})
.append($('<i>', {'class':'fa fa-fw fa-icon fa-trailer'})) .append($('<i>', {'class':'fa fa-fw inline fa-trailer'}))
.append('Trailer'))) .append('Trailer')))
.append($('<div>', {'class':'timetable'}))) .append($('<div>', {'class':'timetable'})))
//.append($('<div>', {'class':'timetable fa fa-fw fa-spinner fa-spin'}))) //.append($('<div>', {'class':'timetable fa fa-fw fa-spinner fa-spin'})))
@@ -132,7 +133,7 @@ function Film()
this.renderTimetable = function(iCinemaId, asLang) this.renderTimetable = function(iCinemaId, asLang)
{ {
var sCinema = asCinemas[iCinemaId]; var sCinema = self.settings.cinemas(iCinemaId);
$.each(asLang, function(iKey, sLang) $.each(asLang, function(iKey, sLang)
{ {
if(sLang=='VF' && ('VOSTF' in self.timetable(iCinemaId))) self.feedback('Hiding VF of "'+self.name()+'" @'+sCinema+' (VOSTF available)'); if(sLang=='VF' && ('VOSTF' in self.timetable(iCinemaId))) self.feedback('Hiding VF of "'+self.name()+'" @'+sCinema+' (VOSTF available)');
@@ -141,13 +142,11 @@ function Film()
{ {
var $Timetable = $('<p>') var $Timetable = $('<p>')
.append($('<a>', {'class':'cinema', 'target':'_blank', 'href':self.consts.ugc_url+'cinemaAction!execute.action?page=7&id='+iCinemaId}) .append($('<a>', {'class':'cinema', 'target':'_blank', 'href':self.consts.ugc_url+'cinemaAction!execute.action?page=7&id='+iCinemaId})
.append($('<i>', {'class':'fa fa-fw fa-icon fa-cinema'})) .append($('<i>', {'class':'fa fa-fw inline fa-cinema'}))
.append($('<span>', {'class':'cinema_name'}).text(sCinema))) .append($('<span>', {'class':'cinema_name'}).text(sCinema)))
.append($('<span>', {'class':'lang'}).text(sLang)) .append($('<span>', {'class':'lang'}).text(sLang))
.appendTo(self.anchor().find('.timetable')); .appendTo(self.anchor().find('.timetable'));
var test = self.timetable(iCinemaId, sLang);
if(!test) console.log('cinema '+iCinemaId+' lang '+sLang+' film '+self.id());
$.each(self.timetable(iCinemaId, sLang).sort(self.timeCompare), function(iKey, oTime){ $.each(self.timetable(iCinemaId, sLang).sort(self.timeCompare), function(iKey, oTime){
$Timetable $Timetable
.append($('<a>', {'class':'button', 'href':oTime.booking, 'target':'_blank', 'title':'Book screening'}).text(oTime.time)) .append($('<a>', {'class':'button', 'href':oTime.booking, 'target':'_blank', 'title':'Book screening'}).text(oTime.time))
@@ -173,25 +172,41 @@ function Film()
}; };
} }
function Affiche(oDate) function Ugc()
{ {
var self = this; var self = this;
this.date = {}; this.settings = new Settings();
this.date.now = oDate;
this.date.today = new Date(this.date.now.getFullYear(), this.date.now.getMonth(), this.date.now.getDate());
this.date.timestamp = this.date.today / 1;
this._cinemasList = {};
this._films = {}; this._films = {};
this._wip = 0; this._wip = 0;
this.consts = { days:["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
months:["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]};
this.$Header = $('header'); this.$Header = $('header');
this.$Main = $('main'); this.$Main = $('main');
this.$Footer = $('footer'); this.$Footer = $('footer');
this.$Feedback = $('#feedback'); this.$Feedback = $('#feedback');
this.$Settings = $('#settings');
this.loadCinemas = function()
{
//Display buffer while loading
buffer(true);
//Load Settings
this.settings.init();
//Set Header
$('#date')
.attr('datetime', this.settings.date('html'))
.append(this.settings.date('formal'))
.append($('<sup>').text(this.settings.date('abbr')));
//Load cinemas
$.each(this.settings.cinemas(), function(iCinemaId, sCinemaName){
getUgcPage( 'filmsAjaxAction!getFilmsForPageCinema.action',
{cinemaId:iCinemaId, cinemaCode:'', page:'7', filmId:'', filmId_widget:'', '_':Date.now()},
function(hDom){self.addCinema(iCinemaId, hDom)},
function(){},
'html');
});
};
this.wip = function(iProgress) this.wip = function(iProgress)
{ {
@@ -207,9 +222,6 @@ function Affiche(oDate)
{ {
$Films = $('.film'); $Films = $('.film');
//Display Header
this.$Header.css('visibility', 'visible');
//Sort films //Sort films
$Films.sort(function(oFilm1, oFilm2){return ($(oFilm1).data('rank') < $(oFilm2).data('rank'))?1:-1;}).detach(); $Films.sort(function(oFilm1, oFilm2){return ($(oFilm1).data('rank') < $(oFilm2).data('rank'))?1:-1;}).detach();
@@ -224,25 +236,11 @@ function Affiche(oDate)
} }
}); });
//Remove loading
this.$Main.find('#buffer').hide();
//Add films (except bans) //Add films (except bans)
$Films.appendTo(this.$Main).not('.banned').slideDown('slow'); $Films.appendTo(this.$Main);
this.$Footer.add(this.$Feedback).show();
};
this.loadCinemas = function() //remove buffer
{ buffer(false);
this.setHeader();
$.each(asCinemas, function(iCinemaId, sCinemaName){
getUgcPage( 'filmsAjaxAction!getFilmsForPageCinema.action',
{cinemaId:iCinemaId, cinemaCode:'', page:'7', filmId:'', filmId_widget:'', '_':Date.now()},
function(hDom){self.addCinema(iCinemaId, hDom)},
function(){},
'html');
});
}; };
this.addCinema = function(iCinemaId, hDom) this.addCinema = function(iCinemaId, hDom)
@@ -258,7 +256,7 @@ function Affiche(oDate)
if(!oFilm) if(!oFilm)
{ {
oFilm = new Film(); oFilm = new Film(self.settings);
//ID //ID
oFilm.id(iFilmId); oFilm.id(iFilmId);
@@ -284,7 +282,7 @@ function Affiche(oDate)
//Ban if wrong edito //Ban if wrong edito
if(sEdito=='Avant-première' || sEdito=='UGC Culte' || sEdito=='Soirée Club') oFilm.ban(true, sEdito); if(sEdito=='Avant-première' || sEdito=='UGC Culte' || sEdito=='Soirée Club') oFilm.ban(true, sEdito);
//Append film to Affiche //Append film to Ugc
self.film(iFilmId, oFilm); self.film(iFilmId, oFilm);
} }
@@ -294,11 +292,11 @@ function Affiche(oDate)
getUgcPage( 'filmsAfficheAction!loadDatesList.action', getUgcPage( 'filmsAfficheAction!loadDatesList.action',
{filmId:oFilm.id(), cinemaId:iCinemaId, cinemaCode:'', day:''}, {filmId:oFilm.id(), cinemaId:iCinemaId, cinemaCode:'', day:''},
function(jData){ function(jData){
if(!(self.date.timestamp in jData.dates)) self.wip(-1); if(!(self.settings.date('midnight_timestamp') in jData.dates)) self.wip(-1);
else else
{ {
getUgcPage( 'filmsAfficheAction!reloadSeancesList.action', getUgcPage( 'filmsAfficheAction!reloadSeancesList.action',
{filmId:oFilm.id(), cinemaId:iCinemaId, cinemaCode:'', day:self.date.timestamp}, {filmId:oFilm.id(), cinemaId:iCinemaId, cinemaCode:'', day:self.settings.date('midnight_timestamp')},
function(hData){ function(hData){
var sLang = ''; var sLang = '';
var asLangs = []; var asLangs = [];
@@ -326,14 +324,14 @@ function Affiche(oDate)
}, },
function(){ function(){
self.wip(-1); self.wip(-1);
self.error('Ajax Error detected on movie "'+oFilm.name()+'" @'+asCinemas[iCinemaId]+'. UGC website Temporarily Unavailable'); self.error('Ajax Error detected on movie "'+oFilm.name()+'" @'+self.settings.cinemas(iCinemaId)+'.');
}, },
'html'); 'html');
} }
}, },
function(){ function(){
self.wip(-1); self.wip(-1);
self.error('Ajax Error detected on movie "'+oFilm.name()+'" @'+asCinemas[iCinemaId]+'. UGC website Temporarily Unavailable'); self.error('Ajax Error detected on movie "'+oFilm.name()+'" @'+self.settings.cinemas(iCinemaId)+'.');
}, },
'json'); 'json');
} }
@@ -341,92 +339,6 @@ function Affiche(oDate)
}); });
}; };
this.setHeader = function()
{
//Date on top
var iDay = this.date.today.getDate();
$('#date')
.attr('datetime', this.date.today.getFullYear()+'-'+(("0" + (this.date.today.getMonth() + 1)).slice(-2))+'-'+(("0" + iDay).slice(-2)))
.append(this.consts.days[this.date.today.getDay()]+', '+this.consts.months[this.date.today.getMonth()]+' '+iDay)
.append($('<sup>').text((iDay%10==1)?'st':((iDay%10==2)?'nd':((iDay%10==3)?'rd':'th'))));
//Load Settings
this.setSettings();
}
this.setSettings = function()
{
//Date
this.setDates();
//Cinemas
this.cinemas();
//Event
this.$Header.find('#btn_settings').click(function(){
self.$Settings.show();
});
this.$Main.click(function(){self.$Settings.hide();});
$(window).keyup(function(e){if(e.keyCode == 27) self.$Settings.hide();});
//Validattion
this.$Settings.find('#ok_settings').click(function(){
//Cinemas
var asCines = {};
self.$Settings.find('.include').each(function(iKey, oCinema){
$Cine = $(oCinema);
asCines[$Cine.data('id')] = $Cine.text();
});
self.cinemas(asCines);
//Day
location.reload();
});
};
this.setDates = function()
{
};
this.cinemas = function(asSetCinemas)
{
if(!asSetCinemas) //Set cookie/default cinemas and get list
{
var asCookieCinemas = Cookies.getJSON('cinemas');
if(!asCookieCinemas) asCinemas = {'10':'Les Halles', '12':'Bercy', '20':'La Défense'};
else asCinemas = asCookieCinemas;
getUgcPage( 'headerReservationAction!reloadCinemasList.action',
{'regionsAndCinemasBean.region':'', 'regionsAndCinemasBean.cinema':'', '_':Date.now()},
self.displaySettingsCinemas,
function(){self.error('Error: Could not load cinema list');},
'json');
}
else //Set new cinemas as cookie
{
Cookies.set('cinemas', asSetCinemas);
asCinemas = asSetCinemas;
}
};
this.displaySettingsCinemas = function(jData)
{
this._cinemasList = jData.cinemas;
var $Cinemas = self.$Settings.find('.cinemas');
$.each(this._cinemasList, function(iKey, sCinemaName){
var iCinemaId = $.trim(iKey);
$Cinemas.append($('<li>', {'class':'cinema'})
.attr('id', '_'+iCinemaId)
.data('id', iCinemaId)
.toggleClass('include', (iCinemaId in asCinemas))
.click(function(){$(this).toggleClass('include')})
.text(sCinemaName));
});
};
this.film = function(iFilmId, oFilm) this.film = function(iFilmId, oFilm)
{ {
if(!iFilmId) return this._films; if(!iFilmId) return this._films;
@@ -441,7 +353,193 @@ function Affiche(oDate)
this.error = function(sMsg) this.error = function(sMsg)
{ {
console.log('Affiche Error: '+sMsg); console.log('Ugc Error: '+sMsg);
};
}
function Settings()
{
var self = this;
this._ugcCinemas = {};
this._cinemas = {};
//this._ugcDates = [];
this._date = null;
this.$Settings = $('#settings');
this.$Header = $('header');
this.$Main = $('main');
this.consts = { days:["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
months:["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]};
this.init = function()
{
//Default date
var iCookieTimestamp = parseInt(Cookies.get('date'));
var oDate;
if(isNaN(iCookieTimestamp) || iCookieTimestamp < this.timestamp()) // no cookie or in the past
{
oDate = new Date();
if(oDate.getHours()==23) oDate = new Date(this.timestamp(oDate) + 24*60*60*1000); //Tomorrow
}
else oDate = new Date(iCookieTimestamp);
this.date(oDate);
//UGC dates
this.addUgcDatesToDom();
//Default cinemas
var asCookieCinemas = Cookies.getJSON('cinemas');
this.cinemas(asCookieCinemas?asCookieCinemas:{'10':'Les Halles', '12':'Bercy', '20':'La Défense'});
//UGC cinemas
getUgcPage( 'headerReservationAction!reloadCinemasList.action',
{'regionsAndCinemasBean.region':'', 'regionsAndCinemasBean.cinema':'', '_':this.date('timestamp')},
function(jData){
self.ugcCinemas(jData.cinemas);
self.addUgcCinemasToDom();
},
function(){self.error('Error: Could not load cinema list');},
'json');
};
this.ugcCinemas = function(asCinemas)
{
if(!asCinemas) return this._ugcCinemas;
else if($.isNumeric(asCinemas)) return this._ugcCinemas[asCinemas]; //Get Cinema name
else this._ugcCinemas = asCinemas;
};
this.cinemas = function(asCinemas)
{
if(!asCinemas) return this._cinemas;
else if($.isNumeric(asCinemas)) return this._cinemas[asCinemas]; //Get Cinema name
else this._cinemas = asCinemas;
};
this.date = function(oDate)
{
if(!oDate) return this._date;
else if($.type(oDate)=='string')
{
switch(oDate)
{
case 'timestamp':
return this.timestamp(this._date);
case 'today':
return new Date(this._date.getFullYear(), this._date.getMonth(), this._date.getDate());
case 'midnight_timestamp':
return this.timestamp(this.date('today'));
case 'day':
return this._date.getDate();
case 'weekday':
return this._date.getDay();
case 'month':
return this._date.getMonth();
case 'year':
return this._date.getFullYear();
case 'html':
return this.date('year')+'-'+(("0" + (this.date('month') + 1)).slice(-2))+'-'+(("0" + this.date('day')).slice(-2));
case 'formal':
return this.consts.days[this.date('weekday')]+', '+this.consts.months[this.date('month')]+' '+this.date('day');
case 'abbr':
return (this.date('day')%10==1)?'st':((this.date('day')%10==2)?'nd':((this.date('day')%10==3)?'rd':'th'));
default:
return this._date;
}
}
else this._date = oDate;
};
this.addUgcDatesToDom = function()
{
//Build today at midnight
var oNextDay = new Date();
oNextDay = new Date(oNextDay.getFullYear(), oNextDay.getMonth(), oNextDay.getDate());
//Build available dates
var $Select = $('#ugc_dates').find('select');
var $List = $('#ugc_days');
var iCount = 0;
while(oNextDay.getDay() != 3)
{
if(iCount>5) break;
var iTimestamp = this.timestamp(oNextDay);
switch(iCount)
{
case 0: sDay = 'Today'; break;
case 1: sDay = 'Tomorrow'; break;
default: sDay = this.consts.days[oNextDay.getDay()];
}
$Select.append($('<option>', {'value':iTimestamp}).text(sDay));
$List.append($('<a>', {'class':'button no_bg inline day', 'id':'day_'+iTimestamp}).data('timestamp', iTimestamp).text(sDay));
oNextDay = new Date(this.timestamp(oNextDay) + 24*60*60*1000);
iCount++;
}
//Selecting right value
$Select.val(this.date('midnight_timestamp'));
$List.find('#day_'+this.date('midnight_timestamp')).addClass('clicked');
//event
$Select.change(function(){
Cookies.set('date', $(this).val(), {expires:6});
reload();
});
$List.find('.day').click(function(){
Cookies.set('date', $(this).data('timestamp'), {expires:6});
reload();
});
};
this.addUgcCinemasToDom = function()
{
//Hide buffer
self.$Settings.find('#buffer_settings').hide();
//Add cinemas
var $Cinemas = self.$Settings.find('.cinemas');
$.each(self.ugcCinemas(), function(iKey, sCinemaName){
var iCinemaId = $.trim(iKey);
$Cinemas.append($('<li>', {'class':'cinema'})
.attr('id', 'cinema_'+iCinemaId)
.data('id', iCinemaId)
.toggleClass('include', (iCinemaId in self.cinemas()))
.click(function(){$(this).toggleClass('include')})
.text(sCinemaName));
});
//Event: Show / Hide panel
$('#btn_settings').click(function(){self.toggleSettings(true);});
$('.background').click(function(){self.toggleSettings(false);});
$(window).keyup(function(e){if(e.keyCode == 27) self.toggleSettings(false);});
//Event: Validation of cinemas selection
this.$Settings.find('#ok_settings').click(function(){
var asCines = {};
self.$Settings.find('.include').each(function(iKey, oCinema){
var $Cine = $(oCinema);
asCines[$Cine.data('id')] = $Cine.text();
});
Cookies.set('cinemas', asCines);
reload();
});
};
this.toggleSettings = function(bShow)
{
self.$Settings.add('.background').toggle((typeof bShow == 'undefined')?null:bShow);
};
this.timestamp = function(oDate)
{
oDate = oDate || new Date();
return oDate.getTime();
}
this.error = function(sMsg)
{
console.log('Settings Error: '+sMsg);
}; };
} }
@@ -452,6 +550,44 @@ function getUgcPage(sPath, asData, fOnSuccess, fOnFail, sType)
url: (new Film()).consts.process_url, url: (new Film()).consts.process_url,
data: asParams, data: asParams,
dataType: sType dataType: sType
}).done(fOnSuccess) })
.fail(fOnFail); .done(function(oData){
if(sType=='html')
{
var asMatches = oData.match(/<title>(.*?)<\/title>/);
if(asMatches && asMatches[1] == 'Service Temporarily Unavailable')
{
console.log('UGC website Temporarily Unavailable. Reloading page');
console.log(asParams);
reload();
}
}
fOnSuccess(oData);
})
.fail(function(){
fOnFail();
console.log('UGC website Temporarily Unavailable. Reloading page');
console.log(asParams);
reload();
});
}
function buffer(bActive)
{
if(bActive)
{
$('.film').add('header').fadeTo(0, 0);
}
else
{
$('.film').not('.banned').add('header').fadeTo('slow', 1);
}
$('#buffer').toggle(bActive);
$('footer').add('#feedback').toggle(!bActive);
}
function reload()
{
buffer(true);
location.reload();
} }

4
style/_big_screen.scss
View File

@@ -4,4 +4,8 @@
min-width: 40.5em; min-width: 40.5em;
margin: 0px auto; margin: 0px auto;
} }
#ugc_dates {
display:none;
}
} }

10
style/_small_screen.scss
View File

@@ -1,4 +1,13 @@
@media (max-width: 40.5em) { @media (max-width: 40.5em) {
header #nav {
font-size:2.5em;
}
#ugc_days {
display:none;
}
#buffer { #buffer {
width: 6em; width: 6em;
height: 6em; height: 6em;
@@ -6,4 +15,5 @@
#buffer .fa { #buffer .fa {
font-size:6em; font-size:6em;
} }
} }

2
style/ugc.css
View File

File diff suppressed because one or more lines are too long

2
style/ugc.css.map
View File

File diff suppressed because one or more lines are too long

99
style/ugc.scss
View File

@@ -35,9 +35,26 @@ h2 {
font-size:1.7em; font-size:1.7em;
} }
select {
border:none;
background:transparent;
z-index:1;
color:#666;
}
select option {
padding-right:1.5em;
}
select + .fa-down {
margin-left:-1em;
z-index:-1;
color:#666;
}
/* Common Classes */ /* Common Classes */
.fa-icon { .inline {
margin-right:0.5em; margin-right:0.5em;
} }
@@ -48,13 +65,21 @@ h2 {
border-radius:3px; border-radius:3px;
cursor: pointer; cursor: pointer;
} }
.button:hover { .button:hover, .button.clicked {
background:#08288B; background:#08288B;
color:white; color:white;
} }
.button.square { .button.square {
padding:0.2em; padding:0.2em;
} }
.button.no_bg {
background:inherit;
color:#666;
}
.button.no_bg:hover, .button.no_bg.clicked {
background:inherit;
color:#08288B;
}
/* Font Awesome Classes */ /* Font Awesome Classes */
@@ -64,6 +89,10 @@ h2 {
.fa-trailer:before { .fa-trailer:before {
content: "\f144"; content: "\f144";
} }
.fa-spinner {
color:#08288B;
font-size:2em;
}
.fa-spinner:before { .fa-spinner:before {
content: "\f110"; content: "\f110";
} }
@@ -88,6 +117,9 @@ h2 {
.fa-ok:before { .fa-ok:before {
content: "\f00c"; content: "\f00c";
} }
.fa-down:before {
content: "\f0d7";
}
/* Sections */ /* Sections */
@@ -95,13 +127,32 @@ h2 {
header { header {
margin:0; margin:0;
visibility:hidden;
text-align: center; text-align: center;
color:#08288B; }
header #nav {
text-align:left;
position: relative; position: relative;
margin-bottom: 0.7em;
}
/*
header #nav .day:FIRST-CHILD {
padding-left: 0px;
}
*/
header #nav #btn_settings {
font-size:1.5em;
margin: 0;
padding: 0 0.25em 0 0;
position: absolute;
right: 0;
top: 0;
} }
header .title { header .title {
color:#08288B;
display:inline-block; display:inline-block;
padding-left:113px; padding-left:113px;
background:url(../images/logo_ugc.png) 0 50% no-repeat; background:url(../images/logo_ugc.png) 0 50% no-repeat;
@@ -113,19 +164,6 @@ header .title time {
padding:1.5em 0 1.5em 0.75em; padding:1.5em 0 1.5em 0.75em;
} }
header #btn_settings {
position: absolute;
top:0;
right:0;
font-size:1.5em;
cursor: pointer;
}
header #btn_settings:hover {
font-size: 2em;
top:-0.1em;
right:-0.1em;
}
/* Section - Main */ /* Section - Main */
main { main {
@@ -142,11 +180,6 @@ main {
height: 2em; height: 2em;
margin: auto; margin: auto;
padding: 0px; padding: 0px;
color:#08288B;
}
#buffer .fa {
font-size:2em;
} }
/* Section - Film */ /* Section - Film */
@@ -240,7 +273,6 @@ main {
padding:1em; padding:1em;
font-size:0.6em; font-size:0.6em;
margin-bottom: 1em; margin-bottom: 1em;
display:none;
color:#999; color:#999;
} }
@@ -256,12 +288,23 @@ main {
footer { footer {
font-size: 0.8em; font-size: 0.8em;
margin: 1em 0 0 0; margin: 1em 0 0 0;
display: none;
color:#08288B; color:#08288B;
} }
/* Section - Settings */ /* Section - Settings */
.background {
display:none;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
z-index: 3;
background:white;
opacity:0.5;
}
#settings { #settings {
display:none; display:none;
position:absolute; position:absolute;
@@ -274,7 +317,7 @@ footer {
-webkit-box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.5); -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); -moz-box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.5);
box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.5); box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.5);
z-index: 3; z-index: 4;
} }
#settings h1 { #settings h1 {
@@ -286,6 +329,11 @@ footer {
right:0; right:0;
} }
#settings #buffer_settings {
text-align:center;
margin:2em auto;
}
#settings ul.cinemas { #settings ul.cinemas {
-webkit-column-count: 2; -webkit-column-count: 2;
-moz-column-count: 2; -moz-column-count: 2;
@@ -294,6 +342,7 @@ footer {
padding:0; padding:0;
margin:0; margin:0;
} }
#settings ul.cinemas li { #settings ul.cinemas li {
cursor: pointer; cursor: pointer;
} }