Add donation page weigo (#406)

* Added controller and html page for further editing * Donors changes * translate-changes donors * NeueSpenderUndPlatzhalter * NeueSpenderUndPlatzhalter * fix(donations): * fix linting * clean code Co-authored-by: Thiemann96 <e_thie10@uni-muenster.de> Co-authored-by: Ilka Pleiser <ilka.pleiser@web.de> Co-authored-by: Umut Tas <u.tas@reedu.de>
sensebox · Apr 29, 2021 · 1a31597 · 1a31597
1 parent a3a4a4e
commit 1a31597
Show file tree

Hide file tree

Showing 8 changed files with 178 additions and 13 deletions.
diff --git a/app/images/logos/Stiftungen-SPK-MSLO.jpg b/app/images/logos/Stiftungen-SPK-MSLO.jpg
diff --git a/app/index.html b/app/index.html
@@ -114,9 +114,9 @@
                   FAQ
                 </a>
               </li> -->
-              <li class="menuitem">
-                <a ng-click="header.openHelp()">
-                  <i class="fas fa-hand-holding-usd" aria-hidden="true"></i>
+              <li ui-sref-active="{'active': 'donate.**'}" class="menuitem">
+                <a ui-sref="donate.about" ng-click="header.isNavCollapsed = !header.isNavCollapsed">
+                  <i class="fa fa-info-circle" aria-hidden="true"></i>
                   {{'DONATE' | translate}}
                 </a>
               </li>
@@ -380,6 +380,7 @@
     <script src="scripts/controllers/info.js"></script>
     <script src="scripts/controllers/help.js"></script>
     <script src="scripts/controllers/donation.js"></script>
+    <script src="scripts/controllers/donors.js"></script>
     <script src="scripts/controllers/register.js"></script>
     <script src="scripts/controllers/map.js"></script>
     <script src="scripts/controllers/sidebar.js"></script>

diff --git a/app/scripts/app.js b/app/scripts/app.js
@@ -185,12 +185,12 @@
         .state('account.edit', {
           url: '/:id/edit',
           params: {
-            box: { }
+            box: {}
           },
           resolve: { /* @ngInject */
             boxData: function ($state, $stateParams, AccountService) {
-            // Resolve boxData if called directly by URL
-            // $stateParams.box is set if called from account dashboard
+              // Resolve boxData if called directly by URL
+              // $stateParams.box is set if called from account dashboard
               if (angular.equals({}, $stateParams.box)) {
                 return AccountService.getUsersBoxes()
                   .then(function (response) {
@@ -428,6 +428,22 @@
               templateUrl: 'views/info.imprint.html'
             }
           }
+        })
+        .state('donate', {
+          url: '/donate',
+          abstract: true,
+          templateUrl: 'views/donors.html',
+          controller: 'DonorsController',
+          controllerAs: 'donors'
+        })
+        .state('donate.about', {
+          url: '^/donate',
+          views: {
+            'donors':
+            {
+              templateUrl: 'views/donors.html'
+            }
+          }
         });
     }])
     .config(['$translateProvider', function ($translateProvider) {

diff --git a/app/scripts/controllers/donors.js b/app/scripts/controllers/donors.js
@@ -0,0 +1,23 @@
+(function () {
+  'use strict';
+
+  angular
+    .module('openSenseMapApp')
+    .controller('DonorsController', DonorsController);
+
+  DonorsController.$inject = ['$state', 'app'];
+  function DonorsController ($state, app) {
+    var vm = this;
+    vm.app = app;
+
+
+
+    activate();
+
+    ////////////////
+
+    function activate () {
+    }
+
+  }
+})();
diff --git a/app/styles/main.css b/app/styles/main.css
@@ -30,6 +30,12 @@ a:focus {
   margin-left: auto;
   margin-right: auto;
 }
+.centerimg {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  width: 50%;
+}
 
 .navbar-form {
   border-top: 0px;
@@ -782,7 +788,7 @@ li.menuitem.filteractive > a .fa-exclamation-triangle {
   }
 }
 
-@media (max-width: 1100px) {
+@media (max-width: 1299px) {
   .navbar-header {
       float: none;
   }
@@ -1825,6 +1831,22 @@ nav > a.active {
   margin-right: 5px;
 }
 
+.donation-wrapper.inline-donation {
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-bottom: 4em;
+}
+
+.inner-wrapper-donation {
+  max-width: 800px;
+}
+
+.inline-donation {
+  font-size: 1.2em;
+}
+
 .donation-text {
   font-family: BrixSlab-Regular;
   color: black;
@@ -1851,6 +1873,14 @@ nav > a.active {
   background-color: #4EAF47;
 }
 
+.donor-list {
+  list-style: none;
+  text-align: center;
+  font-size: 1.2em;
+  padding-bottom: 3em;
+  padding-left: 0;
+}
+
 .faq-wrapper {
   height: 1900px;
 }
@@ -1878,4 +1908,37 @@ nav > a.active {
 
 .ngdialog.ngdialog-theme-default .ngdialog-content {
   width: 600px;
-}
+}
+
+.hello_weigo{
+  color:green;
+}
+
+/* Create three equal columns that floats next to each other */
+.column {
+  float: left;
+  width: 33.33%;
+  padding: 10px;
+  height: 200px; /* Should be removed. Only for demonstration */
+}
+
+/* Clear floats after the columns */
+.row:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
+@media screen and (max-width: 600px) {
+  .column {
+    width: 100%;
+  }
+}
+.vertical-center {
+  margin: 0;
+  position: absolute;
+  top: 50%;
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+}
diff --git a/app/views/donors.html b/app/views/donors.html
@@ -0,0 +1,48 @@
+<div class="content-container">
+
+  <div ui-view="donate" style="margin-top: 50px;">
+    <div class="donation-wrapper inline-donation">
+      <div class="inner-wrapper-donation">
+        <div class="donation-text">
+          <!-- <h3>{{'INFO_SUPPORT' | translate}}</h3> -->
+          <div ng-bind-html="'INFO_SUPPORT_TEXT' | translate"></div>
+        </div>
+        <!-- <iframe
+          class="external-help"
+          ng-src="{{ help.iframeSrc }}"
+          sandbox="allow-same-origin"></iframe> -->
+
+        <div class="donation-footer">
+          <div class="small">
+          </div>
+          <div>
+            <a href="https://www.uni-muenster.de/openSenseMap/spendefuerdieopensensemap/" target="_blank" class="btn donation-button">{{'INFO_DONATE_NOW'|translate}}</a>
+          </div>
+        </div>
+      </div>
+    </div>
+    <h3 style="text-align: center;"> {{'THANKSDONATION' | translate}}</h3> <br>
+    <h4 style="text-align: center;" ng-bind-html="'DONATIONTHANKS_TEXT' | translate"></h4>
+    <br>
+    <p style="text-align: center;">{{'SPECIALTHANKS' | translate}}</p>
+    <br>
+    <br>
+    <div class="row">
+      <div class="column">
+      </div>
+      <div class="column" style="background-color:rgb(255, 255, 255);">
+        <img src="/images/logos/Stiftungen-SPK-MSLO.jpg" style="width: 100%;"></img>
+      </div>
+      <div class="column">
+      </div>
+    </div>
+    <br>
+    <ul class="donor-list">
+      <li>Jörg Richter</li>
+      <li>Alexander Zach</li>
+      <li>Dr. Mark Sakschewski</li>
+      <li>Andrej Shadura</li>
+      <li>Robert Welling</li>
+      <li>Sparkassen Stiftung Münsterland Ost</li>
+    </ul>
+</div>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -2,8 +2,9 @@
   "name": "opensensemap",
   "version": "2.4.10",
   "dependencies": {
-    "@sensebox/opensensemap-i18n": "^3.9.7",
-    "angular-i18n": "^1.6.7"
+    "@sensebox/opensensemap-i18n": "^3.9.8",
+    "angular-i18n": "^1.6.7",
+    "node": "^10.19.0"
   },
   "devDependencies": {
     "@sensebox/eslint-config-sensebox": "^1.1.0",