Explorer Layout Fixed + Init() Function that splits to 3 sized array

This commit is contained in:
Sagi Dayan 2015-06-27 17:01:16 +03:00
parent 33c016a43c
commit 699be13137
2 changed files with 42 additions and 34 deletions

View file

@ -7,36 +7,24 @@ angular.module('SeHub')
var init = function()
{
var i, j, counter = 0;
var newLength = 0;
$scope.threeSizedArray = [];
var tempArr = [];
var sizeOfSmallArrays = 3;
for (var i = 0 ; i < $scope.campuses.length ; i++) {
if(i % sizeOfSmallArrays !== 0){
tempArr.push($scope.campuses[i]);
}else{
if(i !== 0){
$scope.threeSizedArray.push(tempArr);
tempArr = [];
tempArr.push($scope.campuses[i]);
}else{
tempArr.push($scope.campuses[i]);
}
}
};
if(($scope.campuses.length % 3) === 0)
{
newLength = ($scope.campuses.length / 3);
}
else
{
newLength = (Math.ceil($scope.campuses.length / 3)); // Rounds number up
}
console.log("length: " + newLength);
$scope.threeSizedArray.length = newLength;
for(j = 0; j < newLength; j++)
{
$scope.threeSizedArray[j] = [3]; // Creating array in size of 3 in each array cell
}
for(i = 0; i < newLength; i++)
{
for(j = 0; j < newLength; j++)
{
if($scope.campuses[(3*i) + j] != null)
{
$scope.threeSizedArray[i][j] = $scope.campuses[(3*i) + j];
}
}
}
$scope.threeSizedArray.push(tempArr);
console.log($scope.threeSizedArray); // TODO REMOVE
}

View file

@ -5,12 +5,32 @@
<md-card class="cardAllCampuses">
<div ng-if = "!scope.campusesEmpty">
<div class = "allCampusesShow" flex = "99" layout = "row" ng-repeat = "t in threeSizedArray" value = "{{t}}" layout-padding>
<div flex = "32" layout = "column" ng-repeat = "campus in t" value = "{{campus}}">
<md-button ng-click = "goToCampus(campus.id)" style="width:32%; height:32%;" flex="32" layout-padding class = "md-raised">
<div flex = "32" layout = "column" ng-repeat = "campus in t" value = "{{campus}}" >
<div ng-if="t.length != 1">
<md-button ng-click = "goToCampus(campus.id)" style="width:100%; height:32%;" layout-padding class = "md-raised" >
<!-- <img src="{{campus.avatar_url}}" style = "width:14%; height:auto;"> -->
{{campus.title}}
<md-card style="width:97%;height:97%">
<img ng-src="{{campus.avatar_url}}" class="md-card-image" alt="Washed Out">
<md-card-content>
<h2 class="md-title">{{campus.title}}</h2>
</md-card-content>
</md-card>
</md-button>
</div>
<div ng-if="t.length == 1">
<md-button ng-click = "goToCampus(campus.id)" style="width:32%; height:32%;" layout-padding class = "md-raised" >
<!-- <img src="{{campus.avatar_url}}" style = "width:14%; height:auto;"> -->
<md-card style="width:97%;height:97%">
<img ng-src="{{campus.avatar_url}}" class="md-card-image" alt="Washed Out">
<md-card-content>
<h2 class="md-title">{{campus.title}}</h2>
</md-card-content>
</md-card>
</md-button>
</div>
<div class="spacer"></div>
</div>
</div>
</div>
<div ng-if = "scope.campusesEmpty">>