<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script data-require="angular.js@1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
<link rel="stylesheet" href="./style.css" />
</head>
<body ng-app="app">
<div class="flexbox container" ng-controller="AppController as ctrl">
<div class="container-head">
<h3 class="header-title">Flexbox</h3>
</div>
<div class="container-body">
<div class="view">
<div class="list-block" ng-repeat="list in ctrl.lists">
<div class="list">
<div class="list-header">{{list.title}}</div>
<div class="list-cards">
<div class="card" ng-repeat="card in list.cards">
{{card.title}}
</div>
</div>
<div class="list-footer">
<a style="cursor: pointer;" ng-click="ctrl.addCard(list)">
Add Card
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="./script.js"></script>
</body>
</html>
// Code goes here
(function (angular) {
angular.module("app", []);
angular.module("app").controller("AppController", AppController);
AppController.$inject = ["$scope"];
function AppController($scope) {
var ctrl = this;
ctrl.addCard = function (list) {
list.cards.push({title: "Card " + (list.cards.length + 1)});
};
ctrl.lists = [
{
title: "List 1",
cards: [
{title: "Card 1"},
{title: "Card 2"},
{title: "Card 3"},
{title: "Card 4"},
{title: "Card 5"}
]
},
{
title: "List 2",
cards: [
{title: "Card 1"},
{title: "Card 2"},
{title: "Card 3"},
{title: "Card 4"},
{title: "Card 5"},
{title: "Card 6"},
{title: "Card 7"},
{title: "Card 8"},
{title: "Card 9"},
{title: "Card 10"},
{title: "Card 11"},
{title: "Card 12"},
{title: "Card 13"},
{title: "Card 14"},
{title: "Card 15"},
{title: "Card 16"},
{title: "Card 17"},
{title: "Card 18"},
{title: "Card 19"},
{title: "Card 20"}
]
},
{
title: "List 3",
cards: [
{title: "Card 1"},
{title: "Card 2"},
{title: "Card 3"},
{title: "Card 4"},
{title: "Card 5"}
]
},
{
title: "List 4",
cards: [
{title: "Card 1"},
{title: "Card 2"},
{title: "Card 3"},
{title: "Card 4"},
{title: "Card 5"}
]
},
{
title: "List 5",
cards: [
{title: "Card 1"},
{title: "Card 2"},
{title: "Card 3"},
{title: "Card 4"},
{title: "Card 5"}
]
}
];
}
}(angular))
html, body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
.container {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-moz-flex-direction: column;
flex-direction: column;
float: column;
height: 100%;
margin: 0;
max-height: 100%;
max-width: 100%;
padding: 0;
width: 100%;
}
.container .container-head {
background: red;
padding: 10px;
-webkit-flex-grow: 0;
-moz-flex-grow: 0;
flex-grow: 0;
}
.container .container-head .header-title {
margin: 0;
padding: 0;
}
.container .container-body {
background: green;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-moz-flex-direction: column;
flex-direction: column;
-webkit-flex-grow: 1;
-moz-flex-grow: 1;
flex-grow: 1;
padding: 5px;
}
.container .container-body .view {
background: blue;
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
float: left;
overflow-x: auto;
padding: 0;
-webkit-flex-grow: 1;
-moz-flex-grow: 1;
flex-grow: 1;
}
.container .container-body .view .list-block {
box-sizing: border-box;
background: darkblue;
display: inline-block;
flex: 0 0 auto;
float: left;
margin: 0;
padding: 5px;
width: 280px;
min-height:0;
}
.container .container-body .view .list-block .list {
background: darkorange;
border-radius: 4px;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-moz-flex-direction: column;
flex-direction: column;
float: left;
max-height: 100%;
margin: 0;
min-height: 0;
min-width: 0;
width: 100%;
}
.container .container-body .view .list-block .list .list-header {
background: orange;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom: 1px solid darkorange;
-webkit-flex-grow: 0 0 auto;
-moz-flex-grow: 0 0 auto;
flex-grow: 0 0 auto;
float: left;
height: auto;
padding: 10px;
}
.container .container-body .view .list-block .list .list-cards {
background: orange;
border-bottom: 1px solid darkorange;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-moz-flex-direction: column;
flex-direction: column;
float: left;
max-height: 100%;
overflow-y: auto;
padding: 5px;
}
.container .container-body .view .list-block .list .list-cards .card {
background: #ffc107;
border-radius: 4px;
float: left;
margin: 5px;
padding: 10px;
}
.container .container-body .view .list-block .list .list-cards .card:hover {
background: #fdc002;
}
.container .container-body .view .list-block .list .list-footer {
background: orange;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
-webkit-flex-grow: 0;
-moz-flex-grow: 0;
flex-grow: 0;
height: auto;
padding: 10px;
float: left;
text-align: center;
}