satellite/satbd-explorer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

First attempt to display cover only

Browse Source
This commit is contained in:
Alexandre Tuleu
2016-01-26 09:51:18 +01:00
parent 86772a396e
commit 276642a046
3 changed files with 61 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
static/css/satbd.sateliite.bar.css
View File

@@ -11,6 +11,10 @@ body > .container {
padding-top: 60px;
}
body > .container-fluid {
padding-top: 60px;
}
/* collapses the navbar one media earlier ( french has long title name ) */
@media (min-width: 768px) and (max-width: 991px) {
.navbar-collapse.collapse {
@@ -25,4 +29,39 @@ body > .container {
.navbar-header {
float:none;
}
}
}
.album {
padding-top:15px;
padding-bottom:15px;
overflow:hidden;
}
@media (max-width: 767px) {
.album {
height: 70vw;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.album {
height: 46vw;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.album {
height: 35vw;
}
}
@media (min-width: 1200px) {
.album {
height: 23vw;
}
}
img.cover {
width:100%;
}

20
static/index.html
View File

@@ -9,7 +9,7 @@
<link href="/css/satbd.sateliite.bar.css" rel="stylesheet" />
<title>satbd: explorez la betheque de sat</title>
</head>
<body ng-app="satbd.satellite.bar">
<body ng-app="satbd.satellite.bar" ng-controller="GlobalCtrl">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container" ng-controller="NavbarCollapseCtrl">
<script type="text/ng-template" id="help.html">
@@ -54,18 +54,12 @@
</nav>
<!-- Begin page content -->
<div class="container">
<div class="results" ng-controller="ResultsCtrl">
<ul>
<li ng-repeat="id in albumIDs">
<div ng-controller="AlbumCtrl" ng-init="init_by_id(id)">
<h3>{{album.titre}}</h3>
<img src="{{album.CoverURL}}">
<p>Description: {{album.description}} </p>
</div>
</li>
</ul>
</div>
<div class="container-fluid">
<div class="recent row" ng-controller="RecentCtrl">
<div class="album col-xs-6 col-sm-4 col-md-3 col-lg-2" ng-repeat="id in albumIDs" ng-controller="RecentAlbumCtrl" ng-init="init_by_id(id)">
<img class="cover img-responsive img-rounded center-block" src="{{album.CoverURL}}">
</div>
</div>
</div>
<script src="/js/angular.min.js"></script>

18
static/js/satbd.satellite.bar.js
View File

@@ -1,5 +1,14 @@
angular.module('satbd.satellite.bar', ['ui.bootstrap','ngAnimate']);
angular.module('satbd.satellite.bar').controller('GlobalCtrl', function($scope) {
$scope.location = ''
$scope.isActive = function(location) {
return $scope.location == location
};
});
angular.module('satbd.satellite.bar').controller('NavbarCollapseCtrl', function ($scope, $uibModal) {
$scope.isCollapsed = true;
$scope.openModal = function (size) {
@@ -19,17 +28,18 @@ angular.module('satbd.satellite.bar').controller('HelpInstanceCtrl', function($s
};
});
angular.module('satbd.satellite.bar').controller('ResultsCtrl', function($scope, $http,$log) {
$scope.albumIDs = [];
angular.module('satbd.satellite.bar').controller('RecentCtrl', function($scope, $http,$log) {
$scope.albumIDs = [ ];
$http.get('/api/recents').success(function(data){
for (var i = 0; i < 30; i++) {
for (var i = 0; i < 10; i++) {
$scope.albumIDs.push(data[i])
}
});
});
angular.module('satbd.satellite.bar').controller('AlbumCtrl', function($scope, $http) {
angular.module('satbd.satellite.bar').controller('RecentAlbumCtrl', function($scope, $http) {
$scope.init_by_id = function(id) {
$http.get('api/albums/'+ id).success(function (data) {
$scope.album = data;