schedule table improvements

.gitignore

@@ -7,3 +7,4 @@ private*.json
 /node_modules
 /bower_components
 /public
+/build

assets/style/breadcrumbs.scss

@@ -0,0 +1,57 @@
+nav.breadcrumbs{
+  width: 80%;
+  margin: 0 auto;
+  padding: .35em 0 0;
+  color: #bbb;
+
+  a {
+    color: #9990e0;
+  }
+
+  ul{
+    list-style: none;
+
+    li {
+      display: inline-block;
+
+      &:not(:first-child):before{
+        content: '⟶';
+        margin-left: .4em;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 31.25em) {
+  nav.breadcrumbs{
+    width: 100%;
+    margin: 0;
+    font-size: 0.75em;
+
+    ul{
+      li {
+        &:not(:first-child):before{
+          content: '>';
+          margin-left: .2em;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (min-width: 31.25em) and (max-width: 59.99999em){
+  nav.breadcrumbs{
+    width: 100%;
+    margin: 0;
+    font-size: 0.75em;
+
+    ul{
+      li {
+        &:not(:first-child):before{
+          content: '>';
+          margin-left: .2em;
+        }
+      }
+    }
+  }
+}

assets/style/docs.scss

@@ -1,68 +1,40 @@
 .page-docs {
   &.ng-leave {
-	transform-origin: 50% 50%;
+    transform-origin: 50% 50%;
-	animation: rotateOutNewspaper .3s both ease-in;
+    animation: rotateOutNewspaper .3s both ease-in;
   }
 
   &.ng-enter {
-	animation: scaleUp 0.3s both ease-in
+    animation: scaleUp 0.3s both ease-in
   }
 }
 
-.act{
+.documents-block {
-	text-decoration: none;
+  margin: 3em 0 0;
-	border-bottom: 1px dashed #688fff;
+
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  align-items: baseline;
 }
 
-.docblock{
+.doc {
-	margin-bottom: 40px;
+  margin: 0 1.2em 2.5em;
-	text-align: center;
 
-	h2{
+  p {
-		margin-left: 50px;
+    text-align: center;
-		text-align: left;
+  }
-	}
+  img {
-
+    max-width: 100%;
-	.panel{
+  }
-		text-align: left;
-		li{
-			display: inline-block;
-			margin: 0 5px;
-		}
-
-		.select{
-			padding:2px 6px 2px 6px;
-			background-color: #688fff;
-			color: white;
-			border: none;
-		}
-	}
-}
-
-.doc{
-	display: inline-block;
-	margin: 30px 35px;
-
-	img{
-		display: block;
-		margin-left: auto;
-		margin-right: auto;
-		max-width:360px;
-	}
-
-	.docinfo{
-		margin: 0;
-		padding: 0;
-		display: block;
-	}
 }
 
-@media screen and (max-device-width: 400px){
+@media (max-width: 31.25em) {
-  .doc{
+  .documents-block {
-	margin: 30px 35px;
+    margin: 1em 0 0;
+  }
 
-	img{
+  .doc {
-	  max-width: 250px;
+    margin: 0 0 2em;
-	}
   }
 }

assets/style/footer.scss

@@ -1,56 +1,74 @@
-footer{
+footer {
+  color: #e3e3e3;
+  background-color: #151515;
+  font-size: 0.9em;
+  padding: 0 0.5em 0.5em;
   position: relative;
-  background-color: black;
-  color: #ffffff;
-  overflow-x: scroll;
-  margin: 0;
 
-  &:before{
+  &:before {
     content: '';
     position: absolute;
     top: -3px;
+    left: 0;
     width: 100%;
     height: 3px;
+    z-index: 100;
     background-image: url('/graphics/rawline.png');
   }
 
-  .info-block{
+  h4{
-    display: flex;
+    font-size: 1.3em;
-    margin: 0;
+    color: white;
-
+    margin: 0.5em 0 0.7em;
-    & > div{
-      margin: 0 30px 0 10px;
-    }
   }
 
-  a{
+  ul {
-    color: #738cdb;
+    padding: 0 0.5em 0 1em;
-  }
-
-  ul{
     list-style: none;
+
+    li {
+      margin: 0 0 0.5em;
+    }
   }
-}
 
-.footer-content{
+  a {
-  min-width: 500px;
+    padding: 0.15em 0;
-}
+    line-height: 1.5em;
+    color: #738cdb;
+    text-decoration: none;
+    border-bottom: 1px solid #2c3652;
+  }
 
-@media screen and (max-device-width: 500px){
+  .info-block {
-  footer{
+    display: flex;
-    font-size: 8pt;
+    flex-wrap: wrap;
+    justify-content: space-between;
 
-    .info-block{
+    & > div {
-      display: block;
+      box-sizing: border-box;
-      margin: 0;
+      padding: 0 1em;
+    }
+  }
 
-      & > div{
+  .contacts {
-        margin: 0 30px 0 10px;
+    & > div {
-      }
+      padding: 0 1em;
+    }
 
-      p{
+    p {
-        margin: 0;
+      margin: 0.5em 1em;
-      }
+    }
+  }
+
+  .copyright {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    justify-content: space-between;
+
+    span {
+      padding: 1.5em 1em 0.25em;
+      box-sizing: padding-box;
     }
   }
 }

assets/style/gallery.scss

@@ -0,0 +1,184 @@
+.gallery-block {
+  margin: 2em 0 0;
+  display: block;
+}
+
+.gallery-period{
+  margin-bottom: 2em;
+  
+  & > div{
+    margin: 1.5em 0 0;
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    align-items: flex-start;
+  }
+
+  p.period{
+    text-align: center;
+    font-size: 1.5em;
+    font-weight: bold;
+  }
+}
+
+.gallery-album {
+  margin: 0 1em 2em;
+
+  h3{
+    margin: 0 0 0.35em;
+  }
+
+  img {
+    max-width: 100%;
+  }
+}
+
+.album-block {
+  width: 100%;
+  margin: 1em auto 2em;
+
+  h3 {
+    text-align: center;
+    margin: 1.5em 0 1em;
+  }
+
+  .fotorama__nav-wrap {
+    margin: 6em 0 0;
+  }
+
+  .fotorama__stage{
+    overflow: inherit;
+  }
+
+  .fotorama__stage__frame{
+    overflow: inherit;
+  }
+
+  .album {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+
+  .album-info {
+    width: 80%;
+    margin: 0 0 3em;
+  }
+
+  .album-info p {
+    margin: 0 0 .5em;
+  }
+
+  .album-item {
+    width: 80%;
+    box-sizing: border-box;
+    margin: 0 0 4em;
+    position: relative;
+    background-color: white;
+    padding: 6em;
+    box-shadow: 0 4px 14px -10px rgba(0,0,0, .85);
+
+    &.vertical {
+      width: 47%;
+      min-width: 30em;
+      max-width: 35em;
+    }
+
+    img{
+      width: 100%;
+      box-sizing: border-box;
+      border: .25em solid #eee;
+      border-top-color: #bbb;
+      border-left-color: #ddd;
+    }
+  }
+
+  .product-info{
+    text-align: center;
+    position: absolute;
+    width: 100%;
+    left: 0;
+    bottom: 1em;
+
+    & > div {
+      display: inline-block;
+      padding: .5em 1em;
+      background-color: white;
+      border: 1px solid #f5f5f5;
+      border-radius: .25em;
+      box-shadow: 0 5p/x 4px -4px rgba(0,0,0, .5);
+    }
+
+    p {
+      font-size: 0.75em;
+    }
+    
+    .title {
+      font-weight: bold;
+    }
+  }
+}
+
+@media screen and (max-width: 31.25em) {
+  .album-block {
+    width: 100%;
+    margin: 1em auto 2em;
+
+    h3 {
+      text-align: left;
+      margin: 1em 0 0.5em;
+    }
+
+    .album-info{
+      width: 100%;
+      margin: 0 0 2em;
+    }
+
+    .album-item {
+      width: 100%;
+      padding: 1em 1em 5em;
+      margin: 0 0 2em;
+
+      img{
+        border: .1em solid #eee;
+        border-top-color: #bbb;
+        border-left-color: #ddd;
+      }
+    }
+
+    .product-info {
+      bottom: .5em;
+    }
+  }
+
+  .gallery-album {
+    margin: 0 0 1em;
+  }
+}
+
+@media screen and (min-width: 31.25em) and (max-width: 59.99999em){
+  .album-block {
+    .album-info{
+      width: 100%;
+      margin: 0 0 2em;
+      font-size: 0.75em;
+    }
+
+    .album-item {
+      width: 100%;
+      padding: 2em 2em 5em;
+      margin: 0 0 2em;
+
+      img{
+        border: .15em solid #eee;
+        border-top-color: #bbb;
+        border-left-color: #ddd;
+      }
+    }
+
+    .product-info {
+      bottom: .5em;
+    }
+  }
+}

assets/style/home.scss

@@ -22,7 +22,7 @@
     font-size: 18pt;
     text-align: center;
     font-weight: normal;
-    margin: 0;
+    margin: 1em 0 0;
     padding: 0;
   }
 }

assets/style/main.scss

@@ -1,23 +1,59 @@
-body {
+* {
-	font-family: "PT Sans", Arial, sans-serif;
+  margin: 0;
-	margin: 0;
+  padding: 0;
-	padding: 0;
+}
 
-    min-width: 320px;
+html, body {
+  height: 100%;
+}
+
+body {
+  font-family: "PT Sans", Arial, sans-serif;
+  min-width: 320px;
+}
+
+.wrapper {
+  display: flex;
+  min-height: 100%;
+  flex-direction: column;
+}
+
+.content {
+  flex: 1;
+  width: 90%;
+  margin: 3em auto 0;
 }
 
 a {
   color: #3f9cea;
   text-decoration: none;
   border-bottom: 1px solid rgba(63, 156, 234, 0.25);
+
+  &:hover {
+    border-bottom: 1px solid rgba(63, 156, 234, 0.5);
+  }
+
+  &:active {
+    border-bottom: 1px solid rgb(63, 156, 234);
+  }
+
+  &.invisible {
+    border-bottom: none;
+  }
 }
 
-a:hover {
+h3 a {
-  border-bottom: 1px solid rgba(63, 156, 234, 0.5);
+  color: black;
-}
+  text-decoration: none;
+  border-bottom: 1px solid #ddd;
 
-a:active {
+  &:hover {
-  border-bottom: 1px solid rgb(63, 156, 234);
+    border-bottom: 1px solid #484848;
+  }
+
+  &:active {
+    border-bottom: 1px solid #000000;
+  }
 }
 
 ul.submenu {
@@ -28,14 +64,14 @@ ul.submenu {
   text-align: center;
 
   li {
-	display: inline-block;
+    display: inline-block;
-	vertical-align: top;
+    vertical-align: top;
-	margin: 0 30px 0 0;
+    margin: 0 30px 0 0;
 
-	p {
+    p {
-	  margin: 2px 0 0;
+      margin: 2px 0 0;
-	  font-size: 0.75em;
+      font-size: 0.75em;
-	  color: #999;
+      color: #999;
-	}
+    }
   }
 }

assets/style/menu.scss

@@ -1,26 +1,33 @@
-.menu {
+.main-menu {
-  $text_color: #666;
 
-  position:relative;
+  position: fixed;
+  z-index: 100;
+  overflow-x: scroll;
+  -webkit-overflow-scrolling: touch;
   width: 100%;
+  //max-height: 15em;
+
   background-color: black;
-  color: $text_color;
+  font-size: 1.1em;
-  font-size: 13pt;
+  color: #666;
 
-  ul {
+  list-style: none;
-    margin: 0 0 0 10px;
+  white-space: nowrap;
 
-    li {
+  & :link, & :visited {
-      display: inline-block;
-      padding: 5px 3px 13px 3px;
-      margin-right: 30px;
-    }
-  }
-
-  :link, :visited {
     text-decoration: none;
     border-bottom: 1px solid #333;
-    color: #ccc;
+    color: #a2a2a2;
+  }
+
+  li {
+    display: inline-block; /* 6 */
+    padding: 0.3em 0.2em 0.5em;
+    margin: 0 0.5em;
+
+    &:first-child {
+      margin-left: 1em;
+    }
   }
 
   a:hover {
@@ -28,53 +35,45 @@
     border-bottom: 1px solid #555;
   }
 
-  .vk {
-    float: right;
-    margin: 13px 15px 0 0;
-    border: none;
-  }
-
   .selected {
     border-top: 4px solid white;
     font-weight: bold;
 
-    a:link, a:visited{
+    a:link, a:visited {
       color: white;
       text-decoration: none;
       border-bottom: none;
     }
 
-    &.blue{
+    &.blue {
       border-top: 4px solid #3f9cea;
     }
 
-    &.green{
+    &.green {
       border-top: 4px solid #5cbe40;
     }
 
-    &.yellow{
+    &.yellow {
       border-top: 4px solid #ffee00;
     }
 
     &.pink {
       border-top: 4px solid #f655a0;
     }
-  }
-}
 
-@media screen and (max-device-width: 500px){
+    &.red {
-  .menu {
+      border-top: 4px solid #f61b14;
-    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;
-      }
     }
   }
 }
+
+@media (min-width: 31.25em) {
+  header{
+    //max-height: none;
+    overflow: hidden;
+  }
+
+  .main-menu {
+    width: 100%;
+  }
+}

assets/style/schedule-mobile.scss

@@ -0,0 +1,61 @@
+.schedule-slider {
+  width: 100%;
+  max-width: 30em;
+  //width: 90%;
+  //margin: 0 auto;
+}
+
+.schedule-slider__slide {
+  height: 100%;
+  overflow-y: auto;
+
+  &.current {
+    border-left: .3em solid #4b8ff3;
+    border-right: .3em solid #4b8ff3;
+  }
+}
+
+.schedule-slider__body {
+}
+
+.schedule-slider__head {
+  text-align: center;
+  font-size: 2em;
+  margin: 0 0 .5em;
+}
+
+.schedule-record {
+  min-height: 10em;
+  text-align: center;
+
+  &.even{
+    background-color: #f3f3fd;
+  }
+
+  &.empty {
+    .schedule-record__head{
+      color: #bbb;
+    }
+  }
+
+  p {
+    margin: .2em 0;
+  }
+}
+
+.schedule-record__head {
+  padding: .25em 0;
+  font-size: 1.2em;
+}
+
+.schedule-record__main {
+}
+
+.schedule-record__name {
+  font-weight: bold;
+  font-size: 1.2em;
+}
+
+.schedule-record__group {
+  position: absolute;
+}

assets/style/schedule-table.scss

@@ -0,0 +1,121 @@
+$current-week-day-color: #4b8ff3;
+
+.schedule-table {
+  margin: 0 auto;
+  width: 100%;
+  min-width: 50em;
+  position: relative;
+
+  table {
+    margin: 2em auto;
+    border-spacing: 0;
+    text-align: center;
+
+    thead {
+      animation-duration: 0.3s;
+
+      th {
+        font-weight: normal;
+        vertical-align: baseline;
+        height: 80px;
+      }
+
+      .date {
+        font-size: 1.5em;
+      }
+
+      .group {
+        color: #666;
+      }
+    }
+
+    tbody tr:nth-child(even) {
+      background-color: #f0f2da;
+    }
+
+    td {
+      vertical-align: baseline;
+
+      &:not(.group) {
+        width: 15%;
+        padding: .75em 1em;
+      }
+
+      &.group {
+        width: 5%;
+
+        p.name {
+          font-size: 1.25em;
+          font-weight: 800;
+        }
+      }
+    }
+
+    thead.fix {
+      position: fixed;
+      top: 41px;
+      background-color: rgba(255, 255, 255, .95);
+      z-index: 50;
+      box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
+
+      .current {
+        border: none;
+        border-radius: 0;
+        color: $current-week-day-color;
+      }
+
+      th {
+        height: auto;
+
+        .day {
+          margin: .5em 0;
+        }
+
+        .date {
+          margin: 0 0 .25em;
+        }
+      }
+    }
+
+    tbody.fix:before {
+      content: '';
+      display: block;
+      margin-top: 80px;
+    }
+  }
+
+  p {
+    margin-bottom: .2em;
+  }
+
+  a {
+    color: black;
+
+    text-decoration: none;
+    border-bottom: 1px solid #ccc;
+  }
+
+  .lesson {
+    font-size: 1.1em;
+    font-weight: bold;
+  }
+
+  .teacher {
+    font-style: italic;
+  }
+
+  .current {
+    border-left: 2px solid $current-week-day-color;
+    border-right: 2px solid $current-week-day-color;
+  }
+
+  .canceled:before {
+    position: absolute;
+    content: "";
+    width: 70%;
+    height: 100%;
+    top: 0;
+    left: 15%;
+    background-image: url(lesson-canceled.svg);
+  }
+}

assets/style/schedule.scss

@@ -9,203 +9,13 @@
     }
 }
 
-.schedule{
+.schedule {
     position: relative;
     margin: 30px auto 0 auto;
     padding-bottom: 50px;
     text-align: center;
 
-    .schedule-block{
+    & > p {
-        overflow-x: scroll;
+        margin: 0 0 1em;
-    }
-
-    table{
-        position: relative;
-        margin: 30px auto 0 auto;
-        
-        border-spacing: 0px;
-        text-align: center;
-
-        td{
-            position: relative;
-
-            &:not(.group){
-                min-width: 150px;
-            /*    width: 15%;*/
-                width: 150px;
-                padding: 8px 10px 8px;
-                
-                vertical-align:baseline;
-            }
-
-            &.group{
-                min-width: 60px;
-            /*    width: 5%;*/
-                width: 60px;
-                position: relative;
-                vertical-align:baseline;
-
-                p.name{
-                    font-size: 1.4em;
-                    font-weight: 800;
-                    color: #242424;
-                }
-            }
-        }
-    }
-
-    thead{
-        animation-duration: 0.3s;
-
-        th{
-            font-weight: normal;
-            vertical-align: baseline;
-            height: 80px;
-            padding: 10px 0 0;
-
-            &.weekend{
-                color: #f52;
-            }
-        }
-
-        .date{
-            font-size: 1.5em;
-        }
-
-        .group{
-            color: #666;
-        }
-    }
-
-    tbody tr:nth-child(even){
-        background-color: #f3f3fd;
-    }
-
-    .lesson{
-        font-size: 1.1em;
-        font-weight: bold;
-    }
-
-    .teacher{
-        font-style: italic;
-    }
-
-    p{
-        margin-bottom: 10px;
-    }
-
-    a{
-        color: black;
-        
-        text-decoration: none;
-        border-bottom: 1px solid #ccc;
-    }
-
-    .current{
-        border-left: 2px solid #4b8ff3;
-        border-right: 2px solid #4b8ff3;
-
-        &.first{
-            border-radius: 15px 15px 0 0;
-            border-top: 2px solid #4b8ff3;
-        }
-
-        &.last{
-            border-radius: 0 0 15px 15px;
-            border-bottom: 2px solid #4b8ff3;
-        }
-    }
-
-    .canceled:before{
-        position: absolute;
-        content: "";
-        width:70%;
-        height: 100%;
-        top: 0;
-        left: 15%;
-        background-image: url(lesson-canceled.svg);
-    }
-
-    ul{
-        margin: 0px auto 30px auto;
-        text-align: center;
-
-        li{
-            display: inline-block;
-            padding: 5px 10px;
-            margin: 0 5px;
-
-            &.current{
-                color: #68aeff;
-                border: none;
-                font-weight: bold;
-            /*    color: #555;*/
-            /*    padding: 5px 15px;*/
-            /*    border: 1px solid #4b8ff3;*/
-            /*    border-radius: 100px;*/
-            }
-        }
-
-        a{
-            color: #3f9cea;
-            border-bottom: 1px dashed #ccc;
-            display: inline-block;
-            padding: 0px;
-        }
-    }
-
-    thead.fix{
-        position: fixed;
-        top: 0;
-        background-color: rgba(255, 255, 255, 0.96);
-        z-index: 100;
-        box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
-        border-radius: 0 0 20px 20px;
-
-        .current{
-            border: none;
-            border-radius: 0px;
-            color: #3f9cea;
-            width: 155px;
-        }
-
-        th{
-            height: auto;
-
-            :not(.group){
-                min-width: 150px;
-            /*    width: 15%;*/
-                width: 150px;
-                padding: 8px 10px 8px;
-            }
-
-            &.group{
-                width: 63px;
-            }
-
-            .day{
-                margin: 0;
-                line-height: 0;
-            }
-
-            .date{
-                margin: 15px 0;
-                line-height: 0;
-            }
-        }
-    }
-
-    tbody.fix:before{
-        content: "";    
-        display: block;
-        margin-top: 90px;
-    }
-}
-
-@media screen and (max-device-width: 400px){
-    .schedule{
-        thead.fix{
-            display: none;
-        }
     }
 }

assets/style/tape-viewer.scss

@@ -1,9 +1,14 @@
 .tape-block{
   width: 70%;
-  max-width: 800px;
+  max-width: 1000px;
-  min-width: 300px;
 
-  margin: 50px auto 100px;
+  margin: 2em auto;
+
+  &.simplified{
+    .tape{
+      display: none;
+    }
+  }
 }
 
 .tape-block-content{
@@ -42,13 +47,10 @@
   }
 }
 
-@media screen and (max-device-width: 400px) {
+@media screen and (max-device-width: 31.25em) {
   .tape-block {
-    width: 70%;
+    width: 90%;
-    max-width: 250px;
+    margin: 1.5em auto;
-    min-width: 200px;
-
-    margin: 50px auto 100px;
   }
 
   .tape-block-content {

assets/style/timeline-content.scss

@@ -1,39 +0,0 @@
-.timeline {
-  .timeline-record {
-    .user{
-      margin-top: 4px;
-
-      span{
-        vertical-align: top;
-        line-height: 40px;
-      }
-
-      img {
-        width: 40px;
-        height: 40px;
-        border-radius: 50%;
-      }
-    }
-
-    .date{
-      margin: 5px 0 0;
-      color: #999;
-      font-size: 0.75em;
-    }
-
-    .body{
-      a{
-        border-bottom: none;
-      }
-
-      img {
-        width: 100%;
-        max-width: 500px;
-        box-sizing: border-box;
-        border-radius: 5px;
-        border: 8px solid white;
-        box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.35);
-      }
-    }
-  }
-}

assets/style/timeline-instagram.scss

@@ -0,0 +1,34 @@
+.timeline-record {
+  .instagram {
+    margin: 0 auto;
+    max-width: 640px;
+
+    .head {
+      width: 100%;
+      margin: 0 0 .5em;
+
+      .user {
+        span {
+          vertical-align: top;
+          line-height: 40px;
+        }
+
+        img {
+          width: 40px;
+          height: 40px;
+          border-radius: 50%;
+        }
+      }
+    }
+
+    .body img {
+      width: 100%;
+      height: auto;
+      box-sizing: border-box;
+      border: .5em solid white;
+      box-shadow: 0 .2em 0.35em rgba(0, 0, 0, 0.35);
+      border-radius: .35em;
+      margin: 0 0 1em;
+    }
+  }
+}

assets/style/timeline-record.scss

@@ -0,0 +1,8 @@
+.timeline-record {
+  margin: 0 0 3em;
+  .date {
+    margin: 0 0 0.45em;
+    font-size: 0.75em;
+    color: #999;
+  }
+}

assets/style/timeline.scss

@@ -1,72 +1,13 @@
 .timeline{
-  min-width: 400px;
+  display: flex;
-  position: relative;
+  flex-direction: column;
-  display: block;
+  width: 70%;
-  width: 75%;
+  margin: 0 auto 2em;
-  margin: 0 auto 50px;
 }
 
-.timeline-record{
+.timeline-footer{
-  position: relative;
+  display: flex;
-
+  justify-content: center;
-  .body {
-    margin: 0 0 50px;
-
-    img{
-      margin: 0 auto;
-      display: block;
-      min-height: 500px;
-    }
-  }
-}
-
-@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;
-    }
-
-    .timeline-record {
-      position: relative;
-      display: flex;
-
-      .head, .body {
-        position: relative;
-        width: 90%;
-        box-sizing: border-box;
-      }
-
-      .head {
-        padding: 5px 20px;
-      }
-
-      .body {
-        padding: 0 20px;
-      }
-    }
-  }
-}
-
-.timeline-end{
-  width: 50%;
-  margin: 0 auto;
-  text-align: center;
 
   button.more{
     position: relative;
@@ -89,3 +30,9 @@
     }
   }
 }
+
+@media screen and (max-device-width: 31.25em) {
+  .timeline {
+    width: 98%;
+  }
+}

bin/www.js

@@ -10,5 +10,6 @@ var instagram = require("../instagram");
 db.init(config.db.uri)
     //.then(instagram)
     .then(function () {
-        server(config.port);
+        var app = server();
+        app.listen(config.port);
     });

bower.json

@@ -22,9 +22,9 @@
   "dependencies": {
     "fotorama": "~4.6.2",
     "jquery": "~2.1.1",
-    "angular-route": "~1.3.3",
+    "angular-route": "~1.4.1",
-    "angular-animate": "~1.3.3",
+    "angular-animate": "~1.4.1",
-    "angular": "~1.3.3",
+    "angular": "~1.4.1",
     "angulartics": "~0.17.2",
     "angular-spinner": "~0.6.1",
     "socket.io-client": "~1.3.5"

client/api/api.js

@@ -2,11 +2,16 @@
  * Created by tmshv on 22/11/14.
  */
 
+var APINews = require("./news");
+var APIGallery = require("./gallery");
+
 module.exports = function(app) {
+    var minute = 1000 * 60;
+
     app.factory("api", function ($http) {
         var api = {};
-        var Endpoint = require("./news");
+        api.news = new APINews($http);
-        api.news = new Endpoint($http);
+        api.gallery = new APIGallery($http, minute);
 
         return api;
     });

client/api/gallery.js

@@ -0,0 +1,22 @@
+/**
+ * Created by tmshv on 22/11/14.
+ */
+
+function APIGallery(http){
+    this.request = http;
+}
+
+APIGallery.prototype.year = function(year) {
+    return this.request.get("/gallery/" + year, {cache: true});
+};
+
+APIGallery.prototype.album = function(year, course, album) {
+    var url = '/gallery/{year}/{course}/{album}'
+        .replace('{year}', year)
+        .replace('{course}', course)
+        .replace('{album}', album);
+
+    return this.request.get(url, {cache: true});
+};
+
+module.exports = APIGallery;

client/app.js

@@ -2,13 +2,20 @@
  * Created by tmshv on 04/11/14.
  */
 
-var app = angular.module("hudozhka", [
+var deps = [
+    require('./modules/schedule')
+]
+    .map(function(m){
+        return m.name;
+    });
+
+var app = angular.module("hudozhka", deps.concat([
     "hudozhka.data",
     "ngRoute",
     "angulartics",
     "angulartics.google.analytics",
     "angularSpinner"
-]);
+]));
 
 app.config(function ($locationProvider, $routeProvider) {
     $locationProvider.hashPrefix("!");
@@ -19,19 +26,30 @@ app.config(function ($locationProvider, $routeProvider) {
             name: "/",
             templateUrl: "/views/home.html",
             controller: "HomePageController",
-            title:"ДШХ Шлиссельбурга"
+            title: "ДХШ Шлиссельбурга"
         },
         {
-            name: "/schedule",
+            name: "/schedule/:period?/:semester?",
             templateUrl: "/views/schedule.html",
             controller: "SchedulePageController",
-            title:"Расписание"
+            title: "Расписание"
         },
         {
             name: "/team",
             templateUrl: "/views/team.html",
             controller: "TeamPageController",
-            title:"Преподаватели"
+            title: "Преподаватели"
+        },
+        {
+            name: "/gallery",
+            templateUrl: "/views/gallery.html",
+            controller: "GalleryPageController",
+            title: "Работы учащихся"
+        },
+        {
+            name: "/gallery/:year/:course/:album",
+            templateUrl: "/views/gallery-album.html",
+            controller: "AlbumPageController"
         },
         {
             name: "/docs",
@@ -42,6 +60,7 @@ app.config(function ($locationProvider, $routeProvider) {
     ];
 
     routes.forEach(function (route) {
+        if (typeof route === 'function') route = route();
         $routeProvider.when(route.name, route);
     });
 
@@ -50,33 +69,32 @@ app.config(function ($locationProvider, $routeProvider) {
     });
 });
 
-app.run(function($location, $rootScope, $http, config) {
+app.run(function ($location, $rootScope, $http) {
     $rootScope.$on("$routeChangeSuccess", function (event, current) {
-        $rootScope.title = current["$$route"].title;
+        var title = current["$$route"].title;
+        if (title) $rootScope.title = 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";
 });
 
 require("./api/api")(app);
 require("./services/io")(app);
+require("./directives/mainMenu")(app);
 require("./ui/menu")(app);
+require("./ui/breadcrumbs")(app);
 require("./ui/timeline")(app);
+require("./filters/strip")(app);
+require("./filters/remove-hashtags")(app);
+require("./filters/removeNewline")(app);
 require("./filters/uppercase-first")(app);
 require("./pages/home")(app);
 require("./pages/schedule")(app);
 require("./pages/team")(app);
+require("./pages/gallery")(app);
 require("./pages/docs")(app);
+require("./controllers/ContactsController")(app);
+require("./controllers/CopyrightController")(app);
 
 app.controller("SchedulePageController", function ($scope) {
     $scope.pageClass = "page-schedule";
@@ -89,3 +107,7 @@ app.controller("TeamPageController", function ($scope) {
 app.controller("DocsPageController", function ($scope) {
     $scope.pageClass = "page-docs";
 });
+
+app.controller("AppController", function ($scope, menu) {
+    $scope.menuProvider = menu.items;
+});

client/controllers/ContactsController.js

@@ -0,0 +1,7 @@
+module.exports = function (app) {
+    app.controller('ContactsController', function ($scope, config) {
+        $scope.address = config.address;
+        $scope.telephone = config.telephone;
+        $scope.email = config.email;
+    });
+};

client/controllers/CopyrightController.js

@@ -0,0 +1,17 @@
+module.exports = function (app) {
+    app.controller('CopyrightController', function ($scope, $rootScope) {
+        $scope.developer = true;
+        $scope.now = new Date().getFullYear();
+
+        $rootScope.$on('$routeChangeSuccess', function (event, current) {
+            var originalPath;
+            try{
+                originalPath = current['$$route'].originalPath;
+            }catch(e){
+                originalPath = null;
+            }
+
+            $scope.developer = originalPath == '/';
+        });
+    });
+};

client/data.js

@@ -6,7 +6,7 @@ angular.module("hudozhka.data", [])
     .service("team", function () {
         return require("../models/team");
     })
-    .service("schedule", function () {
+    .service("scheduleData", function () {
         return require("../models/schedule");
     })
     .service("docs", function () {
@@ -14,8 +14,11 @@ angular.module("hudozhka.data", [])
     })
     .service("config", function(){
         return {
-            telephone: "8 (81362) 76-312",
+            telephone: "+7 (81362) 76-312",
             email: "hudozka@gmail.com",
-            address: "г. Шлиссельбург, ул. 18-го января, д. 3"
+            address: ["г. Шлиссельбург", "ул. 18 января", "д. 3"]
+                .reduce(function(address, item){
+                    return address + (address == '' ? '' : ' ') + item.replace(' ', String.fromCharCode(0xA0));
+                }, '')
         };
     });

client/directives/mainMenu.js

@@ -0,0 +1,24 @@
+module.exports = function (app) {
+    app.directive('mainMenu', function (menu) {
+        return {
+            restrict: 'E',
+            templateUrl: '/views/menu.html',
+            scope: {
+                menu: '=items'
+            },
+            link: function(scope, element){
+                scope.isActive = function (item) {
+                    if (menu.current) {
+                        return item.url == menu.current.url;
+                    } else {
+                        return false;
+                    }
+                };
+
+                scope.isValid = function (item) {
+                    return 'url' in item;
+                };
+            }
+        }
+    });
+};

client/filters/remove-hashtags.js

@@ -0,0 +1,11 @@
+/**
+ * Created by tmshv on 21/11/14.
+ */
+
+module.exports = function(app) {
+    app.filter("removeHashtags", function () {
+        return function(string) {
+            return string.replace(/(#[^\s]+)/g, '');
+        };
+    });
+};

client/filters/removeNewline.js

@@ -0,0 +1,11 @@
+/**
+ * Created by tmshv on 21/11/14.
+ */
+
+module.exports = function(app) {
+    app.filter("removeNewline", function () {
+        return function(string) {
+            return string.replace(/(\n)/g, ' ');
+        };
+    });
+};

client/filters/strip.js

@@ -0,0 +1,13 @@
+/**
+ * Created by tmshv on 21/11/14.
+ */
+
+module.exports = function(app) {
+    app.filter("strip", function () {
+        return function(string) {
+            return string
+                .replace(/^\s+/, '')
+                .replace(/\s+$/, '');
+        };
+    });
+};

client/modules/schedule.js

@@ -0,0 +1,155 @@
+var getDates = require('../../utils/date').getDates;
+
+module.exports = angular.module('hudozka.schedule', [])
+    .directive('schedule', function ($compile) {
+        return {
+            restrict: 'E',
+            scope: {
+                groups: '='
+            },
+            link: function (scope, element) {
+                var template = `<schedule-table groups="${scope.groups}"></schedule-table>`;
+
+                try {
+                    if (window.matchMedia('(max-device-width: 30em)').matches) {
+                        template = `<schedule-slider groups="${scope.groups}"></schedule-slider>`
+                    }
+                } catch (e) {
+                }
+
+                element.html(template).show();
+                $compile(element.contents())(scope);
+            }
+        };
+    })
+    .directive('scheduleTable', function () {
+        return {
+            templateUrl: '/views/schedule/table.html',
+            link: function (scope, element) {
+                //var this_element = element[0];
+
+                var now = new Date();
+                var dates = getDates(now);
+
+                scope.isToday = function (weekDayIndex) {
+                    return (now.getDay() - 1) === weekDayIndex;
+                };
+
+                scope.weekDay = function (weekDayIndex) {
+                    return dates[weekDayIndex];
+                };
+
+                var $tbody = element.find('table tbody');
+                var $thead = element.find('table thead');
+                var $td_list = [];
+
+                var min;
+                var max;
+                $(window).scroll(function () {
+                    const scrollOffset = 150;
+                    if(!min) min = element.find('table tbody tr:first-child')[0].offsetTop + scrollOffset;
+                    if(!max) max = element.find('table tbody tr:last-child')[0].offsetTop + scrollOffset;
+
+                    if(!$td_list.length) $td_list = element.find('table tbody tr:first-child td');
+                    $td_list.each(function (i) {
+                        var w = this.offsetWidth;
+                        $thead.find('th')[i].style.width = `${w}px`;
+                    });
+
+                    var scroll = $(this).scrollTop();
+                    if (scroll >= min && scroll <= max) {
+                        $thead.addClass('fix animated fadeInDown');
+                        $tbody.addClass('fix');
+                    } else {
+                        $thead.removeClass('fix animated fadeInDown');
+                        $tbody.removeClass('fix');
+                    }
+                });
+            }
+        }
+    })
+    .directive('scheduleSlider', function ($compile) {
+        return {
+            restrict: 'E',
+            template: '<div class="schedule-slick"></div>',
+
+            link: function (scope, element) {
+                var $slick = element.find('.schedule-slick');
+
+                scope.$watch('groups', function (value) {
+                    try {
+                        $slick.slick('unslick');
+                    } catch (e) {
+
+                    }
+
+                    if (value) {
+                        var days = week(value);
+                        scope.days = days;
+
+                        $slick.html(
+                            days.map(function (day, i) {
+                                return `<schedule-slide day="days[${i}]"></schedule-slide>`
+                            }).join('')
+                        ).show();
+                        $compile($slick.contents())(scope);
+
+                        $slick.slick({
+                            mobileFirst: true,
+                            infinite: false,
+                            dots: false,
+                            arrows: false,
+                            touchThreshold: 20,
+                            speed: 250,
+                            slidesToShow: 1,
+                            centerMode: false
+                        });
+
+                        var now = new Date();
+                        var currentWeekIndex = now.getDay() - 1;
+                        $slick.slick('slickGoTo', currentWeekIndex);
+                    }
+                });
+            }
+        }
+    })
+    .directive('scheduleSlide', function () {
+        return {
+            restrict: 'E',
+            templateUrl: "/views/schedule/slide.html",
+            scope: {
+                day: '='
+            }
+        }
+    })
+    .directive('scheduleRecord', function () {
+        return {
+            restrict: 'E',
+            templateUrl: "/views/schedule/record.html",
+            scope: {
+                record: '=',
+                i: '='
+            }
+        }
+    });
+
+function week(schedule) {
+    var now = new Date();
+    var dates = getDates(now);
+
+    return ['Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота']
+        .map(function (day, i) {
+            return {
+                current: i === now.getDay() - 1,
+                day: day,
+                date: dates[i],
+                groups: schedule.map(function (group) {
+                    return {
+                        name: group.name,
+                        time: group.time,
+                        content: group.days[i]
+                    }
+                })
+            }
+        });
+}

client/pages/gallery.js

@@ -0,0 +1,114 @@
+module.exports = function (app) {
+    app.directive("gFotorama", function () {
+        return {
+            restrict: "A",
+            link: function (scope, element, attrs) {
+                element.addClass('fotorama');
+                var $fotorama = $(element.fotorama());
+                var fotorama = $fotorama.data('fotorama');
+                fotorama.setOptions({
+                    width: "100%",
+                    maxheight: 500,
+                    loop: true,
+                    nav: "thumbs"
+                });
+
+                //$fotorama.on('fotorama:show', function (e, fotorama, extra) {
+                $fotorama.on('fotorama:error', function (e, fotorama, extra) {
+                    console.log('## ' + e.type);
+                    console.log('active frame', fotorama.activeFrame);
+                    console.log('additional data', extra);
+                });
+
+                scope.$watch(attrs.gFotorama, function (value) {
+                    console.log(value);
+                    fotorama.load(value);
+                });
+            }
+        }
+    });
+
+    app.controller("GalleryPageController", function ($scope, api) {
+            $scope.years = [];
+            var years = [2015, 2014, 2013, 2012, 2011, 2010];
+            years.forEach(function (year, year_index) {
+                api.gallery.year(year)
+                    .success(function (albums) {
+                        if (albums.length) {
+                            $scope.years[year_index] = {
+                                year: year,
+                                albums: albums.map(function (album) {
+                                    var preview = album.content[0];
+                                    album.preview_url = preview.content.medium.url;
+                                    //album.fotorama = album.content.map(productToFotorama);
+
+                                    return album;
+                                })
+                            };
+                        }
+                    })
+            });
+        }
+    );
+
+    app.controller("AlbumPageController", function ($scope, $rootScope, $http, $routeParams, team, api, menu) {
+        menu.activate('/gallery');
+
+        var year_uri = $routeParams.year;
+        var course_uri = $routeParams.course;
+        var album_uri = $routeParams.album;
+        api.gallery.album(
+            year_uri,
+            course_uri,
+            album_uri
+        )
+            .success(function (album) {
+                //var preview = album.content[0];
+                //album.preview_url = preview.content.medium.url;
+                //album.fotorama = album.content.map(productToFotorama);
+
+                album.teacherName = team.name(album['teacher']);
+
+                $scope.album = album;
+                $scope.crumbs = [
+                    {
+                        url: '/gallery',
+                        name: 'Галерея'
+                    },
+                    {
+                        //url: '/gallery/{year}'.replace('{year}', year_uri),
+                        name: year_uri
+                    },
+                    {
+                        //url: '/gallery/{year}/{course}'
+                        //    .replace('{year}', year_uri)
+                        //    .replace('{course}', course_uri),
+                        name: album.course
+                    },
+                    {
+                        name: album.title
+                    }
+                ];
+                $rootScope.title = album.title;
+            });
+    });
+};
+
+function productToFotorama(product) {
+    //var tpl =  '<div class="album-item"><div><p>' + product.author + '</p><p>' + product.authorAge  + ' лет</p></div></div>';
+
+    var $e = $('<div class="album-item"><div></div></div>');
+    var $c = $e.find('.album-item div');
+    $('<p></p>').text(product.author).appendTo($c);
+    if (product['authorAge']) {
+        $('<p></p>').text(product['authorAge'] + ' лет').appendTo($c);
+    }
+
+    return {
+        img: product.content["big"].url,
+        thumb: product.content["small"].url,
+        full: product.content["original"].url,
+        //html: $.parseHTML(tpl)[0]
+        html: $e
+    };
+}

client/pages/home.js

@@ -4,8 +4,26 @@
 
 module.exports = function (app) {
     app.controller("HomePageController", function ($scope, config) {
+        var fotorama;
+
         $scope.pageClass = "page-home";
 
-        $(".fotorama").fotorama();
+        var $tape = $('.tape-block');
+        var $fotorama = $('.fotorama');
+
+        $tape.addClass('simplified');
+        $fotorama.on('fotorama:ready', function () {
+            $tape.removeClass('simplified');
+            fotorama.setOptions({
+                nav: 'dots'
+            });
+        });
+
+        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'}
+        ]);
     });
 };

client/pages/schedule.js

@@ -1,81 +1,81 @@
-var populate = require("../../utils/populate").populate;
+var populate = require('../../utils/populate').populate;
-const course = require("../../models/course");
+const course = require('../../models/course');
+
+function indexEquals(i) {
+    return function (_, index) {
+        return i === index;
+    }
+}
+
+function isRequested(period, semester) {
+    return function (schedule) {
+        return schedule.period === period && schedule.semester === semester;
+    }
+}
 
 module.exports = function (app) {
-    app.controller("ScheduleController", function ($scope, $http, schedule, team) {
+    app.controller('ScheduleController', function ($scope, $http, $location, $routeParams, scheduleData, team, menu) {
-        var now = new Date();
+        menu.activate('/schedule');
-        var dates = getDates(now);
 
-        var sem = "autumn";
+        var current_period = $routeParams.period;
-        $scope.sem = [["spring", "весеннего"], ["autumn", "осеннего"]].reduce(function (s, word) {
+        var current_semester = $routeParams.semester;
-            if (word[0] === sem) return word[1];
+        var isScheduleRequested = current_period && current_semester;
-        });
-        $scope.year = "2014-2015";
 
-        $http.get("/schedule/2014-2015/spring")
+        $http.get("/schedules", {cache: true})
-            .success(function (s) {
+            .success(function (schedules) {
-                $scope.schedule = schedule.populate(s.schedule, [
+                // By url params or last element
-                    populate(team.short, "teacher"),
+                var select_fn = isScheduleRequested ? isRequested(current_period, current_semester) : indexEquals(schedules.length - 1);
-                    populate(course.name, "lesson")
+
-                ]);
+                schedules = schedules.map(function (schedule) {
+                    var sem = [['spring', 'Весена'], ['autumn', 'Осень']].reduce(function (s, word) {
+                        if (word[0] === schedule.semester) return word[1];
+                        else return s[1];
+                    });
+                    schedule.text = `${sem} ${schedule.period} года`;
+
+                    return schedule;
+                });
+
+                schedules.forEach(function (schedule, i) {
+                    if (select_fn(schedule, i)) {
+                        $scope.currentSchedule = schedules[i];
+                    }
+                });
+
+                $scope.schedules = schedules;
+                $scope.loadSchedule($scope.currentSchedule, isScheduleRequested);
             });
 
-        $scope.isToday = function (weekDayIndex) {
+        $scope.loadSchedule = function (s, updateURL) {
-            return (now.getDay() - 1) === weekDayIndex;
+            var id = s._id;
-        };
+            var schedule_item = getScheduleByID(id);
 
-        $scope.weekDay = function (weekDayIndex) {
+            if (schedule_item) {
-            return dates[weekDayIndex];
+                var sem = schedule_item.semester;
-        };
+                var period = schedule_item.period;
 
-        $(window).scroll(function () {
+                var url = `/schedule/${period}/${sem}`;
-            if ($(this).scrollTop() >= 220) {
+                $http.get(url, {cache: true})
-                $(".schedule table thead").addClass("fix animated fadeInDown");
+                    .success(function (scheduleRecord) {
-                $(".schedule table tbody").addClass("fix");
+                        $scope.groups = scheduleData.populate(scheduleRecord.schedule, [
-            } else {
+                            populate(team.short, 'teacher'),
-                $(".schedule table thead").removeClass("fix animated fadeInDown");
+                            populate(course.name, 'lesson')
-                $(".schedule table tbody").removeClass("fix");
+                        ]);
+
+                        if (updateURL) {
+                            $location.url(url);
+                        }
+                    });
             }
-        });
+        };
+
+        function getScheduleByID(id) {
+            var schedules = $scope.schedules;
+            for (var i = 0, l = schedules.length; i < l; i++) {
+                var s = schedules[i];
+                if (id === s._id) return s;
+            }
+            return null;
+        }
     });
 };
-
-/**
- * Generates list of numbers
- * @param  {Number} start starting value
- * @param  {Number} num   amount of numbers in list
- * @param  {Number} step  difference value
- * @return {Array}        list of numbers
- */
-function range(start, num, step) {
-    var list = [];
-    var val = start;
-    for (var i = 0; i < num; i++) {
-        list.push(val);
-        val += step;
-    }
-    return list;
-}
-
-///**
-// * Monday date of current week
-// * @param  {[type]} d [description]
-// * @return {[type]}   [description]
-// */
-//function getMonday(d) {
-//    d = new Date(d);
-//    var day = d.getDay();
-//    var diff = d.getDate() - day + (day == 0 ? -6 : 1); // adjust when day is sunday
-//    return new Date(d.setDate(diff));
-//}
-
-function getDates(start) {
-    var day = start.getDay();
-    return range(0, 6, 1).reduce(function (dates, weekDay) {
-        var d = 1 + weekDay - day;
-        var time = start.getTime() + (1000 * 60 * 60 * 24) * d;
-        var date = new Date(time);
-        dates.push(date.getDate());
-        return dates;
-    }, []);
-}

client/services/io.js

@@ -3,9 +3,13 @@
  */
 
 module.exports = function (app) {
-    var socket = io();
+    var socket;
+    function init(){
+        socket = io();
+    }
 
-    app.service("io", function(){
+    app.service("io", function () {
+        if (!socket) init();
         return socket;
-    })
+    }); 
 };

client/ui/breadcrumbs.js

@@ -0,0 +1,11 @@
+module.exports = function(app) {
+    app.directive('breadcrumbs', function () {
+        return {
+            restrict: 'E',
+            templateUrl: '/views/breadcrumbs.html',
+            scope: {
+                crumbs: '='
+            }
+        };
+    });
+};

client/ui/menu.js

@@ -2,30 +2,33 @@
  * Created by tmshv on 05/11/14.
  */
 
-var menu = require("../../models/menu.json");
+module.exports = function (app) {
+    app.factory("menu", function ($route, $rootScope) {
+        function Menu() {
+            this.items = require("../../models/menu.json");
+            this.current = null;
+        }
 
-module.exports = function(app) {
+        Menu.prototype.activate = function (path) {
-    app.service("menu", function ($route) {
+            var f = this.items.filter(function (i) {
-        menu.isActive = function (path) {
+                return i.url === path;
-            if ($route.current && $route.current.regexp) {
+            });
-                return $route.current.regexp.test(path);
+
+            if(f.length) {
+                this.current = f[0];
             }
-            return false;
         };
 
+        var menu = new Menu();
+        $rootScope.$on('$routeChangeSuccess', function (event, current) {
+            try{
+                var path = current['$$route'].originalPath;
+                menu.activate(path);
+            }catch(e){
+
+            }
+        });
+
         return menu;
     });
-
-    app.controller("MenuController", function ($scope, menu) {
-        $scope.vkgroup = menu.vkgroup;
-        $scope.menu = menu.menu;
-
-        $scope.isCurrent = function(item) {
-            return menu.isActive(item.url);
-        };
-
-        $scope.isValid = function(item) {
-            return Boolean(item.url);
-        };
-    });
 };

client/ui/timeline.js

@@ -37,7 +37,7 @@ module.exports = function(app) {
                 image: post.data.image.standard_resolution.url,
                 url: post.data.url,
                 username: name,
-                //userpic: post.data.user.profile_picture,
+                userpic: 'https://igcdn-photos-a-a.akamaihd.net/hphotos-ak-xaf1/t51.2885-19/11357496_464997000344800_2124591831_a.jpg',
                 text: post.body,
                 //text: postText(post),
                 type: post.type
@@ -67,6 +67,11 @@ module.exports = function(app) {
                     return i['type'];
                 };
 
+                $scope.showFooter = function () {
+                    var canLoadMore = true;
+                    return $scope.feed && $scope.feed.length && canLoadMore;
+                };
+
                 $scope.loadNext = function () {
                     $scope.timelineUpdating = true;
                     usSpinnerService.spin("timelineMore");
@@ -78,9 +83,6 @@ module.exports = function(app) {
                         .success(function (list) {
                             $scope.timelineUpdating = false;
                             usSpinnerService.stop("timelineMore");
-                            //$timeout(function () {
-                            //
-                            //}, 5000);
 
                             var feed = list.map(function (post) {
                                 if(post.type == "instagram") return toInstagram(post);
@@ -96,7 +98,6 @@ module.exports = function(app) {
 
                 io.on("post", function (params) {
                     var posts = params instanceof Array ? params : [params];
-                    console.log("post", posts);
 
                     var feed = posts.map(function (post) {
                         if(post.type == "instagram") return toInstagram(post);

config.js

@@ -1,4 +1,5 @@
 var fs = require("fs");
+var path = require("path");
 const MENU = require("./models/menu.json");
 
 const team = require("./models/team");
@@ -9,24 +10,42 @@ const schedule = require("./models/schedule");
 var privateFile = process.env["PRIVATE"] || "private.json";
 var privateData = JSON.parse(fs.readFileSync(privateFile, "utf-8"));
 
-var config = {
+var index_file = process.env["INDEX"] || "templates/main.html";
-	defaultIndex: "/templates/index.html" || process.env["INDEX"],
-	port: process.env["PORT"] || 3000,
-	pub: "./",
-	data: {
-		menu: MENU,
-		documents: document.docs,
-		team: team.team,
-		courses: course.courses
-	},
 
-	db: {
+var config = {
-		uri: "mongodb://localhost:27017/hudozka"
+    defaultIndex: path.join(__dirname, index_file),
-	}
+    port: process.env["PORT"] || 3000,
+    pub: "./",
+    data: {
+        menu: MENU,
+        documents: document.docs,
+        team: team.team,
+        courses: course.courses
+    },
+
+    db: {
+        uri: "mongodb://localhost:27017/hudozka"
+    },
+
+    prerender: {
+        prerender: "http://service.prerender.io/",
+        prerenderToken: "",
+        protocol: "http",
+        host: "art.shlisselburg.org"
+    },
+
+    instagram: {
+        default_user: "hudozka",
+        tag_callback: "http://art.shlisselburg.org/instagram/callback/11",
+        client_id: "",
+        client_secret: "",
+        redirect_uri: "http://art.shlisselburg.org/instagram/auth/callback",
+        tags: ["shlb_hudozka"]
+    }
 };
 
 module.exports = Object.keys(privateData)
-	.reduce(function (config, key) {
+    .reduce(function (config, key) {
-		config[key] = privateData[key];
+        config[key] = privateData[key];
-		return config;
+        return config;
-	}, config);
+    }, config);

deploy.sh

@@ -1,5 +1,7 @@
 #!/bin/sh
 
+NODE_ENV=production gulp
+
 tarfile=build.tar.gz
 tarpath=$TMPDIR$tarfile
 
@@ -15,8 +17,8 @@ env GZIP=-9 tar -czf $tarpath \
 echo "build file: $tarpath"
 
 ssh shburg.et "rm -rf art/*"
-scp $tarpath shburg@37.139.6.120:~
+scp $tarpath shburg@146.185.183.243:~
-scp install.sh shburg@37.139.6.120:~
+scp install.sh shburg@146.185.183.243:~
 ssh shburg.et "./install.sh"
 rm $tarpath
 echo "art.shlisselburg.org deployment completed successfully"

gulpfile.js

@@ -1,6 +1,8 @@
 var path = require("path");
 var gulp = require("gulp");
+var _if = require("gulp-if");
 var sass = require("gulp-sass");
+var babel = require("babelify");
 var minify_css = require("gulp-minify-css");
 var autoprefixer = require("gulp-autoprefixer");
 var imageMin = require("gulp-imagemin");
@@ -9,6 +11,26 @@ var concat = require("gulp-concat");
 var browserify = require("gulp-browserify");
 var annotate = require("browserify-ngannotate");
 
+var is_production = process.env['NODE_ENV'] == 'production';
+
+gulp.task("concat-bower", function () {
+	var files = [
+		"public/bower_components/jquery/dist/jquery.min.js",
+		"public/bower_components/angular/angular.min.js",
+		"public/bower_components/angular-route/angular-route.min.js",
+		"public/bower_components/angular-animate/angular-animate.min.js",
+		"public/bower_components/angulartics/dist/angulartics.min.js",
+		"public/bower_components/angulartics/dist/angulartics-ga.min.js",
+		"public/bower_components/spin.js/spin.js",
+		"public/bower_components/angular-spinner/angular-spinner.min.js",
+		"public/bower_components/socket.io-client/socket.io.js"
+	];
+    gulp.src(files)
+		.pipe(concat("libs.js"))
+		.pipe(uglify())
+        .pipe(gulp.dest("public"));
+});
+
 gulp.task("sass", function () {
     gulp.src("./assets/style/*.scss")
         .pipe(sass())
@@ -25,37 +47,24 @@ gulp.task("copy", function(){
 	gulp.src("./assets/graphics/*")
 		.pipe(gulp.dest("./public/graphics"));
 
-	gulp.src("./3rdparty/*")
+	gulp.src([
+		"./3rdparty/*",
+		"robots.txt"
+	])
 		.pipe(gulp.dest("./public"));
 });
 
 gulp.task("compile", function(){
-	gulp.src("client/app.js")
+	gulp.src([
+		"client/app.js",
+		"client/document.js",
+		"client/data.js",
+		"client/instagram.js"
+	])
 		.pipe(browserify({
-			transform: [annotate]
+			transform: [annotate, babel]
 		}))
-		.pipe(uglify())
+		.pipe(_if(is_production, uglify()))
-		.pipe(gulp.dest("public"));
-
-	gulp.src("client/document.js")
-		.pipe(browserify({
-			transform: [annotate]
-		}))
-		.pipe(uglify())
-		.pipe(gulp.dest("public"));
-
-	gulp.src("client/data.js")
-		.pipe(browserify({
-			transform: [annotate]
-		}))
-		.pipe(uglify())
-		.pipe(gulp.dest("public"));
-
-	gulp.src("client/instagram.js")
-		.pipe(browserify({
-			transform: [annotate]
-		}))
-		.pipe(uglify())
 		.pipe(gulp.dest("public"));
 });
 

models/courses.json

@@ -11,6 +11,10 @@
 		"id": "sculpting",
 		"name": "Скульптура"
 	},
+	{
+		"id": "ceramic",
+		"name": "Керамика"
+	},
 	{
 		"id": "composition",
 		"name": "Композиция"

models/menu.json

@@ -1,33 +1,34 @@
-{
+[
-	"menu": [
+  {
-		  {
+    "text": "Школа",
-				"text": "Школа",
+    "url": "/",
-				"url": "/",
+    "color": "blue"
-				"color": "blue"
+  },
-		  },
+  {
-		  {
+    "text": "События"
-				"text": "Расписание",
+  },
-				"url": "/schedule",
+  {
-				"color": "green"
+    "text": "Расписание",
-		  },
+    "url": "/schedule",
-		  {
+    "color": "green"
-				"text": "Занятия",
+  },
-				"color": ""
+  {
-		  },
+    "text": "Занятия",
-		  {
+    "color": ""
-				"text": "Коллектив",
+  },
-				"url": "/team",
+  {
-				"color": "pink"
+    "text": "Коллектив",
-		  },
+    "url": "/team",
-		  {
+    "color": "pink"
-				"text": "Галерея",
+  },
-				"color": ""
+  {
-		  },
+    "text": "Галерея",
-		  {
+    "url": "/gallery",
-				"text": "Документы",
+    "color": "red"
-				"url": "/docs",
+  },
-				"color": "yellow"
+  {
-		  }
+    "text": "Документы",
-	],
+    "url": "/docs",
-	"vkgroup": "https://vk.com/club10436104"
+    "color": "yellow"
-}
+  }
+]

models/team.json

@@ -101,5 +101,14 @@
 		"diploma": "ВСВ 1321444",
 		"status": "",
 		"picture": "http://static.shburg.org/art/team/teacher.jpg"
+	},
+	{
+		"id": "ea-burovtseva",
+		"name": "Ев Ал Буровцева",
+		"position": "Преподаватель керамики",
+		"edu": "",
+		"diploma": "",
+		"status": "",
+		"picture": ""
 	}
 ]

package.json

@@ -27,16 +27,19 @@
     "koa-useragent": "0.0.5",
     "koa.io": "0.0.3",
     "mz": "^1.3.0",
-    "promised-mongo": "^0.11.1",
+    "promised-mongo": "git+https://git@github.com/tmshv/promised-mongo",
+    "sitemap": "^0.9.0",
     "thunkify": "^2.1.2"
   },
   "devDependencies": {
+    "babelify": "^6.1.3",
     "bower": "^1.3.12",
     "browserify-ngannotate": "^0.7.1",
     "gulp": "^3.8.10",
     "gulp-autoprefixer": "0.0.6",
     "gulp-browserify": "^0.5.0",
     "gulp-concat": "^2.4.1",
+    "gulp-if": "^1.2.5",
     "gulp-imagemin": "~0.1.5",
     "gulp-minify-css": "~0.3.0",
     "gulp-sass": "^1.2.2",

robots.txt

@@ -0,0 +1,5 @@
+User-agent: *
+Disallow: /news 
+Allow: /
+Host: art.shlisselburg.org
+Sitemap: http://art.shlisselburg.org/sitemap.xml

routes/gallery.js

@@ -0,0 +1,83 @@
+/**
+ * Created by tmshv on 22/11/14.
+ */
+
+var co = require("co");
+var route = require("koa-route");
+var router = require("./");
+var db = require("../core/db");
+
+module.exports = function (app) {
+    app.use(route.get("/gallery", router.accepts({
+        "text/html": router.index(),
+        "text/plain": router.index(),
+        "application/json": function *() {
+            var query = {};
+            var albums = yield db.c("albums")
+                .find(query)
+                .toArray();
+
+            albums = yield albums.map(processAlbum);
+            this.body = albums;
+        }
+    })));
+
+    app.use(route.get("/gallery/:year", router.accepts({
+        "text/html": router.index(),
+        "text/plain": router.index(),
+        "application/json": function *(year) {
+            year = parseInt(year);
+            var start = new Date(year, 0, 1);
+            var end = new Date(year, 11, 31);
+            var query = {
+                date: {$gte: start, $lt: end}
+            };
+            var albums = yield db.c("albums")
+                .find(query)
+                .toArray();
+
+            albums = yield albums.map(processAlbum);
+            this.body = albums;
+        }
+    })));
+
+    app.use(route.get("/gallery/:year/:course/:album", router.accepts({
+        "text/html": router.index(),
+        "text/plain": router.index(),
+        "application/json": function *(year, course, album) {
+            year = parseInt(year);
+            course = '/' + course;
+            album = '/' + album;
+            var start = new Date(year, 0, 1);
+            var end = new Date(year, 11, 31);
+            var query = {
+                date: {$gte: start, $lt: end},
+                course_uri: course,
+                uri: album
+            };
+
+            var a = yield db.c("albums").findOne(query);
+            a = yield processAlbum(a);
+            this.body = a;
+        }
+    })));
+};
+
+function processAlbum(album) {
+    return co(function *() {
+        album.url = '/gallery/{year}{course}{album}'
+            .replace('{year}', album.date.getFullYear())
+            .replace('{course}', album.course_uri)
+            .replace('{album}', album.uri);
+
+        album.content = yield album.content.map(function (product_id) {
+            return co(function *() {
+                var product = yield db.c("products").findOne({_id: product_id});
+                if (product) return product;
+                else return null;
+            });
+        });
+
+        return album;
+    });
+}

routes/index.js

@@ -17,18 +17,16 @@ function accepts(routes, def) {
         if (types.length) {
             var type = types[0];
             yield routes[type].apply(this, arguments);
-        } else if(def){
+        } else if (def) {
             yield def;
-        }else{
+        } else {
             this.status = 406;
         }
     };
 }
 
 function index(filename) {
-    if (!filename){
+    if (!filename) filename = config['defaultIndex'];
-        filename = path.join(__dirname, "..", config.defaultIndex);
-    }
 
     return function *() {
         this.type = "text/html";

routes/schedule.js

@@ -44,4 +44,20 @@ module.exports = function (app) {
             }
         ))
     );
+
+    app.use(
+        route.get("/schedules", router.accepts(
+            {
+                "text/html": router.index(),
+                "text/plain": router.index(),
+
+                "application/json": function *() {
+                    this.type = "application/json";
+                    var data = yield db.c("schedules").find({}, {period:1 , semester: 1}).toArray();
+                    if(!data) this.status = 404;
+                    else this.body = data;
+                }
+            }
+        ))
+    );
 };

routes/sitemap.js

@@ -0,0 +1,57 @@
+/**
+ * Created by tmshv on 22/11/14.
+ */
+
+var co = require("co");
+var sitemap = require("sitemap");
+var route = require("koa-route");
+var router = require("./");
+var db = require("../core/db");
+
+module.exports = function (app) {
+    app.use(route.get("/sitemap.xml", function *() {
+        var urls = yield [menu(), gallery()];
+        urls = urls.reduce(function (urls, i) {
+            return urls.concat(i);
+        });
+
+        var sm = sitemap.createSitemap({
+            hostname: 'http://art.shlisselburg.org',
+            cacheTime: 600000, // 600 sec - cache purge period
+            urls: urls
+        });
+
+        var data = yield new Promise(function (resolve) {
+            sm.toXML(resolve);
+        });
+
+        this.set('Content-Type', 'application/xml');
+        this.body = data;
+    }));
+};
+
+function *menu(){
+    return require('../models/menu.json')
+        .filter(function(item){
+            return 'url' in item
+        })
+        .map(function (item) {
+            return {
+                url: item.url,
+                changefreq: 'daily'
+            }
+        });
+}
+
+function *gallery(){
+    var albums = yield db.c("albums")
+        .find({})
+        .toArray();
+
+    return albums.map(function (album) {
+        return {
+            url: `/gallery/${album.date.getFullYear()}${album.course_uri}${album.uri}`,
+            changefreq: 'monthly'
+        }
+    });
+}

server.js

@@ -20,6 +20,15 @@ app.use(bodyParser());
 app.use(logger());
 app.use(conditional());
 app.use(etag());
+
+app.use(function *(next) {
+    yield* next;
+
+    try{
+        var xp = this.response.header['x-prerender'] == 'true';
+        if(xp) this.body = this.body.replace('<meta name="fragment" content="!">', '');
+    }catch(e){}
+});
 app.use(prerender(config.prerender));
 
 app.use(serve(path.join(__dirname, "public")));
@@ -28,20 +37,20 @@ app.use(serve(path.join(__dirname, "templates")));
 app.use(helmet.defaults());
 
 app.use(function *(next) {
-	var q = this.query;
+    var q = this.query;
-	this.query = Object.keys(q)
+    this.query = Object.keys(q)
-		.reduce(function (q, key) {
+        .reduce(function (q, key) {
-			var v = q[key];
+            var v = q[key];
-			if(v === "true"){
+            if (v === "true") {
-				v = true;
+                v = true;
-			}else if(v === "false"){
+            } else if (v === "false") {
-				v = false;
+                v = false;
-			}
+            }
-			q[key] = v;
+            q[key] = v;
-			return q;
+            return q;
-		}, q);
+        }, q);
 
-	yield next;
+    yield next;
 });
 
 app.use(route.get("/", routes.index()));
@@ -49,32 +58,20 @@ app.use(route.get("/team", routes.index()));
 app.use(route.get("/docs", routes.index()));
 
 app.use(route.get("/document/:doc", routes.index(
-	path.join(__dirname, "templates/document.html")
+    path.join(__dirname, "templates/document.html")
 )));
 
+require("./routes/sitemap")(app);
+
 require("./routes/schedule")(app);
 require("./routes/news")(app);
-
+require("./routes/gallery")(app);
-require("./routes/404")(app);
 
 require("./instagram/router")(app);
 require("./instagram/io")(app);
 
-if (process.env["NODE_ENV"] === "development") {
+require("./routes/404")(app);
-	app.use(route.get("/debug", function *() {
-		var out = {};
-		out.ip = this.ip;
-		out.host = this.host;
-		out.headers = this.headers;
-		out.protocol = this.protocol;
-		out.query = this.query;
-		out.url = this.url;
-
-		this.type = "application/json";
-		this.body = out;
-	}));
-}
 
 module.exports = function (port) {
-	app.listen(port);
+    return app;
 };

templates/index.html

@@ -1,103 +0,0 @@
-<!DOCTYPE html>
-<html ng-app="hudozhka">
-<head>
-    <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>
-
-    <link rel="stylesheet" href="/style.css">
-    <link rel="stylesheet" href="/animate.min.css">
-    <link rel="stylesheet" href="/fonts/stylesheet.css">
-
-    <script src="/bower_components/jquery/dist/jquery.min.js"></script>
-    <script src="/bower_components/angular/angular.min.js"></script>
-    <script src="/bower_components/angular-route/angular-route.min.js"></script>
-    <script src="/bower_components/angular-animate/angular-animate.min.js"></script>
-    <script src="/bower_components/angulartics/dist/angulartics.min.js"></script>
-    <script src="/bower_components/angulartics/dist/angulartics-ga.min.js"></script>
-    <script src="/bower_components/spin.js/spin.js"></script>
-    <script src="/bower_components/angular-spinner/angular-spinner.min.js"></script>
-    <script src="/bower_components/socket.io-client/socket.io.js"></script>
-
-    <link rel="stylesheet" href="/bower_components/fotorama/fotorama.css">
-    <script src="/bower_components/fotorama/fotorama.js"></script>
-
-    <script src="/data.js"></script>
-    <script src="/app.js"></script>
-
-    <script>
-        (function (i, s, o, g, r, a, m) {
-            i['GoogleAnalyticsObject'] = r;
-            i[r] = i[r] || function () {
-                (i[r].q = i[r].q || []).push(arguments)
-            }, i[r].l = 1 * new Date();
-            a = s.createElement(o),
-                    m = s.getElementsByTagName(o)[0];
-            a.async = 1;
-            a.src = g;
-            m.parentNode.insertBefore(a, m)
-        })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
-
-        ga('create', 'UA-60209057-1', 'auto');
-        //        ga('send', 'pageview');
-    </script>
-</head>
-<body>
-<div class="menu" ng-controller="MenuController">
-    <ul>
-        <li ng-repeat="item in menu" class="{{item.color}}" ng-class="{selected:isCurrent(item)}">
-            <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>-->
-    </ul>
-</div>
-
-<div class="page {{pageClass}}" ng-view></div>
-
-<footer>
-    <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 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>
-</footer>
-</body>
-</html>

templates/main.html

@@ -1,49 +1,70 @@
 <!DOCTYPE html>
 <html ng-app="hudozhka">
 <head>
-    <base href="/">
     <meta name="fragment" content="!">
     <meta name="google-site-verification" content="8BxOTw-Q02DS2KAdcGcnIMwiPZ58DVB18XpOfRibCcg">
+    <meta name="msvalidate.01" content="E878301FE3E3F12D233A6B1156889601" />
     <meta name="viewport" content="width=device-width, maximum-scale=1.0" />
 
-    <title ng-bind="title">ДШХ Шлиссельбурга</title>
+    <base href="/">
+    <title ng-bind="title">ДХШ Шлиссельбурга</title>
 
     <link rel="stylesheet" href="/style.css">
     <link rel="stylesheet" href="/animate.min.css">
     <link rel="stylesheet" href="/fonts/stylesheet.css">
 
-    <script src="/bower_components/jquery/dist/jquery.min.js"></script>
+    <script src="/libs.js"></script>
-    <script src="/bower_components/angular/angular.min.js"></script>
-    <script src="/bower_components/angular-route/angular-route.min.js"></script>
-    <script src="/bower_components/angular-animate/angular-animate.min.js"></script>
-    <script src="/bower_components/angulartics/dist/angulartics.min.js"></script>
-    <script src="/bower_components/angulartics/dist/angulartics-ga.min.js"></script>
-    <script src="/bower_components/spin.js/spin.js"></script>
-    <script src="/bower_components/angular-spinner/angular-spinner.min.js"></script>
-    <script src="/bower_components/socket.io-client/socket.io.js"></script>
 
-    <link rel="stylesheet" href="/bower_components/fotorama/fotorama.css">
+    <link  href="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet">
-    <script src="/bower_components/fotorama/fotorama.js"></script>
+    <script src="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script>
+
+    <link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.5.7/slick.css"/>
+    <script src="//cdn.jsdelivr.net/jquery.slick/1.5.7/slick.min.js"></script>
 
     <script src="/data.js"></script>
     <script src="/app.js"></script>
+
+    <script>
+        if(window.location.host.indexOf('localhost') === -1){
+            (function (i, s, o, g, r, a, m) {
+                i['GoogleAnalyticsObject'] = r;
+                i[r] = i[r] || function () {
+                            (i[r].q = i[r].q || []).push(arguments)
+                        }, i[r].l = 1 * new Date();
+                a = s.createElement(o),
+                        m = s.getElementsByTagName(o)[0];
+                a.async = 1;
+                a.src = g;
+                m.parentNode.insertBefore(a, m)
+            })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
+
+            ga('create', 'UA-60209057-1', 'auto');
+            //ga('send', 'pageview');
+        }
+    </script>
 </head>
 <body>
-<div class="menu" ng-controller="MenuController">
+<div class="wrapper" ng-controller="AppController">
-    <ul>
+    <header>
-        <li ng-repeat="item in menu" class="{{item.color}}" ng-class="{selected:isCurrent(item)}">
+        <main-menu items="menuProvider"></main-menu>
-            <span ng-hide="isValid(item)">{{item.text}}</span>
+    </header>
-            <a href="{{item.url}}" ng-show="isValid(item)">{{item.text}}</a>
-        </li>
-        <!--<a href="{{vkgroup}}" class="vk"><img src="/graphics/icon.vk.png"></a>-->
-    </ul>
-</div>
 
-<div class="page {{pageClass}}" ng-view></div>
+    <div class="content">
+        <div class="page {{pageClass}}" ng-view autoscroll="true"></div>
+    </div>
 
-<footer>
+    <footer>
-    <div class="footer-content">
         <div class="info-block">
+            <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>
                 <h4>Ссылки на образовательные сайты</h4>
                 <ul>
@@ -58,29 +79,22 @@
                     <li><a href="http://kirovskdmh.ucoz.ru">kirovskdmh.ucoz.ru</a> — Музыкальная школа Кировска</li>
                 </ul>
             </div>
+        </div>
 
+        <div class="contacts" ng-controller="ContactsController">
             <div>
-                <h4>Документы</h4>
+                <h4>Контактная информация</h4>
-                <ul>
+                <p>Адрес: {{address}}</p>
-                    <li><a target="_blank" href="/document/edu-license">Лицензия на осуществление образовательной деятельности</a></li>
+                <p>Телефон: {{telephone}}</p>
-                    <li><a target="_blank" href="/document/gov-certificate">Свидетельство о государственной регистрации права</a></li>
+                <p>Почта: <a href="mailto:{{email}}">{{email}}</a></p>
-                    <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 class="info-block">
+        <div class="copyright" ng-controller="CopyrightController">
-            <div>
+            <span>©&nbsp;2012...{{now}} Художественная&nbsp;школа&nbsp;Шлиссельбурга</span>
-                <p>© 2014...{{now.year}}</p>
+            <span ng-show="developer">Разработка и поддержка сайта — <a href="http://tmshv.ru?utm_source=artshburg&utm_medium=developer&utm_campaign=tmshv_ru">www.tmshv.ru</a></span>
-                <p>Художественная школа Шлиссельбурга</p>
-                <p>Адрес: {{contact.address}}</p>
-                <p>Телефон: {{contact.telephone}}</p>
-                <p>Почта: <a href="mailto:{{contact.email}}">{{contact.email}}</a></p>
-            </div>
         </div>
-    </div>
+    </footer>
-</footer>
+</div>
 </body>
 </html>

templates/views/breadcrumbs.html

@@ -0,0 +1,8 @@
+<nav class="breadcrumbs">
+    <ul>
+        <li ng-repeat="i in crumbs">
+            <a ng-show="i.url" href="{{i.url}}">{{i.name}}</a>
+            <span ng-hide="i.url">{{i.name}}</span>
+        </li>
+    </ul>
+</nav>

templates/views/docs.html

@@ -1,10 +1,11 @@
-<div class="main" ng-controller="DocumentsController">
+<div class="documents-block"  ng-controller="DocumentsController">
-    <div class="docblock"><h2>Лицензии, свидетельства и уставы</h2>
+    <div class="doc" ng-repeat="doc in documents">
-        <div class="doc" ng-repeat="doc in documents">
+        <a href="{{doc.url}}" target="_blank" class="invisible">
-            <a href="{{doc.url}}" target="_blank">
+            <img ng-src="{{doc.preview}}">
-                <img ng-src="{{doc.preview}}">
+        </a>
-                <span>{{doc.title | uppercaseFirst}}</span>
+
-            </a>
+        <p>
-        </div>
+            <a href="{{doc.url}}" target="_blank">{{doc.title | uppercaseFirst}}</a>
+        </p>
     </div>
 </div>

templates/views/gallery-album.html

@@ -0,0 +1,27 @@
+<breadcrumbs crumbs="crumbs"></breadcrumbs>
+
+<div class="album-block" ng-controller="AlbumPageController">
+    <h3>{{album.title}}</h3>
+
+    <div class="album" ng-show="album">
+        <div class="album-info">
+            <p>Предмет: {{album.course}}</p>
+            <p>Преподаватель: {{album.teacherName}}</p>
+            <p class="description" ng-show="album.description">{{album.description}}</p>
+        </div>
+
+        <div class="album-item" ng-repeat="product in album.content">
+            <img ng-src="{{product.content.big.url}}" alt=""/>
+
+            <div class="product-info">
+                <div>
+                    <p ng-show="product.title" class="title">{{product.title | removeNewline}}</p>
+
+                    <p>{{product.author}}</p>
+
+                    <p ng-show="product.authorAge">{{product.authorAge}} лет</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

templates/views/gallery.html

@@ -0,0 +1,22 @@
+<div class="gallery-block" ng-controller="GalleryPageController">
+
+    <div class="gallery-period" ng-repeat="period in years">
+        <p class="period">{{period.year}}</p>
+        <div><div class="gallery-album" ng-repeat="album in period.albums">
+            <h3><a href="{{album.url}}">{{album.title}}</a></h3>
+            <a href="{{album.url}}" class="invisible">
+                <img ng-src="{{album.preview_url}}" alt=""/>
+            </a>
+            <p>{{album.course}}</p>
+        </div></div>
+    </div>
+
+
+    <!--<div class="gallery-album" ng-repeat="album in albums">-->
+        <!--<h3><a href="{{album.url}}">{{album.title}}</a></h3>-->
+        <!--<a href="{{album.url}}" class="invisible">-->
+            <!--<img ng-src="{{album.preview_url}}" alt=""/>-->
+        <!--</a>-->
+        <!--<p>{{album.course}}</p>-->
+    <!--</div>-->
+</div>

templates/views/home.html

@@ -1,7 +1,7 @@
 <div class="main-block">
-    <div>
+    <!--<div>-->
         <!--&lt;!&ndash;<a href="tel://{{telephone}}"></a>&ndash;&gt;-->
-        <span class="telephone">{{contact.telephone}}</span>
+        <!--<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;-->
@@ -9,7 +9,7 @@
             <!--&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>-->
 
     <h1>Шлиссельбургская детская художественная&nbsp;школа</h1>
 </div>
@@ -24,13 +24,11 @@
         <div class="fotorama"
              data-transition="crossfade"
              data-autoplay="6000"
+             data-nav="false"
              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>

templates/views/menu.html

@@ -0,0 +1,6 @@
+<nav role="navigation" class="main-menu">
+    <li ng-repeat="item in menu" class="{{item.color}}" ng-class="{selected: isActive(item)}">
+        <span ng-hide="isValid(item)">{{item.text}}</span>
+        <a href="{{item.url}}" ng-show="isValid(item)">{{item.text}}</a>
+    </li>
+</nav>

templates/views/schedule.html

@@ -1,61 +1,9 @@
 <div class="schedule" ng-controller="ScheduleController">
-    <p> Расписание {{sem}} семестра {{year}} года</p>
+    <p>
-    <div class="schedule-block">
+        <label>
-        <table>
+            <select ng-model="currentSchedule" ng-change="loadSchedule(currentSchedule, true)" ng-options="s.text for s in schedules"></select>
-            <thead class="">
+        </label>
-            <tr>
+    </p>
-                <th class="group">Гр.</th>
-                <th ng-class="{current: isToday(0)}">
-                    <p class="day">Понедельник</p>
 
-                    <p class="date">{{weekDay(0)}}</p>
+    <schedule groups="groups"></schedule>
-                </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>

templates/views/schedule/record.html

@@ -0,0 +1,8 @@
+<div class="schedule-record" ng-class="{even: i % 2 === 0, empty: !record.content.lesson}">
+    <div class="schedule-record__head">Группа {{record.name}} ({{record.time}})</div>
+    <div class="schedule-record__main">
+        <p class="schedule-record__name">{{record.content.lesson}}</p>
+        <p class="schedule-record__tutor">{{record.content.teacher}}</p>
+        <p class="schedule-record__time" ng-repeat="time in record.content.time">{{time}}</p>
+    </div>
+</div>

templates/views/schedule/slide.html

@@ -0,0 +1,10 @@
+<div class="schedule-slider__slide" ng-class="{current: day.current}">
+    <div class="schedule-slider__head">
+        <p>{{day.day}}</p>
+        <p>{{day.date}}</p>
+    </div>
+
+    <div class="schedule-slider__body">
+        <schedule-record ng-repeat="group in day.groups track by $index" record="group" i="$index"></schedule-record>
+    </div>
+</div>

templates/views/schedule/table.html

@@ -0,0 +1,55 @@
+<div class="schedule-table" ng-show="groups">
+    <table>
+        <thead>
+        <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>
+        <tr ng-repeat="group in groups">
+            <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>

templates/views/timeline-gram.html

@@ -1,15 +1,16 @@
-<div class="head">
+<div class="instagram">
-    <div class="user">
+    <div class="head">
-        <img ng-src="{{post.userpic}}" alt=""/>
+        <p class="date">{{post.date | date : "dd.MM.yyyy"}}</p>
-        <span>{{post.username}}</span>
+        <div class="user">
+            <img ng-src="{{post.userpic}}" alt=""/>
+            <span>{{post.username}}</span>
+        </div>
     </div>
-    <p class="date">{{post.date | date : "dd.MM.yyyy"}}</p>
-</div>
 
-<div class="body">
+    <div class="body">
-    <!--<h2>Рисунок</h2>-->
+        <a href="{{post.url}}" target="_blank" class="invisible">
-    <p>{{post.text}}</p>
+            <img ng-src="{{post.image}}" alt="">
-    <a href="{{post.url}}" target="_blank">
+        </a>
-        <img ng-src="{{post.image}}" alt="">
+        <p>{{post.text | removeHashtags | strip}}</p>
-    </a>
+    </div>
 </div>

templates/views/timeline-post.html

@@ -1,9 +1,9 @@
 <div class="head">
-    <a name="{{post.uri}}"></a>
+    <div>
-
+        <p class="date"><a href="#{{post.uri}}">{{post.date | date : "dd.MM.yyyy"}}</a></p>
+    </div>
 </div>
 
 <div class="body">
-    <div><p class="date"><a href="#{{post.uri}}">{{post.date | date : "dd.MM.yyyy"}}</a></p></div>
     <div class="message" ng-bind-html="message"></div>
 </div>

templates/views/timeline.html

@@ -5,7 +5,7 @@
                      ng-class="{left: isEven($index), right: !isEven($index)}">
 
     </timeline-record>
-    <div class="timeline-end">
+    <div class="timeline-footer" ng-show="showFooter()">
         <button class="more"
                 ng-click="loadNext()"
                 ng-disabled="timelineUpdating">

utils/common.js

@@ -0,0 +1,20 @@
+module.exports = {
+    range: range
+};
+
+/**
+ * Generates list of numbers
+ * @param  {Number} start starting value
+ * @param  {Number} num   amount of numbers in list
+ * @param  {Number} step  difference value
+ * @return {Array}        list of numbers
+ */
+function range(start, num, step) {
+    var list = [];
+    var val = start;
+    for (var i = 0; i < num; i++) {
+        list.push(val);
+        val += step;
+    }
+    return list;
+}

utils/date.js

@@ -0,0 +1,21 @@
+var range = require('./common').range;
+
+module.exports = {
+    getDates: getDates
+};
+
+/**
+ *
+ * @param start
+ * @returns {*}
+ */
+function getDates(start) {
+    var day = start.getDay();
+    return range(0, 6, 1).reduce(function (dates, weekDay) {
+        var d = 1 + weekDay - day;
+        var time = start.getTime() + (1000 * 60 * 60 * 24) * d;
+        var date = new Date(time);
+        dates.push(date.getDate());
+        return dates;
+    }, []);
+}