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 init = function()
{ {
var i, j, counter = 0; $scope.threeSizedArray = [];
var newLength = 0; var tempArr = [];
var sizeOfSmallArrays = 3;
if(($scope.campuses.length % 3) === 0) for (var i = 0 ; i < $scope.campuses.length ; i++) {
{ if(i % sizeOfSmallArrays !== 0){
newLength = ($scope.campuses.length / 3); tempArr.push($scope.campuses[i]);
} }else{
else if(i !== 0){
{ $scope.threeSizedArray.push(tempArr);
newLength = (Math.ceil($scope.campuses.length / 3)); // Rounds number up tempArr = [];
} tempArr.push($scope.campuses[i]);
}else{
console.log("length: " + newLength); tempArr.push($scope.campuses[i]);
$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 console.log($scope.threeSizedArray); // TODO REMOVE
} }

View file

@ -5,11 +5,31 @@
<md-card class="cardAllCampuses"> <md-card class="cardAllCampuses">
<div ng-if = "!scope.campusesEmpty"> <div ng-if = "!scope.campusesEmpty">
<div class = "allCampusesShow" flex = "99" layout = "row" ng-repeat = "t in threeSizedArray" value = "{{t}}" layout-padding> <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}}"> <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 ng-if="t.length != 1">
<!-- <img src="{{campus.avatar_url}}" style = "width:14%; height:auto;"> --> <md-button ng-click = "goToCampus(campus.id)" style="width:100%; height:32%;" layout-padding class = "md-raised" >
{{campus.title}} <!-- <img src="{{campus.avatar_url}}" style = "width:14%; height:auto;"> -->
</md-button> <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>
</div> </div>