moved group-buttons to sidebar

code/moya-angular/src/app/app.component.html

 <div id="top-container">
+
   <div id="left-menu">
-    <router-outlet name="left-menu"></router-outlet>
+
+  <router-outlet name="left-menu"></router-outlet>
+
   </div>
 
   <div id="contentarea">
     <div id="topbar">
-      <top-menu></top-menu>
       <moya-locale></moya-locale>
     </div>
     <div id="content">

code/moya-angular/src/app/app.component.scss

@@ -6,13 +6,6 @@
   min-height: 100%;
 }
 
-<<<<<<< HEAD
-#left-menu {
-}
-
-
-=======
->>>>>>> refactoring some scss
 #contentarea {
   flex-grow: 1;
   display: flex;
@@ -24,6 +17,9 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
+  width: 100%;
+  background: white;
+  height: 2em;
 }
 
 #content {

code/moya-angular/src/app/components/moya-locale/moya-locale.component.html

+<div class="flag-bond">
 
-<div id="flagBond">
-  <img src="assets/Flag_of_Finland.svg"  [className]="(fiSelected)? 'disabledFlag':'flag' "height="20px" (click)="selectFinnish()" />
-  <img src="assets/Flag_of_Britain.svg" [className]="(enSelected)? 'disabledFlag':'flag'" height="20px" (click)="selectEnglish()" />
-  <img src="assets/Flag_of_Sweden.svg" [className]="(svSelected)? 'disabledFlag':'flag'" height="20px" (click)="selectSwedish()" />
+  <img src="assets/Flag_of_Finland.svg" [className]="(fiSelected)? 'disabled-flag':'flag'" (click)="selectFinnish()" />
+  <img src="assets/Flag_of_Britain.svg" [className]="(enSelected)? 'disabled-flag':'flag'" (click)="selectEnglish()" />
+  <img src="assets/Flag_of_Sweden.svg" [className]="(svSelected)? 'disabled-flag':'flag'" (click)="selectSwedish()" />
 
 </div>

code/moya-angular/src/app/components/moya-locale/moya-locale.component.scss

-.disabledFlag,
-.flag {
-  border: 1px solid black;
-  margin-right: 3px;
-  cursor: pointer;
+:host {
+  position: relative;
+  right: 0;
+  text-align: right;
 }
 
-.disabledFlag {
-  opacity: 0.0;
-  cursor: auto;
+.disabled-flag {
+  opacity: 0;
+  cursor: move;
   border: none;
+  display: hidden;
 }
 
-/* http://flexboxfroggy.com/ */
-#flagBond {
+// http://flexboxfroggy.com/
+.flag-bond {
   display: flex;
+
+  img {
+    border: 1px solid black;
+    margin-right: 3px;
+    cursor: pointer;
+    height: 20px;
+  }
 }

code/moya-angular/src/app/menu/left-menu/left-menu.component.html

+<div id="leftNavTop" [class]="styleClass">
 
+  <h1>Tapahtuma</h1>
+  <h2>Lippukauppa</h2>
 
-<div id="leftNavTop"  [class]="styleClass">
+  <top-menu></top-menu>
 
   <nav id="leftNav">
 
     <div *ngFor="let group of menu" class="leftNavGroup">
 
       <span class="menuHeader">{{group.name}}</span>
-      <a *ngFor="let item of group.items" class="leftNavItem" [routerLink]="item.path" routerLinkActive="active" [queryParams]="item.params" >{{item.name}}</a>
+
+      <a *ngFor="let item of group.items" class="leftNavItem" [routerLink]="item.path" routerLinkActive="active" [queryParams]="item.params">{{item.name}}</a>
 
     </div>
 
   </nav>
 
-  <a href="http://codecrew.fi" alt="Codecrew homepage" target="_blank"><img id="moya-logo" src="assets/moya-logo.svg" /></a>
-</div>
+  <a href="http://codecrew.fi" alt="Codecrew homepage" target="_blank">
+    <img id="moya-logo" src="assets/moya-logo.svg" />
+  </a>
 
+</div>

code/moya-angular/src/app/menu/left-menu/left-menu.component.scss

-@import '../../../../common';
+@import '../../../common';
+
+:host{
+  color: white;
+}
 
 #leftNavTop {
   min-height: 100vh;
@@ -32,7 +36,7 @@
   right: 0px;
   width: auto;
 
-  &.:active {
+  &:active {
     background-image: linear-gradient(90deg, rgba(126, 142, 218,0.13) 0%, rgba(255,255,255,0.00) 92%);
     border-left: 3px solid #69B1A1;
     text-decoration: none;

code/moya-angular/src/app/menu/top-menu/top-menu.component.html

 
 <nav id="topNav">
-  <a  class="topNavItem" id="userTopNav" routerLink="/user" routerLinkActive="active"  i18n>Kävijänäkymä</a>
+  <a  class="topNavItem" id="userTopNav" routerLink="/user" routerLinkActive="active" i18n>Kävijänäkymä</a>
   <a  class="topNavItem" id="infoTopNav" routerLink="/info" routerLinkActive="active" [queryParams]="{p: 'useradmin/list.jsf'}"  i18n>Infonäkymä</a>
   <a  class="topNavItem" id="adminTopNav" routerLink="/admin" routerLinkActive="active"  i18n>Ylläpitonäkymä</a>
 </nav>

code/moya-angular/src/app/menu/top-menu/top-menu.component.scss

-@import '../../../../common';
+@import '../../../common';
 
 #topNav {
   padding: 10px 10px 10px 30px;
   display: flex;
-  background-color: $color-bg-nav;
+  //background-color: $color-bg-nav;
+  flex-wrap: wrap;
+  text-align: center;
 }
 
 .topNavItem {
   display: inline-block;
   padding: 10px 20px 10px 20px;
-  margin-right: 10px;
-
-  font-family: $font-nav;
+  margin: 5px auto;
 
+  font-family: $font-menu;
 
   font-size: 14px;
   color: #FFFFFF;
   letter-spacing: 0;
 
-  opacity: 0.5;
+  opacity: 0.8;
   min-width: 100px;
   text-align: center;
 
   &:active {
     opacity: 1.0;
+    border: 3px solid white;
   }
 }