8 06 bootstrap4

Harmonic999 · Aug 26, 2018 · 97a2fc5 · 97a2fc5
1 parent 7b64b95
commit 97a2fc5
Show file tree

Hide file tree

Showing 9 changed files with 95 additions and 48 deletions.
diff --git a/config/messages/app.properties b/config/messages/app.properties
@@ -4,6 +4,8 @@ app.footer=Project <a href="https://github.com/JavaOPs/topjava" target=_blank>Ma
 app.login=Login as
 
 user.title=Users
+user.edit=Edit user
+user.add=Add user
 user.name=Name
 user.email=Email
 user.roles=Roles
@@ -22,6 +24,7 @@ meal.description=Description
 meal.dateTime=Date/Time
 meal.calories=Calories
 
+common.add=Add
 common.select=Select
 common.delete=Delete
 common.update=Update

diff --git a/config/messages/app_ru.properties b/config/messages/app_ru.properties
@@ -4,6 +4,8 @@ app.footer=\u041F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435 \u043F\u
 app.login=\u0417\u0430\u0439\u0442\u0438 \u043A\u0430\u043A
 
 user.title=\u041F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u0435\u043B\u0438
+user.edit=\u0420\u0435\u0434\u0430\u043A\u0442\u0438\u0440\u043E\u0432\u0430\u043D\u0438\u0435 \u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u0435\u043B\u044F
+user.add=\u0414\u043E\u0431\u0430\u0432\u043B\u0435\u043D\u0438\u0435 \u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u0435\u043B\u044F
 user.name=\u0418\u043C\u044F
 user.email=\u041F\u043E\u0447\u0442\u0430
 user.roles=\u0420\u043E\u043B\u0438
@@ -22,6 +24,7 @@ meal.description=\u041E\u043F\u0438\u0441\u0430\u043D\u0438\u0435
 meal.dateTime=\u0414\u0430\u0442\u0430/\u0412\u0440\u0435\u043C\u044F
 meal.calories=\u041A\u0430\u043B\u043E\u0440\u0438\u0438
 
+common.add=\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C
 common.select=\u0412\u044B\u0431\u0440\u0430\u0442\u044C
 common.delete=\u0423\u0434\u0430\u043B\u0438\u0442\u044C
 common.update=\u041E\u0431\u043D\u043E\u0432\u0438\u0442\u044C

diff --git a/src/main/resources/spring/spring-mvc.xml b/src/main/resources/spring/spring-mvc.xml
@@ -28,6 +28,9 @@
     <!--  all resources inside folder src/main/webapp/resources are mapped so they can be referred to inside JSP files -->
     <mvc:resources mapping="/resources/**" location="/resources/"/>
 
+    <!-- use WebJars so Javascript and CSS libs can be declared as Maven dependencies (Bootstrap, jQuery...) -->
+    <mvc:resources mapping="/webjars/**" location="classpath:/META-INF/resources/webjars/"/>
+
     <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"
           p:prefix="/WEB-INF/jsp/"
           p:suffix=".jsp"/>

diff --git a/src/main/webapp/WEB-INF/jsp/fragments/bodyHeader.jsp b/src/main/webapp/WEB-INF/jsp/fragments/bodyHeader.jsp
@@ -1,6 +1,14 @@
 <%@page contentType="text/html" pageEncoding="UTF-8" %>
 <%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
 
-<header>
-    <a href="${pageContext.request.contextPath}/"><spring:message code="app.home"/></a>&nbsp;|&nbsp;<a href="meals"><spring:message code="app.title"/></a>
-</header>
+<nav class="navbar navbar-dark bg-dark">
+    <div class="container">
+        <a href="meals" class="navbar-brand"><img src="resources/images/icon-meal.png"> <spring:message code="app.title"/></a>
+        <form class="form-inline my-2">
+            <a class="btn btn-info mr-1" href="users"><spring:message code="user.title"/></a>
+            <a class="btn btn-primary" href="">
+                <span class="fa fa-sign-in"></span>
+            </a>
+        </form>
+    </div>
+</nav>
diff --git a/src/main/webapp/WEB-INF/jsp/fragments/footer.jsp b/src/main/webapp/WEB-INF/jsp/fragments/footer.jsp
@@ -1,4 +1,8 @@
 <%@page contentType="text/html" pageEncoding="UTF-8" %>
 <%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
-<hr>
-<footer><spring:message code="app.footer"/></footer>
+<%--https://getbootstrap.com/docs/4.0/examples/sticky-footer/--%>
+<footer class="footer">
+    <div class="container">
+        <span class="text-muted"><spring:message code="app.footer"/></span>
+    </div>
+</footer>
diff --git a/src/main/webapp/WEB-INF/jsp/fragments/headTag.jsp b/src/main/webapp/WEB-INF/jsp/fragments/headTag.jsp
@@ -6,5 +6,9 @@
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <title><spring:message code="app.title"/></title>
     <base href="${pageContext.request.contextPath}/"/>
+
     <link rel="stylesheet" href="resources/css/style.css">
