layout update; mobile version; data update;

assets/style/docs.scss

@@ -15,15 +15,9 @@
 }
 
 .docblock{
-	// width:100%;
 	margin-bottom: 40px;
-
 	text-align: center;
 
-	// .docs{
-	// 	text-align: left;
-	// }
-
 	h2{
 		margin-left: 50px;
 		text-align: left;
@@ -61,4 +55,14 @@
 		padding: 0;
 		display: block;
 	}
-}
+}
+
+@media screen and (max-device-width: 400px){
+  .doc{
+	margin: 30px 35px;
+
+	img{
+	  max-width: 250px;
+	}
+  }
+}

assets/style/footer.scss

@@ -2,6 +2,8 @@ footer{
   position: relative;
   background-color: black;
   color: #ffffff;
+  overflow-x: scroll;
+  margin: 0;
 
   &:before{
     content: '';
@@ -14,7 +16,7 @@ footer{
 
   .info-block{
     display: flex;
-    margin: 0 20px;
+    margin: 0;
 
     & > div{
       margin: 0 30px 0 10px;
@@ -28,4 +30,27 @@ footer{
   ul{
     list-style: none;
   }
+}
+
+.footer-content{
+  min-width: 500px;
+}
+
+@media screen and (max-device-width: 500px){
+  footer{
+    font-size: 8pt;
+    
+    .info-block{
+      display: block;
+      margin: 0;
+
+      & > div{
+        margin: 0 30px 0 10px;
+      }
+
+      p{
+        margin: 0;
+      }
+    }
+  }
 }

assets/style/home.scss

@@ -8,3 +8,29 @@
     animation: scaleUp 0.3s both ease-in;
   }
 }
+
+.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: 0;
+    padding: 0;
+  }
+}
+
+@media screen and (max-device-width: 500px) {
+  .main-block {
+    .telephone {
+      display: none;
+    }
+  }
+}

assets/style/main.scss

@@ -2,23 +2,8 @@ body {
 	font-family: "PT Sans", Arial, sans-serif;
 	margin: 0;
 	padding: 0;
-}
 
-.main {
-  margin-top: 5px;
-
-  .telephone {
-	font-size: 1.25em;
-	margin-left: 30px;
-  }
-
-  h1 {
-    font-size: 20pt;
-    text-align: center;
-    font-weight: normal;
-    margin: 0;
-    padding: 0;
-  }
+    min-width: 320px;
 }
 
 a {

assets/style/menu.scss

@@ -8,7 +8,7 @@
   font-size: 13pt;
 
   ul {
-    margin: 0 0 0 20px;
+    margin: 0 0 0 10px;
 
     li {
       display: inline-block;
@@ -62,3 +62,19 @@
   }
 }
 
+@media screen and (max-device-width: 500px){
+  .menu {
+    font-size: 10pt;
+
+    ul {
+      margin: 0 0 0 5px;
+      padding: 0 0 0 0;
+
+      li {
+        display: inline-block;
+        padding: 3px 3px 10px 3px;
+        margin: 0 4px 5px 0;
+      }
+    }
+  }
+}

assets/style/schedule.scss

@@ -15,6 +15,10 @@
     padding-bottom: 50px;
     text-align: center;
 
+    .schedule-block{
+        overflow-x: scroll;
+    }
+
     table{
         position: relative;
         margin: 30px auto 0 auto;
@@ -196,4 +200,12 @@
         display: block;
         margin-top: 90px;
     }
-}
+}
+
+@media screen and (max-device-width: 400px){
+    .schedule{
+        thead.fix{
+            display: none;
+        }
+    }
+}

assets/style/tape-viewer.scss

@@ -40,4 +40,48 @@
     right: -25px;
     background-image: url(/graphics/tape-rb.png);
   }
+}
+
+@media screen and (max-device-width: 400px) {
+  .tape-block {
+    width: 70%;
+    max-width: 250px;
+    min-width: 200px;
+
+    margin: 50px auto 100px;
+  }
+
+  .tape-block-content {
+    .tape {
+      width: 62px;
+      height: 62px;
+      position: absolute;
+      z-index: 10;
+    }
+
+    .tape-tl {
+      top: -20px;
+      left: -20px;
+      background-image: url(/graphics/m-tape-tl.png);
+      background-size: 100%;
+    }
+
+    .tape-tr {
+      top: -20px;
+      right: -20px;
+      background-image: url(/graphics/m-tape-tr.png);
+    }
+
+    .tape-bl {
+      bottom: 10px;
+      left: -20px;
+      background-image: url(/graphics/m-tape-bl.png);
+    }
+
+    .tape-br {
+      bottom: 10px;
+      right: -20px;
+      background-image: url(/graphics/m-tape-br.png);
+    }
+  }
 }

