Added first implementation for Helpdesk view

2018-08-04 21:56:10 +03:00
parent 7a5726aa4c
commit 984e2c4253
15 changed files with 334 additions and 9 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
 _site
 .sass-cache
 .jekyll-metadata
+.idea
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -19,6 +19,11 @@
 <link rel="stylesheet" href="{{ "/assets/main.css" | relative_url }}?{{ site.time | date: "%s" }}">
 <link rel="canonical" href="{{ page.url | replace:'index.html','' | absolute_url }}">

+<!-- leaflet js styles for map support -->
+<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css"
+      integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
+      crossorigin=""/>
+
 {% if jekyll.environment == 'production' and site.google_analytics %}
 {% include google-analytics.html %}
 {% endif %}
--- a/_includes/scripts.html
+++ b/_includes/scripts.html
@@ -0,0 +1,43 @@
+<!--carousel support-->
+<script src="https://cdn.jsdelivr.net/npm/siema@1.5.1/dist/siema.min.js"></script>
+<script>
+    const mySiema = new Siema({
+        selector: '.siema',
+        duration: 500,
+        easing: 'ease-out',
+        perPage: 1,
+        startIndex: 0,
+        draggable: true,
+        multipleDrag: true,
+        threshold: 20,
+        loop: true,
+    });
+    // listen for keydown event
+    setInterval(() => mySiema.next(), 2500)
+</script>
+
+<!-- facebook widget thing support -->
+<div id="fb-root"></div>
+<script>(function(d, s, id) {
+    var js, fjs = d.getElementsByTagName(s)[0];
+    if (d.getElementById(id)) return;
+    js = d.createElement(s); js.id = id;
+    js.src = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.1';
+    fjs.parentNode.insertBefore(js, fjs);
+}(document, 'script', 'facebook-jssdk'));</script>
+
+<!-- leafletjs map styles -->
+<script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js"
+        integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q=="
+        crossorigin=""></script>
+
+<script>
+    var map = L.map('map').setView([59.396342, 24.668718], 19);
+
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+    }).addTo(map);
+
+    L.marker([59.396342, 24.668718]).addTo(map)
+        .openPopup();
+</script>
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -3,4 +3,5 @@
 {% include header.html %}
 {{ content }}
 {% include footer.html %}
+{% include scripts.html %}
 </html>
