cleaned up CSS and migrated to Bootstrap

This commit is contained in:
Mic 2013-01-14 11:02:08 +08:00
parent 5139c8d3bc
commit 9a77b56427
14 changed files with 108 additions and 339 deletions

View file

@ -131,7 +131,14 @@
<artifactId>jstl</artifactId> <artifactId>jstl</artifactId>
<version>1.2</version> <version>1.2</version>
</dependency> </dependency>
<!-- Webjars (static dependencies distributed as JAR files) -->
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>2.2.1</version>
</dependency>
<!-- Rome RSS --> <!-- Rome RSS -->
<dependency> <dependency>
<groupId>rome</groupId> <groupId>rome</groupId>

View file

@ -5,9 +5,15 @@
--> -->
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <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>
<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> </head>

View file

@ -10,69 +10,66 @@
<jsp:include page="../header.jsp"/> <jsp:include page="../header.jsp"/>
<body> <body>
<div id="header"> <div id="header well">
<spring:url value="/resources/images/banner-graphic.png" var="banner"/> <spring:url value="/resources/images/banner-graphic.png" var="banner"/>
<img src="${banner}" /> <img src="${banner}" />
</div> </div>
<div id="main"> <div class="container" style="padding-top: 50px;">
<c:choose> <c:choose>
<c:when test="${owner['new']}"><c:set var="method" value="post"/></c:when> <c:when test="${owner['new']}"><c:set var="method" value="post"/></c:when>
<c:otherwise><c:set var="method" value="put"/></c:otherwise> <c:otherwise><c:set var="method" value="put"/></c:otherwise>
</c:choose> </c:choose>
<h2><c:if test="${owner['new']}">New </c:if>Owner:</h2> <h2><c:if test="${owner['new']}">New </c:if>Owner</h2>
<form:form modelAttribute="owner" method="${method}"> <form:form modelAttribute="owner" method="${method}" class="form-horizontal" id="add-owner-form">
<table> <fieldset>
<tr> <div class="control-group" id="firstName">
<th> <label class="control-label">First Name </label>
First Name: <form:errors path="firstName" cssClass="errors"/> <div class="controls">
<br/> <form:input path="firstName" />
<form:input path="firstName" size="30" maxlength="80"/> <span class="help-inline"><form:errors path="firstName" /></span>
</th> </div>
</tr> </div>
<tr> <div class="control-group" id="lastName">
<th> <label class="control-label">Last Name </label>
Last Name: <form:errors path="lastName" cssClass="errors"/> <div class="controls">
<br/> <form:input path="lastName" />
<form:input path="lastName" size="30" maxlength="80"/> <span class="help-inline"><form:errors path="lastName" /></span>
</th> </div>
</tr> </div>
<tr> <div class="control-group" id="address">
<th> <label class="control-label">Address </label>
Address: <form:errors path="address" cssClass="errors"/> <div class="controls">
<br/> <form:input path="address" />
<form:input path="address" size="30" maxlength="80"/> <span class="help-inline"><form:errors path="address" /></span>
</th> </div>
</tr> </div>
<tr> <div class="control-group" id="city">
<th> <label class="control-label">City </label>
City: <form:errors path="city" cssClass="errors"/> <div class="controls">
<br/> <form:input path="city" />
<form:input path="city" size="30" maxlength="80"/> <span class="help-inline"><form:errors path="city" /></span>
</th> </div>
</tr> </div>
<tr> <div class="control-group" id="telephone">
<th> <label class="control-label">Telephone </label>
Telephone: <form:errors path="telephone" cssClass="errors"/> <div class="controls">
<br/> <form:input path="telephone" />
<form:input path="telephone" size="20" maxlength="20"/> <span class="help-inline"><form:errors path="telephone" /></span>
</th> </div>
</tr> </div>
<tr> <div class="form-actions">
<td> <c:choose>
<c:choose> <c:when test="${owner['new']}">
<c:when test="${owner['new']}"> <button type="submit">Add Owner</button>
<p class="submit"><input type="submit" value="Add Owner"/></p> </c:when>
</c:when> <c:otherwise>
<c:otherwise> <button type="submit">Update Owner</button>
<p class="submit"><input type="submit" value="Update Owner"/></p> </c:otherwise>
</c:otherwise> </c:choose>
</c:choose> </div>
</td> </fieldset>
</tr>
</table>
</form:form> </form:form>
</div> </div>
<jsp:include page="../footer.jsp"/> <jsp:include page="../footer.jsp"/>
</body> </body>

