flyttet css sidebar til map, og designet alle sidebar-elementer
authorRoza Moustafa <roza.92m@hotmail.com>
Tue, 8 Dec 2015 17:13:39 +0000 (18:13 +0100)
committerRoza Moustafa <roza.92m@hotmail.com>
Tue, 8 Dec 2015 17:13:39 +0000 (18:13 +0100)
src/components/search/search.ts
src/components/sidebar/sidebar.html
src/components/sidebar/sidebar.ts
src/css/map.css

index 5b02829..6b084d7 100644 (file)
@@ -112,7 +112,7 @@ export class Search {
     //Add group set "header" to selector
     setOptionHeader(selector, value) {
         this.option = document.createElement("option");
-        this.option.text = "Select " + value;
+        this.option.text = "All";
         this.option.value = "";
         selector.appendChild(this.option);
     }
index 31e648f..80c864c 100644 (file)
@@ -1,11 +1,16 @@
 <div>
     <div [hidden]="!active" class="form-background sidebar slide" style="overflow-y:auto; position:relative; float:right; ">
-        <button id="slideout" (click)="exit()"><span class="glyphicon glyphicon-chevron-right"></span> </button>
-        <form *ng-if="editmode" [(ng-form-model)]="form" (ng-submit)="onSubmit()" #of="form">
-            <h3>{{newObject?"Add new Organizational Unit":"Update Organizational Unit"}}</h3>
+
+        <button id="slideout" class="btn btn-default" (click)="exit()"><span class="glyphicon glyphicon-chevron-right"></span> </button>
+
+        <form class="formsidebar" *ng-if="editmode" [(ng-form-model)]="form" (ng-submit)="onSubmit()" #of="form">
+            <hr>
+
+            <legend>{{newObject?"Add new Organizational Unit":"Update Organizational Unit"}}</legend>
+            <hr>
 
             <div class="form-group">
-                <label>Name</label>
+                <label class="label-text">Name</label>
                 <input class="form-control" type="text" ng-control="name">
                 <p [hidden]="name.valid || name.untouched" class="alert alert-danger">
                     Name is required
@@ -13,7 +18,7 @@
 
             </div>
             <div class="form-group">
-                <label>Short Name</label>
+                <label class="label-text">Short Name</label>
                 <input class="form-control" type="text" ng-control="shortName" #shortname="form">
 
                 <p [hidden]="shortname.valid || shortname.untouched" class="alert alert-danger">
             </div>
 
             <div class="form-group">
-                <label>Description</label>
+                <label class="label-text">Description</label>
                 <textarea class="form-control" ng-control="description" rows="3"></textarea>
             </div>
             <div class="form-group">
-                <label>Code</label>
+                <label class="label-text">Code</label>
                 <input class="form-control" type="text" ng-control="code">
             </div>
 
             <div class="form-group">
-                <label>Opening Date</label>
+                <label class="label-text">Opening Date</label>
                 <input class="form-control" type="date" ng-control="openingDate" #openingDate="form">
 
                 <p [hidden]="openingdate.valid || openingdate.untouched" class="alert alert-danger">Opening date is required</p>
             </div>
             <div class="form-group">
-                <label>Closed Date</label>
+                <label class="label-text">Closed Date</label>
                 <input class="form-control" type="date" ng-control="closedDate">
             </div>
             <div class="form-group">
-                <label>URL</label>
+                <label class="label-text">URL</label>
                 <input class="form-control" type="url" ng-control="url" #url="form">
 
                 <p [hidden]="url.valid" class="alert alert-danger">The specified URL is not valid</p>
             </div>
+            <hr>
             <fieldset class="form-group">
                 <Legend>Coordinates</Legend>
+                <hr>
+
                 <div *ng-if="featureType.value == 'POINT'" class="form-group">
-                    <label>Latitude</label>
+                    <label class="label-text">Latitude</label>
                     <input class="form-control" type="number" ng-control="lat" #lat="form" step="any" max="90" min="-90"/>
-                    <label>Longitude</label>
+                    <label class="label-text">Longitude</label>
                     <input class="form-control" type="number" ng-control="lng" #lng="form" step="any" max="180" min="-180"/>
                 </div>
                 <div *ng-if="featureType.value == 'NONE'" class="alert alert-danger">
                     <p>This organisation unit has no associated coordinates</p>
                 </div>
             </fieldset>
-
+            <hr>
             <fieldset ng-control-group="organisationUnitGroups">
+
                 <legend>Groups</legend>
+                <hr>
+
                 <div class="form-group" *ng-for="#groupSet of groupSets; #i = index">
 
-                    <label>{{groupSet.name}}</label>
+                    <label class="label-text">{{groupSet.name}}</label>
                     <select ng-control="{{i}}" class="form-control" disabled>
                         <option>-------- not applicable --------</option>
                         <option *ng-for="#group of groupsDoubleArray[i]">{{group.name}}</option>
                     </select>
                 </div>
             </fieldset>
-
+            <hr>
             <fieldset class="form-group">
+
                 <legend>Contact information</legend>
-                <label>Contact person</label>
+                <hr>
+                <label class="label-text">Contact person</label>
                 <input class="form-control" type="text" ng-control="contactPerson"/>
-                <label>Address</label>
+                <label class="label-text">Address</label>
                 <input class="form-control" type="text" ng-control="address"/>
-                <label>E-mail</label>
+                <label class="label-text">E-mail</label>
                 <input class="form-control" type="email" ng-control="email"/>
-                <label>Phone number</label>
+                <label class="label-text">Phone number</label>
                 <input class="form-control" type="text" ng-control="phoneNumber"/>
             </fieldset>
-            <button type="button" (click)="cancel()" class="btn btn-default">Cancel</button>
-            <button type="submit" [disabled]="!of.form.valid" class="btn btn-default">{{newObject? "Add":"Update"}}
+            <hr>
+            <button type="button" (click)="cancel()" class="btn btn-default buttonsidebar">Cancel</button>
+            <button type="submit" [disabled]="!of.form.valid" class="btn btn-default buttonsidebar">{{newObject? "Add":"Update"}}
             </button>
 
         </form>
 
 
         <section id="nonedit" *ng-if="!editmode">
-            <label class="label-text" for="actOrgUnitName">Name</label>
 
-            <p id="actOrgUnitName">{{(form.controls.name.value) || "[None]"}}</p><hr>
 
-            <label class="label-text" for="actOrgUnitShortName">Short Name</label>
+            <hr>
+            <legend>Facility</legend>
+            <hr>
 
-            <p id="actOrgUnitShortName">{{(form.controls.shortName.value)||["None"]}}</p><hr>
+            <label class="label-text" for="actOrgUnitName">Name</label>
+            <p id="actOrgUnitName">{{(form.controls.name.value) || "[None]"}}</p>
 
-            <label class="label-text" for="actOrgUnitDescription">Description</label>
+            <label class="label-text" for="actOrgUnitShortName">Short Name</label>
+            <p id="actOrgUnitShortName">{{(form.controls.shortName.value)||["None"]}}</p>
 
-            <p id="actOrgUnitDescription">{{(form.controls.description.value)||"None"}}</p><hr>
+            <label class="label-text" for="actOrgUnitDescription">Description</label>
+            <p id="actOrgUnitDescription">{{(form.controls.description.value)||"None"}}</p>
 
             <label class="label-text" for="actOrgUnitCode">Code</label>
-
-            <p id="actOrgUnitCode">{{(form.controls.code.value)||["None"]}}</p><hr>
+            <p id="actOrgUnitCode">{{(form.controls.code.value)||["None"]}}</p>
 
             <label class="label-text" for="actOrgUnitOpeningDate">Opening Date</label>
-
-            <p id="actOrgUnitOpeningDate">{{form.controls.openingDate.value||["None"]}}</p><hr>
+            <p id="actOrgUnitOpeningDate">{{form.controls.openingDate.value||["None"]}}</p>
 
             <label class="label-text" for="actOrgUnitClosingDate">Closed Date</label>
-
-            <p id="actOrgUnitClosingDate">{{form.controls.closedDate.value||["None"]}}</p><hr>
+            <p id="actOrgUnitClosingDate">{{form.controls.closedDate.value||["None"]}}</p>
 
             <label class="label-text" for="actOrgUnitURL">Url</label>
+            <p id="actOrgUnitURL">{{(form.controls.url.value) ||["None"]}}</p>
+            <hr>
 
-            <p id="actOrgUnitURL">{{(form.controls.url.value) ||["None"]}}</p><hr>
 
             <fieldset>
                 <legend>Coordinates</legend>
+                <hr>
+
                 <div *ng-if="featureType.value == 'POINT'" class="form-group">
-                    <label>Latitude</label>
+                    <label class="label-text">Latitude</label>
                     <p>{{form.controls.lat.value}}</p>
-                    <label>Longitude</label>
+                    <label class="label-text">Longitude</label>
                     <p>{{form.controls.lng.value}}</p>
                 </div>
                 <div *ng-if="featureType.value == 'NONE'" class="alert alert-danger">
                 <div *ng-if="featureType.value == 'POLYGON' || featureType.value == 'MULTI_POLYGON'">
                     <p>polygon</p>
                 </div>
-
             </fieldset>
+            <hr>
 
             <fieldset>
                 <legend>Contact Information</legend>
-                <label>Contact person</label>
+                <hr>
+
+                <label class="label-text">Contact person</label>
                 <p>{{form.controls.contactPerson.value || ["None"]}}</p>
-                <label>Address</label>
+                <label class="label-text">Address</label>
                 <p>{{form.controls.address.value || ["None"]}}</p>
-                <label>E-mail</label>
+                <label class="label-text">E-mail</label>
                 <p>{{form.controls.email.value || ["None"]}}</p>
-                <label>Phone number</label>
+                <label class="label-text">Phone number</label>
                 <p>{{form.controls.phoneNumber.vaule || ["None"]}}</p>
             </fieldset>
-            <button class="btn btn-default" (click)="editmode = !editmode">Edit</button>
+            <hr>
+
+            <button class="btn btn-default buttonsidebar" (click)="editmode = !editmode">Edit</button>
         </section>
 
     </div>
index d2d8dcd..649a246 100644 (file)
@@ -7,45 +7,7 @@ declare var zone: Zone;
     selector: 'mou-sidebar',
     directives: [CORE_DIRECTIVES, FORM_DIRECTIVES, NgFor, NgModel, NgIf],
     events: ['tempmarker'],
-    templateUrl: './components/sidebar/sidebar.html',
-    styles: [`
-        .ng-valid.ng-dirty {
-            border-left: 5px solid #42A948; /* green */
-        }
-        .ng-invalid {
-            border-left: 5px solid #a94442; /* red */
-        }
-        .form-background {
-            padding: 10px;
-            background: white;
-            width: 100%;
-            float: right;
-            height: 100vh;
-            z-index: 5;
-        }
-        p {
-           font-size: 14pt;
-        }
-        .label-text {
-            font-size: 16pt;
-        }
-        #nonedit{
-            margin: auto;
-            padding: 10px;
-        }
-        .sidebar{
-            box-shadow: -1px 0px 20px #888888;
-
-        }
-        .slide{
-            -webkit-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
-            -moz-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
-            -o-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
-            transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
-            line-height: 20px;
-        }
-
-    `]
+    templateUrl: './components/sidebar/sidebar.html'
 })
 
 export class Sidebar {
index fb2b2be..d011d85 100644 (file)
@@ -44,7 +44,6 @@ html, body {
     box-sizing: border-box;
     transition: all 0.15s;
     border-radius: 2px 0px 0px 2px; /* top left, top right, bottom right, bottom left */
-
 }
 
 ::-webkit-input-placeholder {
@@ -99,27 +98,7 @@ html, body {
 
 }
 
-.divhelp{
-    padding:0;
-    margin-left: 5px;
-    height: 40vh;
-    position: relative;
-    z-index: 1;
-    display: inline-block;
-    width: 80%;
-    margin-top: 0;
-    left: 0;
-    float: left;
-    font-size: 14px;
-    text-align: left;
-    list-style: none;
-    background-color: transparent;
-    border: none;
-    border-radius: 0px;
-}
-
 .result{
-    opacity: 0.8;
     max-height: 70vh;
     min-height: 8vh;
     overflow: scroll;
@@ -133,6 +112,7 @@ html, body {
     font-size: 14px;
     text-align: left;
     list-style: none;
+    font-family: Montserrat, sans-serif;
     background-color: #fff;
     border: 1px solid whitesmoke;
     box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
@@ -243,6 +223,107 @@ html, body {
     margin-left: 20px;
 }
 
+/* sidebar */
+
+.ng-valid.ng-dirty {
+    border-left: 5px solid #42A948;
+}
+
+.ng-invalid {
+    border-left: 5px solid #a94442;
+}
+
+.form-background{
+    padding: 10px;
+    background: white;
+    width: 100%;
+    float: right;
+    height: 100vh;
+    z-index: 5;
+}
+
+hr{
+    border: 0;
+    height: 2px;
+    width: 100%;
+    background: whitesmoke;
+
+}
+
+p{
+    font-size: 16px;
+    text-align: left;
+    margin-left: 10%;
+    color: #313131;
+    padding: 5px;
+    font-family: Montserrat, sans-serif;
+}
+
+.form-control{
+    margin-left: 7%;
+    width: 80%;
+}
+
+
+legend{
+    margin-bottom: 5px;
+    color: black;
+    margin-left: 5%;
+    border-bottom: 0;
+}
+
+.label-text{
+    font-size: 16px;
+    font-family: Montserrat, sans-serif;
+    margin-left: 7%;
+    text-align: left;
+}
+
+label{
+    padding: 5px;
+    color: grey;
+}
+
+#nonedit{
+    margin: auto;
+}
+
+.sidebar{
+    box-shadow: -1px 0px 20px #888888;
+}
+
+.slide{
+    padding: 0;
+    margin: 0;
+    -webkit-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
+    -moz-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
+    -o-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
+    transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
+    line-height: 20px;
+}
+
+#slideout{
+    border: none;
+    margin-top: 16px;
+    margin-left: 10px;
+    font-family: Montserrat, sans-serif;
+    color: darkgrey;
+}
+
+
+.alert-danger{
+    width: 90%;
+    margin-left: 20px;
+    text-align: center;
+
+}
+
+.buttonsidebar{
+    margin-left: 7%;
+    margin-bottom: 7%;
+    width: 30%;
+}
+
 /* other */
 
 .no-padding{