--- a/_sass/helpdesk.scss
+++ b/_sass/helpdesk.scss
@@ -0,0 +1,123 @@
+.page {
+  display        : flex;
+  flex-direction : column;
+  flex           : 1;
+  width          : 85vw;
+  max-width      : 1200px;
+  margin         : 0 auto;
+}
+
+.page * {
+  margin-top    : 5px;
+  margin-bottom : 5px;
+}
+
+#helpdesk-banner {
+  //background-image : url("helpdesk-a-bg.jpg");
+  background      : black;
+  display         : flex;
+  flex-direction  : row;
+  flex            : 1;
+  justify-content : center;
+  align-items     : center;
+  text-align      : center;
+
+  h3, h5 {
+    color : white;
+  }
+
+  .emphasis-text-bold {
+    font-weight : bold;
+  }
+
+  .emphasis-text-color {
+    color : $color-primary;
+  }
+
+  #helpdesk-banner-logo {
+    display : block;
+    width   : 100%;
+    height  : auto;
+  }
+
+  #banner-image, #banner-text {
+    width : 50%;
+  }
+
+  #banner-image {
+    padding : 25px;
+  }
+
+}
+
+#helpdesk-location-mapstuff {
+  display         : flex;
+  align-items     : center;
+  justify-content : center;
+
+  .siema, #map {
+    width      : 50%;
+    max-height : 300px;
+    margin     : 20px;
+  }
+  #map {
+    height     : 60vh;
+    max-height : 300px;
+  }
+}
+
+#helpdesk-contacts {
+  display        : flex;
+  flex-direction : row;
+
+  .subtext {
+    opacity : 0.7;
+  }
+
+  #helpdesk-opening-times, #helpdesk-contactssss {
+    flex    : 1;
+    padding : 15px;
+  }
+}
+
+@media (max-width : 900px) {
+  #helpdesk-banner {
+    flex-direction : column;
+
+    #banner-image, #banner-text {
+      width : 100%;
+    }
+  }
+
+  table {
+    tr:first-child {
+      max-width : 30%;
+
+    }
+    td, th {
+      padding : 0.5rem 0.5rem;
+    }
+  }
+
+  #helpdesk-location-mapstuff {
+    flex-direction : column;
+    .siema, #map {
+      width : 100%;
+    }
+  }
+
+  #helpdesk-contacts {
+    flex-direction : column;
+  }
+}
+
+table {
+  th td {
+    font-weight : bold;
+  }
+  tr:first-child {
+    max-width : 40%;
+  }
+}
+
+
--- a/assets/carousel-images/1.jpg
+++ b/assets/carousel-images/1.jpg
--- a/assets/carousel-images/2.jpg
+++ b/assets/carousel-images/2.jpg
--- a/assets/carousel-images/3.jpg
+++ b/assets/carousel-images/3.jpg
--- a/assets/carousel-images/4.jpg
+++ b/assets/carousel-images/4.jpg
--- a/assets/carousel-images/5.jpg
+++ b/assets/carousel-images/5.jpg
--- a/assets/helpdesk-a-bg.jpg
+++ b/assets/helpdesk-a-bg.jpg
--- a/assets/helpdesk-on-black.png
+++ b/assets/helpdesk-on-black.png
--- a/assets/main.scss
+++ b/assets/main.scss
@@ -25,3 +25,4 @@ h4 {
@import 'home';
@import 'mentors';
@import 'contact';
+@import 'helpdesk';
--- a/helpdesk.html
+++ b/helpdesk.html
@@ -0,0 +1,160 @@
+---
+layout: default
+---
+<div class="page">
+
+  <div id="helpdesk-banner">
+    <div id="banner-image">
+      <img id="helpdesk-banner-logo" src="{{ "/assets/helpdesk-on-black.png " | relative_url }}">
+    </div>
+    <div id="banner-text">
+      <h3>
+        Anname sinu arvutile <span class="emphasis-text-color">uue elu</span>!
+      </h3>
+      <h5>
+        <span class="emphasis-text-bold">HELPDESK</span> lahendab probleemid seoses arvuti ja muu elektroonikaga.
+      </h5>
+    </div>
+
+  </div>
+
+  <div id="helpdesk-description">
+    <h3>Mis on HELPDESK?</h3>
+    <p>
+      HELPDESK on MTÜ Lapikute poolt pakutav arvutiabiteenus. Teenus on suunatud tudengitele, õppejõududele ning
+      kõikidele huvilistele ka väljaspool TTÜ-d. Meie meeskond koosneb kogenud ja nutikatest TTÜ IT-tudengitest.
+    </p>
+  </div>
+
+  <div id="helpdesk-services">
+    <h3>Mis teenuseid osutame?</h3>
+    <ul>
+      <li>Arvuti riistvara diagnostika ja remont</li>
+      <li>Arvuti riistvara hooldus</li>
+      <li>Tarkvara diagnostika ja seadistamine</li>
+      <li>Tarkvara paigaldamine</li>
+      <li>Muu elektroonika parandamine</li>
+    </ul>
+  </div>
+
+  <div id="helpdesk-pricing">
+    <h3>Hinnakiri</h3>
+    <table>
+      <thead>
+      <tr>
+        <td>Teenus</td>
+        <td>Kogus</td>
+        <td>Hind</td>
+      </tr>
+      </thead>
+      <tbody>
+      <tr>
+        <td>Arvuti diagnostika</td>
+        <td>15 min</td>
+        <td>tasuta</td>
+      </tr>
+      <tr>
+        <td>Arvuti diagnostika (alates 15 min +)</td>
+        <td>tk</td>
+        <td>20 €</td>
+      </tr>
+      <tr>
+        <td>Detaili paigaldamine arvutisse</td>
+        <td>tk</td>
+        <td>10-15 €</td>
+      </tr>
+      <tr>
+        <td>Sülearvuti tolmupuhastus + termopasta</td>
+        <td>tk</td>
+        <td>10-20 €</td>
+      </tr>
+      <tr>
+        <td>Sülearvuti ekraani paigaldus</td>
+        <td>tk</td>
+        <td>15 €</td>
+      </tr>
+      <tr>
+        <td>Arvuti komplekteerimine</td>
+        <td>tk</td>
+        <td>20 €</td>
+      </tr>
+      <tr>
+        <td>Tarkvara hooldustöö ja paigaldamine</td>
+        <td>tk</td>
+        <td>10-15 €</td>
+      </tr>
+      <tr>
+        <td>Muu elektroonika parandus</td>
+        <td>tk</td>
+        <td>10-50 €</td>
+      </tr>
+      <tr>
+        <td>Andmete taastamine</td>
+        <td>tk</td>
+        <td>10-30 €</td>
+      </tr>
+      <tr>
+        <td>Nutiseadmete tarkvarahooldus</td>
+        <td>tk</td>
+        <td>15 €</td>
+      </tr>
+      <tr>
+        <td>Operatsioonisüsteemi taaspaigaldus</td>
+        <td>tk</td>
+        <td>15 €</td>
+      </tr>
+      <tr>
+        <td>Nutitelefoni klaasi/display/aku vahetus</td>
+        <td>tk</td>
+        <td>15-30 €</td>
+      </tr>
+      </tbody>
+    </table>
+    <p>Jupid tellitakse kliendi enda poolt või kokkuleppel tehnikuga.</p>
+    <p>Vajadusel tuleme üliõpilasküla ja Tehnopoli piires kohale.</p>
+    <p>Oma tudengisõbralike hindade ja personaalse lähenemisega pakume teenust, milles ei pea pettuma!</p>
+  </div>
+
+  <div id="helpdesk-location">
+    <div>
+      <h3>Asukoht</h3>
+      <h4>Akadeemia tee 5 ühiselamu</h4>
+      <h4>ruum 008A</h4>
+    </div>
+    <div id="helpdesk-location-mapstuff">
+      <div id="map"></div>
+      <div class="siema">
+        <img src="assets/carousel-images/1.jpg">
+        <img src="assets/carousel-images/2.jpg">
+        <img src="assets/carousel-images/3.jpg">
+        <img src="assets/carousel-images/4.jpg">
+        <img src="assets/carousel-images/5.jpg">
+      </div>
+    </div>
+  </div>
+
+  <div id="helpdesk-contacts">
+
+    <div id="helpdesk-opening-times">
+      <h3>Lahtiolekuajad:</h3>
+      <h5>E – R 12-17*</h5>
+      <h6 class="subtext">* Tegu on ajaperioodiga, mil meid on kõige tõenäolisem tabada. Siiski ei saa garanteerida
+        kohalolekut.</h6>
+    </div>
+
+    <div id="helpdesk-contactssss">
+      <h3>Kontakt</h3>
+      <div>
+        <h4>E-mail: <a href="mailto:helpdesk@lapikud.ee">helpdesk@lapikud.ee</a></h4>
+        <h4>Telefon: <a href="tel:+37258160799">+372 581 607 99</a></h4>
+      </div>
+    </div>
+
+    <div class="fb-page" data-href="https://www.facebook.com/lapikudhelpdesk" data-width="300" data-small-header="false"
+         data-adapt-container-width="false" data-hide-cover="false" data-show-facepile="false">
+      <blockquote cite="https://www.facebook.com/lapikudhelpdesk" class="fb-xfbml-parse-ignore"><a
+          href="https://www.facebook.com/lapikudhelpdesk">Lapikud Helpdesk</a></blockquote>
+    </div>
+
+  </div>
+</div>
--- a/helpdesk.md
+++ b/helpdesk.md
@@ -1,9 +0,0 @@
---
-layout: post
---
-
-# Lapikud Helpdesk
-
-## We do awesome job!
-
-[Contact helpdesk](https://www.facebook.com/lapikudhelpdesk)