New landing page, layout improvements, restructure pages

config/env/default.js

@@ -13,8 +13,7 @@
 module.exports = {
   app: {
     title: 'Trustroots',
-    description: 'Travellers community for sharing, hosting and getting people together. Built with hitchhikers in mind. A world that encourages trust and adventure.',
-    tagline: 'Hospitality exchange community for hitchhikers and other travellers.'
+    description: 'Travellers community for sharing, hosting and getting people together. We want a world that encourages trust and adventure.'
   },
   maxUploadSize: process.env.MAX_UPLOAD_SIZE || 10000000, // 10MB. Remember to change this to Nginx configs as well
   port: process.env.PORT || 3000,

config/env/development.js

@@ -25,8 +25,7 @@ module.exports = {
   },
   app: {
     title: 'Trustroots Development version',
-    description: 'Trustroots development version.',
-    tagline: 'This is a test version, please go to Trustroots.org for the real thing.'
+    description: 'Trustroots development version.'
   },
   // Mapbox is publicly exposed to the frontend
   // To use MapBox maps, copy map values from production.js

config/env/test.js

@@ -26,8 +26,7 @@ module.exports = {
   port: 3001,
   app: {
     title: 'Trustroots test environment.',
-    description: 'Trustroots test environment.',
-    tagline: 'Trustroots test environment.'
+    description: 'Trustroots test environment.'
   },
   mapbox: {
     // Mapbox is publicly exposed to the frontend

fontello.json

@@ -162,6 +162,12 @@
       "code": 59421,
       "src": "fontawesome"
     },
+    {
+      "uid": "e4dde1992f787163e2e2b534b8c8067d",
+      "css": "down",
+      "code": 59436,
+      "src": "fontawesome"
+    },
     {
       "uid": "a73c5deb486c8d66249811642e5d719a",
       "css": "refresh",

modules/core/client/controllers/app.client.controller.js

@@ -53,6 +53,9 @@
       }
     }
 
+    /**
+     * Sign out authenticated user
+     */
     function signout($event) {
       if($event) {
         $event.preventDefault();
@@ -79,12 +82,6 @@
      */
     $scope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
 
-      // Redirect away from frontpage if user is authenticated
-      if(toState.name === 'home' && Authentication.user) {
-        event.preventDefault();
-        $state.go('search');
-      }
-
       // Redirect to login page if no user
       if(toState.requiresAuth && !Authentication.user) {
         // Cancel stateChange

modules/core/client/controllers/header.client.controller.js

@@ -12,6 +12,7 @@
     var vm = this;
 
     // Exposed
+    vm.$state = $state;
     vm.isCollapsed = false;
     vm.isHidden = false;
     vm.toggleCollapsibleMenu = toggleCollapsibleMenu;

modules/core/client/directives/tr-boards.client.directive.js

@@ -116,6 +116,14 @@
             'name': 'Matas Astrauskas',
             'url': 'http://www.matasphoto.com/',
             'file': 'mr-hitchgirl2.jpg'
+          },
+          'mountainforest': {
+            // https://unsplash.com/photos/VNseEaTt9w4
+            'name': 'Sven Scheuermeier',
+            'url': 'hhttps://unsplash.com/sveninho',
+            'file': 'ss-mountainforest.jpg',
+            'license': 'CC',
+            'license_url': 'https://creativecommons.org/publicdomain/zero/1.0/', // https://unsplash.com/license
           }
         };
 

modules/core/client/fonts/README.md

@@ -4,6 +4,11 @@ Open Sans is a humanist sans serif typeface designed by [Steve Matteson](https:/
 ### License
 [Apache License 2.0](http://www.apache.org/licenses/LICENSE-2.0.html)
 
+# Webfont
+Generated with [Fontsquirrel.com](http://www.fontsquirrel.com/tools/webfont-generator).
+
+See [generator_config.txt](generator_config.txt) and [../less/layout/fonts.less](../less/layout/fonts.less).
+
 ### Read more
 * http://www.google.com/fonts/specimen/Open+Sans
 * http://en.wikipedia.org/wiki/Open_Sans

modules/core/client/fonts/generator_config.txt

@@ -0,0 +1,5 @@
+# Font Squirrel Font-face Generator Configuration File
+# Upload this file to the generator to recreate the settings
+# you used to create these fonts.
+
+{"mode":"expert","formats":["ttf","woff","woff2","eotz"],"tt_instructor":"default","fix_gasp":"xy","fix_vertical_metrics":"Y","metrics_ascent":"","metrics_descent":"","metrics_linegap":"","add_spaces":"Y","add_hyphens":"Y","fallback":"none","fallback_custom":"100","options_subset":"basic","subset_custom":"","subset_custom_range":"","subset_ot_features_list":"","css_stylesheet":"stylesheet.css","filename_suffix":"-webfont","emsquare":"2048","spacing_adjustment":"0"}

modules/core/client/less/bootstrap/buttons.less

@@ -2,10 +2,7 @@
  * Buttons
  */
 .btn {
-  //border: 0;
-  font-family: @font-family-brand;
-  font-weight: 400;
-  font-style: normal;
+  .font-brand-regular();
   text-shadow: none;
   &, &:hover {
     .box-shadow(none);
@@ -17,19 +14,32 @@
     }
   }
 
-  // A new button style
+  // New button styles
   &.btn-inverse {
     .button-variant(@btn-inverse-color; @btn-inverse-bg; @btn-inverse-border);
     &:hover {
       border-color: rgba(red(@btn-inverse-border), green(@btn-inverse-border), blue(@btn-inverse-border), .8);
       background-color: rgba(red(@btn-inverse-border), green(@btn-inverse-border), blue(@btn-inverse-border), .1);
     }
   }
+  &.btn-inverse-primary {
+    .button-variant(@btn-inverse-primary-color; @btn-inverse-primary-bg; @btn-inverse-primary-border);
+    &:hover {
+      border-color: rgba(red(@btn-inverse-primary-border), green(@btn-inverse-primary-border), blue(@btn-inverse-primary-border), .8);
+      background-color: rgba(red(@btn-inverse-primary-border), green(@btn-inverse-primary-border), blue(@btn-inverse-primary-border), .1);
+    }
+  }
 
   // Special colors for buttons appended to inputs
   &.btn-input {
     .button-variant(@brand-primary; @input-bg; @input-border);
   }
+
+  // Bigger button size `action`
+  &.btn-action {
+    padding: 15px 30px;
+    font-size: 20px;
+  }
 }
 // Fix problem with inverse button hover state covering input border
 .input-group-btn:last-child > .btn.btn-inverse {

modules/core/client/less/bootstrap/forms.less

@@ -25,7 +25,7 @@ input[type="color"] {
 
 label {
   color: @gray-light;
-  font-family: @font-family-brand;
+  .font-brand-regular();
 }
 .radio label,
 .checkbox label {
@@ -55,7 +55,7 @@ label + .checkbox {
   opacity: 1;
   padding: 5px 0;
   margin: 0;
-  font-family: @font-family-brand;
+  .font-brand-regular();
   color: @gray-light;
   &.ng-hide-add.ng-hide-add-active,
   &.ng-hide-remove.ng-hide-remove-active {

modules/core/client/less/bootstrap/nav.less

@@ -1,7 +1,5 @@
 .nav {
-  font-family: @font-family-brand;
-  font-weight: 400;
-  font-style: normal;
+  .font-brand-regular();
 }
 
 /**

modules/core/client/less/bootstrap/panels.less

@@ -30,11 +30,9 @@
     border-bottom: 1px solid @panel-border;
     border-radius: 0;
     padding: 10px 0;
-    font-family: @font-family-brand;
     font-size: 22px;
     line-height: 24px;
-    font-weight: 400;
-    font-style: normal;
+    .font-brand-regular();
     @media (max-width: @screen-xs-max) {
       font-size: 19px;
     }

modules/core/client/less/bootstrap/sidebar.less

@@ -5,9 +5,7 @@
  */
 
 .sidebar {
-  font-family: @font-family-brand;
-  font-weight: 400;
-  font-style: normal;
+  .font-brand-regular();
 
   // Using https://github.com/zumba/angular-waypoints
   &.sidebar-sticky {

modules/core/client/less/global-variables.less

@@ -143,11 +143,11 @@
 @font-family-base:        @font-family-sans-serif;
 
 @font-family-brand-light:     'open_sans-light', @font-family-sans-serif;
-@font-weight-brand-light:     'normal';//300;
+@font-weight-brand-light:     300;
 @font-family-brand-regular:   'open_sans-regular', @font-family-sans-serif;
-@font-weight-brand-regular:   'normal';//400;
+@font-weight-brand-regular:   400;
 @font-family-brand-semibold:  'open_sans-semibold', @font-family-sans-serif;
-@font-weight-brand-semibold:  'normal';//500;
+@font-weight-brand-semibold:  500;
 
 @text-highlight:          lighten(@brand-primary, 40%);
 @text-highlight-color:    @text-color;

modules/core/client/less/layout/board.less

@@ -64,13 +64,10 @@
       }
     }
   }
-  &.board-default {
-    background-color: @brand-secondary;
-    .page-header {
-      h1, h2 {
-        background: @brand-secondary;
-      }
-    }
+
+  // Add inset shadow
+  &.board-inset {
+    box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
   }
 
   .page-header {
@@ -86,6 +83,7 @@
     }
   }
 
+  // Fix panels inside boards
   .panel {
     color: @text-color;
     text-shadow: none;
@@ -96,13 +94,9 @@
    * Most of the images for .board are coming from core/trBoards directive. Check it out.
    * Keep just the most simplest stuff here.
    */
-  &.board-map {
-    // Screenshot from our own map...
-    background-image: url(/modules/core/img/board/map.jpg);
-  }
   &.board-error {
     // Photo by Mikael Korpela
-    // https://creativecommons.org/licenses/by-nc-nd/4.0/
+    // @link https://creativecommons.org/licenses/by-nc-nd/4.0/
     background-image: url(/modules/core/img/board/error.jpg);
   }
 

modules/core/client/less/layout/fonts.less

@@ -1,13 +1,41 @@
-// Trustroots font
-// http://www.google.com/fonts/specimen/Open+Sans
-// http://www.apache.org/licenses/LICENSE-2.0.html
- @font-face {
-   font-family: 'Open Sans';
-   src: url('/modules/core/fonts/OpenSans-Regular-webfont.eot');
-   src: url('/modules/core/fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
-        url('/modules/core/fonts/OpenSans-Regular-webfont.woff') format('woff'),
-        url('/modules/core/fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
-        url('/modules/core/fonts/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
-   font-weight: 400;
-   font-style: normal;
- }
+/**
+ * Trustroots Open Sans font
+ *
+ * Don't host this via Google: https://m.signalvnoise.com/control-your-type-google-fonts-chrome-trouble-c21e1a106436#.hpkj6qc04
+ *
+ * @link http://www.google.com/fonts/specimen/Open+Sans
+ * @link http://www.apache.org/licenses/LICENSE-2.0.html
+ */
+
+@font-face {
+    font-family: 'open_sans-light';
+    src: url('/modules/core/fonts/opensans-light-webfont.eot');
+    src: url('/modules/core/fonts/opensans-light-webfont.eot?#iefix') format('embedded-opentype'),
+         url('/modules/core/fonts/opensans-light-webfont.woff2') format('woff2'),
+         url('/modules/core/fonts/opensans-light-webfont.woff') format('woff'),
+         url('/modules/core/fonts/opensans-light-webfont.ttf') format('truetype');
+    font-weight: 300;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'open_sans-regular';
+    src: url('/modules/core/fonts/opensans-regular-webfont.eot');
+    src: url('/modules/core/fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
+         url('/modules/core/fonts/opensans-regular-webfont.woff2') format('woff2'),
+         url('/modules/core/fonts/opensans-regular-webfont.woff') format('woff'),
+         url('/modules/core/fonts/opensans-regular-webfont.ttf') format('truetype');
+    font-weight: 400;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'open_sans-semibold';
+    src: url('/modules/core/fonts/opensans-semibold-webfont.eot');
+    src: url('/modules/core/fonts/opensans-semibold-webfont.eot?#iefix') format('embedded-opentype'),
+         url('/modules/core/fonts/opensans-semibold-webfont.woff2') format('woff2'),
+         url('/modules/core/fonts/opensans-semibold-webfont.woff') format('woff'),
+         url('/modules/core/fonts/opensans-semibold-webfont.ttf') format('truetype');
+    font-weight: 600;
+    font-style: normal;
+}

modules/core/client/less/layout/footer.less

@@ -7,7 +7,7 @@
   overflow: visible;
   clear: both;
   background: @gray-dark url(/modules/core/img/footer.jpg) 50% 0 repeat-x;
-  font-family: @font-family-brand;
+  .font-brand-regular();
   font-size: @font-size-small;
   color: lighten(#000, 70%);
   text-shadow: 1px 1px 1px rgba(0,0,0,.5);

modules/core/client/less/layout/header.less

@@ -5,9 +5,7 @@
   width: 100%;
   height: @navbar-height;
   clear: both;
-  font-family: @font-family-brand;
-  font-weight: 400;
-  font-style: normal;
+  .font-brand-regular();
   color: @navbar-default-color;
   .navbar {
     .box-shadow(0 0 8px rgba(0,0,0,0.1));
@@ -71,11 +69,15 @@
 .header-welcome {
   text-align: center;
   padding: 5px 0 0 0;
+  .header-more-text,
   .header-welcome-text {
     display: inline-block;
     padding: 0;
     font-size: 18px;
-    font-family: @font-family-brand;
+    .font-brand-light();
+  }
+  .header-more-text {
+    font-size: 14px;
   }
   .header-welcome-text,
   .btn {

modules/core/client/less/layout/layout.less

@@ -78,7 +78,7 @@ body {
 #tr-main {
   clear: both;
   overflow: auto;
-  padding-bottom: (@footer-height + 30px);
+  padding-bottom: @article-padding-bottom;
   @media (max-width: @screen-xs-max) {
     padding-bottom: 30px;
   }