styling

matt4446 · May 26, 2017 · 46e80d5 · 46e80d5
1 parent 34c39cb
commit 46e80d5
Show file tree

Hide file tree

Showing 36 changed files with 211 additions and 165 deletions.
diff --git a/.vscode/symbols.json b/.vscode/symbols.json
diff --git a/app/app.css b/app/app.css
diff --git a/app/app.module.ts b/app/app.module.ts
@@ -66,6 +66,7 @@ import { NativeScriptUISideDrawerModule } from "nativescript-telerik-ui/sidedraw
         Controls.NxListItem,
         Controls.NxIcon,
         Controls.NxNav,
+        Controls.NxNavRow,
         Controls.NxNavBack,
         Controls.NxPullToRefresh,
         Controls.NxPullToRefreshView,

diff --git a/app/app.scss b/app/app.scss
@@ -1,5 +1,6 @@
 @import './theme/_app-variables.scss';
 @import './theme/fonts.scss';
+@import './theme/_components.scss';
 
 .inset {
     padding: $primary-content-padding;

diff --git a/app/controls/controls.ref.ts b/app/controls/controls.ref.ts
@@ -12,6 +12,6 @@ export {NxList} from "./list/list";
 export {NxIcon} from "./icons/nx-icon";
 export {NxNavBack} from "./nav/nav-back";
 export {NxTitle} from "./nav/nav-title";
-export {NxNav} from "./nav/nav";
+export {NxNav, NxNavRow} from "./nav/nav";
 export {Paralax,ParallaxCollapsableItem,ParallaxExpandableItem} from "./parallax/parallax";
 export {NxPullToRefresh, NxPullToRefreshView, NxPullToRefreshAnimateElement} from "./pullToRefresh/pullToRefresh.control";
diff --git a/app/controls/list/list-item.ts b/app/controls/list/list-item.ts
@@ -33,15 +33,15 @@ import { StackLayout } from "ui/layouts/stack-layout";
             <StackLayout class="nx-item inset-top inset-bottom">
                 <GridLayout #animateItem columns="40, *, 50" rows="auto" (tap)="tapWrapper($event)">
                     <!-- default layout -->
-                    <StackLayout col="0" row="0" class="icon-column icon-left nx-item-column" >
+                    <StackLayout col="0" row="0" class="nx-item-column" >
                         <ng-content select="[item-left]"></ng-content>
                     </StackLayout>
 
                     <StackLayout col="1" row="0" class="nx-item-column">
                         <ng-content></ng-content>
                     </StackLayout>
 
-                    <StackLayout col="2" row="0" class="icon-column icon-right nx-item-column">
+                    <StackLayout col="2" row="0" class="nx-item-column">
                         <ng-content select="[item-right]"></ng-content>
                     </StackLayout>
 

diff --git a/app/controls/list/list.common.css b/app/controls/list/list.common.css
@@ -1 +0,0 @@
-.nx-header{padding:14;border-radius:4;background-color:#01579b;color:#fff}.nx-header-ext{background-color:#01579b;border-color:#01579b}.nx-list{margin-bottom:14;border-width:1;border-radius:4;border-color:#eee;background-color:#fff}.nx-item{border-bottom-width:1;border-color:#c8c7cc;border-style:solid}.nx-item-top-border{height:1;border-radius:0;border-width:1;border-color:#c8c7cc}.icon-column{vertical-align:center;horizontal-align:center}.nx-item-column{vertical-align:center}.inset{padding:14}.inset-sides{padding-left:14;padding-right:14}.inset-top{padding-top:14}.inset-bottom{padding-bottom:14}

diff --git a/app/controls/list/list.common.scss b/app/controls/list/list.common.scss
@@ -1,65 +0,0 @@
-@import "app/theme/_app-variables.scss";
-
-$header-primary-backgound-color: $background-color-primary;
-
-$list-backgorund-color: #FFF;
-$list-item-border-color: #c8c7cc;
-$list-margin: $primary-content-padding;
-$list-header-text-color:$font-primary-title-color; 
-
-.nx-header {
-    padding: $list-margin;
-    border-radius: 4;
-    background-color: $header-primary-backgound-color;
-    color: $list-header-text-color
-}
-.nx-header-ext {
-    background-color:$header-primary-backgound-color;
-    border-color:$header-primary-backgound-color;
-}
-
-.nx-list {
-    margin-bottom: $list-margin;
-    border-width: 1;
-    border-radius: 4;
-    border-color: #eee;
-    background-color: $list-backgorund-color;
-}
-
-.nx-item {
-    border-bottom-width: 1;
-    border-color: $list-item-border-color;
-    border-style: solid;
-}
-
-.nx-item-top-border {
-    height: 1;
-    border-radius: 0;
-    border-width: 1;
-    border-color: $list-item-border-color;
-}
-
-.icon-column{
-    vertical-align: center;
-    horizontal-align: center;
-}
-
-.nx-item-column {
-   vertical-align: center;
-}
-
-.inset {
-    padding: $list-margin;
-}
-.inset-sides
-{
-    padding-left: $list-margin;
-    padding-right:$list-margin;
-}
-.inset-top {
-    padding-top: $list-margin;
-}
-.inset-bottom {
-    padding-bottom: $list-margin;
-}
-

diff --git a/app/controls/nav/nav.common.css b/app/controls/nav/nav.common.css
@@ -1 +0,0 @@
-.nx-nav{height:40}.nx-nav-wrapper{border-bottom-color:#0590fd;border-bottom-width:1;border-bottom-style:solid}.nx-nav-row1{padding:0;margin:0;background-color:#014982}.nx-nav-row2{background-color:#013b68;border-bottom-color:#0173ce;border-bottom-width:1;border-bottom-style:solid}.title{color:#fff}

diff --git a/app/controls/nav/nav.common.scss b/app/controls/nav/nav.common.scss
@@ -1,40 +0,0 @@
-@import "app/theme/_app-variables.scss";
-
-$header-primary-backgound-color: $background-color-primary;
-
-$nav-background-color: $background-color-primary;
-$nav-background-color1: darken($nav-background-color, 5% );
-$nav-background-color2: darken($nav-background-color, 10% );
-
-$nav-item-border-color: #c8c7cc;
-$nav-margin: $primary-content-padding;
-$font-color: $font-primary-title-color; 
-
-$nav-border-color1: lighten($nav-background-color, 10% );
-$nav-border-color2: lighten($nav-background-color, 20% );
-
-.nx-nav {
-  height: 40;
-}
-
-.nx-nav-wrapper {
-    border-bottom-color: $nav-border-color2;
-    border-bottom-width: 1;
-    border-bottom-style: solid;
-}
-.nx-nav-row1 {
-    padding: 0;
-    margin: 0;
-    background-color: $nav-background-color1;
-}
-.nx-nav-row2 {
-    background-color: $nav-background-color2;
-
-    border-bottom-color: $nav-border-color1;
-    border-bottom-width: 1;
-    border-bottom-style: solid;
-}
-
-.title {
-    color: $font-color;
-}

diff --git a/app/controls/nav/nav.ts b/app/controls/nav/nav.ts
@@ -7,32 +7,48 @@ import { MaterialIcon } from "../icons/material-icon";
 import { NxNavBack } from "./nav-back";
 import { Page } from "ui/page";
 
+@Component({
+    moduleId: module.id,
+    selector: "nx-nav-row",
+    styleUrls: ["nav.common.css"],
+    template: `
+    <FlexboxLayout class="nx-nav-row">
+        <StackLayout class="nx-nav-col nx-nav-col1" orientation="horizontal" width="50">
+            <ng-content select="[nav-row-left]"></ng-content>
+        </StackLayout>
+        <StackLayout flexGrow="1" class="nx-nav-col nx-nav-col2" orientation="horizontal">
+            <ng-content select="[nav-row-title]"></ng-content>
+        </StackLayout>
+        <StackLayout class="nx-nav-col nx-nav-col3" orientation="horizontal" width="50">
+            <ng-content select="[nav-row-right]"></ng-content>
+        </StackLayout>
+    </FlexboxLayout>
+    `
+})
+export class NxNavRow {
+}
+
 @Component({
     moduleId: module.id,
     selector:"nx-nav",
     styleUrls: ["nav.common.css"],
     template:`
         <StackLayout class="nx-nav-wrapper">
-            <StackLayout class="nx-nav nx-nav-row1">
-                <GridLayout rows="*" columns="*,*,*">
-                    <StackLayout orientation="horizontal" col="0"  verticalAlignment="center">
-                        <nx-nav-back></nx-nav-back>
-                        <nx-icon item-right icon="menu" (tap)="menuButtonTap($event)"></nx-icon>
-                    </StackLayout>
-
-                    <StackLayout orientation="horizontal" col="1" verticalAlignment="center">
-                        <ng-content select="[main-header]"></ng-content>
-                    </StackLayout>
-
-                    <StackLayout orientation="horizontal" col="2" class="text-right" verticalAlignment="center">
-                        <ng-content select="[nav-right]"></ng-content>
-                    </StackLayout>
-                </GridLayout>
+            <StackLayout class="row1">
+                <nx-nav-row>
+                    <nx-icon [nav-row-left] icon="menu" (tap)="menuButtonTap($event)"></nx-icon>
+                    <ng-content [nav-row-title]></ng-content>
+                    <ng-content [nav-row-right] select="[nav-right]"></ng-content>
+                </nx-nav-row>
             </StackLayout>
-            <!-- Page titles etc --->
-            <StackLayout class="nx-nav nx-nav-row2" verticalAlignment="center">
-                <ng-content></ng-content>
+            <StackLayout class="row2">
+                <nx-nav-row>
+                    <nx-nav-back [nav-row-left]></nx-nav-back>
+                    <ng-content [nav-row-title]></ng-content>
+                    <ng-content [nav-row-right] select="[nav-secondary-right]"></ng-content>
+                </nx-nav-row>
             </StackLayout>
+
         </StackLayout>
     `,
     inputs: [ "showBack", "showMenu", "title" ],

diff --git a/app/pages/competition/club/club.page.ts b/app/pages/competition/club/club.page.ts
@@ -19,7 +19,7 @@ import {Logger} from "../../../providers/logger";
             <competition-nav drawer-aside-left></competition-nav>
 
             <nx-nav>
-                <label class="nx-header-title" [text]="'Club' | Title" style="horizontal-align:center"></label>
+                <label class="title" [text]="'Club' | Title" style="horizontal-align:center"></label>
                 <ion-icon nav-right nav="true" icon="ion-android-favorite"></ion-icon>
             </nx-nav>
 
@@ -28,7 +28,7 @@ import {Logger} from "../../../providers/logger";
                     <nx-list *ngFor="let group of list | orderBy:'key'">
                         <nx-header item-top>
                             <!-- grade name -->
-                            <label [text]="group.key" class="nx-header-title"></label>
+                            <label [text]="group.key" class="title"></label>
                         </nx-header>
                         <!-- competitors in that grade -->
 

diff --git a/app/pages/competition/clubList/club.list.page.ts b/app/pages/competition/clubList/club.list.page.ts
@@ -26,7 +26,7 @@ import { Observable } from "rxjs/Rx";
                 <StackLayout class="inset">
                     <nx-list *ngFor="let clubGroup of list|async | groupBy: 'Letter' | orderBy:'key'">
                         <nx-header item-top>
-                            <label [text]="clubGroup.key" class="nx-header-title"></label>
+                            <label [text]="clubGroup.key" class="title"></label>
                         </nx-header>
 
                         <nx-item *ngFor="let club of clubGroup.items | orderBy:'Name'"

diff --git a/app/pages/competition/competition.page.html b/app/pages/competition/competition.page.html
@@ -10,7 +10,7 @@
         <StackLayout class="inset">
             <nx-list>
                 <nx-header item-top>
-                    <label [text]="'Competition & Results' | Title" class="nx-header-title"></label>
+                    <label [text]="'Competition & Results' | Title" class="title"></label>
                 </nx-header>
                 <nx-item animate="true" pageTransition="slide" [nsRouterLink]="['startList']">
                     <nx-icon item-left icon="assignment"></nx-icon>

diff --git a/app/pages/competition/findCompetitor/find.competitor.page.ts b/app/pages/competition/findCompetitor/find.competitor.page.ts
@@ -15,15 +15,15 @@ import {Logger} from "../../../providers/logger";
             <competition-nav drawer-aside-left></competition-nav>
 
             <nx-nav>
-                <label class="nx-header-title" [text]="'Find Competitors' | Title" style="horizontal-align:center"></label>
+                <label class="title" [text]="'Find Competitors' | Title" style="horizontal-align:center"></label>
                 <ion-icon nav-right nav="true" icon="ion-android-favorite"></ion-icon>
             </nx-nav>
 
             <nx-content (refreshStarted)="refresh($event)">
                 <StackLayout class="inset">
                     <nx-list *ngFor="let clubGroup of list | groupBy: 'Letter' | orderBy:'key'">
                         <nx-header item-top>
-                            <label [text]="clubGroup.key" class="nx-header-title"></label>
+                            <label [text]="clubGroup.key" class="title"></label>
                         </nx-header>
 
                         <nx-item *ngFor="let club of clubGroup.items | orderBy:'Name'">

diff --git a/app/pages/competition/grade/competitors/grade.competitors.page.ts b/app/pages/competition/grade/competitors/grade.competitors.page.ts
@@ -22,16 +22,16 @@ import {Logger} from "../../../../providers/logger";
         <nx-drawer>
             <competition-nav drawer-aside-left></competition-nav>
             <nx-nav>
-                <label class="nx-header-title" [text]="'Competitors' | Title" style="horizontal-align:center"></label>
+                <label class="title" [text]="'Competitors' | Title" style="horizontal-align:center"></label>
                 <ion-icon nav-right nav="true" icon="ion-android-favorite"></ion-icon>
             </nx-nav>
             <nx-content (refreshStarted)="refresh($event)">
                 <GridLayout>
                     <StackLayout class="inset">
                         <nx-list *ngFor="let startGroup of list | groupBy: 'StartGroup'">
                             <nx-header item-top>
-                                <label *ngIf="groups > 1" [text]="'StartGroup: ' + startGroup.key | Title" class="nx-header-title"></label>
-                                <label *ngIf="groups <= 1" [text]="'StartGroup'| Title" class="nx-header-title"></label>
+                                <label *ngIf="groups > 1" [text]="'StartGroup: ' + startGroup.key | Title" class="title"></label>
+                                <label *ngIf="groups <= 1" [text]="'StartGroup'| Title" class="title"></label>
                             </nx-header>
                             <nx-item *ngFor="let person of startGroup.items | orderBy:'StartNumber'">
                                 <label item-left [text]="person.StartNumber"></label>

diff --git a/app/pages/competition/grade/grade.page.ts b/app/pages/competition/grade/grade.page.ts
@@ -22,7 +22,7 @@ import {Logger} from "../../../providers/logger";
         <nx-drawer>
             <competition-nav drawer-aside-left></competition-nav>
             <nx-nav>
-                <label class="nx-header-title" [text]="'Competitors' | Title" style="horizontal-align:center"></label>
+                <label class="title" [text]="'Competitors' | Title" style="horizontal-align:center"></label>
                 <ion-icon nav-right nav="true" icon="ion-android-favorite"></ion-icon>
             </nx-nav>
 

diff --git a/app/pages/competition/gradeList/grade.list.page.ts b/app/pages/competition/gradeList/grade.list.page.ts
@@ -30,7 +30,7 @@ import { Observable } from "rxjs";
                 <StackLayout class="inset" *ngIf="!loading">
                     <nx-list *ngFor="let group of list|async | groupBy: 'Discipline' | orderBy:'key'">
                         <nx-header item-top>
-                            <label [text]="group.key | Title" class="nx-header-title"></label>
+                            <label [text]="group.key | Title" class="title"></label>
                         </nx-header>
 
                         <nx-item *ngFor="let grade of group.items | orderBy:'ClassName'"

diff --git a/app/pages/competition/information/information.page.ts b/app/pages/competition/information/information.page.ts
@@ -16,15 +16,15 @@ import { Observable } from "rxjs/Rx";
             <competition-nav drawer-aside-left></competition-nav>
 
             <nx-nav>
-                <label class="nx-header-title" text="Information" style="horizontal-align:center"></label>
+                <label class="title" text="Information" style="horizontal-align:center"></label>
                 <ion-icon nav-right nav="true" icon="ion-android-favorite"></ion-icon>
             </nx-nav>
 
             <nx-content (refreshStarted)="refresh($event)">
                 <StackLayout class="inset">
                     <nx-list>
                         <nx-header item-top>
-                            <label [text]="'information' | Title" class="nx-header-title"></label>
+                            <label [text]="'information' | Title" class="title"></label>
                         </nx-header>
                         <nx-item>
                             <label text="Information"></label>

diff --git a/app/pages/competition/startList/competitors/competitors.page.ts b/app/pages/competition/startList/competitors/competitors.page.ts
@@ -60,7 +60,7 @@ export class StartGroup{
         <nx-drawer>
             <competition-nav drawer-aside-left></competition-nav>
             <nx-nav>
-                <label class="nx-header-title" [text]="'Competitors' | Title" style="horizontal-align:center"></label>
+                <label class="title" [text]="'Competitors' | Title" style="horizontal-align:center"></label>
                 <ion-icon nav-right nav="true" icon="ion-android-favorite"></ion-icon>
             </nx-nav>
             <!--
@@ -75,8 +75,8 @@ export class StartGroup{
                         <template let-item="item">
                            <nx-list>
                                 <nx-header item-top>
-                                    <label *ngIf="groups > 1" [text]="'StartGroup: ' + item.key | Title" class="nx-header-title"></label>
-                                    <label *ngIf="groups <= 1" [text]="'StartGroup'| Title" class="nx-header-title"></label>
+                                    <label *ngIf="groups > 1" [text]="'StartGroup: ' + item.key | Title" class="title"></label>
+                                    <label *ngIf="groups <= 1" [text]="'StartGroup'| Title" class="title"></label>
                                 </nx-header>
                                 <start-group-list [data]="item.items"></start-group-list>
                            </nx-list> 
@@ -95,8 +95,8 @@ export class StartGroup{
                     <StackLayout class="inset">
                         <nx-list *ngFor="let startGroup of groupedStartList">
                             <nx-header item-top>
-                                <label *ngIf="groups > 1" [text]="'StartGroup: ' + startGroup.key | Title" class="nx-header-title"></label>
-                                <label *ngIf="groups <= 1" [text]="'StartGroup'| Title" class="nx-header-title"></label>
+                                <label *ngIf="groups > 1" [text]="'StartGroup: ' + startGroup.key | Title" class="title"></label>
+                                <label *ngIf="groups <= 1" [text]="'StartGroup'| Title" class="title"></label>
                             </nx-header>
                             <nx-item *ngFor="let person of startGroup.items | orderBy:'StartNumber'">
                                 <label item-left [text]="person.StartNumber"></label>

diff --git a/app/pages/competition/startList/obsolete.html b/app/pages/competition/startList/obsolete.html
@@ -4,7 +4,7 @@
     <competition-nav drawer-aside-left></competition-nav>
 
     <nx-nav>
-        <label class="nx-header-title" text="Start List" style="horizontal-align:center"></label>
+        <label class="title" text="Start List" style="horizontal-align:center"></label>
         <ion-icon nav-right nav="true" icon="ion-android-favorite"></ion-icon>
     </nx-nav>
 
@@ -14,7 +14,7 @@
                 <!--<StartListItems [title]='gradeGroup.key' [items]='gradeGroup'></StartListItems>
                 -->
                 <nx-header item-top>
-                    <label [text]="gradeGroup.Discipline | Title" class="nx-header-title"></label>
+                    <label [text]="gradeGroup.Discipline | Title" class="title"></label>
                 </nx-header>
                 <nx-item *ngFor="#grade of gradeGroup.Grades">
                      <ion-icon item-left icon="ion-clipboard"></ion-icon>
Original file line number	Diff line number	Diff line change
		@@ -1 +0,0 @@
		.nx-header{padding:14;border-radius:4;background-color:#01579b;color:#fff}.nx-header-ext{background-color:#01579b;border-color:#01579b}.nx-list{margin-bottom:14;border-width:1;border-radius:4;border-color:#eee;background-color:#fff}.nx-item{border-bottom-width:1;border-color:#c8c7cc;border-style:solid}.nx-item-top-border{height:1;border-radius:0;border-width:1;border-color:#c8c7cc}.icon-column{vertical-align:center;horizontal-align:center}.nx-item-column{vertical-align:center}.inset{padding:14}.inset-sides{padding-left:14;padding-right:14}.inset-top{padding-top:14}.inset-bottom{padding-bottom:14}
Original file line number	Diff line number	Diff line change
		@@ -1 +0,0 @@
		.nx-nav{height:40}.nx-nav-wrapper{border-bottom-color:#0590fd;border-bottom-width:1;border-bottom-style:solid}.nx-nav-row1{padding:0;margin:0;background-color:#014982}.nx-nav-row2{background-color:#013b68;border-bottom-color:#0173ce;border-bottom-width:1;border-bottom-style:solid}.title{color:#fff}