assets/style/timeline.scss

@@ -1,5 +1,5 @@
 .timeline{
-  min-width: 500px;
+  min-width: 400px;
   position: relative;
   margin: 0 0 50px;
 
@@ -100,4 +100,71 @@
       background: url(/graphics/timeline-arrow-right.png) no-repeat;
     }
   }
+}
+
+@media screen and (max-device-width: 400px) {
+  .timeline {
+    min-width: 0;
+    position: relative;
+    margin: 0 0 50px;
+
+    .head{
+      margin: 0;
+      padding: 0;
+    }
+
+    .body{
+      margin: 0 0 40px;
+      padding: 0;
+    }
+
+    .body p{
+      text-align: left;
+      margin: 0 0 2px;
+      padding: 0;
+    }
+
+    .post {
+      position: relative;
+      display: flex;
+
+      .head, .body {
+        position: relative;
+        width: 90%;
+        box-sizing: border-box;
+      }
+
+      &.left {
+        display: block;
+
+        .body:after, .head:after {
+          background: none;
+        }
+      }
+
+      &.right {
+        display: block;
+
+        .body:after, .head:after {
+          background: none;
+        }
+      }
+
+      &.left .head {
+        text-align: left;
+      }
+
+      &.right .head {
+        text-align: left;
+      }
+
+      .head {
+        padding: 5px 20px;
+      }
+
+      .body {
+        padding: 0 20px;
+      }
+    }
+  }
 }

client/app.js

@@ -49,11 +49,21 @@ app.config(function ($locationProvider, $routeProvider) {
     });
 });
 
-app.run(function($location, $rootScope, $http) {
+app.run(function($location, $rootScope, $http, config) {
     $rootScope.$on("$routeChangeSuccess", function (event, current) {
         $rootScope.title = current["$$route"].title;
     });
 
+    $rootScope.contact = {
+        address: config.address,
+        telephone: config.telephone,
+        email: config.email
+    };
+
+    $rootScope.now = {
+        year: new Date().getFullYear()
+    };
+
     $http.defaults.headers.common["Accept"] = "application/json";
 });
 

client/data.js

@@ -14,6 +14,8 @@ angular.module("hudozhka.data", [])
     })
     .service("config", function(){
         return {
-            telephone: "8 (81362) 76-312"
+            telephone: "8 (81362) 76-312",
+            email: "hudozka@gmail.com",
+            address: "г. Шлиссельбург, ул. 18-го января, д. 3"
         };
     });

client/pages/home.js

