design av nav, search og en liten dropdown meny
authorRoza Moustafa <roza.92m@hotmail.com>
Thu, 19 Nov 2015 18:57:44 +0000 (19:57 +0100)
committerRoza Moustafa <roza.92m@hotmail.com>
Thu, 19 Nov 2015 19:00:26 +0000 (20:00 +0100)
src/components/app.ts
src/components/filter/filter.html [deleted file]
src/components/filter/filter.ts [deleted file]
src/components/navbar/navbar.css [new file with mode: 0644]
src/components/navbar/navbar.html
src/components/navbar/navbar.ts
src/components/search/search.css
src/components/search/search.html
src/components/search/search.ts
src/css/map.css

index ea83e3f..f8bdea7 100644 (file)
@@ -1,7 +1,6 @@
 import {HTTP_PROVIDERS} from 'angular2/http';
 import {Component, View, bootstrap, provide, ELEMENT_PROBE_PROVIDERS} from 'angular2/angular2';
 import {Map} from './map/map';
-import {Filter} from "./filter/filter";
 import {Navbar} from "./navbar/navbar";
 
 declare var System:any;
@@ -9,7 +8,7 @@ declare var System:any;
 @Component({
     selector: 'mou-app',
     templateUrl: './components/app.html',
-    directives: [Filter, Map, Navbar]
+    directives: [Map, Navbar]
 })
 class App {}
 
diff --git a/src/components/filter/filter.html b/src/components/filter/filter.html
deleted file mode 100644 (file)
index 4588c8a..0000000
+++ /dev/null
@@ -1,8 +0,0 @@
-<div style="width: 500px; height:50px; background: yellow; ">
-FILTER!!
-
-    <div *ng-for="#orgUnit of result.organisationUnits">
-        {{orgUnit.name}}
-    </div>
-
-</div>
\ No newline at end of file
diff --git a/src/components/filter/filter.ts b/src/components/filter/filter.ts
deleted file mode 100644 (file)
index 227e0d7..0000000
+++ /dev/null
@@ -1,37 +0,0 @@
-import {Component, View, CORE_DIRECTIVES, NgFor} from 'angular2/angular2';
-import {Headers, Http} from 'angular2/http';
-
-@Component({
-    selector: 'mou-filter',
-    directives: [CORE_DIRECTIVES, NgFor],
-    templateUrl: './components/filter/filter.html'
-})
-
-export class Filter {
-    result: Object;
-
-    // Example HTTP request
-
-
-    constructor(http: Http) {
-        var authHeader = new Headers();
-        authHeader.append('Authorization', 'Basic YWRtaW46ZGlzdHJpY3Q=');
-        this.result = {organisationUnits:[]};
-        http.get('http://mydhis.com:8082/api/organisationUnits?paging=false', {headers: authHeader})
-        //http.get('orgunit.json')
-            .map(res => res.json()).subscribe(
-            res => this.result = res,
-            error => this.logError(error)
-        );
-
-    }
-    
-    filterUnits(){
-        console.log(this.result);
-    }
-
-
-    logError(errorm test){
-        console.error(error);
-    }
-}
diff --git a/src/components/navbar/navbar.css b/src/components/navbar/navbar.css
new file mode 100644 (file)
index 0000000..431daf3
--- /dev/null
@@ -0,0 +1,98 @@
+#navdiv{
+    background-color: white;
+    height: 85px;
+    margin-bottom: 0;
+}
+/*
+
+.dropdown-menu{
+    margin-top: -17px;
+    margin-left: 447px;
+    background-color: white;
+    border-radius: 0px;
+}
+
+.dropdown-menu li{
+    background-color: white;
+
+}
+
+#search {
+    width: 357px;
+    margin: 15px;
+    margin-left: 150px;
+}
+
+#search_text{
+    width: 297px;
+    padding: 15px 0 15px 20px;
+    font-size: 16px;
+    font-family: Montserrat, sans-serif;
+    border: 0 none;
+    height: 52px;
+    margin-right: 0;
+    color: white;
+    outline: none;
+    background: #DBDBDB;
+    float: left;
+    box-sizing: border-box;
+    transition: all 0.15s;
+}
+
+::-webkit-input-placeholder {
+    color: white;
+}
+:-moz-placeholder {
+    color: white;
+}
+::-moz-placeholder {
+    color: white;
+}
+:-ms-input-placeholder {
+    color: white;
+}
+#search_text:focus {
+    background: darkgrey;
+}
+
+.dropdown-div{
+    border: 0 none;
+    background: #BAB8B8;
+    width: 60px;
+    float: left;
+    padding: 0;
+    margin: 0;
+    text-align: center;
+    height: 52px;
+    cursor: pointer;
+    border-radius: 0px;
+}
+
+.knapp
+{
+    border: 0 none;
+    background: #BAB8B8;
+    width: 60px;
+    float: left;
+    padding: 0;
+    margin: 0;
+    text-align: center;
+    height: 52px;
+    cursor: pointer;
+    border-radius: 0px;
+}
+
+.glyphicon-menu-down{
+    color: white;
+}
+
+.filtervalg{
+    background-color: red;
+    height: 85px;
+
+}
+
+
+.hidden{
+    display: none;
+}*/
\ No newline at end of file
index 860cc35..ab8f70f 100644 (file)
@@ -1,34 +1,8 @@
-<nav class="navbar navbar-default">
-    <div class="container-fluid">
-        <!-- Brand and toggle get grouped for better mobile display -->
-        <div class="navbar-header">
-            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
-                <span class="sr-only">Toggle navigation</span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-            </button>
-            <a class="navbar-brand" href="#">Mou</a>
-        </div>
+<div id="navdiv" class="navbar navbar-default navbar-fixed-top">
+
+    <mou-search></mou-search>
+
+</div>
+
+
 
