Skip to content

Commit

Permalink
Optimize landing page better for mobile
Browse files Browse the repository at this point in the history 
Optimize landing page better for mobile by not loading the main hero image for small screens and other small improvements.
  • Loading branch information
@simison
simison committed Oct 7, 2017
1 parent 72e2ff7 commit 896475c
Show file tree
Hide file tree
Showing 4 changed files with 70 additions and 91 deletions.
11 changes: 10 additions & 1 deletion modules/core/client/directives/tr-boards.client.directive.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,10 @@
*
* Or from many:
* <div tr-boards="['imageid1', 'imageid2']">
*
* To stop cover image being set for small screens (<= 480px width),
* use `tr-boards-ignore-small` attribute.
*
*/
angular
.module('core')
Expand All @@ -22,7 +26,12 @@
scope: {
trBoards: '='
},
link: function (scope, elem) {
link: function (scope, elem, attrs) {

// Don't set background images for mobile screens if defined so via attribute
if (angular.isDefined(attrs.trBoardsIgnoreSmall) && $window.innerWidth <= 480) {
return;
}

// If requested photo is missing or request is invalid, rely on this photo
var defaultPhoto = 'bokeh';
Expand Down
73 changes: 28 additions & 45 deletions modules/pages/client/controllers/home.client.controller.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,19 +29,17 @@
}

/* @ngInject */
function HomeController($stateParams, Authentication, TribesService, TribeService) {
function HomeController($stateParams, $window, Authentication, TribesService, TribeService) {

var headerHeight = angular.element('#tr-header').height() || 0;

// View model
var vm = this;
vm.tribesLoaded = false;

// Exposed to the view
vm.windowHeight = angular.element('html').height() - headerHeight;
vm.boardHeight = $window.innerWidth <= 480 && $window.innerHeight < 700 ? 400 : $window.innerHeight - headerHeight - 10;

// Load front page's landing photos
// @TODO Move part of this logic data to the DB
if ($stateParams.tribe && ['hitchhikers', 'dumpster-divers', 'punks'].indexOf($stateParams.tribe) > -1) {
// Photos for these 3 tribes
vm.boards = [
Expand All @@ -53,56 +51,41 @@
'hitchtruck'
];
} else {
vm.boards = Authentication.user ?
// Photos for authenticated users
[
'woman-bridge',
'wavewatching',
'sahara-backpacker'
] :
// Photos for non-authenticated users
[
'woman-bridge',
'rainbowpeople',
'hitchroad',
'hitchgirl1',
'wavewatching',
'sahara-backpacker',
'hitchtruck'
];
vm.boards = [
'woman-bridge',
'rainbowpeople',
'hitchroad',
'hitchgirl1',
'wavewatching',
'sahara-backpacker',
'hitchtruck'
];
}

function isTribeLoaded(tribeSlug) {
angular.forEach(vm.tribes, function (tribe) {
if (tribe.slug === tribeSlug) {
return true;
}
});

return false;
}

// Load suggested tribes
vm.tribes = TribesService.query({
limit: 3
}, function () {
// Got those three tribes, now fetch one more if requested
if ($stateParams.tribe && $stateParams.tribe !== '') {

// Loop trough tribes to see if requested tribe is already there, and simply move it to be first
var foundTribeFromArray = false;
angular.forEach(vm.tribes, function (tribe) {
if (tribe.slug === $stateParams.tribe) {
foundTribeFromArray = true;
if ($stateParams.tribe && !isTribeLoaded($stateParams.tribe)) {
TribeService.get({
tribeSlug: $stateParams.tribe
}).then(function (tribe) {
// If tribe was found, put it to the beginning of `vm.tribes` array
if (tribe && tribe._id) {
vm.tribes.unshift(tribe);
}
});
if (!foundTribeFromArray) {
vm.tribe = TribeService.get({
tribeSlug: $stateParams.tribe
});
vm.tribe.then(function (tribe) {
// If tribe was found, put it to the beginning of `vm.tribes` array
if (tribe && tribe._id) {
vm.tribes.unshift(tribe);
}
vm.tribesLoaded = true;
});
} else {
vm.tribesLoaded = true;
}

} else {
vm.tribesLoaded = true;
}
});

Expand Down
27 changes: 12 additions & 15 deletions modules/pages/client/less/home.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,19 +20,16 @@
opacity: .8;
margin: 30px 0 0 0;
}
.home-tagline,
.home-tagline-auth {
.home-tagline {
margin: 0 auto;
}
.home-join {
margin-top: 40px;
}
.home-tagline,
.home-tagline-auth {
.home-tagline {
text-shadow: 1px 1px 6px rgba(0, 0, 0, .6);
}
.home-tagline,
.home-tagline-auth {
.home-tagline {
color: #fff;
padding: 0;
font-size: 45px;
Expand All @@ -43,22 +40,17 @@
font-size: 30px;
line-height: 40px;
}
.home-tagline-auth {
font-size: 35px;
line-height: 45px;
}

// Note `max-height` here instead of max-width
@media screen and (max-height: 700px) {
.home-logo,
.home-tagline,
.home-tagline-auth {
.home-tagline {
margin: 15px auto;
}
.home-logo {
max-width: 170px;
max-height: 170px;
}
.home-tagline-auth,
.home-tagline {
font-size: 32px;
line-height: 40px;
Expand All @@ -75,14 +67,15 @@
}
}
@media (max-width: @screen-xs-max) {
.home-tagline-auth,
.home-tagline {
font-size: 22px;
line-height: 28px;
text-shadow: none;
}
.home-subtagline {
font-size: 20px;
line-height: 29px;
text-shadow: none;
}
}

Expand Down Expand Up @@ -138,8 +131,12 @@
background: #fff;
padding: 50px 0;
@media (max-width: @screen-sm-max) {
padding: 30px 0 10px 0;
padding: 80px 0 10px 0;
}
.icon-sofa::before {
width: 2em;
}

// Tribe bubbles for small screens
.tribes-xs {
text-align: center;
Expand Down
50 changes: 20 additions & 30 deletions modules/pages/client/views/home.client.view.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@

<section class="board container home-intro" tr-boards="::home.boards" ng-style="{height: home.windowHeight}">
<section class="board board-primary container home-intro"
ng-if="::!app.user"
tr-boards="::home.boards"
tr-boards-ignore-small
ng-style="{ height: home.boardHeight }">
<div class="middle-wrapper middle-wrapper-horizontal">
<div class="middle-content">

Expand All @@ -8,30 +12,14 @@
<img class="home-logo hidden-xs center-block" src="/modules/core/img/logo/white.svg" alt="Trustroots" width="210" height="210" aria-hidden="true">
<img class="home-logo visible-xs-block center-block" src="/modules/core/img/logo/white.svg" alt="Trustroots" width="130" height="130" aria-hidden="true">
<h1 class="sr-only">Trustroots</h1>

<!-- For non authenticated -->
<div ng-if="::!app.user">
<h3 class="home-tagline">Travellers' community</h3>
<h4 class="home-subtagline">Sharing, hosting and getting people together.</h4>
<a ui-sref="signup" class="btn btn-action btn-default home-join hidden-xs">
Join Trustroots
</a>
</div>

<!-- For authenticated -->
<div ng-if="::app.user">
<h3 class="home-tagline-auth">
Hi {{ ::app.user.displayName }}!<br>
Being able to rely on strangers, on communities, on trust, are values that are worth preserving. Go travel & spread the word!
</h3>
<a ui-sref="profile-edit.about" class="btn btn-lg btn-default home-join hidden-xs">Fill your profile</a>
<a ui-sref="search.map" class="btn btn-lg btn-default home-join hidden-xs">
Find members
</a>
<h3 class="home-tagline">Travellers' community</h3>
<h4 class="home-subtagline">Sharing, hosting and getting people together.</h4>
<a ui-sref="signup" class="btn btn-action btn-default home-join hidden-xs">
Join Trustroots
</a>
<div class="home-down hidden-xs">
<i class="icon-down"></i>
</div>

<div class="home-down"><i class="icon-down"></i></div>

</div>
</div><!-- .row -->
</div>
Expand All @@ -50,7 +38,7 @@ <h2 class="font-brand-light">How does it work?</h2>
<p class="font-brand-light">
Have a look! Travel anywhere and easily find great people who want to meet you as well. See where other travellers are and help each other out, whether through welcoming them to your home, sharing your stories or becoming friends.
<br><br>
Trustroots is already over 26,000 members strong!
Trustroots is over <a ui-sref="statistics">27,000 members</a> strong!
</p>
</div>
<div class="col-md-7">
Expand Down Expand Up @@ -93,7 +81,7 @@ <h2 class="font-brand-light">How does it work?</h2>
</section>

<!-- Tribes -->
<section class="home-how" ng-if="home.tribesLoaded">
<section class="home-how">
<div class="container">
<div class="row">
<div class="col-xs-10 col-xs-push-1 col-sm-3 col-sm-push-6">
Expand All @@ -109,7 +97,7 @@ <h2 class="font-brand-light">Tribes</h2>
<div class="col-xs-12 visible-xs tribes-xs">
<a ui-sref="tribes.tribe({tribe: tribe.slug})"
class="img-circle tribe-xs tribe-image"
ng-repeat="tribe in ::home.tribes | limitTo:3 track by tribe._id"
ng-repeat="tribe in home.tribes | limitTo:3 track by tribe._id"
tr-tribe-styles="{{::tribe}}"
tr-tribe-styles-dimensions="520x520"
tr-tribe-styles-quality="lightest"
Expand All @@ -119,8 +107,8 @@ <h2 class="font-brand-light">Tribes</h2>
</a>
</div>
<div class="col-sm-3 hidden-xs"
ng-class="{'col-sm-pull-3': !$last}"
ng-repeat="tribe in ::home.tribes | limitTo:3 track by tribe._id">
ng-class="{ 'col-sm-pull-3': !$last }"
ng-repeat="tribe in home.tribes | limitTo:3 track by tribe._id">
<div class="img-circle tribe tribe-image"
tr-tribe-styles="{{::tribe}}"
tr-tribe-join>
Expand All @@ -135,7 +123,9 @@ <h3 class="tribe-label" ng-bind="::tribe.label"></h3>
</section>

<!-- Manifesto -->
<section class="board board-primary board-inset" tr-boards="'mountainforest'" id="manifesto">
<section class="board board-primary board-inset"
tr-boards="'mountainforest'"
id="manifesto">
<div class="container">
<div class="row">
<div class="col-md-offset-3 col-md-6 text-center lead font-brand-light">
Expand Down

0 comments on commit 896475c

Please sign in to comment.