add media queries to adapt the galleries and the gallery items looks
authorrougeronj
Wed, 08 Jul 2015 12:48:37 +0200
changeset 177 4a79d51d0b50
parent 176 a8231241f50d
child 178 a3e1106b6f96
add media queries to adapt the galleries and the gallery items looks
client/app/app.css
client/app/books/book.css
client/app/index.html
--- a/client/app/app.css	Fri Jun 19 12:45:04 2015 +0200
+++ b/client/app/app.css	Wed Jul 08 12:48:37 2015 +0200
@@ -4,10 +4,15 @@
 
 .ammico-content {
     max-width: 1170px;
-    min-width: 970px;
 }
 
-@media(max-width:991px){
+@media (min-width: 768px) and (max-width:991px){
+    .navbar-form.search{
+        width: 200px;
+    }
+    .navbar-form.search input{
+        width: 100%;
+    }
     .navbar > .container{
         width: 100%;
     }
--- a/client/app/books/book.css	Fri Jun 19 12:45:04 2015 +0200
+++ b/client/app/books/book.css	Wed Jul 08 12:48:37 2015 +0200
@@ -4,7 +4,7 @@
 
 .gallery .item {
     position:relative;
-    height: 200px;
+    height: 130px;
     width: 18%;
     padding: 0;
     margin: 1%;
@@ -12,8 +12,32 @@
     overflow: hidden;
 }
 
+.gallery .item.no-img p {
+    font-size: 22px;
+    position: relative;
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+@media (min-width:768px) and (max-width:991px){
+    .gallery .item{
+        height: 170px;
+    }
+    .gallery .item.no-img p {
+        font-size: 28px;
+    }
+}
+@media (min-width:992px){
+    .gallery .item{
+        height: 200px;
+    }
+    .gallery .item.no-img p {
+        font-size: 32px;
+    }
+}
+
 .gallery .item.no-img {
-    background-color: #dddddd;
+    background-color: #f4f4f4;
     border: 1px solid #cdcdcd;
 }
 
@@ -26,12 +50,10 @@
     background-color: rgba(255, 255, 255, 0.7);
     bottom: 0;
     margin: 0;
-}    
+}
 
-.gallery .item.no-img p {
-    font-size: 38px;
-    height: 173px;
-    padding-top: 25px;
+.gallery .item.no-img p{
+    background: none;
 }
 
 .gallery .item img {
@@ -62,6 +84,11 @@
     cursor: pointer;
 }
 
+
+.gallery .item.no-img .gallery-buttons{
+    background: none;
+}
+
 .subtitle {
     border-top: 1px solid #000;
     border-bottom: 1px dotted #000;
--- a/client/app/index.html	Fri Jun 19 12:45:04 2015 +0200
+++ b/client/app/index.html	Wed Jul 08 12:48:37 2015 +0200
@@ -31,7 +31,6 @@
         </div>
         <div class="collapse navbar-collapse">
           <ul class="nav navbar-nav" ng-controller="routeClassCtrl">
-            <li ng-class="{active:isActive('/')}"><a href="#/">Home</a></li>
             <li ng-class="{active:isActive('/my_visit')}"><a href="#/my_visit">Ma dernière Visite</a></li>
             <li ng-class="{active:isActive('/visites')}"><a href="#/visites">Mes Visites</a></li>
             <li ng-class="{active:isActive('/books')}"><a href="#/books">Mes Books</a></li>
@@ -40,7 +39,7 @@
             <li ng-hide="globals.userLogged" ng-class="{active:isActive('/login')}"><a href="#/auth/login">Login</a></li>
             <li ng-show="globals.userLogged"><a href="#/auth/logout">Logout</a></li>
           </ul>
-          <form class="navbar-form navbar-right" role="search" ng-submit="searchSubmit()">
+          <form class="search navbar-form navbar-right" role="search" ng-submit="searchSubmit()">
             <div class="form-group has-feedback">
                 <input class="form-control" type="text" ng-model="q" placeholder="Chercher" />
                 <span class="glyphicon glyphicon-search form-control-feedback" aria-hidden="true"></span>