-        <!-- Collect the nav links, forms, and other content for toggling -->
-        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
-            <div class="navbar-form navbar-left">
-                <mou-search></mou-search>
-            </div>
-            <ul class="nav navbar-nav navbar-right">
-                <li><a href="#">Link</a></li>
-                <li class="dropdown">
-                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
-                    <ul class="dropdown-menu">
-                        <li><a href="#">Action</a></li>
-                        <li><a href="#">Another action</a></li>
-                        <li><a href="#">Something else here</a></li>
-                        <li role="separator" class="divider"></li>
-                        <li><a href="#">Separated link</a></li>
-                    </ul>
-                </li>
-            </ul>
-        </div><!-- /.navbar-collapse -->
-    </div><!-- /.container-fluid -->
-</nav>
\ No newline at end of file
index ab50504..b34ea77 100644 (file)
@@ -1,13 +1,19 @@
-import {Component} from 'angular2/angular2';
+import {Component,View, CORE_DIRECTIVES} from 'angular2/angular2';
 import {Search} from "../search/search";
 
 @Component({
     selector: 'mou-navbar',
-    directives: [Search],
-    templateUrl: './components/navbar/navbar.html'
+    directives: [CORE_DIRECTIVES, Search],
+    templateUrl: './components/navbar/navbar.html',
+    styleUrls: ['./components/navbar/navbar.css']
 })
+
 export class Navbar {
 
+
+
+
+
 }
 
 
index 2344396..0584cda 100644 (file)
@@ -1,10 +1,7 @@
-.search div{
-    position: relative;
-}
 
