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;
@Component({
selector: 'mou-app',
templateUrl: './components/app.html',
- directives: [Filter, Map, Navbar]
+ directives: [Map, Navbar]
})
class App {}
+++ /dev/null
-<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
+++ /dev/null
-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);
- }
-}
--- /dev/null
+#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
-<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
-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 {
+
+
+
+
}
-.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
-<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 ? '▾' : '▸' }} {{title}}
+ </div>
+ <div [hidden]="!visible" class="zippy__content">
+ <content></content>
+ </div>
+</div>
\ No newline at end of file
}
+ //tester pil oppned
+
+ constructor() {
+ this.visible = true;
+ }
+
+ toggle() {
+ this.visible = !this.visible;
+ }
}
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