View file

@ -9,15 +9,14 @@
<jsp:include page="../header.jsp"/> <jsp:include page="../header.jsp"/>
<body> <body>
<div id="header">
<div class="container">
<spring:url value="/resources/images/banner-graphic.png" var="banner"/> <spring:url value="/resources/images/banner-graphic.png" var="banner"/>
<img src="${banner}" /> <img src="${banner}" />
</div> <h2>Owners</h2>
<div id="main">
<h2>Owners:</h2>
<table> <table class="table table-striped">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>

View file

@ -9,23 +9,21 @@
<body> <body>
<div id="header"> <div class="container">
<spring:url value="/resources/images/banner-graphic.png" var="banner"/> <spring:url value="/resources/images/banner-graphic.png" var="banner"/>
<img src="${banner}" /> <img src="${banner}" />
</div>
<div id="main">
<h2>Find Owners:</h2> <h2>Find Owners</h2>
<spring:url value="/owners" var="formUrl"/> <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> <fieldset>
<label class="control-label">Last name:</label>
<div class="controls"> <div class="controls">
<label class="control-label">Last name </label>
<form:input path="lastName" size="30" maxlength="80"/> <form:input path="lastName" size="30" maxlength="80"/>
<form:errors path="*" cssClass="errors"/> <span class="help-inline"><form:errors path="*" /></span>
</div> </div>
<div> <div class="form-actions">
<button type="submit">Find Owner</button> <button type="submit">Find Owner</button>
</div> </div>
</fieldset> </fieldset>
@ -36,7 +34,7 @@
<jsp:include page="../footer.jsp"/> <jsp:include page="../footer.jsp"/>
</div> </div>
</body> </body>
</html> </html>

View file

@ -3,21 +3,19 @@
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %> <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ 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"/> <jsp:include page="../header.jsp"/>
<body> <body>
<div id="header"> <div class="container">
<spring:url value="/resources/images/banner-graphic.png" var="banner"/> <spring:url value="/resources/images/banner-graphic.png" var="banner"/>
<img src="${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> <tr>
<th>Name</th> <th>Name</th>
<td><b>${owner.firstName} ${owner.lastName}</b></td> <td><b>${owner.firstName} ${owner.lastName}</b></td>
@ -55,7 +53,7 @@
<h2>Pets and Visits</h2> <h2>Pets and Visits</h2>
<c:forEach var="pet" items="${owner.pets}"> <c:forEach var="pet" items="${owner.pets}">
<table width="94%"> <table class="table" style="width:600px;">
<tr> <tr>
<td valign="top"> <td valign="top">
<table> <table>
@ -119,10 +117,11 @@
</tr> </tr>
</table> </table>
</c:forEach> </c:forEach>
<jsp:include page="../footer.jsp"/>
</div> </div>
<jsp:include page="../footer.jsp"/>
</body> </body>
</html> </html>

View file

@ -8,12 +8,10 @@
<jsp:include page="../header.jsp"/> <jsp:include page="../header.jsp"/>
<body> <body>
<div id="header">
<div class="container">
<spring:url value="/resources/images/banner-graphic.png" var="banner"/> <spring:url value="/resources/images/banner-graphic.png" var="banner"/>
<img src="${banner}" /> <img src="${banner}" />
</div>
<div id="main">
<c:choose> <c:choose>
<c:when test="${pet['new']}"><c:set var="method" value="post"/></c:when> <c:when test="${pet['new']}"><c:set var="method" value="post"/></c:when>
<c:otherwise><c:set var="method" value="put"/></c:otherwise> <c:otherwise><c:set var="method" value="put"/></c:otherwise>

