Merge pull request #79 from hackjunction/feature/newfrontpage

Made the new frontpage

backend/api/hub/models/Hub.settings.json

@@ -13,6 +13,10 @@
       "default": "",
       "type": "string"
     },
+    "country": {
+      "default": "",
+      "type": "string"
+    },
     "latitude": {
       "default": "",
       "type": "decimal"
@@ -21,6 +25,14 @@
       "default": "",
       "type": "decimal"
     },
+    "timezone": {
+      "default": "",
+      "type": "decimal"
+    },
+    "contact": {
+      "default": "",
+      "type": "string"
+    },
     "desc": {
       "default": "",
       "type": "richtext"

frontend/app/package.json

@@ -15,7 +15,7 @@
         "cloudinary-react": "^1.5.0",
         "history": "^4.10.1",
         "lodash-es": "^4.17.15",
-        "moment": "^2.27.0",
+        "moment": "^2.29.1",
         "node-sass": "^4.14.1",
         "react": "^16.13.1",
         "react-animate-height": "^2.0.21",

frontend/app/src/App.scss

@@ -1,88 +1,77 @@
-@import "./styles/main";
+@import './styles/main';
 
 .Page {
-    height: 100%;
-    min-height: 900px;
-    display: flex;
-    flex-direction: row;
-    align-items: stretch;
+  height: 100%;
+  min-height: 900px;
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
 }
 
 html,
 body {
-    margin: 0px;
-    font-family: $montserrat;
+  margin: 0px;
+  font-family: $montserrat;
 }
 
 .App {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    font-family: Montserrat;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  font-family: Montserrat;
 }
 
 .App--Main {
-    height: 100%;
-    flex-direction: column;
-    overflow-x: hidden;
-    background: $connected-peach;
-    @include bp-med {
-        flex-direction: row;
-    }
+  height: 100%;
+  flex-direction: column;
+  overflow-x: hidden;
+  background: $connected-peach;
+  @include bp-med {
+    flex-direction: row;
+  }
 }
 
 .App--Content {
-    position: absolute;
-    //if mobile
-    top: 10vh;
-    overflow-y: scroll;
-    // if not
-    @include bp-med {
-        top: 0;
-    }
-    align-items: stretch;
-    z-index: 1;
-    @include bp-med {
-        flex-basis: 85%;
-        left: 15%;
-        width: 85%;
-    }
-    .leave-margin {
-        margin-left: auto;
-        margin-right: auto;
-        width: 90%;
-    }
-}
+  //if mobile
+  margin-top: 8vh;
+  overflow-y: scroll;
+  align-items: stretch;
+  z-index: 1;
+  // if not
+  @include bp-med {
+    margin-top: 0;
+    position: absolute; // this would destroy the mobile layout
+    top: 0;
+    flex-basis: 85%;
+    left: 15%;
+    width: 85%;
+  }
 
-.Button-row {
-    width: 100%;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-around;
+  @include bp-full {
+    overflow-y: unset;
+    -webkit-overflow-scrolling: touch;
+    height: 100vh;
+  }
+  .leave-margin {
+    margin-left: auto;
+    margin-right: auto;
+    width: 90%;
+  }
 }
 
-.ScrollSnap {
-    @include bp-full {
-        scroll-snap-type: y proximity;
-        overflow-y: unset;
-        -webkit-overflow-scrolling: touch;
-        height: 100vh;
-    }
-}
-
-.ScrollSnapElem {
-    @include bp-med {
-        scroll-snap-stop: normal;
-        scroll-snap-align: start;
-    }
+.Button-row {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
 }
 
 .MobileLink {
-    position: relative;
-    top: -10vh;
-    @include bp-med {
-        top: 0;
-    }
+  position: relative;
+  top: -10vh;
+  @include bp-med {
+    top: 0;
+  }
 }
 
 /*