update interface of the slideshow
authorrougeronj
Wed, 08 Jul 2015 17:45:44 +0200
changeset 178 a3e1106b6f96
parent 177 4a79d51d0b50
child 179 59c5d7252432
update interface of the slideshow
client/app/app.js
client/app/books/book.css
client/app/components/app_service.js
client/app/slides/slides.css
client/app/slideshow/slideshow.css
client/app/slideshow/slideshow.html
--- a/client/app/app.js	Wed Jul 08 12:48:37 2015 +0200
+++ b/client/app/app.js	Wed Jul 08 17:45:44 2015 +0200
@@ -15,11 +15,6 @@
         });
         
         $routeProvider.
-        when('/', {
-            controller: 'homeCtrl',
-            templateUrl: 'home/home.html',
-            authRequired: false
-        }).
         when('/my_visit', {
             controller: 'my_visitCtrl',
             templateUrl: 'my_visit/my_visit.html',
@@ -71,7 +66,7 @@
             authRequired: false
         }).
         otherwise({
-            redirectTo: '/'
+            redirectTo: '/my_visit'
         });
     })
     .run( function($rootScope, $location, $window, $http, authApi, context) {
--- a/client/app/books/book.css	Wed Jul 08 12:48:37 2015 +0200
+++ b/client/app/books/book.css	Wed Jul 08 17:45:44 2015 +0200
@@ -41,6 +41,9 @@
     border: 1px solid #cdcdcd;
 }
 
+.gallery .item a{
+    text-decoration: none;
+}
 .gallery .item p {
     text-align: center;
     color: #505050;
--- a/client/app/components/app_service.js	Wed Jul 08 12:48:37 2015 +0200
+++ b/client/app/components/app_service.js	Wed Jul 08 17:45:44 2015 +0200
@@ -109,7 +109,7 @@
             restrict: 'AE',
             link: function(scope, elem) {
                 elem.bind('error', function() {
-                    elem.parents('li.item').addClass('no-img');
+                    elem.parent().addClass('no-img');
                     elem.remove();
                 });
                 elem.on('load', function() {
--- a/client/app/slides/slides.css	Wed Jul 08 12:48:37 2015 +0200
+++ b/client/app/slides/slides.css	Wed Jul 08 17:45:44 2015 +0200
@@ -20,7 +20,6 @@
 }
 
 .media{
-    border-right:1px solid grey;
     height: 100%;
     padding: 20px;
 }
--- a/client/app/slideshow/slideshow.css	Wed Jul 08 12:48:37 2015 +0200
+++ b/client/app/slideshow/slideshow.css	Wed Jul 08 17:45:44 2015 +0200
@@ -9,14 +9,15 @@
 .slideshow-content{
     margin-bottom : 15px;
     height: 465px;
+    padding-top: 2px;
 }
 
 .slideshow-content .media{
-    border: 1px solid #a8a8a8;  
+    box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.75);
 }
 
 .slideshow-content .caption{
-    border-top: 1px solid #a8a8a8;
+    box-shadow: 1px 0px 4px -1px rgba(0, 0, 0, 0.75);
     color: #000;
     position: static;
     text-shadow: none;
@@ -24,10 +25,19 @@
     overflow: scroll;
     height: 100%
 }
+
+.caption .user-details{
+    min-height: 70%;
 }
-.slideshow-title .book{
-    font-size: 15px;
+
+.caption .user-details h1{
+    margin-top:0;
 }
+
+.caption .details{
+    min-height: 30%;
+}
+
 .slideshow-title h1 {
     display: inline-block;
     padding:0 15px;
@@ -75,11 +85,19 @@
     display: inline-block;
     position:relative;
     height: 115px;
-    width: 13%;
+    width: 14%;
     padding: 0;
     margin: 0 5px;
+    overflow: hidden;
+}
+.insight .item.no-img {
+    background-color: #f4f4f4;
     border: 1px solid #cdcdcd;
-    overflow: hidden;
+}
+.insight .item.no-img p{
+    position: relative;
+    top: 50%;
+    transform: translateY(-50%);
 }
 .insight .item img {
     position: absolute;
--- a/client/app/slideshow/slideshow.html	Wed Jul 08 12:48:37 2015 +0200
+++ b/client/app/slideshow/slideshow.html	Wed Jul 08 17:45:44 2015 +0200
@@ -1,12 +1,12 @@
 <div class="slideshow  container-fluid">
-    <div class="row slideshow-title">
+    <div class="container slideshow-title">
             <h1 class="book">
                 {{book.title}}
                 <small>par Jonathan Linvingston</small>
             </h1>
-            <h1 class="pull-right poi"><small>{{book.count}} points d'intĂ©rĂȘts</small></h1>
+            <h1 class="pull-right poi"><small>{{book.count}} elts.</small></h1>
     </div>
-    <div class="carousel-holder row">
+    <div class="carousel-holder container">
         <carousel>
             <slide ng-repeat="slide in slides" active="slide.active">
                 <div class="container-fluid slideshow-content">
@@ -36,8 +36,11 @@
             </slide> 
         </carousel>
         <div class="insight" >
-            <div class="item" ng-repeat="slide in slides" data-ng-click="slide.active = true">
-                <img ng-src="{{ slide.details.images[0] }}" my-customer />
+            <div class="item" ng-class="{'no-img': !slide.details.images[0]}" ng-repeat="slide in slides" data-ng-click="slide.active = true">
+                <img ng-hide="{{slide.details.images[0].length < 1}}" ng-src="{{ slide.details.images[0] }}" img-type />
+                <p ng-show="{{slide.details.images[0].length < 1}}">
+                    {{slide.details.title}}
+                </p>
             </div>
         </div>
     </div>