Skip to content

Codecrew / Moya

Go to a project
Commit 004889b3 by Linnea Samila
Options

moved group-buttons to sidebar

1 parent 77f9a21b
Inline Side-by-side
Showing with 51 additions and 34 deletions
code/moya-angular/src/app/app.component.html
<div id="top-container"> <div id="top-container">
<div id="left-menu"> <div id="left-menu">
<router-outlet name="left-menu"></router-outlet> <router-outlet name="left-menu"></router-outlet>
</div> </div>
<div id="contentarea"> <div id="contentarea">
<div id="topbar"> <div id="topbar">
<top-menu></top-menu>
<moya-locale></moya-locale> <moya-locale></moya-locale>
</div> </div>
<div id="content"> <div id="content">
......
code/moya-angular/src/app/app.component.scss
...@@ -6,13 +6,6 @@ ...@@ -6,13 +6,6 @@
min-height: 100%; min-height: 100%;
} }
<<<<<<< HEAD
#left-menu {
}
=======
>>>>>>> refactoring some scss
#contentarea { #contentarea {
flex-grow: 1; flex-grow: 1;
display: flex; display: flex;
...@@ -24,6 +17,9 @@ ...@@ -24,6 +17,9 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
width: 100%;
background: white;
height: 2em;
} }
#content { #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)? 'disabled-flag':'flag'" (click)="selectFinnish()" />
<img src="assets/Flag_of_Finland.svg" [className]="(fiSelected)? 'disabledFlag':'flag' "height="20px" (click)="selectFinnish()" /> <img src="assets/Flag_of_Britain.svg" [className]="(enSelected)? 'disabled-flag':'flag'" (click)="selectEnglish()" />
<img src="assets/Flag_of_Britain.svg" [className]="(enSelected)? 'disabledFlag':'flag'" height="20px" (click)="selectEnglish()" /> <img src="assets/Flag_of_Sweden.svg" [className]="(svSelected)? 'disabled-flag':'flag'" (click)="selectSwedish()" />
<img src="assets/Flag_of_Sweden.svg" [className]="(svSelected)? 'disabledFlag':'flag'" height="20px" (click)="selectSwedish()" />
</div> </div>
code/moya-angular/src/app/components/moya-locale/moya-locale.component.scss
.disabledFlag, :host {
.flag { position: relative;
border: 1px solid black; right: 0;
margin-right: 3px; text-align: right;
cursor: pointer;
} }
.disabledFlag { .disabled-flag {
opacity: 0.0; opacity: 0;
cursor: auto; cursor: move;
border: none; border: none;
display: hidden;
} }
/* http://flexboxfroggy.com/ */ // http://flexboxfroggy.com/
#flagBond { .flag-bond {
display: flex; 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"> <nav id="leftNav">
<div *ngFor="let group of menu" class="leftNavGroup"> <div *ngFor="let group of menu" class="leftNavGroup">
<span class="menuHeader">{{group.name}}</span> <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> </div>
</nav> </nav>
<a href="http://codecrew.fi" alt="Codecrew homepage" target="_blank"><img id="moya-logo" src="assets/moya-logo.svg" /></a> <a href="http://codecrew.fi" alt="Codecrew homepage" target="_blank">
</div> <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 { #leftNavTop {
min-height: 100vh; min-height: 100vh;
...@@ -32,7 +36,7 @@ ...@@ -32,7 +36,7 @@
right: 0px; right: 0px;
width: auto; width: auto;
&.:active { &:active {
background-image: linear-gradient(90deg, rgba(126, 142, 218,0.13) 0%, rgba(255,255,255,0.00) 92%); background-image: linear-gradient(90deg, rgba(126, 142, 218,0.13) 0%, rgba(255,255,255,0.00) 92%);
border-left: 3px solid #69B1A1; border-left: 3px solid #69B1A1;
text-decoration: none; text-decoration: none;
......
code/moya-angular/src/app/menu/top-menu/top-menu.component.scss
@import '../../../../common'; @import '../../../common';
#topNav { #topNav {
padding: 10px 10px 10px 30px; padding: 10px 10px 10px 30px;
display: flex; display: flex;
background-color: $color-bg-nav; //background-color: $color-bg-nav;
flex-wrap: wrap;
text-align: center;
} }
.topNavItem { .topNavItem {
display: inline-block; display: inline-block;
padding: 10px 20px 10px 20px; padding: 10px 20px 10px 20px;
margin-right: 10px; margin: 5px auto;
font-family: $font-nav;
font-family: $font-menu;
font-size: 14px; font-size: 14px;
color: #FFFFFF; color: #FFFFFF;
letter-spacing: 0; letter-spacing: 0;
opacity: 0.5; opacity: 0.8;
min-width: 100px; min-width: 100px;
text-align: center; text-align: center;
&:active { &:active {
opacity: 1.0; opacity: 1.0;
border: 3px solid white;
} }
} }
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!