-.search img{
-    width: 20px;
-    position: absolute;
+
+/*.search div{
+    position: relative;
 }
 
 .search li{
     text-decoration: none;
     background-color: #f5f5f5
 }
+
+#livesearch{
+    width: 297px;
+    padding: 15px 0 15px 20px;
+    font-size: 16px;
+    font-family: Montserrat, sans-serif;
+    border: 0 none;
+    height: 52px;
+    margin-right: 0;
+    color: white;
+    outline: none;
+    background: #DBDBDB;
+    float: left;
+    box-sizing: border-box;
+    transition: all 0.15s;
+}
+
+
+
+.dropdown-menu{
+    margin-top: -17px;
+    margin-left: 447px;
+    background-color: white;
+    border-radius: 0px;
+}
+
+.dropdown-menu li{
+    background-color: white;
+
+}
+
+#search {
+    width: 357px;
+    margin: 15px;
+    margin-left: 150px;
+}
+
+#livesearch{
+    width: 297px;
+    padding: 15px 0 15px 20px;
+    font-size: 16px;
+    font-family: Montserrat, sans-serif;
+    border: 0 none;
+    height: 52px;
+    margin-right: 0;
+    color: white;
+    outline: none;
+    background: #DBDBDB;
+    float: left;
+    box-sizing: border-box;
+    transition: all 0.15s;
+}
+
+::-webkit-input-placeholder {
+    color: white;
+}
+:-moz-placeholder {
+    color: white;
+}
+::-moz-placeholder {
+    color: white;
+}
+:-ms-input-placeholder {
+    color: white;
+}
+#search_text:focus {
+    background: darkgrey;
+}
+
+.dropdown-div{
+    border: 0 none;
+    background: #BAB8B8;
+    width: 60px;
+    float: left;
+    padding: 0;
+    margin: 0;
+    text-align: center;
+    height: 52px;
+    cursor: pointer;
+    border-radius: 0px;
+}
+
+.knapp
+{
+    border: 0 none;
+    background: #BAB8B8;
+    width: 60px;
+    float: left;
+    padding: 0;
+    margin: 0;
+    text-align: center;
+    height: 52px;
+    cursor: pointer;
+    border-radius: 0px;
+}
+
+.glyphicon-menu-down{
+    color: white;
+}
+
+.filtervalg{
+    background-color: red;
+    height: 85px;
+
+}
+
+
+.hidden{
+    display: none;
+}
+*/
\ No newline at end of file
index bae546b..1e9b50d 100644 (file)
@@ -1,21 +1,51 @@
-<div class="search clearfix">
-        <label class="sr-only" for="livesearch">Search</label>
-        <input
-                mou-live-search
-                (results)="orgunits = $event"
-                (loading)="loading = $event"
-                type="text"
-                autofocus
-                class="form-control"
-                id="livesearch">
-        <img [hidden]="!loading"
-             src="https://www.brown.edu/sites/default/themes/pawtuxet/img/loader-larger.gif">
-
-        <div [hidden]="!orgunits.length">
-            <ul class="results" >
-                <li *ng-for="#orgunit of orgunits" (click)="getMoreInfo(orgunit)">
-                    <a href="#">{{orgunit.name}}<br/><span>{{orgunit.lastUpdated}}</span></a>
-                </li>
-            </ul>
-        </div>
+<div id="search" >
+
+    <label class="sr-only" for="livesearch">Search</label>
+
+        <input  mou-live-search
+               (results)="orgunits = $event"
+               (loading)="loading = $event"
+               type="text"
+               autofocus
+               class="livesearch"
+               name="livesearch"
+               id="livesearch"
+
+               placeholder="Search"/>
+    <img [hidden]="!loading"
+         src="https://www.brown.edu/sites/default/themes/pawtuxet/img/loader-larger.gif">
+
+
+    <div  class="divresult" [hidden]="!orgunits.length">
+        <ul class="dropdown-menu result"  >
+            <li *ng-for="#orgunit of orgunits" (click)="getMoreInfo(orgunit)">
+                <a href="#">{{orgunit.name}}<br/><span>{{orgunit.lastUpdated}}</span></a>
+            </li>
+        </ul>
+    </div>
+
 </div>
+
+<button type="button" class="knapp" data-toggle="collapse" data-target="#dropdown-menu"><span class="glyphicon glyphicon-menu-down"></span></button>
+
+<div>
+<ul id="dropdown-menu" class="dropdown-menu">
+
+    <li><a href="#">Another action</a></li>
+    <li><a href="#">Something else here</a></li>
+    <li role="separator" class="divider"></li>
+    <li><a href="#">Separated link</a></li>
+</ul>
+
+</div>
+
+
+<!--tester pil oppned-->
+<div class="zippy">
+    <div (click)="toggle()" class="zippy__title">
+        {{ visible ? '&blacktriangledown;' : '&blacktriangleright;' }} {{title}}
+    </div>
+    <div [hidden]="!visible" class="zippy__content">
+        <content></content>
+    </div>
+</div>
\ No newline at end of file
index 0059a92..95d6fcb 100644 (file)
@@ -16,6 +16,15 @@ export class Search {
 
     }
 
+    //tester pil oppned
+
+    constructor() {
+        this.visible = true;
+    }
+
+    toggle() {
+        this.visible = !this.visible;
+    }
 
 }
 