@@ -5,7 +5,6 @@
 module.exports = function (app) {
     app.controller("HomePageController", function ($scope, config) {
         $scope.pageClass = "page-home";
-        $scope.telephone = config.telephone;
 
         $(".fotorama").fotorama();
     });

templates/index.html

@@ -4,6 +4,7 @@
     <base href="/">
     <meta name="fragment" content="!">
     <meta name="google-site-verification" content="8BxOTw-Q02DS2KAdcGcnIMwiPZ58DVB18XpOfRibCcg">
+    <meta name="viewport" content="width=device-width, maximum-scale=1.0" />
 
     <title ng-bind="title">ДШХ Шлиссельбурга</title>
 
@@ -48,44 +49,52 @@
             <span ng-hide="isValid(item)">{{item.text}}</span>
             <a href="{{item.url}}" ng-show="isValid(item)">{{item.text}}</a>
         </li>
-        <a href="{{vkgroup}}" class="vk"><img src="/graphics/icon.vk.png"></a>
+        <!--<a href="{{vkgroup}}" class="vk"><img src="/graphics/icon.vk.png"></a>-->
     </ul>
 </div>
 
 <div class="page {{pageClass}}" ng-view></div>
 
 <footer>
-    <div class="info-block">
-        <div>
-            <h4>Ссылки на образовательные сайты</h4>
-            <ul>
-                <li><a href="http://минобрнауки.рф">минобрнауки.рф</a> — Министерство образования и науки Российской Федерации</li>
-                <li><a href="http://edu.ru">edu.ru</a> — Федеральный сайт «Российское образование»</li>
-                <li><a href="http://window.edu.ru">window.edu.ru</a> — Единое окно доступа к образовательным ресурсам</li>
-                <li><a href="http://school-collection.edu.ru">school-collection.edu.ru</a> — Единая коллекция цифровых образовательных ресурсов</li>
-                <li><a href="http://fcior.edu.ru">fcior.edu.ru</a> — Федеральный центр информационных образовательных ресурсов</li>
-            </ul>
-            <ul>
-                <li><a href="http://dkhshmga.ru">dkhshmga.ru</a> — Художественная школа Мги</li>
-                <li><a href="http://kirovskdmh.ucoz.ru">kirovskdmh.ucoz.ru</a> — Музыкальная школа Кировска</li>
-            </ul>
+    <div class="footer-content">
+        <div class="info-block">
+            <div>
+                <h4>Ссылки на образовательные сайты</h4>
+                <ul>
+                    <li><a href="http://минобрнауки.рф">минобрнауки.рф</a> — Министерство образования и науки Российской Федерации</li>
+                    <li><a href="http://edu.ru">edu.ru</a> — Федеральный сайт «Российское образование»</li>
+                    <li><a href="http://window.edu.ru">window.edu.ru</a> — Единое окно доступа к образовательным ресурсам</li>
+                    <li><a href="http://school-collection.edu.ru">school-collection.edu.ru</a> — Единая коллекция цифровых образовательных ресурсов</li>
+                    <li><a href="http://fcior.edu.ru">fcior.edu.ru</a> — Федеральный центр информационных образовательных ресурсов</li>
+                </ul>
+                <ul>
+                    <li><a href="http://dkhshmga.ru">dkhshmga.ru</a> — Художественная школа Мги</li>
+                    <li><a href="http://kirovskdmh.ucoz.ru">kirovskdmh.ucoz.ru</a> — Музыкальная школа Кировска</li>
+                </ul>
+            </div>
+
+            <div>
+                <h4>Документы</h4>
+                <ul>
+                    <li><a target="_blank" href="/document/edu-license">Лицензия на осуществление образовательной деятельности</a></li>
+                    <li><a target="_blank" href="/document/gov-certificate">Свидетельство о государственной регистрации права</a></li>
+                    <li><a target="_blank" href="/document/EGRYL1">Свидетельство о внесении в «ЕГРЮЛ»</a></li>
+                    <li><a target="_blank" href="/document/VAT">ИНН</a></li>
+                    <li><a target="_blank" href="/document/statue-2013">Устав школы</a></li>
+                </ul>
+            </div>
         </div>
 
-        <div>
-            <h4>Документы</h4>
-            <ul>
-                <li><a target="_blank" href="/document/edu-license">Лицензия на осуществление образовательной деятельности</a></li>
-                <li><a target="_blank" href="/document/gov-certificate">Свидетельство о государственной регистрации права</a></li>
-                <li><a target="_blank" href="/document/EGRYL1">Свидетельство о внесении в «ЕГРЮЛ»</a></li>
-                <li><a target="_blank" href="/document/VAT">ИНН</a></li>
-                <li><a target="_blank" href="/document/statue-2013">Устав школы</a></li>
-            </ul>
+        <div class="info-block">
+            <div>
+                <p>© 2014...{{now.year}}</p>
+                <p>Художественная школа Шлиссельбурга</p>
+                <p>Адрес: {{contact.address}}</p>
+                <p>Телефон: {{contact.telephone}}</p>
+                <p>Почта: <a href="mailto:{{contact.email}}">{{contact.email}}</a></p>
+            </div>
         </div>
     </div>
-
-    <div class="info-block">
-        <p>Художественная школа Шлиссельбурга, 2014 год</p>
-    </div>
 </footer>
 </body>
 </html>

templates/views/home.html

@@ -1,39 +1,38 @@
-<div>
-    <div class="main">
-        <div class="block">
-            <!--<a href="tel://{{telephone}}"></a>-->
-            <span class="telephone">{{telephone}}</span>
+<div class="main-block">
+    <div>
+        <!--&lt;!&ndash;<a href="tel://{{telephone}}"></a>&ndash;&gt;-->
+        <span class="telephone">{{contact.telephone}}</span>
 
-            <!--<ul class="submenu">-->
-                <!--<li><a href="/team#director">директор</a><p>М. Г. Тимашева</p></li>-->
-                <!--<li><a href="/enter">поступление</a></li>-->
-                <!--<li><a href="/contacts">контактная информация</a></li>-->
-                <!--<li><a href="/awards">награды</a></li>-->
-            <!--</ul>-->
-        </div>
-
-        <h1>«Шлиссельбургская детская художественная школа»</h1>
+        <!--&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>
 
-    <div class="tape-block">
-        <div class="tape-block-content">
-            <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-arrows="false"
-                 data-width="100%"
-                 data-fit="cover"
-                 data-loop="true">
-                <img src="http://static.shlisselburg.org/art/graphics/sample2.jpg" alt="">
-                <img src="http://static.shlisselburg.org/art/graphics/sample4.jpg" alt="">
-                <img src="http://static.shlisselburg.org/art/graphics/sample5.jpg" alt="">
-            </div>
+    <h1>Шлиссельбургская детская художественная&nbsp;школа</h1>
+</div>
+
+<div class="tape-block">
+    <div class="tape-block-content">
+        <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-arrows="false"
+             data-width="100%"
+             data-fit="cover"
+             data-loop="true">
+            <img src="http://static.shburg.org/art/img/cat1.jpg" alt="">
+            <img src="http://static.shburg.org/art/img/cat2.jpg" alt="">
+            <img src="http://static.shburg.org/art/img/cat3.jpg" alt="">
         </div>
     </div>
+</div>
 
-    <timeline></timeline>
-</div>
+<timeline></timeline>

templates/views/schedule.html

@@ -1,49 +1,61 @@
-<div class="schedule"  ng-controller="ScheduleController">
-<p> Расписание {{sem}} семестра {{year}} года</p>
-<table>
-<thead class="">
-<tr>
-    <th class="group">Гр.</th>
-    <th ng-class="{current: isToday(0)}">
-        <p class="day">Понедельник</p>
-        <p class="date">{{weekDay(0)}}</p>
-    </th>
-    <th ng-class="{current: isToday(1)}">
-        <p class="day">Вторник</p>
-        <p class="date">{{weekDay(1)}}</p>
-    </th>
-    <th ng-class="{current: isToday(2)}">
-        <p class="day">Среда</p>
-        <p class="date">{{weekDay(2)}}</p>
-    </th>
-    <th ng-class="{current: isToday(3)}">
-        <p class="day">Четверг</p>
-        <p class="date">{{weekDay(3)}}</p>
-    </th>
-    <th ng-class="{current: isToday(4)}">
-        <p class="day">Пятница</p>
-        <p class="date">{{weekDay(4)}}</p>
-    </th>
-    <th ng-class="{current: isToday(5)}">
-        <p class="day">Суббота</p>
-        <p class="date">{{weekDay(5)}}</p>
-    </th>
-</tr>
-</thead>
-<tbody class="">
-<tr ng-repeat="group in schedule">
-    <td class="group">
-        <p class="name">{{group.name}}</p>
-        <p class="time">{{group.time}}</p>
-    </td>
+<div class="schedule" ng-controller="ScheduleController">
+    <p> Расписание {{sem}} семестра {{year}} года</p>
+    <div class="schedule-block">
+        <table>
+            <thead class="">
+            <tr>
+                <th class="group">Гр.</th>
+                <th ng-class="{current: isToday(0)}">
+                    <p class="day">Понедельник</p>
 
-    <td ng-repeat="day in group.days track by $index" ng-class="{current: isToday($index)}">
-        <p class="lesson"><a href="">{{day.lesson}}</a></p>
-        <p class="teacher"><a href="">{{day.teacher}}</a></p>
-        <p class="time">{{day.time[0]}}</p>
-        <p class="time">{{day.time[1]}}</p>
-    </td>
-</tr>
-</tbody>
-</table>
+                    <p class="date">{{weekDay(0)}}</p>
+                </th>
+                <th ng-class="{current: isToday(1)}">
+                    <p class="day">Вторник</p>
+
+                    <p class="date">{{weekDay(1)}}</p>
+                </th>
+                <th ng-class="{current: isToday(2)}">
+                    <p class="day">Среда</p>
+
+                    <p class="date">{{weekDay(2)}}</p>
+                </th>
+                <th ng-class="{current: isToday(3)}">
+                    <p class="day">Четверг</p>
+
+                    <p class="date">{{weekDay(3)}}</p>
+                </th>
+                <th ng-class="{current: isToday(4)}">
+                    <p class="day">Пятница</p>
+
+                    <p class="date">{{weekDay(4)}}</p>
+                </th>
+                <th ng-class="{current: isToday(5)}">
+                    <p class="day">Суббота</p>
+
+                    <p class="date">{{weekDay(5)}}</p>
+                </th>
+            </tr>
+            </thead>
+            <tbody class="">
+            <tr ng-repeat="group in schedule">
+                <td class="group">
+                    <p class="name">{{group.name}}</p>
+
+                    <p class="time">{{group.time}}</p>
+                </td>
+
+                <td ng-repeat="day in group.days track by $index" ng-class="{current: isToday($index)}">
+                    <p class="lesson"><a href="">{{day.lesson}}</a></p>
+
+                    <p class="teacher"><a href="">{{day.teacher}}</a></p>
+
+                    <p class="time">{{day.time[0]}}</p>
+
+                    <p class="time">{{day.time[1]}}</p>
+                </td>
+            </tr>
+            </tbody>
+        </table>
+    </div>
 </div>