mirror of
https://github.com/spring-projects/spring-petclinic.git
synced 2025-07-15 12:25:50 +00:00
cleaned up CSS and migrated to Bootstrap
This commit is contained in:
Mic
parent
5139c8d3bc
commit
9a77b56427
14 changed files with 108 additions and 339 deletions
7
pom.xml
7
pom.xml
|
|
@ -132,6 +132,13 @@
|
|||
<version>1.2</version>
|
||||
</dependency>
|
||||
|
||||
<!-- Webjars (static dependencies distributed as JAR files) -->
|
||||
<dependency>
|
||||
<groupId>org.webjars</groupId>
|
||||
<artifactId>bootstrap</artifactId>
|
||||
<version>2.2.1</version>
|
||||
</dependency>
|
||||
|
||||
<!-- Rome RSS -->
|
||||
<dependency>
|
||||
<groupId>rome</groupId>
|
||||
|
|
|
|||
|
|
@ -5,9 +5,15 @@
|
|||
-->
|
||||
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
|
||||
<link rel="stylesheet" href="<spring:url value="/static/styles/petclinic.css" htmlEscape="true" />" type="text/css"/>
|
||||
<title>PetClinic :: a Spring Framework demonstration</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
|
||||
<title>PetClinic :: a Spring Framework demonstration</title>
|
||||
|
||||
<spring:url value="/resources/css/petclinic.css" var="petclinicCss" />
|
||||
<link href="${petclinicCss}" rel="stylesheet"/>
|
||||
|
||||
<spring:url value="/webjars/bootstrap/2.2.1/css/bootstrap.min.css" var="bootstrapCss" />
|
||||
<link href="${bootstrapCss}" rel="stylesheet"/>
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -10,69 +10,66 @@
|
|||
<jsp:include page="../header.jsp"/>
|
||||
|
||||
<body>
|
||||
<div id="header">
|
||||
<div id="header well">
|
||||
<spring:url value="/resources/images/banner-graphic.png" var="banner"/>
|
||||
<img src="${banner}" />
|
||||
</div>
|
||||
<div id="main">
|
||||
<div class="container" style="padding-top: 50px;">
|
||||
<c:choose>
|
||||
<c:when test="${owner['new']}"><c:set var="method" value="post"/></c:when>
|
||||
<c:otherwise><c:set var="method" value="put"/></c:otherwise>
|
||||
</c:choose>
|
||||
|
||||
<h2><c:if test="${owner['new']}">New </c:if>Owner:</h2>
|
||||
<form:form modelAttribute="owner" method="${method}">
|
||||
<table>
|
||||
<tr>
|
||||
<th>
|
||||
First Name: <form:errors path="firstName" cssClass="errors"/>
|
||||
<br/>
|
||||
<form:input path="firstName" size="30" maxlength="80"/>
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
Last Name: <form:errors path="lastName" cssClass="errors"/>
|
||||
<br/>
|
||||
<form:input path="lastName" size="30" maxlength="80"/>
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
Address: <form:errors path="address" cssClass="errors"/>
|
||||
<br/>
|
||||
<form:input path="address" size="30" maxlength="80"/>
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
City: <form:errors path="city" cssClass="errors"/>
|
||||
<br/>
|
||||
<form:input path="city" size="30" maxlength="80"/>
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
Telephone: <form:errors path="telephone" cssClass="errors"/>
|
||||
<br/>
|
||||
<form:input path="telephone" size="20" maxlength="20"/>
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<c:choose>
|
||||
<c:when test="${owner['new']}">
|
||||
<p class="submit"><input type="submit" value="Add Owner"/></p>
|
||||
</c:when>
|
||||
<c:otherwise>
|
||||
<p class="submit"><input type="submit" value="Update Owner"/></p>
|
||||
</c:otherwise>
|
||||
</c:choose>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<h2><c:if test="${owner['new']}">New </c:if>Owner</h2>
|
||||
<form:form modelAttribute="owner" method="${method}" class="form-horizontal" id="add-owner-form">
|
||||
<fieldset>
|
||||
<div class="control-group" id="firstName">
|
||||
<label class="control-label">First Name </label>
|
||||
<div class="controls">
|
||||
<form:input path="firstName" />
|
||||
<span class="help-inline"><form:errors path="firstName" /></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group" id="lastName">
|
||||
<label class="control-label">Last Name </label>
|
||||
<div class="controls">
|
||||
<form:input path="lastName" />
|
||||
<span class="help-inline"><form:errors path="lastName" /></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group" id="address">
|
||||
<label class="control-label">Address </label>
|
||||
<div class="controls">
|
||||
<form:input path="address" />
|
||||
<span class="help-inline"><form:errors path="address" /></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group" id="city">
|
||||
<label class="control-label">City </label>
|
||||
<div class="controls">
|
||||
<form:input path="city" />
|
||||
<span class="help-inline"><form:errors path="city" /></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group" id="telephone">
|
||||
<label class="control-label">Telephone </label>
|
||||
<div class="controls">
|
||||
<form:input path="telephone" />
|
||||
<span class="help-inline"><form:errors path="telephone" /></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<c:choose>
|
||||
<c:when test="${owner['new']}">
|
||||
<button type="submit">Add Owner</button>
|
||||
</c:when>
|
||||
<c:otherwise>
|
||||
<button type="submit">Update Owner</button>
|
||||
</c:otherwise>
|
||||
</c:choose>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form:form>
|
||||
|
||||
</div>
|
||||
<jsp:include page="../footer.jsp"/>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -9,15 +9,14 @@
|
|||
<jsp:include page="../header.jsp"/>
|
||||
|
||||
<body>
|
||||
<div id="header">
|
||||
|
||||
<div class="container">
|
||||
|
||||
<spring:url value="/resources/images/banner-graphic.png" var="banner"/>
|
||||
<img src="${banner}" />
|
||||
</div>
|
||||
<div id="main">
|
||||
<h2>Owners</h2>
|
||||
|
||||
<h2>Owners:</h2>
|
||||
|
||||
<table>
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
|
|
|
|||
|
|
@ -9,23 +9,21 @@
|
|||
|
||||
<body>
|
||||
|
||||
<div id="header">
|
||||
<div class="container">
|
||||
<spring:url value="/resources/images/banner-graphic.png" var="banner"/>
|
||||
<img src="${banner}" />
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<h2>Find Owners:</h2>
|
||||
<h2>Find Owners</h2>
|
||||
|
||||
<spring:url value="/owners" var="formUrl"/>
|
||||
<form:form modelAttribute="owner" action="${fn:escapeXml(formUrl)}" method="get">
|
||||
<form:form modelAttribute="owner" action="${fn:escapeXml(formUrl)}" method="get" class="form-horizontal">
|
||||
<fieldset>
|
||||
<label class="control-label">Last name:</label>
|
||||
<div class="controls">
|
||||
<label class="control-label">Last name </label>
|
||||
<form:input path="lastName" size="30" maxlength="80"/>
|
||||
<form:errors path="*" cssClass="errors"/>
|
||||
<span class="help-inline"><form:errors path="*" /></span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="form-actions">
|
||||
<button type="submit">Find Owner</button>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
|
@ -36,7 +34,7 @@
|
|||
|
||||
<jsp:include page="../footer.jsp"/>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -3,21 +3,19 @@
|
|||
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
|
||||
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
|
||||
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
|
||||
<html lang="en">
|
||||
|
||||
<jsp:include page="../header.jsp"/>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="header">
|
||||
<div class="container">
|
||||
<spring:url value="/resources/images/banner-graphic.png" var="banner"/>
|
||||
<img src="${banner}" />
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<h2>Owner Information</h2>
|
||||
<h2>Owner Information</h2>
|
||||
|
||||
<table>
|
||||
<table class="table table-striped" style="width:600px;">
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<td><b>${owner.firstName} ${owner.lastName}</b></td>
|
||||
|
|
@ -55,7 +53,7 @@
|
|||
<h2>Pets and Visits</h2>
|
||||
|
||||
<c:forEach var="pet" items="${owner.pets}">
|
||||
<table width="94%">
|
||||
<table class="table" style="width:600px;">
|
||||
<tr>
|
||||
<td valign="top">
|
||||
<table>
|
||||
|
|
@ -120,9 +118,10 @@
|
|||
</table>
|
||||
</c:forEach>
|
||||
|
||||
<jsp:include page="../footer.jsp"/>
|
||||
|
||||
</div>
|
||||
|
||||
<jsp:include page="../footer.jsp"/>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -8,12 +8,10 @@
|
|||
<jsp:include page="../header.jsp"/>
|
||||
|
||||
<body>
|
||||
<div id="header">
|
||||
|
||||
<div class="container">
|
||||
<spring:url value="/resources/images/banner-graphic.png" var="banner"/>
|
||||
<img src="${banner}" />
|
||||
</div>
|
||||
|
||||
<div id="main">
|
||||
<c:choose>
|
||||
<c:when test="${pet['new']}"><c:set var="method" value="post"/></c:when>
|
||||
<c:otherwise><c:set var="method" value="put"/></c:otherwise>
|
||||
|
|
|
|||
|
|
@ -9,13 +9,11 @@
|
|||
<jsp:include page="../header.jsp"/>
|
||||
|
||||
<body>
|
||||
<div id="header">
|
||||
|
||||
<div class="container">
|
||||
|
||||
<spring:url value="/resources/images/banner-graphic.png" var="banner"/>
|
||||
<img src="${banner}" />
|
||||
</div>
|
||||
|
||||
<div id="main">
|
||||
|
||||
<h2><c:if test="${visit['new']}">New </c:if>Visit:</h2>
|
||||
|
||||
<form:form modelAttribute="visit">
|
||||
|
|
|
|||
|
|
@ -5,17 +5,15 @@
|
|||
|
||||
<html lang="en">
|
||||
|
||||
<jsp:include page="header.jsp"/>
|
||||
|
||||
<body>
|
||||
<div id="header">
|
||||
<div class="container">
|
||||
<jsp:include page="header.jsp"/>
|
||||
|
||||
<spring:url value="/resources/images/banner-graphic.png" var="banner"/>
|
||||
<img src="${banner}" />
|
||||
</div>
|
||||
|
||||
<div id="main">
|
||||
|
||||
<h2>Veterinarians:</h2>
|
||||
<h2>Veterinarians</h2>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
|
|
|
|||
|
|
@ -7,27 +7,22 @@
|
|||
<jsp:include page="header.jsp"/>
|
||||
|
||||
<body>
|
||||
<div id="header">
|
||||
<div class="container">
|
||||
<spring:url value="/resources/images/banner-graphic.png" var="banner"/>
|
||||
<img src="${banner}" />
|
||||
</div>
|
||||
|
||||
<div id="main">
|
||||
<img src="<spring:url value="/resources/images/pets.png" htmlEscape="true" />" align="right" style="position:relative;right:30px;"></img>
|
||||
<h2><fmt:message key="welcome"/></h2>
|
||||
|
||||
<ul>
|
||||
<ul class="unstyled">
|
||||
<li><a href="<spring:url value="/owners/search" htmlEscape="true" />">Find owner</a></li>
|
||||
<li><a href="<spring:url value="/vets" htmlEscape="true" />">Display all veterinarians</a></li>
|
||||
<li><a href="<spring:url value="/resources/html/tutorial.html" htmlEscape="true" />">Tutorial</a></li>
|
||||
</ul>
|
||||
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
|
||||
<jsp:include page="footer.jsp"/>
|
||||
|
||||
</div>
|
||||
<jsp:include page="footer.jsp"/>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -65,6 +65,9 @@
|
|||
|
||||
<mvc:resources mapping="/resources/**" location="/resources/"/>
|
||||
|
||||
<mvc:resources mapping="/webjars/**" location="classpath:/META-INF/resources/webjars/"/>
|
||||
|
||||
|
||||
<bean id="contentNegotiationManager" class="org.springframework.web.accept.ContentNegotiationManagerFactoryBean">
|
||||
<property name="favorPathExtension" value="false" />
|
||||
<property name="favorParameter" value="true" />
|
||||
|
|
|
|||
5
src/main/webapp/resources/css/petclinic.css
Normal file
5
src/main/webapp/resources/css/petclinic.css
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
.container {
|
||||
padding-top: 10px;
|
||||
margin-left: 50px;
|
||||
}
|
||||
|
||||
|
|
@ -1,234 +0,0 @@
|
|||
/* main elements */
|
||||
|
||||
body,div,td {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #fff;
|
||||
background-image: url(../images/banner-graphic.png);
|
||||
background-position: top center;
|
||||
background-repeat: no-repeat;
|
||||
text-align: center;
|
||||
min-width: 600px;
|
||||
margin-top: 60px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
div {
|
||||
margin: 5px 25px 5px 25px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* header and footer elements */
|
||||
|
||||
#main {
|
||||
margin:0 auto;
|
||||
position:relative;
|
||||
top: 35px;
|
||||
left:0px;
|
||||
width:560px;
|
||||
text-align:left;
|
||||
}
|
||||
|
||||
.footer {
|
||||
background:#fff;
|
||||
border:none;
|
||||
margin-top:20px;
|
||||
border-top:1px solid #999999;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.footer td {color:#999999;}
|
||||
|
||||
.footer a:link {color: #7db223;}
|
||||
|
||||
|
||||
/* text styles */
|
||||
|
||||
h1,h2,h3 {
|
||||
font-family: Helvetica, sans-serif;
|
||||
color: #7db223;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 20px;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 15px;
|
||||
line-height: 21px;
|
||||
color:#555;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.errors {
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
a:link {
|
||||
color: #7db223;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #456314;
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: #7db223;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: #7db223;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: disc url(../images/bullet-arrow.png);
|
||||
}
|
||||
|
||||
li {
|
||||
padding-top: 5px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
li ul {
|
||||
list-style: square url(../images/bullet-arrow.png);
|
||||
}
|
||||
|
||||
li ul li ul {
|
||||
list-style: circle none;
|
||||
}
|
||||
|
||||
/* table elements */
|
||||
|
||||
table {
|
||||
background: #d6e2c3;
|
||||
margin: 3px 0 0 0;
|
||||
border: 4px solid #d6e2c3;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table table {
|
||||
margin: -5px 0;
|
||||
border: 0px solid #e0e7d3;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
table td,table th {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
table th {
|
||||
font-size: 12px;
|
||||
text-align: left;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table thead {
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
background-color: #c2ceaf;
|
||||
}
|
||||
|
||||
table a:link {color: #303030;}
|
||||
|
||||
caption {
|
||||
caption-side: top;
|
||||
width: auto;
|
||||
text-align: left;
|
||||
font-size: 12px;
|
||||
color: #848f73;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
background: #e0e7d3;
|
||||
padding: 8px;
|
||||
padding-bottom: 22px;
|
||||
border: none;
|
||||
width: 560px;
|
||||
}
|
||||
|
||||
fieldset label {
|
||||
width: 70px;
|
||||
float: left;
|
||||
margin-top: 1.7em;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
fieldset textfield {
|
||||
margin: 3px;
|
||||
height: 20px;
|
||||
background: #e0e7d3;
|
||||
}
|
||||
|
||||
fieldset textarea {
|
||||
margin: 3px;
|
||||
height: 165px;
|
||||
background: #e0e7d3;
|
||||
}
|
||||
|
||||
fieldset input {
|
||||
margin: 3px;
|
||||
height: 20px;
|
||||
background: #e0e7d3;
|
||||
}
|
||||
|
||||
fieldset table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
fieldset th {
|
||||
padding-left: 25px;
|
||||
}
|
||||
|
||||
.table-buttons {
|
||||
background-color:#fff;
|
||||
border:none;
|
||||
}
|
||||
|
||||
.table-buttons td {
|
||||
border:none;
|
||||
}
|
||||
|
||||
.submit input {
|
||||
background:url(../images/submit-bg.png) repeat-x;
|
||||
border: 2px outset #d7b9c9;
|
||||
color:#383838;
|
||||
padding:2px 10px;
|
||||
font-size:11px;
|
||||
text-transform:uppercase;
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
.updated {
|
||||
background:#ecf1e5;
|
||||
font-size:11px;
|
||||
margin-left:2px;
|
||||
border:4px solid #ecf1e5;
|
||||
}
|
||||
|
||||
.updated td {
|
||||
padding:2px 8px;
|
||||
font-size:11px;
|
||||
color:#888888;
|
||||
}
|
||||
Loading…
Reference in a new issue