From d5e95d3ab1b02329e9ced33af3f1b75fcec70429 Mon Sep 17 00:00:00 2001
From: Linda Alblas <LindaAlblas@users.noreply.github.com>
Date: Mon, 13 Mar 2017 10:40:29 +0000
Subject: [PATCH] Basic navigation (#50)

basic layout learn and contribute pages
---
 client/app/about/about.html                   |  18 +++
 .../app/admin/edit-project/edit-project.html  |   2 +-
 .../app/contribute/contribute.controller.js   |  79 +++++++++++
 client/app/contribute/contribute.html         | 126 ++++++++++++++++++
 client/app/learn/learn.html                   |  58 ++++++++
 client/app/taskingmanager.app.js              |  16 ++-
 client/assets/styles/sass/_admin.scss         |   4 -
 client/assets/styles/sass/_contribute.scss    |  63 +++++++++
 client/assets/styles/sass/_learn.scss         |  17 +++
 client/assets/styles/sass/_structure.scss     |   4 +
 client/assets/styles/sass/taskingmanager.scss |   2 +
 client/index.html                             |   9 ++
 client/package.json                           |   1 +
 tests/client/karma.conf.js                    |   1 +
 .../contribute/test.contribute.controller.js  |  17 +++
 15 files changed, 411 insertions(+), 6 deletions(-)
 create mode 100644 client/app/about/about.html
 create mode 100644 client/app/contribute/contribute.controller.js
 create mode 100644 client/app/contribute/contribute.html
 create mode 100644 client/app/learn/learn.html
 create mode 100644 client/assets/styles/sass/_contribute.scss
 create mode 100644 client/assets/styles/sass/_learn.scss
 create mode 100644 tests/client/unit/app/contribute/test.contribute.controller.js

diff --git a/client/app/about/about.html b/client/app/about/about.html
new file mode 100644
index 0000000000..1a1f237dd4
--- /dev/null
+++ b/client/app/about/about.html
@@ -0,0 +1,18 @@
+<div class="inner">
+    <section class="section section--asided">
+        <header class="section__header">
+            <div class="inner">
+                <h1 class="section__title">
+                    About
+                </h1>
+            </div>
+        </header>
+        <div class="section-container">
+            <div class="section__body">
+                <div class="inner">
+                    TODO
+                </div>
+            </div>
+        </div>
+    </section>
+</div>
\ No newline at end of file
diff --git a/client/app/admin/edit-project/edit-project.html b/client/app/admin/edit-project/edit-project.html
index f455936096..fabeaaf463 100644
--- a/client/app/admin/edit-project/edit-project.html
+++ b/client/app/admin/edit-project/edit-project.html
@@ -7,7 +7,7 @@ <h1 class="section__title">
                 </h1>
             </div>
         </header>
-        <div class="edit-project-container">
+        <div class="section-container">
             <div class="section__body">
                 <div class="inner">
                     <aside class="section__aside-content">
diff --git a/client/app/contribute/contribute.controller.js b/client/app/contribute/contribute.controller.js
new file mode 100644
index 0000000000..e466d317ad
--- /dev/null
+++ b/client/app/contribute/contribute.controller.js
@@ -0,0 +1,79 @@
+(function () {
+
+    'use strict';
+
+    /**
+     * Contribute controller which manages contributing to a project
+     */
+    angular
+        .module('taskingManager')
+        .controller('contributeController', ['mapService', contributeController]);
+
+    function contributeController(mapService) {
+        var vm = this;
+        // Mock up the results. This could change but it is a start!
+        vm.results = [
+            {
+                id: 1,
+                name: 'Cyclone Enawo: Anjanazan, Madagascar 1',
+                organisation: 'IFRC',
+                description: 'Ipsum lorem',
+                level: 'beginner',
+                priority: 'urgent'
+            },
+            {
+                id: 2,
+                name: 'Missing Maps: Zambia Malaria Elimination 46',
+                organisation: 'Multiple',
+                description: 'Ipsum lorem ipsum lorem ipsum lorem',
+                level: 'beginner',
+                priority: 'high'
+            },
+            {
+                id: 3,
+                name: 'Missing Maps - Goma, RDC - Water and Sanitation',
+                organisation: 'Multiple',
+                description: 'Ipsum lorem ipsum lorem ipsum lorem',
+                level: 'beginner',
+                priority: 'high'
+            },
+            {
+                id: 4,
+                name: 'Osun State Road Network Mapping for Vaccine Delivery Routing, Nigeria',
+                organisation: 'MSF',
+                description: 'Ipsum lorem ipsum lorem ipsum lorem',
+                level: 'beginner',
+                priority: 'medium'
+            },
+            {
+                id: 5,
+                name: 'Missing Maps - Malawi - Thyolo - Blantyre (roads)',
+                organisation: 'MSF',
+                description: 'Ipsum lorem ipsum lorem ipsum lorem',
+                level: 'beginner',
+                priority: 'low'
+            },
+            {
+                id: 6,
+                name: 'Tanzania Development Trust: Maswa district mapping project part 2',
+                organisation: 'MSF',
+                description: 'Ipsum lorem ipsum lorem ipsum lorem',
+                level: 'beginner',
+                priority: 'low'
+            }
+        ];
+
+        // Paging results
+        vm.itemsPerPage = 4;
+        vm.currentPage = 1;
+
+        // Default to grid view
+        vm.resultsView = 'grid';
+
+        activate();
+
+        function activate() {
+            mapService.createOSMMap('map');
+        }
+    }
+})();
diff --git a/client/app/contribute/contribute.html b/client/app/contribute/contribute.html
new file mode 100644
index 0000000000..bacebe1bc1
--- /dev/null
+++ b/client/app/contribute/contribute.html
@@ -0,0 +1,126 @@
+<div class="inner">
+    <section class="section section--asided">
+        <header class="section__header">
+            <div class="inner">
+                <h1 class="section__title">
+                    Contribute
+                </h1>
+            </div>
+        </header>
+        <div class="section-container">
+            <div class="section__body">
+                <div class="inner">
+                    <div class="contribute-container">
+                        <div class="search">
+                            <h2>Search projects</h2>
+                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam feugiat consequat
+                                lectus. Donec ex orci, euismod auctor purus sit amet, lacinia faucibus elit. Cum sociis
+                                natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam consequat
+                                quam in orci interdum suscipit. Nulla congue ligula eget augue ultricies, in varius elit
+                                dignissim.
+                            </p>
+                            <form class="form">
+                                <fieldset class="form__fieldset">
+                                    <div class="form__group">
+                                        <label class="form__label">Organisation</label>
+                                        <select class="form__control">
+                                            <option value="all">All</option>
+                                            <option value="hot">HOT</option>
+                                            <option value="msf">MSF</option>
+                                            <option value="...">...</option>
+                                        </select>
+                                    </div>
+                                    <div class="form__group">
+                                        <label class="form__label">Mapping difficulty</label>
+                                        <div class="button-group button-group--horizontal" role="group"
+                                             aria-label="choose mapping difficulty">
+                                            <button class="button button--achromic button--active" type="button">
+                                                Beginner
+                                            </button>
+                                            <button class="button button--achromic" type="button">Intermediate</button>
+                                            <button class="button button--achromic" type="button">Advanced</button>
+                                        </div>
+                                    </div>
+                                    <div class="form__group">
+                                        <label class="form__label">Tags</label>
+                                        <input type="text" class="form__control" placeholder="e.g. earthquake, Ebola"/>
+                                    </div>
+                                    <div>
+                                        <button class="button button--primary pull-right">Search</button>
+                                    </div>
+                                </fieldset>
+                            </form>
+                        </div>
+                        <div class="search-results">
+                            <div>
+                                <a href="" ng-click="contributeCtrl.resultsView = 'grid'">
+                                    Grid view
+                                </a>
+                                <a href="" ng-click="contributeCtrl.resultsView = 'list'">
+                                    List view
+                                </a>
+                            </div>
+                            <div ng-show="contributeCtrl.resultsView === 'grid'">
+                                <div class="search-results-container">
+                                    <div class="project-result__cards">
+                                        <div class="project-result__card"
+                                             ng-repeat="project in contributeCtrl.results.slice(((contributeCtrl.currentPage-1)*contributeCtrl.itemsPerPage), ((contributeCtrl.currentPage)*contributeCtrl.itemsPerPage)) track by project.id">
+                                            <section class="panel project-result__content">
+                                                <h4>{{ project.name }}</h4>
+                                                <p>{{ project.description }}</p>
+                                                <ul>
+                                                    <li>Organisation: {{ project.organisation }}</li>
+                                                    <li>Priority: {{ project.priority }}</li>
+                                                    <li>Level: {{ project.level }}</li>
+                                                </ul>
+                                                <a href="/project?project={{ project.id }}"
+                                                   class="button button--primary">Contribute</a>
+                                            </section>
+                                        </div>
+                                    </div>
+                                    <ul uib-pagination items-per-page="contributeCtrl.itemsPerPage"
+                                        total-items="contributeCtrl.results.length"
+                                        ng-model="contributeCtrl.currentPage"></ul>
+                                </div>
+                            </div>
+                            <div ng-show="contributeCtrl.resultsView === 'list'">
+                                <table class="table">
+                                    <thead>
+                                    <tr>
+                                        <th>#</th>
+                                        <th>Name</th>
+                                        <th>Organisation</th>
+                                        <th>Level</th>
+                                        <th><a class="table__sort table__sort--none"
+                                               title="Sort column"><span>Priority</span></a></th>
+                                        <th>Contribute</th>
+                                    </tr>
+                                    </thead>
+                                    <tbody>
+                                    <tr ng-repeat="project in contributeCtrl.results track by project.id">
+                                        <td>{{ project.id }}</td>
+                                        <td>{{ project.name }}</td>
+                                        <td>{{ project.organisation }}</td>
+                                        <td>{{ project.level }}</td>
+                                        <td>{{ project.priority }}</td>
+                                        <td><a href="/project?project={{ project.id }}" class="button button--primary">Contribute</a></td>
+                                    </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="section-container">
+            <div class="section__body">
+                <div class="inner">
+                    <div>
+                        <div id="map" class="map-container"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+</div>    
\ No newline at end of file
diff --git a/client/app/learn/learn.html b/client/app/learn/learn.html
new file mode 100644
index 0000000000..4ea375ef18
--- /dev/null
+++ b/client/app/learn/learn.html
@@ -0,0 +1,58 @@
+<div class="inner">
+    <section class="section section--asided">
+        <header class="section__header">
+            <div class="inner">
+                <h1 class="section__title">
+                    Learn
+                </h1>
+            </div>
+        </header>
+        <div class="section-container">
+            <div class="section__body">
+                <div class="inner">
+                    <div class="learn-container">
+                        <div class="information">
+                            <h2>Mapping</h2>
+                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam feugiat consequat
+                                lectus. Donec ex orci, euismod auctor purus sit amet, lacinia faucibus elit. Cum sociis
+                                natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam consequat
+                                quam in orci interdum suscipit. Nulla congue ligula eget augue ultricies, in varius elit
+                                dignissim. Sed mollis eu purus ut pretium. Suspendisse posuere enim sed est scelerisque,
+                                feugiat commodo massa luctus. Aliquam consequat ipsum augue, eu commodo ex cursus sit
+                                amet. Ut tempus at nulla eu feugiat. Donec accumsan justo eget enim pellentesque
+                                efficitur.</p>
+                             <a href="/contribute" class="button button--primary pull-right">Contribute</a>
+                        </div>
+                        <div class="video">
+                            <iframe width="400" height="300"
+                                    src="https://www.youtube.com/embed/DcKewl94jR4">
+                            </iframe>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="section-container">
+            <div class="section__body">
+                <div class="inner">
+                    <div class="learn-container">
+                        <div class="information">
+                            <h2>Validating</h2>
+                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam feugiat consequat
+                                lectus. Donec ex orci, euismod auctor purus sit amet, lacinia faucibus elit. Cum sociis
+                                natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam consequat
+                                quam in orci interdum suscipit. Nulla congue ligula eget augue ultricies, in varius elit
+                                dignissim.</p>
+                            <a href="/contribute" class="button button--primary pull-right">Contribute</a>
+                        </div>
+                        <div class="video pull-right">
+                            <iframe width="400" height="300"
+                                    src="https://www.youtube.com/embed/2h12CKnvK38">
+                            </iframe>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+</div>    
\ No newline at end of file
diff --git a/client/app/taskingmanager.app.js b/client/app/taskingmanager.app.js
index e0c30f9a4f..1b1bb473e7 100644
--- a/client/app/taskingmanager.app.js
+++ b/client/app/taskingmanager.app.js
@@ -2,7 +2,7 @@
 
 (function () {
 
-    angular.module('taskingManager', ['ngRoute', 'ngFileUpload', 'ng-showdown', 'taskingmanager.config'])
+    angular.module('taskingManager', ['ngRoute', 'ngFileUpload', 'ng-showdown','ui.bootstrap', 'taskingmanager.config'])
 
         /**
          * Factory that returns the configuration settings for the current environment
@@ -32,6 +32,20 @@
                     controllerAs: 'editProjectCtrl'
                 })
 
+                .when('/about', {
+                    templateUrl: 'app/about/about.html'
+                })
+
+                .when('/learn', {
+                    templateUrl: 'app/learn/learn.html'
+                })
+
+                .when('/contribute', {
+                    templateUrl: 'app/contribute/contribute.html',
+                    controller: 'contributeController',
+                    controllerAs: 'contributeCtrl'
+                })
+
                 .when('/project', {
                     templateUrl: 'app/project/project.html',
                     controller: 'projectController',
diff --git a/client/assets/styles/sass/_admin.scss b/client/assets/styles/sass/_admin.scss
index 06f8092b18..97c2ccaae6 100644
--- a/client/assets/styles/sass/_admin.scss
+++ b/client/assets/styles/sass/_admin.scss
@@ -88,8 +88,4 @@
   &--active {
     background: rgba($base-color, 0.08);
   }
-}
-
-.edit-project-container {
-  padding-top: 3rem;
 }
\ No newline at end of file
diff --git a/client/assets/styles/sass/_contribute.scss b/client/assets/styles/sass/_contribute.scss
new file mode 100644
index 0000000000..8694c21411
--- /dev/null
+++ b/client/assets/styles/sass/_contribute.scss
@@ -0,0 +1,63 @@
+.contribute-container {
+  @include column(12/12);
+
+  .search {
+    @include column(12/12);
+    @include media(medium-up) {
+      @include column(5/12);
+    }
+  }
+
+  .search-results {
+    @include column(12/12);
+    @include media(medium-up) {
+      @include column(7/12);
+    }
+  }
+}
+
+/* ==========================================================================
+   Search results
+   ========================================================================== */
+
+.search-results-container {
+  text-align: center !important;
+}
+
+.project-result {
+  &__cards {
+    text-align: left;
+    padding-bottom: 2em;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    align-content: top;
+    align-items: stretch;
+  }
+
+  &__card {
+    width: 312px;
+    margin-bottom: 2rem;
+  }
+
+  &__content {
+    padding: 1rem;
+  }
+}
+
+.pagination {
+    list-style: none;
+  >li {
+    @extend .button--achromic;
+    display: inline;
+    cursor: pointer;
+    padding: 0.5rem;
+    a {
+      color: black;
+    }
+  }
+  >li.active {
+    @extend .button--active;
+  }
+}
\ No newline at end of file
diff --git a/client/assets/styles/sass/_learn.scss b/client/assets/styles/sass/_learn.scss
new file mode 100644
index 0000000000..b41633dcc0
--- /dev/null
+++ b/client/assets/styles/sass/_learn.scss
@@ -0,0 +1,17 @@
+.learn-container {
+  @include column(12/12);
+
+  .information {
+    @include column(12/12);
+    @include media(medium-up) {
+      @include column(6/12);
+    }
+  }
+
+  .video {
+    @include column(12/12);
+    @include media(medium-up) {
+      @include column(6/12);
+    }
+  }
+}
\ No newline at end of file
diff --git a/client/assets/styles/sass/_structure.scss b/client/assets/styles/sass/_structure.scss
index 91204513af..7990be49fc 100644
--- a/client/assets/styles/sass/_structure.scss
+++ b/client/assets/styles/sass/_structure.scss
@@ -453,3 +453,7 @@
   margin-bottom: $global-spacing;
 }
 
+.section-container {
+  padding-top: 3rem;
+  box-shadow: inset 0 1px 0 0 $base-alpha-color;
+}
\ No newline at end of file
diff --git a/client/assets/styles/sass/taskingmanager.scss b/client/assets/styles/sass/taskingmanager.scss
index 4f25920af8..9048d1f376 100644
--- a/client/assets/styles/sass/taskingmanager.scss
+++ b/client/assets/styles/sass/taskingmanager.scss
@@ -19,8 +19,10 @@
  * Custom
  */
 @import "admin";
+@import "contribute";
 @import "helpers";
 @import "landingpage";
+@import "learn";
 @import "map";
 @import "progressbar";
 @import "structure";
\ No newline at end of file
diff --git a/client/index.html b/client/index.html
index 6e03d32106..4861bf8c3d 100644
--- a/client/index.html
+++ b/client/index.html
@@ -100,6 +100,14 @@ <h2 class="toggle-menu">
 <script src="node_modules/angular-route/angular-route.js"></script>
 <!-- /build -->
 
+<!-- build:js https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap.min.js-->
+<script src="node_modules/angular-ui-bootstrap/dist/ui-bootstrap.js"></script>
+<!-- /build -->
+
+<!-- build:js https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js-->
+<script src="node_modules/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js"></script>
+<!-- /build -->
+
 <!-- build:js https://cdnjs.cloudflare.com/ajax/libs/danialfarid-angular-file-upload/12.2.13/ng-file-upload.min.js -->
 <script src="node_modules/ng-file-upload/dist/ng-file-upload.js"></script>
 <!-- /build -->
@@ -125,6 +133,7 @@ <h2 class="toggle-menu">
 <script src="app/taskingmanager.app.js"></script>
 <script src="app/admin/create-project/create-project.controller.js"></script>
 <script src="app/admin/edit-project/edit-project.controller.js"></script>
+<script src="app/contribute/contribute.controller.js"></script>
 <script src="app/project/project.controller.js"></script>
 <script src="app/services/map.service.js"></script>
 <script src="app/services/aoi.service.js"></script>
diff --git a/client/package.json b/client/package.json
index f9327f455a..c9807debe1 100644
--- a/client/package.json
+++ b/client/package.json
@@ -13,6 +13,7 @@
     "angular-mocks": "^1.6.2",
     "angular-route": "^1.6.2",
     "angular-sanitize": "^1.6.3",
+    "angular-ui-bootstrap": "^2.5.0",
     "browser-sync": "^2.18.7",
     "connect-modrewrite": "^0.9.0",
     "del": "^2.2.2",
diff --git a/tests/client/karma.conf.js b/tests/client/karma.conf.js
index 286ea50f64..921a8e3fec 100644
--- a/tests/client/karma.conf.js
+++ b/tests/client/karma.conf.js
@@ -17,6 +17,7 @@ module.exports = function(config) {
       'node_modules/angular/angular.js',
       'node_modules/angular-sanitize/angular-sanitize.js',
       'node_modules/angular-route/angular-route.js',
+      'node_modules/angular-ui-bootstrap/dist/ui-bootstrap.js',
       'node_modules/angular-mocks/angular-mocks.js',
       'node_modules/openlayers/dist/ol-debug.js',
       'node_modules/ol3-geocoder/build/ol3-geocoder-debug.js',
diff --git a/tests/client/unit/app/contribute/test.contribute.controller.js b/tests/client/unit/app/contribute/test.contribute.controller.js
new file mode 100644
index 0000000000..fb0e08e3d3
--- /dev/null
+++ b/tests/client/unit/app/contribute/test.contribute.controller.js
@@ -0,0 +1,17 @@
+'use strict';
+
+describe('contribute.controller', function () {
+    var contributeController = null;
+
+    beforeEach(function () {
+        module('taskingManager');
+
+        inject(function ($controller) {
+            contributeController = $controller('contributeController');
+        });
+    });
+
+    it('should be created successfully', function () {
+        expect(contributeController).toBeDefined()
+    });
+});
\ No newline at end of file