+    <link rel="stylesheet" href="webjars/bootstrap/4.1.3/css/bootstrap.min.css">
+    <link rel="stylesheet" href="webjars/noty/3.1.4/demo/font-awesome/css/font-awesome.min.css">
+    <link rel="shortcut icon" href="resources/images/icon-meal.png">
 </head>
diff --git a/src/main/webapp/WEB-INF/jsp/index.jsp b/src/main/webapp/WEB-INF/jsp/index.jsp
@@ -6,19 +6,18 @@
 <jsp:include page="fragments/headTag.jsp"/>
 <body>
 <jsp:include page="fragments/bodyHeader.jsp"/>
-<section>
-    <form method="post" action="users">
-        <spring:message code="app.login"/>: <select name="userId">
-        <option value="100000" selected>User</option>
-        <option value="100001">Admin</option>
-    </select>
-        <button type="submit"><spring:message code="common.select"/></button>
-    </form>
-    <ul>
-        <li><a href="users"><spring:message code="user.title"/></a></li>
-        <li><a href="meals"><spring:message code="meal.title"/></a></li>
-    </ul>
-</section>
+<div class="jumbotron">
+    <div class="container">
+        <form method="post" action="users" class="form-inline">
+            <label><spring:message code="app.login"/></label>
+            <select name="userId" class="form-control mx-3">
+                <option value="100000" selected>User</option>
+                <option value="100001">Admin</option>
+            </select>
+            <button type="submit" class="btn btn-primary"><spring:message code="common.select"/></button>
+        </form>
+    </div>
+</div>
 <jsp:include page="fragments/footer.jsp"/>
 </body>
 </html>
diff --git a/src/main/webapp/WEB-INF/jsp/users.jsp b/src/main/webapp/WEB-INF/jsp/users.jsp
@@ -8,32 +8,42 @@
 <body>
 <jsp:include page="fragments/bodyHeader.jsp"/>
 
-<section>
-    <h3><spring:message code="user.title"/></h3>
-
-    <table border="1" cellpadding="8" cellspacing="0">
-        <thead>
-        <tr>
-            <th><spring:message code="user.name"/></th>
-            <th><spring:message code="user.email"/></th>
-            <th><spring:message code="user.roles"/></th>
-            <th><spring:message code="user.active"/></th>
-            <th><spring:message code="user.registered"/></th>
-        </tr>
-        </thead>
-        <c:forEach items="${users}" var="user">
-            <jsp:useBean id="user" scope="page" type="ru.javawebinar.topjava.model.User"/>
+<div class="jumbotron pt-4">
+    <div class="container">
+        <h3><spring:message code="user.title"/></h3>
+        <br/>
+        <button class="btn btn-primary">
+            <span class="fa fa-plus"></span>
+            <spring:message code="common.add"/>
+        </button>
+        <br/><br/>
+        <table class="table table-striped">
+            <thead>
             <tr>
-                <td><c:out value="${user.name}"/></td>
-                <td><a href="mailto:${user.email}">${user.email}</a></td>
-                <td>${user.roles}</td>
-                <td><%=user.isEnabled()%>
-                </td>
-                <td><fmt:formatDate value="${user.registered}" pattern="dd-MM-yyyy"/></td>
+                <th><spring:message code="user.name"/></th>
+                <th><spring:message code="user.email"/></th>
+                <th><spring:message code="user.roles"/></th>
+                <th><spring:message code="user.active"/></th>
+                <th><spring:message code="user.registered"/></th>
+                <th></th>
+                <th></th>
             </tr>
-        </c:forEach>
-    </table>
-</section>
+            </thead>
+            <c:forEach items="${users}" var="user">
+                <jsp:useBean id="user" type="ru.javawebinar.topjava.model.User"/>
+                <tr>
+                    <td><c:out value="${user.name}"/></td>
+                    <td><a href="mailto:${user.email}">${user.email}</a></td>
+                    <td>${user.roles}</td>
+                    <td><input type="checkbox" <c:if test="${user.enabled}">checked</c:if>/></td>
+                    <td><fmt:formatDate value="${user.registered}" pattern="dd-MMMM-yyyy"/></td>
+                    <td><a><span class="fa fa-pencil"></span></a></td>
+                    <td><a><span class="fa fa-remove"></span></a></td>
+                </tr>
+            </c:forEach>
+        </table>
+    </div>
+</div>
 <jsp:include page="fragments/footer.jsp"/>
 </body>
 </html>
diff --git a/src/main/webapp/resources/css/style.css b/src/main/webapp/resources/css/style.css
@@ -23,10 +23,23 @@ tr[data-mealExceed="true"] {
     color: red;
 }
 
-header, footer {
-    background: none repeat scroll 0 0 #A6C9E2;
-    color: #2E6E9E;
-    font-size: 20px;
-    padding: 5px 20px;
-    margin: 6px 0;
+.fa {
+    cursor: pointer;
+}
+
+/*https://getbootstrap.com/docs/4.0/examples/sticky-footer/sticky-footer.css*/
+html {
+    position: relative;
+    min-height: 100%;
+}
+body {
+    margin-bottom: 60px; /* Margin bottom by footer height */
+}
+.footer {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 60px; /* Set the fixed height of the footer here */
+    line-height: 60px; /* Vertically center the text there */
+    background-color: #f5f5f5;
 }