Explorer Layout Fixed + Init() Function that splits to 3 sized array
This commit is contained in:
parent
33c016a43c
commit
699be13137
2 changed files with 42 additions and 34 deletions
|
@ -7,36 +7,24 @@ angular.module('SeHub')
|
|||
|
||||
var init = function()
|
||||
{
|
||||
var i, j, counter = 0;
|
||||
var newLength = 0;
|
||||
|
||||
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 = [];
|
||||
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]);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
$scope.threeSizedArray.push(tempArr);
|
||||
console.log($scope.threeSizedArray); // TODO REMOVE
|
||||
}
|
||||
|
||||
|
|
|
@ -5,11 +5,31 @@
|
|||
<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">
|
||||
<!-- <img src="{{campus.avatar_url}}" style = "width:14%; height:auto;"> -->
|
||||
{{campus.title}}
|
||||
</md-button>
|
||||
<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;"> -->
|
||||
<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>
|
||||
|
|
Loading…
Reference in a new issue