index ce6d49b..265c945 100644 (file)
@@ -1,9 +1,155 @@
 html, body {
     height: 100%;
+    padding-top: 70px;
+    background-color: #DBDBDB;
     margin: 0;
-    padding: 0;
 }
 
 #map {
-    height: 1000px;
+    padding: 20px;
+    height: 750px;
+    margin: 0 auto;
+    width: 100%;
+
+}
+/*
+.search div{
+    position: relative;
+}*/
+
+.results > li > a{
+    margin-top: 20px;
+
+    display: block;
+    padding: 3px 20px;
+    clear: both;
+    font-weight: 400;
+    line-height: 1.42857143;
+    color: #333;
+    white-space: nowrap
+}
+
+.results > li > a:focus, .results > li > a:hover {
+    margin-top: 20px;
+
+    color: #262626;
+    text-decoration: none;
+    background-color: #f5f5f5
+}
+
+.dropdown-menu{
+    margin-top: -17px;
+    margin-left: 648px;
+    background-color: white;
+    border-radius: 0px;
+
+
+}
+
+.dropdown-menu li{
+    background-color: white;
+
+}
+
+#search {
+    width: 357px;
+    margin: 15px;
+    margin-left: 150px;
+}
+
+#livesearch{
+    width: 500px;
+    padding: 15px 0 15px 20px;
+    font-size: 16px;
+    font-family: Montserrat, sans-serif;
+    border: 0 none;
+    height: 52px;
+    margin-right: 0;
+    color: white;
+    outline: none;
+    background: #DBDBDB;
+    float: left;
+    box-sizing: border-box;
+    transition: all 0.15s;
+}
+
+::-webkit-input-placeholder {
+    color: white;
+}
+:-moz-placeholder {
+    color: white;
+}
+::-moz-placeholder {
+    color: white;
+}
+:-ms-input-placeholder {
+    color: white;
+}
+#search_text:focus {
+    background: darkgrey;
+}
+
+.dropdown-div{
+    border: 0 none;
+    background: #BAB8B8;
+    width: 60px;
+    float: left;
+    padding: 0;
+    margin: 0;
+    text-align: center;
+    height: 52px;
+    cursor: pointer;
+    border-radius: 0px;
+}
+
+.knapp
+{
+    border: 0 none;
+    background: #BAB8B8;
+    width: 60px;
+    float: left;
+    padding: 0;
+    margin: 0;
+    text-align: center;
+    height: 52px;
+    cursor: pointer;
+    border-radius: 0px;
+
+}
+
+.glyphicon-menu-down{
+    color: white;
+}
+
+.result{
+    width: 357px;
+    margin-left: 150px;
+    display: block;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 1000;
+    float: left;
+    min-width: 160px;
+    padding: 5px 0;
+    font-size: 14px;
+    text-align: left;
+    list-style: none;
+    background-color: #fff;
+    -webkit-background-clip: padding-box;
+    background-clip: padding-box;
+    border: 1px solid #ccc;
+    border: 1px solid rgba(0, 0, 0, .15);
+    border-radius: 4px;
+    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
+    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
+    border-radius: 0px;
+
+}
+
+.result li{
+    margin-top: 20px;
+    margin-left: 20px;
+    padding: 0.5em 0.5em 0.5em 0;
+    float: none;
 }
\ No newline at end of file