From: Roza Moustafa Date: Thu, 19 Nov 2015 18:57:44 +0000 (+0100) Subject: design av nav, search og en liten dropdown meny X-Git-Url: http://git.uio.no/git/?p=u%2Ferikhf%2Ffrm.git;a=commitdiff_plain;h=5bc68022409d2e931f0b65d223ebd4466ea5202f design av nav, search og en liten dropdown meny --- diff --git a/src/components/app.ts b/src/components/app.ts index ea83e3f..f8bdea7 100644 --- a/src/components/app.ts +++ b/src/components/app.ts @@ -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 index 4588c8a..0000000 --- a/src/components/filter/filter.html +++ /dev/null @@ -1,8 +0,0 @@ -
-FILTER!! - -
- {{orgUnit.name}} -
- -
\ No newline at end of file diff --git a/src/components/filter/filter.ts b/src/components/filter/filter.ts deleted file mode 100644 index 227e0d7..0000000 --- a/src/components/filter/filter.ts +++ /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 index 0000000..431daf3 --- /dev/null +++ b/src/components/navbar/navbar.css @@ -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 diff --git a/src/components/navbar/navbar.html b/src/components/navbar/navbar.html index 860cc35..ab8f70f 100644 --- a/src/components/navbar/navbar.html +++ b/src/components/navbar/navbar.html @@ -1,34 +1,8 @@ - \ No newline at end of file diff --git a/src/components/navbar/navbar.ts b/src/components/navbar/navbar.ts index ab50504..b34ea77 100644 --- a/src/components/navbar/navbar.ts +++ b/src/components/navbar/navbar.ts @@ -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 { + + + + } diff --git a/src/components/search/search.css b/src/components/search/search.css index 2344396..0584cda 100644 --- a/src/components/search/search.css +++ b/src/components/search/search.css @@ -1,10 +1,7 @@ -.search div{ - position: relative; -} -.search img{ - width: 20px; - position: absolute; + +/*.search div{ + position: relative; } .search li{ @@ -50,3 +47,114 @@ 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 diff --git a/src/components/search/search.html b/src/components/search/search.html index bae546b..1e9b50d 100644 --- a/src/components/search/search.html +++ b/src/components/search/search.html @@ -1,21 +1,51 @@ -
- - - - -
- -
+ + + + +
+ + +
+ + + +
+
+ {{ visible ? '▾' : '▸' }} {{title}} +
+
+ +
+
\ No newline at end of file diff --git a/src/components/search/search.ts b/src/components/search/search.ts index 0059a92..95d6fcb 100644 --- a/src/components/search/search.ts +++ b/src/components/search/search.ts @@ -16,6 +16,15 @@ export class Search { } + //tester pil oppned + + constructor() { + this.visible = true; + } + + toggle() { + this.visible = !this.visible; + } } diff --git a/src/css/map.css b/src/css/map.css index ce6d49b..265c945 100644 --- a/src/css/map.css +++ b/src/css/map.css @@ -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