Adding scrollbars & content

2015-06-12 21:17:43 +02:00 · 2015-06-12 21:17:43 +02:00 · 6d73b01de0
commit 6d73b01de0
parent 49a0d63a03
7 changed files with 85 additions and 19 deletions
--- a/assets/app.js
+++ b/assets/app.js
@ -83,6 +83,9 @@
    jqMenuUl = $('#menu-chooser');
    jqContentPages = $('.content-center-wrapper .page');
    maxMenuCount = jqMenuLeds.length;
+    $('.page').perfectScrollbar({
+      suppressScrollX: true
+    });
  };

  // function menuClick(obj){
--- a/assets/main.css
+++ b/assets/main.css
@ -6,6 +6,10 @@ body {
    color: #ddd;
 }

+a {
+    color: #ddd;
+}
+
 .mainContent {
    background: url('/images/palinkafozo_hatter.jpg') no-repeat top center;
    width: 100%;
@ -97,19 +101,25 @@ body {
    background-size: 100%;
 }
 .content-center-wrapper .page {
-    margin: 20px 20px 0;
+    margin: 20px 4px 0 20px;
    padding-left: 40px;
-    overflow: scroll;
+    padding-right: 20px;
+    height: 438px;
    max-height: 438px;
    display: none;
    font-size: 18px;
-    background-color: rgba(0, 0, 0, 0.5)
+    background-color: rgba(0, 0, 0, 0.2);
+    position: relative;
 }

 .content-center-wrapper .page.active {
    display: block;
 }

+.content-center-wrapper .page-6 {
+    text-align: center;
+}
+
 .content-right-wrapper {
    background: url('/images/leparlokeszulek_menu_hetter.jpg') no-repeat center top;
    float: left;
@ -127,9 +137,9 @@ body {

 .content-right-wrapper ul {
    padding: 0;
-    margin-left: -5px;
+    margin-left: -20px;
    list-style-type: none;
-    margin-top: 26px;
+    margin-top: 20px;
 }

 .content-right-wrapper ul li {
@ -140,26 +150,27 @@ body {
 .content-right-wrapper ul li .lamp {
    /*background: url('/images/lampa_inactive.png') no-repeat left top;*/
    width: 100px;
-    height: 47px;
+    height: 38px;
    float: left;
 }

 // .content-right-wrapper ul li:active .lamp {
    /*background: url('/images/lampa_animation.gif') no-repeat left top;*/
    // width: 86px;
-    // height: 47px;
+    // height: 38px;
 }

 .content-right-wrapper ul li .menubg {
    background: url('/images/menu.png') no-repeat left top;
-    width: 103px;
-    height: 47px;
+    width: 106px;
+    height: 38px;
    margin-left: -20px;
    color: #fff;
    float: left;
-    line-height: 2.8em;
-    padding-left: 13px;
+    line-height: 2.5em;
+    padding-left: 10px;
    color: #ddd;
+    font-weight: bold;
 }
 .content-right-wrapper ul li:nth-child(5) .menubg {
    letter-spacing: -1px;
@ -178,7 +189,7 @@ body {
 .content-right-wrapper ul li .gomb {
    background: url('/images/gomb_inactive.png') no-repeat left center;
    width: 20px;
-    height: 47px;
+    height: 38px;
    float: left;
 }

@ -234,10 +245,30 @@ body {
    .content-right-wrapper {
        width: 14.5%;
        top: -199px;
-        left: 37px;
+        left: 38px;
    }
    .headRight {
        width: 17.9%;
        left: 26px;
    }
 }
+
+/* Scrollbar mods */
+
+.ps-container:hover>.ps-scrollbar-y-rail,
+.ps-container.ps-in-scrolling.ps-y>.ps-scrollbar-y-rail,
+.ps-container:hover.ps-in-scrolling.ps-y>.ps-scrollbar-y-rail,
+.ps-container:hover>.ps-scrollbar-y-rail:hover {
+    background-color: transparent;
+}
+
+.ps-container>.ps-scrollbar-y-rail>.ps-scrollbar-y,
+.ps-container:hover>.ps-scrollbar-y-rail:hover>.ps-scrollbar-y,
+.ps-container:hover.ps-in-scrolling.ps-y>.ps-scrollbar-y-rail>.ps-scrollbar-y {
+    background-color: #b98850;
+    box-shadow: 0px 0px 2px 2px 0px 0px 2px 2px #5A390F;
+}
+
+.ps-container.ps-in-scrolling.ps-y>.ps-scrollbar-y-rail>.ps-scrollbar-y {
+    background-color: #C09260;
+}
--- a/bower.json
+++ b/bower.json
@ -17,6 +17,7 @@
    "tests"
  ],
  "dependencies": {
-    "jquery": "~2.1.4"
+    "jquery": "~2.1.4",
+    "perfect-scrollbar": "~0.6.2"
  }
 }
--- a/images/menu-active.png
+++ b/images/menu-active.png
--- a/images/menu.png
+++ b/images/menu.png
--- a/images/menu_hover.png
+++ b/images/menu_hover.png
--- a/index.html
+++ b/index.html
@ -1,8 +1,10 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <script src="/bower_components/jquery/dist/jquery.min.js"></script>
+<script src="/bower_components/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>

 <title>Prédikátor Lepárló</title>
+<link href="/bower_components/perfect-scrollbar/css/perfect-scrollbar.min.css" rel="stylesheet" type="text/css">
 <link href="/assets/main.css" rel="stylesheet" type="text/css">
 <link href='http://fonts.googleapis.com/css?family=Cutive+Mono&amp;subset=latin-ext' rel='stylesheet' type='text/css'>
 <script type="text/javascript" src="/assets/app.js"></script>
@ -168,26 +170,55 @@
                        </li>
                    </ul>
                </div>
-                <div class="page page-5"></div>
-                <div class="page page-6"></div>
+                <div class="page page-5">
+                    <h3>
+                        Vilmoskörte cefrézésének technológiája
+                    </h3>
+                    <p>
+                        A spontán erjedés természetes mikrobiológiai folyamata egyszerűen képtelen minőségi pálinka alapanyagot létrehozni. Olyan gyümölcserjesztéses technológiát kell alkalmaznunk, mintha egy képzeletbeli gyümölcsbor versenyen indulnánk, ahol a cefre levéből kivett mintával meg tudnánk nyerni ezt a versenyt. Ilyen megközelítésből már nem is olyan egyszerű a feladat, főleg ha figyelembe vesszük, hogy a borászok is több generáció óta tanulják mesterségüket. Az általam javasolt cefrekészítés is csak egy megoldás, a számtalan lehetőség közül. Fontosnak tartom, hogy egy pálinkával történő „találkozás" első pillanataiban, a fajtára jellemző illatok egyértelműen felismerhetőek legyenek.  Aminek jó az illata, az általában finom is. Az illatok olyan érzékszervi többlet élményt nyújtanak, ami a prémium minőség elengedhetetlen feltétele.  A fajtajelleget előtérbe helyező illatokért azok a fajélesztők felelnek, amelyek sok észtert állítanak elő. A másik nem kevésbé fontos elvárás pedig a telt, gyümölcsös aroma. Az ízekért az enzimek felelnek. Szakszerűen, a higiéniai követelményeknek eleget téve és a jól kiválasztott cefrekezelő anyagoknak köszönhetően, egy kirobbanóan gyümölcsös illatú és aromájú prémium minőségű pálinka lesz fáradságunk jutalma. Az általános cefrekészítés technológiáján túl, a táblázatban konkrét, a kereskedelmi forgalomban kapható borászati segédanyagok vannak beírva, megkönnyítve evvel a leendő cefrekészítők dolgát. A technológia elsősorban az almatermésű (körte) cefrékhez lett összeállítva, bár véleményem szerint a többi gyümölcsfajtánál is jól használható. Olyan evidens dolgokra, mint válogatás, mosás, darálás és cefre ph értékének beállítása, nem tértem ki. Ha mind ezzel megvagyunk, akkor a táblázatban szereplő segédanyagokból szerezzünk be egy-egy fajtát. Mindegyik típus kombinálható az összes többivel, mert összetételük szempontjából ezek fajtánként közel azonosak. Természetesen még árulnak hasonló termékeket, az itt felsoroltak is csak példák, illetve a választást megkönnyítő javaslatok. Nekem is megvan a saját kombinációm, de azt leírni értelmetlen lenne, mivel pont az a lényeg, hogy mindenki a saját receptje szerint készíthesse el pálinkáját. Az anyagok felhasználása a táblázatban szereplő számozott sorrendben történik. Szívesen fogadom az esetleges észrevételeket vagy tapasztalatokat, hogy azokat másokkal is megoszthassam.
+                    </p>
+                        Sok sikert!
+                    </p>
+                    <p>
+                        <a href="https://docs.google.com/spreadsheets/d/1WB976VjSz87uhC9MqPTAnU_w95mv3c8Gvul3So6ty4A/?usp=sharing" target="_blank">Kattintson ide az új ablakba nyitáshoz</a>
+                    </p>
+                </div>
+                <div class="page page-6">
+                    <h1>
+                        Prédikátor lepárló
+                    </h1>
+                    <h3>
+                        Hámori Gábor<br>
+                        Prédikátor lepárló gyártó &amp; forgalmazó
+                    </h3>
+                    <h3>
+                        Telefon: 06 20 / 299 52 90<br>
+                        E-mail: <a href="mailto:hamorig@invitel.hu?subject=Prédikátor%20lepárló">hamorig@invitel.hu</a><br>
+                        Székhely/Telephely: 2310 Szigetszentmiklós, Csépi u. 5752/11<br>
+                        Adószám: 66156985233
+                    </h3>
+                    <h3>
+                        Kis főzdék megkeresését is szívesen veszem, egyedi igények alapján történő, innovatív berendezések gyártásával kapcsolatban.
+                    </h3>
+                </div>
            </div>

            <div class="content-right-wrapper">
                <audio id="beep-three" preload="auto">
-                    <source src="song/earcing.mp3" controls=""/>
+                    <source src="/song/zap.mp3" controls=""/>
                    Your browser isn't invited for super fun time.
                </audio>
                <ul id="menu-chooser">
                    <li data-menuid="1">
                        <div class="lamp">
-                            <img src="/images/lampa_inactive.png" data-location="/">
+                            <img src="/images/lampa_active.png" data-location="/">
                        </div>
                        <div class="menubg active">Főoldal</div>
                        <div class="gomb active"></div>
                    </li>
                    <li data-menuid="2">
                        <div class="lamp">
-                            <img src="/images/lampa_active.png" data-location="/asd.html">
+                            <img src="/images/lampa_inactive.png" data-location="/asd.html">
                        </div>
                        <div class="menubg">Ismertető</div>
                        <div class="gomb"></div>