Merge pull request #79 from cheapy-ispp/019-responsiveJsps#67

Avance en mejora de responsive jsps

src/main/less/cheapy.less

@@ -216,9 +216,15 @@ img.img-responsive{
   padding: 20px;
 }
 
-.btn-home{
+.btn-block {
-  display: table;
+  display: block;
-  margin: 0 auto;
+  width: 25%;
+}
+
+.btn-home {
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .btn-home button {
@@ -227,7 +233,6 @@ img.img-responsive{
   color: white; 
   padding: 10px 24px; 
   cursor: pointer; 
-  width: 100%; 
   display: block; 
 }
 
@@ -240,9 +245,12 @@ img.img-responsive{
   background-color: rgb(40, 140, 215);
 }
 
-.btn-home{
+
-  display: table;
+.btn-home-max button {
-  margin: 0 auto;
+	padding: 20px;
+	margin-left:auto;
+	margin-right: auto;
+	margin-bottom: 20px;
 }
 
 .btn-create button {
@@ -342,6 +350,13 @@ text-align: center;
   float:left;
 }
 
+.btn-menu button {
+	margin-left:auto;
+	margin-right: auto;
+	margin-bottom: 20px;
+	margin-right: 20px;
+}
+
 .btns-edit{
   display: table;
   margin: 0 auto;
@@ -356,10 +371,6 @@ text-align: center;
   cursor: pointer; 
 }
 
-.btns-edit button:not(:last-child) {
-  border-bottom: none; 
-}
-
 
 .btns-edit button:hover {
   background-color: rgb(40, 140, 215);
@@ -518,6 +529,14 @@ text-align: center;
 	color: rgb(29, 142, 226);
 }
 
+ .row-full{
+ width: 100vw;
+ position: relative;
+ margin-left: -50vw;
+ height: 100px;
+ left: 50%;
+}
+
 .alert-success {
   .alert-variant(fade(@alert-success-bg, 70%); @alert-success-border; @alert-success-text);
 }

src/main/less/responsive.less

@@ -38,4 +38,13 @@
     margin-bottom: 30px;
   }
 
+	.btn-home button {
+  		background-color: rgb(0, 64, 128); 
+  		border: 1px solid rgb(0, 0, 160); 
+  		color: white; 
+  		padding: 10px 24px; 
+  		cursor: pointer; 
+ 		width: 70%; 
+ 		display: block; 
+	}
 }

src/main/webapp/WEB-INF/jsp/login.jsp

@@ -94,7 +94,7 @@
 	  background-color: #56baed;
 	  border: none;
 	  color: white;
-	  padding: 15px 80px;
+	  padding: 15px;
 	  text-align: center;
 	  text-decoration: none;
 	  display: inline-block;
@@ -110,6 +110,7 @@
 	  -ms-transition: all 0.3s ease-in-out;
 	  -o-transition: all 0.3s ease-in-out;
 	  transition: all 0.3s ease-in-out;
+	  width: 60%;
 	}
 	
 	input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover  {
@@ -143,6 +144,7 @@
 	  transition: all 0.5s ease-in-out;
 	  -webkit-border-radius: 5px 5px 5px 5px;
 	  border-radius: 5px 5px 5px 5px;
+	  margin: 0 auto;
 	}
 	
 	input[type=text]:focus {
@@ -292,7 +294,9 @@
 	      <input type="text" id="username" class="fadeIn second" name="username" placeholder="Usuario" required autofocus>
 	      <input type="password" id="password" class="fadeIn third" name="password" placeholder="Contraseña" required>
 	      <sec:csrfInput />  
+	      <div style="text-align: center;">
 		  	<input type="submit" class="fadeIn fourth" value="Iniciar sesión">
+		  </div>
 	    </form>
 	
 	    <!-- Remind Passowrd 

src/main/webapp/WEB-INF/jsp/offers/myOffersList.jsp

@@ -12,6 +12,7 @@
 		<p id="vacio" >No hay ninguna oferta por plato específico creada.</p>
 	</c:if>
 	<c:if test="${not empty foodOfferLs }">
+		<div class="table-responsive">
 		    <table id="foodOfferTable" class="table table-striped">
 		        <thead>
 		        <tr>
@@ -55,12 +56,14 @@
 		        </c:forEach>
 		        </tbody>
 		    </table>
+		</div>
     </c:if>
     <h2 style="text-align:center;padding:5px"><fmt:message key="nuOffers"/></h2>
 	<c:if test="${empty nuOfferLs }">
 		<p id="vacio" >No hay ninguna oferta por número de comensales creada.</p>
 	</c:if>
 	<c:if test="${not empty nuOfferLs }">
+		<div class="table-responsive">
 		    <table id="nuOfferTable" class="table table-striped">
 		        <thead>
 		        <tr>
@@ -101,6 +104,7 @@
 		        </c:forEach>
 		        </tbody>
 		    </table>
+    	</div>
     </c:if>
     
     <h2 style="text-align:center;padding:5px"><fmt:message key="speedOffers"/></h2>
@@ -108,6 +112,7 @@
 		<p id="vacio" >No hay ninguna oferta por tiempo empleado en comer creada.</p>
 	</c:if>
 	<c:if test="${not empty speedOfferLs }">
+		<div class="table-responsive">
 		    <table id="speedOfferTable" class="table table-striped">
 		        <thead>
 		        <tr>
@@ -149,6 +154,7 @@
 		        </c:forEach>
 		        </tbody>
 		    </table>
+    	</div>
     </c:if>
     
     <h2 style="text-align:center;padding:5px"><fmt:message key="timeOffers"/></h2>
@@ -156,6 +162,7 @@
 		<p id="vacio" >No hay ninguna oferta por franja horaria creada.</p>
 	</c:if>
 	<c:if test="${not empty timeOfferLs }">
+		<div class="table-responsive">
 		    <table id="timeOfferTable" class="table table-striped">
 		        <thead>
 		        <tr>
@@ -195,5 +202,6 @@
 		        </c:forEach>
 		        </tbody>
 		    </table>
+    	</div>
     </c:if>
 </cheapy:layout>

src/main/webapp/WEB-INF/jsp/offers/offersList.jsp

@@ -14,6 +14,7 @@
 		<p id="vacio" >No hay ninguna oferta por plato específico activa.</p>
 	</c:if>
 	<c:if test="${not empty foodOfferLs }">
+		<div class="table-responsive">
 		    <table id="foodOfferTable" class="table table-striped">
 		        <thead>
 		        <tr>
@@ -61,12 +62,14 @@
 		        </c:forEach>
 		        </tbody>
 		    </table>
+	 	</div>
     </c:if>
     <h2 style="text-align:center;padding:5px"><fmt:message key="nuOffers"/></h2>
 	<c:if test="${empty nuOfferLs }">
 		<p id="vacio" >No hay ninguna oferta por número de comensales activa.</p>
 	</c:if>
 	<c:if test="${not empty nuOfferLs }">
+		<div class="table-responsive">
 		    <table id="nuOfferTable" class="table table-striped">
 		        <thead>
 		        <tr>
@@ -112,6 +115,7 @@
 		        </c:forEach>
 		        </tbody>
 		    </table>
+		</div>
     </c:if>
     
     <h2 style="text-align:center;padding:5px"><fmt:message key="speedOffers"/></h2>
@@ -119,6 +123,7 @@
 		<p id="vacio" >No hay ninguna oferta por tiempo empleado en comer activa.</p>
 	</c:if>
 	<c:if test="${not empty speedOfferLs }">
+		<div class="table-responsive">
 		    <table id="speedOfferTable" class="table table-striped">
 		        <thead>
 		        <tr>
@@ -165,6 +170,7 @@
 		        </c:forEach>
 		        </tbody>
 		    </table>
+	    </div>
     </c:if>
     
     <h2 style="text-align:center;padding:5px"><fmt:message key="timeOffers"/></h2>
@@ -172,6 +178,7 @@
 		<p id="vacio" >No hay ninguna oferta por franja horaria activa.</p>
 	</c:if>
 	<c:if test="${not empty timeOfferLs }">
+		<div class="table-responsive">
 		    <table id="timeOfferTable" class="table table-striped">
 		        <thead>
 		        <tr>
@@ -217,6 +224,7 @@
 		        </c:forEach>
 		        </tbody>
 		    </table>
+		</div>
     </c:if>
   
 	

src/main/webapp/WEB-INF/jsp/welcome.jsp

@@ -9,27 +9,28 @@
 <%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
 
 <cheapy:layout pageName="home"> 
-    <h2 class="text-center" style="font-family: 'Lobster'; font-size: 60px; color: rgb(0, 64, 128); padding:30px"><fmt:message key="welcome"/></h2>
+    <h2 class="text-center" style="font-family: 'Lobster'; font-size: 300%; color: rgb(0, 64, 128); padding:30px"><fmt:message key="welcome"/></h2>
     <div class="row">
         <div class="col-md-12">
             <div class="img-home">
                 <spring:url value="/resources/images/Logo Cheapy.png" htmlEscape="true" var="cheapyImage"/>
                 <img class="img-responsive" src="${cheapyImage}"/>
             </div>
+            <div class="btn-home-max">
 	            <div class="btn-home">
-                <button type="button" role="link" onclick="window.location='/offers'" style="font-family: 'Lobster'; font-size: 20px;margin:5px;">
+	                <button type="button" role="link" onclick="window.location='/offers'" style="font-family: 'Lobster'; font-size: 20px;margin:5px;" class="btn-block">
 	                <span class="glyphicon glyphicon-cutlery" aria-hidden="true" style="padding: 5px"> </span>
 	                <fmt:message key="listOffers"/> </button>
 	            </div>
 	            
               <sec:authorize access="hasAnyAuthority('client')">
               <div class="btn-home">
-                <button type="button" role="link" onclick="window.location='/myOffers'" style="font-family: 'Lobster'; font-size: 20px;margin:5px;">
+                      <button type="button" role="link" onclick="window.location='/myOffers'" style="font-family: 'Lobster'; font-size: 20px;margin:5px;" class="btn-block">
                       <span class="glyphicon glyphicon-cutlery" aria-hidden="true" style="padding: 5px"> </span>
                       <fmt:message key="myOffers"/> </button>
                   </div>
                 <div class="btn-home">
-                <button type="button" role="link" onclick="window.location='/offersCreate'" style="font-family: 'Lobster'; font-size: 20px;margin:5px;">
+                      <button type="button" role="link" onclick="window.location='/offersCreate'" style="font-family: 'Lobster'; font-size: 20px;margin:5px;" class="btn-block">
                       <span class="glyphicon glyphicon-cutlery" aria-hidden="true" style="padding: 5px"> </span>
                       <fmt:message key="createOffers"/> </button>
                   </div>
@@ -40,7 +41,7 @@
                 </div>           
 
               </sec:authorize>
-	        
+            </div>
 	        <sec:authorize access="hasAnyAuthority('usuario')">
 	        <div class="btn-home">
                 <button type="button" role="link" onclick="window.location='/usuarios/show'" style="font-family: 'Lobster'; font-size: 20px;margin:5px;">

src/main/webapp/WEB-INF/tags/pivotal.tag

@@ -2,7 +2,7 @@
 
 <br/>
 <br/>
-<div class="container">
+<div class="row-full">
     <div class="row">
         <div class="col-12 text-center"><img src="<spring:url value="/resources/images/eslogan.png" htmlEscape="true" />"
                                              alt="Eat fast, eat cheapy"/></div>