From 599c25c390961efb6b21bbc7dc0f057e326d3a2e Mon Sep 17 00:00:00 2001 From: Bachir Soussi Chiadmi Date: Sun, 29 Jan 2017 14:57:01 +0100 Subject: [PATCH] big refactoring --- css/dist/main.css | 134 +++++++++++++++++-------------- css/main.scss | 168 ++++++++++++++++++++++----------------- index.html | 32 ++++---- js/dist/main.min.js | 21 ++--- js/main.js | 187 ++++++++++++++++++++++++++------------------ js/pages.json | 66 ++++++++-------- 6 files changed, 343 insertions(+), 265 deletions(-) diff --git a/css/dist/main.css b/css/dist/main.css index a79a084..2224edf 100644 --- a/css/dist/main.css +++ b/css/dist/main.css @@ -4,20 +4,22 @@ html, body { background-color: #1A1A1A; } #root { - height: 207.26mm; - margin: 0 auto; position: relative; - width: 475.04741mm; } + width: 475.52246mm; + height: 237.26mm; + margin: 0 auto; + letter-spacing: -.25em; } + #root > * { + letter-spacing: normal; } #header { - display: absolute; - top: 0; - left: 0; + display: inline-block; width: 15mm; - height: 100%; + height: 207.26mm; + margin-right: 5mm; background-color: white; } #header h1 { - margin: 0; + margin: 0 0 15mm 0; padding: 0.3em; position: absolute; bottom: 0; @@ -26,10 +28,9 @@ html, body { transform: rotate(270deg); } #main { - position: absolute; - top: 0; - right: 0; - width: 455.04741mm; } + display: inline-block; + width: 455.04741mm; + overflow: hidden; } #main #page-left { float: left; background-position: right; } @@ -61,57 +62,74 @@ html, body { position: absolute; background-color: rgba(50, 50, 50, 0.8); cursor: pointer; } - #main .page.page-6 .overlay { - background-image: url("../../images/vectos/04_chance-RB.svg"); } - #main #navigation { - position: absolute; - z-index: 3; - bottom: 0; - width: 100%; - padding: 2mm 0; - background-color: rgba(26, 26, 26, 0.7); - overflow: hidden; - text-align: center; - opacity: 0; - transition: opacity .3s ease-in-out; } - #main #navigation:hover { - opacity: 1; } - #main #pagination { - color: #fff; - font-size: 1em; - padding: 0 0 2mm 0; } - #main #pagination div { - display: inline-block; - width: 49%; } - #main #pagination div.wrapper-l { - left: 0; - text-align: left; } - #main #pagination div.wrapper-r { - right: 0; - text-align: right; } - #main #pagination div span.l { - cursor: pointer; - line-height: -1; } - #main #railway ul { - padding: 1mm; - margin: 0; } - #main #railway ul li { + +#navigation { + width: 455.04741mm; + height: 30mm; + overflow: hidden; + margin: 0 0 0 20mm; + padding: 0; + background-color: rgba(26, 26, 26, 0.7); + text-align: center; + transition: opacity .3s ease-in-out; } + +#pagination { + color: #fff; + font-size: 1em; + padding: 1mm 0; + letter-spacing: -.25em; + opacity: 0.3; + transition: opacity .3s ease-in-out; } + #pagination > * { + letter-spacing: normal; } + #pagination div { + display: inline-block; + width: 49.9%; } + #pagination div span.p { display: inline-block; vertical-align: middle; + min-width: 3em; + text-align: center; } + #pagination div span.l { + cursor: pointer; + line-height: -1em; } + #pagination div span.l.hidden { + visibility: hidden; } + #pagination div.wrapper-l { + left: 0; + text-align: right; } + #pagination div.wrapper-r { + right: 0; + text-align: left; + border-left: 1px solid white; } + #pagination:hover { + opacity: 1; } + +#railway ul { + padding: 1mm 0; + margin: 0; + text-align: justify; + display: -ms-flexbox; + display: flex; + -ms-flex-flow: row nowrap; + flex-flow: row nowrap; + -ms-flex-pack: justify; + justify-content: space-between; } + #railway ul li { + list-style: none; + opacity: 0.2; + transition: opacity 0.3s ease-in-out; } + #railway ul li.current, #railway ul li.active:hover { + opacity: 1; } + #railway ul li span { + display: inline-block; background-color: white; width: 1mm; height: 7mm; - margin-left: 0.5mm; background-position: center; - background-size: cover; - opacity: 0.2; - transition: opacity 0.3s ease-in-out; } - #main #railway ul li.active { + background-size: cover; } + #railway ul li span.active { width: 7mm; cursor: pointer; } - #main #railway ul li.page-right { - margin-right: 1mm; } - #main #railway ul li.current, #main #railway ul li.active:hover { - opacity: 1; } - #main #railway ul:hover li { - opacity: 1; } + #railway ul:hover span { + opacity: 1; } diff --git a/css/main.scss b/css/main.scss index 58256fa..ab86739 100644 --- a/css/main.scss +++ b/css/main.scss @@ -3,30 +3,34 @@ html,body{ background-color: #1A1A1A; } -$debug:false; -$tranchew:15mm; -$pw:227.41mm; -$ph:207.26mm; -$mt:1cm; -$mb:1cm; -$me:1cm; -$mi:1cm; +$tranche_w:15mm; +$tranche_mr:5mm; +$p_w:227.41mm; +$p_h:207.26mm; +$main_w:2.001*$p_w; +$navh:30mm; +// $mt:1cm; +// $mb:1cm; +// $me:1cm; +// $mi:1cm; #root{ - height:$ph; - margin:0 auto; position: relative; - width:$tranchew+5+2.001*$pw; + width:($tranche_w+$tranche_mr+$main_w)*1.001; + height:$p_h+$navh; + margin:0 auto; + letter-spacing:-.25em; + &>*{letter-spacing: normal;} } #header{ - display: absolute; - top: 0; left:0; - width: $tranchew; height: 100%; + display: inline-block; + width: $tranche_w; height: $p_h; + margin-right:$tranche_mr; background-color: white; h1{ - margin: 0; padding:0.3em; + margin: 0 0 15mm 0; padding:0.3em; position: absolute; bottom:0; left:0; transform-origin: 0% 0%; @@ -35,10 +39,10 @@ $mi:1cm; } #main{ - position: absolute; - top:0; right:0; - width:2.001*$pw; - + display: inline-block; + width:$main_w; + overflow: hidden; + // background-color: magenta; #page-left{ float:left; // padding:$mt $mi $mb $me; @@ -53,11 +57,8 @@ $mi:1cm; } .page{ position: relative; - @if $debug { - background-color: green; - } - width:$pw; - height:$ph; + width:$p_w; + height:$p_h; background-repeat: no-repeat; background-size: contain; @@ -69,11 +70,6 @@ $mi:1cm; background-repeat: no-repeat; background-size: contain; z-index: 1; - - @if $debug { - border: 1px solid blue; - } - // img{max-width: 100%;} } @@ -89,64 +85,96 @@ $mi:1cm; } } - &.page-6 .overlay{ - background-image: url("../../images/vectos/04_chance-RB.svg") - } } - #navigation{ - position:absolute; z-index: 3; - bottom:0; width:100%; // height:2cm; - padding:2mm 0; - background-color: rgba(26, 26, 26, 0.7); - overflow: hidden; - text-align: center; - opacity: 0; - transition: opacity .3s ease-in-out; - &:hover{opacity: 1;} - } +} - #pagination{ - color:#fff; - font-size: 1em; - padding: 0 0 2mm 0; - div{ +#navigation{ + width:$main_w; + height:$navh; + overflow: hidden; + $ml:$tranche_w + $tranche_mr; + margin:0 0 0 $ml; + padding:0; + background-color: rgba(26, 26, 26, 0.7); + // background-color: green; + text-align: center; + // opacity: 0; + transition: opacity .3s ease-in-out; + // &:hover{opacity: 1;} +} + +#pagination{ + color:#fff; + font-size: 1em; + padding: 1mm 0; + letter-spacing: -.25em; + &>*{letter-spacing: normal;} + + div{ + display: inline-block; + width:49.9%; + span.p{ display: inline-block; - width:49%; - &.wrapper-l{left:0; text-align: left;} - &.wrapper-r{right:0; text-align: right;} - span.p{ - - } - span.l{ - cursor: pointer; - line-height: -1; - } + vertical-align: middle; + min-width: 3em; + text-align: center; } + span.l{ + cursor: pointer; + line-height: -1em; + &.hidden{visibility: hidden;} + } + + &.wrapper-l{ + left:0; text-align: right; + // span.p{text-align: left;} + } + &.wrapper-r{ + right:0; text-align: left; border-left: 1px solid white; + // span.p{text-align: right;} + } + } - #railway{ - ul{ - padding:1mm; margin:0; - li{ - display: inline-block; vertical-align: middle; + opacity: 0.3; + transition: opacity .3s ease-in-out; + &:hover{opacity: 1;} +} + +#railway{ + // background-color: blue; + ul{ + padding:1mm 0; margin:0; + text-align: justify; + display: flex; + flex-flow: row nowrap; + justify-content: space-between; + + li{ + // display: inline-block; vertical-align: middle; + // display: + list-style: none; + + opacity:0.2; + transition: opacity 0.3s ease-in-out; + &.current, &.active:hover{opacity: 1;} + + span{ + display: inline-block; background-color: white; width:1mm; height:7mm; - margin-left: 0.5mm; + // margin-left: 0.5mm; background-position: center; background-size: cover; &.active{ width:7mm; cursor: pointer; } &.page-right{ - margin-right: 1mm; + // margin-right: 1mm; } - opacity:0.2; - transition: opacity 0.3s ease-in-out; - &.current, &.active:hover{opacity: 1;} } - &:hover li{opacity: 1;} } + &:hover span{opacity: 1;} } - } diff --git a/index.html b/index.html index 11b4526..1c91deb 100644 --- a/index.html +++ b/index.html @@ -22,24 +22,24 @@
- - + + diff --git a/js/dist/main.min.js b/js/dist/main.min.js index c8a9eff..4b4bd29 100644 --- a/js/dist/main.min.js +++ b/js/dist/main.min.js @@ -1,11 +1,12 @@ -$(document).ready(function(){console.log("ready");var _win={w:$(document).width(),h:$(document).height()},_$root=$('#root'),_pl=58,_active_pages={},_current_pages=0,_page_left_bg,_page_right_bg,_$page_left=$('#page-left'),_$page_right=$('#page-right'),_$overlay_left=$('#page-left .overlay'),_$overlay_right=$('#page-right .overlay'),_$maps_left=$('#page-left .maps'),_$maps_right=$('#page-right .maps'),_bgs_prefix="images/pages/",_$railway=$('#railway'),_$pagination=$('#pagination');_$pagi_l=$('#pagination .wrapper-l .p'),_$pagi_r=$('#pagination .wrapper-r .p');function init(){initLayout();initData();initRailway();initkeyboard();initPagination();changePages();};function initLayout(){_$root.css({'margin-top':(_win.h-_$root.height())/2});};function initData(){for(var p=0;p<_PAGES.length;p++){if(typeof _PAGES[p][0].page!=="undefined"){_active_pages[(_PAGES[p][0].page+1)/2]=p;} -else if(typeof _PAGES[p][1].page!=="undefined"){_active_pages[_PAGES[p][1].page/2]=p;}} -console.log("_active_pages",_active_pages);};function initRailway(){var $ul=$('