View file

@ -9,13 +9,11 @@
<jsp:include page="../header.jsp"/> <jsp:include page="../header.jsp"/>
<body> <body>
<div id="header">
<div class="container">
<spring:url value="/resources/images/banner-graphic.png" var="banner"/> <spring:url value="/resources/images/banner-graphic.png" var="banner"/>
<img src="${banner}" /> <img src="${banner}" />
</div>
<div id="main">
<h2><c:if test="${visit['new']}">New </c:if>Visit:</h2> <h2><c:if test="${visit['new']}">New </c:if>Visit:</h2>
<form:form modelAttribute="visit"> <form:form modelAttribute="visit">

View file

@ -5,17 +5,15 @@
<html lang="en"> <html lang="en">
<jsp:include page="header.jsp"/>
<body> <body>
<div id="header"> <div class="container">
<jsp:include page="header.jsp"/>
<spring:url value="/resources/images/banner-graphic.png" var="banner"/> <spring:url value="/resources/images/banner-graphic.png" var="banner"/>
<img src="${banner}" /> <img src="${banner}" />
</div>
<div id="main">
<h2>Veterinarians:</h2> <h2>Veterinarians</h2>
<table> <table>
<thead> <thead>

View file

@ -7,27 +7,22 @@
<jsp:include page="header.jsp"/> <jsp:include page="header.jsp"/>
<body> <body>
<div id="header"> <div class="container">
<spring:url value="/resources/images/banner-graphic.png" var="banner"/> <spring:url value="/resources/images/banner-graphic.png" var="banner"/>
<img src="${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> <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> <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="/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="/vets" htmlEscape="true" />">Display all veterinarians</a></li>
<li><a href="<spring:url value="/resources/html/tutorial.html" htmlEscape="true" />">Tutorial</a></li> <li><a href="<spring:url value="/resources/html/tutorial.html" htmlEscape="true" />">Tutorial</a></li>
</ul> </ul>
<p>&nbsp;</p>
<p>&nbsp;</p>
<jsp:include page="footer.jsp"/>
</div> </div>
<jsp:include page="footer.jsp"/>
</body> </body>
</html> </html>

View file

@ -64,6 +64,9 @@
<mvc:annotation-driven content-negotiation-manager="contentNegotiationManager" /> <mvc:annotation-driven content-negotiation-manager="contentNegotiationManager" />
<mvc:resources mapping="/resources/**" location="/resources/"/> <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"> <bean id="contentNegotiationManager" class="org.springframework.web.accept.ContentNegotiationManagerFactoryBean">
<property name="favorPathExtension" value="false" /> <property name="favorPathExtension" value="false" />

View file

@ -53,7 +53,7 @@
Exporter that exposes the Clinic DAO and the CallMonitoringAspect via JMX, Exporter that exposes the Clinic DAO and the CallMonitoringAspect via JMX,
based on the @ManagedResource, @ManagedAttribute, and @ManagedOperation annotations. based on the @ManagedResource, @ManagedAttribute, and @ManagedOperation annotations.
--> -->
<context:mbean-export/> <context:mbean-export/>
<!-- PetClinic's central data access object using Spring's SimpleJdbcTemplate --> <!-- PetClinic's central data access object using Spring's SimpleJdbcTemplate -->
<bean id="clinic" class="org.springframework.samples.petclinic.jdbc.SimpleJdbcClinic"/> <bean id="clinic" class="org.springframework.samples.petclinic.jdbc.SimpleJdbcClinic"/>

View file

@ -0,0 +1,5 @@
.container {
padding-top: 10px;
margin-left: 50px;
}

View file

@ -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;
}