navigation menu update; other

src/client/components/Navigation.js

@@ -3,7 +3,8 @@ import template from '../../templates/components/navigation.html';
 export default function (app) {
     app.component('navigation', {
         bindings: {
-            menu: '<'
+            menu: '<',
+            rightText: '@'
         },
         template: template,
         controllerAs: '$'

src/client/config.js

@@ -4,7 +4,7 @@ const nbsp = 0xA0;
 
 export const mobileMatchSelector = '(max-device-width: 30em)';
 
-export let contacts = {
+export const contacts = {
     telephone: '+7 (81362) 76-312',
     email: 'hudozka@gmail.com',
     address: ['г. Шлиссельбург', 'ул. 18 января', 'д. 3']
@@ -12,7 +12,7 @@ export let contacts = {
         .join(' ')
 };
 
-export let collectiveSortPattern = [
+export const collectiveSortPattern = [
     'mg-timasheva',
     'va-sarzhin',
     'od-gogoleva',

src/client/controllers/AppController.js

@@ -1,4 +1,4 @@
-import {footer, mobileMatchSelector} from '../config';
+import {footer, mobileMatchSelector, contacts} from '../config';
 
 export default function (app) {
     app.controller('AppController', ($scope, menu) => {
@@ -12,6 +12,7 @@ export default function (app) {
             $scope.navigation = 'main-menu';
         }
 
+        $scope.phone = contacts.telephone;
         $scope.menuProvider = menu.items;
         $scope.footer = footer;
     });

src/style/components/main-menu.scss

@@ -1,15 +1,7 @@
 @import "../variables";
 
 .main-menu {
-  -webkit-overflow-scrolling: touch;
-
-  width: 100%;
-  z-index: 100;
-  overflow-x: scroll;
-  position: fixed;
-  top: 0;
   white-space: nowrap;
-  background-color: rgba(255, 255, 255, 0.95);
 
   font-size: 1.1em;
   color: $menu-inactive-item-color;
@@ -30,14 +22,7 @@
     text-decoration: none;
 
     color: $dark-color;
-    //border-bottom: 1px solid darken($light-color, 50%);
     border-bottom: 1px solid lighten($dark-color, 60%);
-
-    //&:hover {
-    //  color: $dark-color;
-    //
-    //  border-bottom: 1px solid darken($lighter-color, 50%);
-    //}
   }
 
   .selected {
@@ -77,11 +62,7 @@
 }
 
 @media (max-width: $mobile-width) {
-  header{
-    overflow: hidden;
-  }
-
   .main-menu{
-    background-color: white;
+    font-size: 1em;
   }
 }

src/style/components/navigation.scss

@@ -9,7 +9,8 @@
   position: fixed;
   top: 0;
   white-space: nowrap;
-  background-color: $darker-color;
+
+  background-color: rgba(255, 255, 255, 0.95);
 
   display: flex;
   justify-content: space-between;
@@ -17,30 +18,19 @@
 }
 
 .navigation__right {
-  color: $light-color;
-  margin-right: 3em;
+  color: $dark-color;
+  margin-right: 1em;
 
-  z-index:1000;
+  z-index: 1000;
 }
 
 @media (max-width: $mobile-width) {
   .navigation {
-    overflow: hidden;
-
-    width: 100%;
-    z-index: 100;
-    position: relative;
-    top: 0;
-
-    display: block;
-    //display: flex;
-    //justify-content: flex-start;
-    //align-items: center;
+    background-color: white;
   }
 
   .navigation__right {
-    //display: none;
-    //margin-right: 0;
+    padding: 0 $single-margin;
   }
 }
 

src/style/components/page-school.scss

@@ -24,11 +24,11 @@
 
   h1 {
     margin-top: $single-margin;
-    font-size: 1.5em;
+    font-size: 2em;
   }
 }
 
-@media (min-width: $mobile-width) {
+@media (max-width: $mobile-width) {
   .hudozka-title {
     text-align: center;
 

src/templates/components/navigation.html

@@ -2,6 +2,6 @@
     <main-menu items="$.menu"></main-menu>
 
     <div class="navigation__right">
-        <span>+7 (81362) 76-312</span>
+        <span>{{$.rightText}}</span>
     </div>
 </div>

src/templates/components/page-school.html

@@ -6,7 +6,7 @@
 
 <div class="content content_thin">
     <div class="hudozka-title">
-        <p>МБОУДОД</p>
+        <p>МБУДО</p>
         <h1>Шлиссельбургская детская художественная&nbsp;школа</h1>
     </div>
     <!--<div class="main-block">-->

src/templates/main.html

@@ -47,16 +47,8 @@
 <body>
 <div class="body-wrapper" ng-controller="AppController">
     <header ng-switch="navigation">
-        <main-menu items="menuProvider"></main-menu>
+        <navigation menu="menuProvider" right-text="{{phone}}"></navigation>
     </header>
-    <!--<header ng-switch="navigation">-->
-        <!--<navigation menu="menuProvider"-->
-                    <!--ng-switch-when="navigation"-->
-        <!--&gt;</navigation>-->
-        <!--&lt;!&ndash;<main-menu items="menuProvider"&ndash;&gt;-->
-        <!--&lt;!&ndash;ng-switch-default&ndash;&gt;-->
-        <!--&lt;!&ndash;&gt;</main-menu>&ndash;&gt;-->
-    <!--</header>-->
 
     <div class="body-wrapper__content">
         <ng-view class="page" autoscroll></ng-view>