tape viewer update

assets/style/home.scss

@@ -9,28 +9,17 @@
   }
 }
 
+.page.page-home{
+  width: 90%;
+  margin: 0 auto;
+}
+
 .main-block {
-  width: 100%;
-  margin-top: 5px;
-
-  .telephone {
-    font-size: 1.25em;
-    margin-left: 30px;
-  }
-
   h1 {
     font-size: 18pt;
     text-align: center;
     font-weight: normal;
-    margin: 1em 0 0;
+    margin: 1.2em 0 0;
     padding: 0;
   }
 }
-
-@media screen and (max-device-width: 500px) {
-  .main-block {
-    .telephone {
-      display: none;
-    }
-  }
-}

assets/style/tape-viewer.scss

@@ -1,5 +1,5 @@
 .tape-block{
-  width: 70%;
+  width: 60%;
   max-width: 1000px;
 
   margin: 2em auto;
@@ -11,7 +11,7 @@
   }
 }
 
-.tape-block-content{
+.tape-block__body{
   position: relative;
   width: 100%;
 
@@ -53,7 +53,7 @@
     margin: 1.5em auto;
   }
 
-  .tape-block-content {
+  .tape-block__body {
     .tape {
       width: 62px;
       height: 62px;

client/pages/home.js

@@ -3,27 +3,36 @@
  */
 
 module.exports = function (app) {
-    app.controller("HomePageController", function ($scope, config) {
+    app.controller('HomePageController', function ($scope, config) {
         var fotorama;
 
-        $scope.pageClass = "page-home";
+        $scope.pageClass = 'page-home';
 
         var $tape = $('.tape-block');
-        var $fotorama = $('.fotorama');
+        var $fotorama = $tape.find('.tape-block__content');
 
         $tape.addClass('simplified');
         $fotorama.on('fotorama:ready', function () {
             $tape.removeClass('simplified');
             fotorama.setOptions({
-                nav: 'dots'
+                nav: 'dots',
+                transition: 'crossfade',
+                autoplay: '6000',
+                arrows: 'false',
+                width: '100%',
+                fit: 'cover',
+                loop: 'true'
             });
         });
 
         fotorama = $fotorama.fotorama().data('fotorama');
-        fotorama.load([
-            {img: 'http://static.shburg.org/art/img/cat1.jpg'},
-            {img: 'http://static.shburg.org/art/img/cat2.jpg'},
-            {img: 'http://static.shburg.org/art/img/cat3.jpg'}
-        ]);
+
+        setTimeout(function(){
+            fotorama.load([
+                {img: 'http://static.shburg.org/art/img/cat1.jpg'},
+                {img: 'http://static.shburg.org/art/img/cat2.jpg'},
+                {img: 'http://static.shburg.org/art/img/cat3.jpg'}
+            ]);
+        }, 100);
     });
 };

templates/views/home.html

@@ -1,36 +1,28 @@
 <div class="main-block">
     <!--<div>-->
-        <!--&lt;!&ndash;<a href="tel://{{telephone}}"></a>&ndash;&gt;-->
-        <!--<span class="telephone">{{contact.telephone}}</span>-->
+    <!--&lt;!&ndash;<a href="tel://{{telephone}}"></a>&ndash;&gt;-->
+    <!--<span class="telephone">{{contact.telephone}}</span>-->
 
-        <!--&lt;!&ndash;<ul class="submenu">&ndash;&gt;-->
-            <!--&lt;!&ndash;<li><a href="/team#director">директор</a><p>М. Г. Тимашева</p></li>&ndash;&gt;-->
-            <!--&lt;!&ndash;<li><a href="/enter">поступление</a></li>&ndash;&gt;-->
-            <!--&lt;!&ndash;<li><a href="/contacts">контактная информация</a></li>&ndash;&gt;-->
-            <!--&lt;!&ndash;<li><a href="/awards">награды</a></li>&ndash;&gt;-->
-        <!--&lt;!&ndash;</ul>&ndash;&gt;-->
+    <!--&lt;!&ndash;<ul class="submenu">&ndash;&gt;-->
+    <!--&lt;!&ndash;<li><a href="/team#director">директор</a><p>М. Г. Тимашева</p></li>&ndash;&gt;-->
+    <!--&lt;!&ndash;<li><a href="/enter">поступление</a></li>&ndash;&gt;-->
+    <!--&lt;!&ndash;<li><a href="/contacts">контактная информация</a></li>&ndash;&gt;-->
+    <!--&lt;!&ndash;<li><a href="/awards">награды</a></li>&ndash;&gt;-->
+    <!--&lt;!&ndash;</ul>&ndash;&gt;-->
     <!--</div>-->
 
     <h1>Шлиссельбургская детская художественная&nbsp;школа</h1>
 </div>
 
 <div class="tape-block">
-    <div class="tape-block-content">
+    <div class="tape-block__body">
         <div class="tape tape-tl"></div>
         <div class="tape tape-tr"></div>
         <div class="tape tape-bl"></div>
         <div class="tape tape-br"></div>
 
-        <div class="fotorama"
-             data-transition="crossfade"
-             data-autoplay="6000"
-             data-nav="false"
-             data-arrows="false"
-             data-width="100%"
-             data-fit="cover"
-             data-loop="true">
-        </div>
+        <div class="tape-block__content"></div>
     </div>
 </div>
 
-<timeline></timeline>
+<timeline></timeline>