Patrick.Sy/spring-petclinic
1
0
Fork 0
mirror of https://github.com/spring-projects/spring-petclinic.git synced 2025-07-17 21:35:50 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

AA: Add style improvement

Browse source
This commit is contained in:
Andrew Abogado 2015-02-11 09:59:46 +08:00
parent 22359cf747
commit 0e0d319ecd
9 changed files with 410 additions and 388 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/main/webapp/components/owners/owner_details.html
View file

@ -6,14 +6,14 @@
<img data-ng-src="images/avatars/owner{{currentOwner.id}}.jpg" class="img-circle media-object" width="90" height="90">
</div>
<div class="media-body">
<div class="pull-right stats stats-lg">
<div class="pull-right stats stats-md">
<ul>
<li>{{currentOwner.pets.length || 0}}<span>Pets</span></li>
<li>{{currentOwner.visits.length || 0}}<span>Visits</span></li>
</ul>
</div>
<h1 class="h3" data-ng-bind="currentOwner.firstName + ' ' + currentOwner.lastName"></h1>
<p data-ng-bind="currentOwner.description">Accountant, Ledger Associates</p>
<p data-ng-bind="currentOwner.description">Maria Escobito</p>
<p data-ng-bind="currentOwner.city"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span>California, USA</p>
<div class="btn-group">
<a href="#" class="btn btn-link"><span class="glyphicon glyphicon-phone-alt" aria-hidden="true"></span> Call</a>
@ -76,7 +76,7 @@
<!-- Pets -->
<section id="pets" class="sections sections-narrow">
<div class="container">
<div class="action-wrappers pull-right">
<div class="action-items pull-right">
<a class="btn btn-primary pull-right action-item" data-toggle="modal" data-target="#addPetModal">
<span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span> Add New Pet
</a>

68
src/main/webapp/static/app/dashboard.html
View file

@ -36,9 +36,10 @@
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="nav-menu" class="navbar-collapse navbar-left collapse">
<ul class="nav navbar-nav navbar-menu">
<li class="active"><a href="dashboard.html">Dashboard</a></li>
<li><a href="owners.html">Owners</a></li>
<li><a href="pets.html">Pets</a></li>
<li><a href="vets.html">Vets</a></li>
<li><a href="vets.html">Veterinarians</a></li>
</ul>
</div><!-- /.navbar-collapse -->
<ul class="nav navbar-profile">
@ -49,7 +50,7 @@
<li><a href="#"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle img-profile" data-toggle="dropdown" role="button" aria-expanded="false">
<img class="img-circle" src="../images/avatar.jpg" width="30" height="30">
<img class="img-circle img-circle-small" src="../images/avatar.jpg" width="30" height="30">
</a>
<ul class="dropdown-menu navbar-dropdown-menu">
<li><a href="#">View Profile</a></li>
@ -65,15 +66,27 @@
</nav>
<!-- Welcome -->
<header class="sections sections-narrow sections-light">
<header class="sections sections-tight sections-light">
<div class="container">
<div class="media media-welcome">
<div class="media-left">
<img src="../images/avatar.jpg" class="img-circle media-object" width="90" height="90">
<div class="media">
<div class="pull-right stats stats-md">
<ul>
<li>12<span>Vets Around</span></li>
<li>5<span>Your Tasks</span></li>
<li>8<span>Appointments</span></li>
</ul>
</div>
<div class="media-body">
<h4 class="h3">Welcome, John Doe</h4>
<p>When you’re ready, you may start adding a new <a href="#">pet owner</a> or <a href="#">continue browsing</a>.</p>
<div class="media">
<div class="media-left">
<img src="../images/avatar.jpg" class="img-circle img-circle-medium media-object" width="80" height="80">
</div>
<div class="media-body">
<h4 class="h3">Welcome back, John Doe</h4>
<p>Todays date is <strong>12th February 2014</strong></p>
</div>
</div>
</div>
</div>
</div>
@ -82,13 +95,14 @@
<!-- Owners -->
<section id="owners" class="sections sections-narrow">
<div class="container">
<h2 class="sub-header">Browse Owners</h2>
<a class="btn btn-primary pull-right" href="owners.html">See All Owners <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></a>
<h2 class="sub-header">Latest Pet Owners</h2>
<div class="row thumbnail-wrapper">
<div class="col-md-3">
<div class="thumbnail">
<img src="../images/owner-default.png" class="img-circle" alt="Generic placeholder image">
<a href="owner_details.html"><img src="../images/owner-default.png" class="img-circle" alt="Generic placeholder image"></a>
<div class="caption">
<h3 class="caption-heading">Eduardo Rodriguez</h3>
<h3 class="caption-heading"><a href="owners.html">Eduardo Rodriguez</a></h3>
<p class="caption-meta">2693 Commerce St., McFarland</p>
<p class="caption-meta"><span class="glyphicon glyphicon-phone-alt"></span> +6085558763</p>
</div>
@ -165,19 +179,14 @@
</div>
</div>
</div>
<!-- /row -->
<div class="row">
<div class="col-md-4 col-md-offset-4">
<p><a class="btn btn-default btn-block" href="/owners">See All Owners</a></p>
</div>
</div>
</div>
</section>
<!-- Pets -->
<section id="pets" class="sections sections-narrow">
<div class="container">
<h2 class="sub-header">Pets</h2>
<a class="btn btn-primary pull-right" href="pets.html">See All Pets <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></a>
<h2 class="sub-header">Latest Pets</h2>
<div class="row thumbnail-wrapper">
<div class="col-md-3">
<div class="thumbnail">
@ -220,18 +229,13 @@
</div>
</div>
</div>
<!-- /row -->
<div class="row">
<div class="col-md-4 col-md-offset-4">
<p><a class="btn btn-default btn-block" href="/pets">See All Pets</a></p>
</div>
</div>
</div>
</section>
<!-- Vets -->
<section id="owners" class="sections">
<div class="container">
<a class="btn btn-primary pull-right" href="vets.html">See All Veterinarians <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></a>
<h2 class="sub-header">Veterinarians</h2>
<div class="row thumbnail-wrapper">
<div class="col-md-3">
@ -275,12 +279,6 @@
</div>
</div>
</div>
<!-- /row -->
<div class="row">
<div class="col-md-4 col-md-offset-4">
<p><a class="btn btn-default btn-block" href="/vets">See All Veterinarians</a></p>
</div>
</div>
</div>
</section>
@ -310,16 +308,6 @@
<!-- endbower -->
<!-- endbuild -->
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='//www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X');ga('send','pageview');
</script>
<!-- build:js({app,.tmp}) scripts/main.js -->
<script src="scripts/main.js"></script>
<!-- endbuild -->

260
src/main/webapp/static/app/discover.html
View file

@ -1,260 +0,0 @@
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title>Pet Clinic - Discover Pet Owners on your Neigborhood</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="shortcut icon" href="/favicon.ico">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
</head>
<body>
<!--[if lt IE 10]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Pet Clinic</a>
</div>
<div id="navbar" class="navbar-collapse collapse pull-right">
<ul class="nav navbar-nav">
<li><a href="discover.html" class="active">Discover</a></li>
<li><a href="#vet">Veterinarians</a></li>
<li><a href="#about">About</a></li>
</ul>
</div><!--/.navbar-collapse -->
</div>
</nav>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron jumbotron-tertiary">
<div class="container">
<div class="jumbotron-headline">
<div class="jumbotron-headline-cell">
<h1>Discover Pet Owners</h1>
<p>Helping you discover pet owners near you and connect.</p>
<div class="row">
<div class="col-md-6 col-md-offset-2">
<input type="text" class="form-control input-lg" placeholder=".col-md-8">
</div>
<div class="col-md-2">
<button type="submit" class="btn btn-primary btn-lg btn-block">Discover</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Featured veterinarians -->
<section id="veterianarians" class="sections">
<div class="container">
<div class="nav-tabs-filter">
<a href="#add_owner" role="button" class="btn btn-primary pull-right">Register Now - It's Free!</a>
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Newest</a></li>
<li role="presentation"><a href="#">Popular</a></li>
<li role="presentation" class="dropdown open">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">McFarland</a></li>
<li><a href="#">Sun Prairie</a></li>
<li><a href="#">Madison</a></li>
<li><a href="#">New York</a></li>
<li><a href="#">Madison</a></li>
</ul>
</li>
</ul>
</div>
<div class="row">
<div class="col-md-3">
<div class="thumbnail">
<a href="show.html"><a href="show.html"><img src="http://placehold.it/600x600" alt="Generic placeholder image"></a></a>
<div class="caption">
<a href="show.html"><a href="show.html"><h3>Thumbnail label</h3></a></a>
<p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum.</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<a href="show.html"><a href="show.html"><img src="http://placehold.it/600x600" alt="Generic placeholder image"></a></a>
<div class="caption">
<a href="show.html"><a href="show.html"><h3>Thumbnail label</h3></a></a>
<p>Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<a href="show.html"><img src="http://placehold.it/600x600" alt="Generic placeholder image"></a>
<div class="caption">
<a href="show.html"><h3>Thumbnail label</h3></a>
<p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum.</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<a href="show.html"><img src="http://placehold.it/600x600" alt="Generic placeholder image"></a>
<div class="caption">
<a href="show.html"><h3>Thumbnail label</h3></a>
<p>Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<a href="show.html"><img src="http://placehold.it/600x600" alt="Generic placeholder image"></a>
<div class="caption">
<a href="show.html"><h3>Thumbnail label</h3></a>
<p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum.</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<a href="show.html"><img src="http://placehold.it/600x600" alt="Generic placeholder image"></a>
<div class="caption">
<a href="show.html"><h3>Thumbnail label</h3></a>
<p>Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<a href="show.html"><img src="http://placehold.it/600x600" alt="Generic placeholder image"></a>
<div class="caption">
<a href="show.html"><h3>Thumbnail label</h3></a>
<p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum.</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<a href="show.html"><img src="http://placehold.it/600x600" alt="Generic placeholder image"></a>
<div class="caption">
<a href="show.html"><h3>Thumbnail label</h3></a>
<p>Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-4">
<p><a class="btn btn-primary btn-lg btn-block" href="#">Show More »</a></p>
</div>
</div>
</div>
</section>
<!-- Make an appointment call to action -->
<section id="appointment" class="jumbotron jumbotron-secondary">
<div class="container">
<div class="jumbotron-headline">
<div class="jumbotron-headline-cell">
<h2>Over 40,000 pet owners trust us. Register now. It's <strong>Free</strong> forever!</h2>
<p>Use it as a starting point to create something more unique.</p>
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="clientName">Your Name</label>
<input type="text" class="form-control input-lg" id="clientName" placeholder="Your name">
</div><div class="form-group">
<label class="sr-only" for="emailAddress">Email Address</label>
<input type="email" class="form-control input-lg" id="emailAddress" placeholder="Your email">
</div>
<div class="form-group">
<label class="sr-only" for="clientNumber">Contact Number</label>
<input type="text" class="form-control input-lg" id="clientNumber" placeholder="Your contact number">
</div>
<button type="submit" class="btn btn-primary btn-lg">Get Started - It's Free!</button>
</form>
</div>
</div>
</div>
</section>
<!-- Contact details -->
<section id="add_owner" class="sections sections-narrow">
<div class="container">
<!-- Three columns of text below the carousel -->
<div class="row">
<div class="col-lg-4">
<h3>Business Hours</h3>
<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
<h3>Our Location</h3>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
<h3>Questions or comments</h3>
<p>Cras mattis consectetur purus sit amet fermentum. </p>
<p>
<a href="mailto:youremail@yourdomain.com" type="submit" class="btn btn-default">Drop us a line</a>
</p>
</div><!-- /.col-lg-4 -->
</div><!-- /.row -->
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<p class="pull-right">Tell your friends: <a href="#">Facebook</a>, <a href="#">Twitter</a>, <a href="#">Google+</a></p>
<p>© 2015 Pet Clinic, A Spring Framework Demonstration</p>
</div>
</footer>
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/affix.js"></script>
<script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/alert.js"></script>
<script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/button.js"></script>
<script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/carousel.js"></script>
<script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/collapse.js"></script>
<script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/dropdown.js"></script>
<script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/tab.js"></script>
<script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/transition.js"></script>
<script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/scrollspy.js"></script>
<script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/modal.js"></script>
<script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/tooltip.js"></script>
<script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/popover.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='//www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X');ga('send','pageview');
</script>
<!-- build:js({app,.tmp}) scripts/main.js -->
<script src="scripts/main.js"></script>
<!-- endbuild -->
</body>
</html>

BIN
src/main/webapp/static/app/favicon.ico
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

BIN
src/main/webapp/static/app/images/logo.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 4.3 KiB

131
src/main/webapp/static/app/owner_details.html
View file

@ -2,7 +2,7 @@
<html class="no-js">
<head>
<meta charset="utf-8">
<title>Pet Clinic - Dashboard</title>
<title>Pet Clinic - Owner Details</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="shortcut icon" href="/favicon.ico">
@ -36,7 +36,8 @@
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="nav-menu" class="navbar-collapse navbar-left collapse">
<ul class="nav navbar-nav navbar-menu">
<li><a href="owners.html">Owners</a></li>
<li><a href="dashboard.html">Dashboard</a></li>
<li class="active"><a href="owners.html">Owners</a></li>
<li><a href="pets.html">Pets</a></li>
<li><a href="vets.html">Vets</a></li>
</ul>
@ -91,65 +92,69 @@
</header>
<!-- Owners -->
<section id="ownersInfo" class="sections sections-narrow">
<section id="ownersInfo" class="sections sections-no-padding sections-darker">
<div class="container">
<div class="row">
<div class="col-md-9">
<a href="#" class="btn btn-primary pull-right" data-toggle="modal" data-target="#editOwnerModal"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span> Edit Owner</a>
<h2 class="h3 sub-header">Owner Information</h2>
<form class="form-inline form-inline-display">
<div class="form-group">
<p>First Name</p>
<p class="h5">Maria</p>
</div>
<div class="form-group">
<p>Last Name</p>
<p class="h5">Rodriguez</p>
</div>
<div class="form-group">
<p>Occupation</p>
<p class="h5">Accountant</p>
</div>
<div class="form-group">
<p>Company</p>
<p class="h5">Ledger Associates</p>
</div>
<div class="form-group">
<p>Birthday</p>
<p class="h5">04 Feb 1988</p>
</div>
<div class="form-group">
<p>Address</p>
<p class="h5">345 Maple St.</p>
</div>
<div class="form-group">
<p>City</p>
<p class="h5">Madison</p>
</div>
<div class="form-group">
<p>Contact Number</p>
<p class="h5">6085557683</p>
</div>
<div class="form-group">
<p>Email</p>
<p class="h5">maria.escobito@gmail.com</p>
</div>
</form>
<div class="col-md-9 col-border-right">
<div class="section-inner-padding">
<a href="#" class="btn btn-primary pull-right" data-toggle="modal" data-target="#editOwnerModal"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span> Edit Owner</a>
<h2 class="h3 sub-header">Owner Information</h2>
<form class="form-inline form-inline-display">
<div class="form-group">
<p>First Name</p>
<p class="h5">Maria</p>
</div>
<div class="form-group">
<p>Last Name</p>
<p class="h5">Rodriguez</p>
</div>
<div class="form-group">
<p>Occupation</p>
<p class="h5">Accountant</p>
</div>
<div class="form-group">
<p>Company</p>
<p class="h5">Ledger Associates</p>
</div>
<div class="form-group">
<p>Birthday</p>
<p class="h5">04 Feb 1988</p>
</div>
<div class="form-group">
<p>Address</p>
<p class="h5">345 Maple St.</p>
</div>
<div class="form-group">
<p>City</p>
<p class="h5">Madison</p>
</div>
<div class="form-group">
<p>Contact Number</p>
<p class="h5">6085557683</p>
</div>
<div class="form-group">
<p>Email</p>
<p class="h5">maria.escobito@gmail.com</p>
</div>
</form>
</div>
</div>
<div class="col-md-3">
<h2 class="h3 sub-header">Owner Activities</h2>
<!-- List group -->
<ul class="list-group">
<li class="list-group-item">
<span class="glyphicon glyphicon-retweet" aria-hidden="true"></span>
<strong>Next Appointment:</strong> None</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-road" aria-hidden="true"></span>
<strong>Last Visited:</strong> 02 Feb 2015</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
<strong>Due Date:</strong> 14 Mar 2015</li>
</ul>
<div class="section-inner-padding">
<h2 class="h3 sub-header">Owner Activities</h2>
<!-- List group -->
<ul class="list-group">
<li class="list-group-item">
<span class="glyphicon glyphicon-retweet" aria-hidden="true"></span>
<strong>Next Appointment:</strong> None</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-road" aria-hidden="true"></span>
<strong>Last Visited:</strong> 02 Feb 2015</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
<strong>Due Date:</strong> 14 Mar 2015</li>
</ul>
</div>
</div>
</div>
</div>
@ -199,14 +204,14 @@
</section>
<!-- Pets -->
<section id="pets" class="sections sections-bottom-nav sections-light">
<section id="pets" class="sections sections-bottom-nav sections-darker">
<div class="container">
<ul class="pager pull-left">
<li><a href="#"><span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span> Back to Owners List</a></li>
<ul class="pager pager-link pull-left">
<li><a href="owners.html"><span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span> Back to Owners List</a></li>
</ul>
<ul class="pager pull-right">
<li><a href="#"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> Carlos Estaban</a></li>
<li><a href="#">Jean Coleman <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></a></li>
<ul class="pager pager-link pull-right">
<li><a href="owner_details.html"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> Carlos Estaban</a></li>
<li><a href="owner_details.html">Jean Coleman <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></a></li>
</ul>
</div>
</section>

203
src/main/webapp/static/app/owners.html Normal file
View file

@ -0,0 +1,203 @@
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title>Pet Clinic - Owners</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="shortcut icon" href="/favicon.ico">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
</head>
<body>
<!--[if lt IE 10]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="/">
<img alt="Pet Clinic Brand" height="27" width="auto" src="images/logo.png">
</a>
<button class="navbar-toggle navbar-toggle-left collapsed" type="button" data-toggle="collapse" data-target="#nav-menu">
<span class="sr-only">Toggle navigation</span>
<span class="glyphicon glyphicon-triangle-bottom"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="nav-menu" class="navbar-collapse navbar-left collapse">
<ul class="nav navbar-nav navbar-menu">
<li><a href="dashboard.html">Dashboard</a></li>
<li class="active"><a href="owners.html">Owners</a></li>
<li><a href="pets.html">Pets</a></li>
<li><a href="vets.html">Veterinarians</a></li>
</ul>
</div><!-- /.navbar-collapse -->
<ul class="nav navbar-profile">
<li class="hidden">
<button class="btn btn-default btn-primary btn-new navbar-btn" data-toggle="dropdown">Create New</button>
</li>
<li><a href="#"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></a></li>
<li><a href="#"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle img-profile" data-toggle="dropdown" role="button" aria-expanded="false">
<img class="img-circle img-circle-small" src="../images/avatar.jpg" width="30" height="30">
</a>
<ul class="dropdown-menu navbar-dropdown-menu">
<li><a href="#">View Profile</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Sign Out</a></li>
<li class="divider"></li>
<li><a href="#">Help</a></li>
</ul>
</li>
</ul>
</div>
</div><!-- /.container-fluid -->
</nav>
<!-- Owners -->
<section id="owners" class="sections sections-narrow">
<div class="container">
<div class="action-items pull-right">
<div class="action-item pull-right">
View as
<div class="btn-group">
<a href="#" class="btn btn-default"><span class="glyphicon glyphicon-th" aria-hidden="true"></span></a>
<a href="#" class="btn btn-default"><span class="glyphicon glyphicon-th-list" aria-hidden="true"></span></a>
</div>
</div>
<div class="action-item pull-right">
Sort by
<div class="btn-group">
<a href="#" class="btn btn-default"><span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span></a>
<a href="#" class="btn btn-default"><span class="glyphicon glyphicon-arrow-down" aria-hidden="true"></span></a>
</div>
</div>
</div>
<h2 class="sub-header">Latest Pet Owners</h2>
<div class="row thumbnail-wrapper">
<div class="col-md-3">
<div class="thumbnail">
<a href="owner_details.html"><img src="../images/owner-default.png" class="img-circle" alt="Generic placeholder image"></a>
<div class="caption">
<h3 class="caption-heading"><a href="owners.html">Eduardo Rodriguez</a></h3>
<p class="caption-meta">2693 Commerce St., McFarland</p>
<p class="caption-meta"><span class="glyphicon glyphicon-phone-alt"></span> +6085558763</p>
</div>
<div class="action-bar">
<ul>
<li>
<a href="#"><img src="../images/pet-small.png" class="img-circle img-circle-small" alt="Generic placeholder image" height="30" width="30"></a>
</li>
<li>
<a href="#" class="btn-add-pet"><span class="glyphicon glyphicon-plus"></span></a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="../images/owner-default.png" class="img-circle" alt="Generic placeholder image">
<div class="caption">
<h3 class="caption-heading">Eduardo Rodriguez</h3>
<p class="caption-meta">2693 Commerce St., McFarland</p>
<p class="caption-meta"><span class="glyphicon glyphicon-phone-alt"></span> +6085558763</p>
</div>
<div class="action-bar">
<ul>
<li>
<a href="#"><img src="../images/pet-small.png" class="img-circle img-circle-small" alt="Generic placeholder image" height="30" width="30"></a>
</li>
<li>
<a href="#" class="btn-add-pet"><span class="glyphicon glyphicon-plus"></span></a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="../images/owner-default.png" class="img-circle" alt="Generic placeholder image">
<div class="caption">
<h3 class="caption-heading">Eduardo Rodriguez</h3>
<p class="caption-meta">2693 Commerce St., McFarland</p>
<p class="caption-meta"><span class="glyphicon glyphicon-phone-alt"></span> +6085558763</p>
</div>
<div class="action-bar">
<ul>
<li>
<a href="#"><img src="../images/pet-small.png" class="img-circle img-circle-small" alt="Generic placeholder image" height="30" width="30"></a>
</li>
<li>
<a href="#" class="btn-add-pet"><span class="glyphicon glyphicon-plus"></span></a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="../images/owner-default.png" class="img-circle" alt="Generic placeholder image">
<div class="caption">
<h3 class="caption-heading">Eduardo Rodriguez</h3>
<p class="caption-meta">2693 Commerce St., McFarland</p>
<p class="caption-meta"><span class="glyphicon glyphicon-phone-alt"></span> +6085558763</p>
</div>
<div class="action-bar">
<ul>
<li>
<a href="#"><img src="../images/pet-small.png" class="img-circle img-circle-small" alt="Generic placeholder image" height="30" width="30"></a>
</li>
<li>
<a href="#" class="btn-add-pet"><span class="glyphicon glyphicon-plus"></span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<p class="pull-right">Tell your friends: <a href="#">Facebook</a>, <a href="#">Twitter</a>, <a href="#">Google+</a></p>
<p>© 2015 Pet Clinic, A Spring Framework Demonstration</p>
</div>
</footer>
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/affix.js"></script>
<script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/alert.js"></script>
<script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/button.js"></script>
<script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/carousel.js"></script>
<script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/collapse.js"></script>
<script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/dropdown.js"></script>
<script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/tab.js"></script>
<script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/transition.js"></script>
<script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/scrollspy.js"></script>
<script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/modal.js"></script>
<script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/tooltip.js"></script>
<script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/popover.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({app,.tmp}) scripts/main.js -->
<script src="scripts/main.js"></script>
<!-- endbuild -->
</body>
</html>

128
src/main/webapp/static/app/styles/main.scss
View file

@ -1,20 +1,22 @@
$icon-font-path: "fonts/";
$brand-primary: #6cb947;
$brand-primary: #23a04d;
$text-color: #747c83;
$text-color-inverse: #fff;
$headings-color: #495256;
$sections-bg: #f0f2f5;
$sections-border: #EAEBED;
$headings-color: #252a35;
$sections-bg: #f9fafb;
$sections-border: #dee4e8;
$jumbotron-bg: #42494d;
$navbar-default-bg: #2d4f61;
$navbar-default-border: #2d4f61;
$navbar-default-link-color: #749aa4;
$navbar-default-link-hover-color: #d9e9ed;
$navbar-default-link-active-color: #e6f2f5;
$navbar-default-bg: #23a04d;
$navbar-default-border: #23a04d;
$navbar-default-link-color: #b3dcc3;
$navbar-default-link-hover-color: #fff;
$navbar-default-link-active-color: #fff;
$navbar-dropdown-menu: #2e3532;
$thumbnail-border: #e6e9ed;
$btn-default-color: #495256;
$btn-default-color: #747c83;
$btn-default-border: #D4D5D7;
$input-bg: #D9DCDF;
$gray-lighter: #e3e5e6;
%font-smoothing {
-webkit-font-smoothing: antialiased;
@ -77,12 +79,23 @@ input::-moz-focus-inner {
/* Header */
.sub-header {
font-size: 26px;
font-weight: 500;
font-size: 20px;
font-weight: 600;
margin-top: 10px;
padding-bottom: 10px;
}
.sub-header-actions {
.pull-left {
padding-left: 20px;
}
.pull-left:last-child {
.btn-group {
padding-right: 0;
}
}
}
/* Custom page footer */
.footer {
font-size: 13px;
@ -248,15 +261,30 @@ input::-moz-focus-inner {
padding: 40px 0;
}
.sections-browse {
background-color: $jumbotron-bg;
.sections-tight {
padding: 20px 0;
}
.sections-no-padding {
padding: 0;
}
.section-inner-padding {
padding: 10px;
}
.col-border-right {
border-right: 1px solid $gray-lighter;
}
.sections-light {
background-color: $text-color-inverse;
}
.sections-darker {
background-color: #f3f5f7;
}
.section-heading {
font-size: 40px;
}
@ -318,7 +346,7 @@ input::-moz-focus-inner {
@media (min-width: $grid-float-breakpoint) {
> a {
font-weight: 500;
padding: 20px 15px;
padding: 20px 10px;
}
}
@ -345,7 +373,7 @@ input::-moz-focus-inner {
@media (max-width: $grid-float-breakpoint) {
.navbar-menu {
background-color: darken($navbar-default-bg,10%);
background-color: $navbar-dropdown-menu;
> li {
padding: 0;
@ -376,6 +404,8 @@ input::-moz-focus-inner {
> a {
color: $navbar-default-link-color;
border: 1px solid $navbar-default-link-color;
border-radius: 100%;
line-height: 30px;
height: 30px;
padding: 0;
@ -386,6 +416,11 @@ input::-moz-focus-inner {
&:focus,
&:active {
background-color: transparent;
border-color: $text-color-inverse;
.glyphicon {
color: $text-color-inverse;
}
}
&.img-profile {
@ -430,7 +465,7 @@ input::-moz-focus-inner {
border-bottom: 10px solid;
border-right: 10px solid rgba($gray-darker, 0);
border-left: 10px solid rgba($gray-darker, 0);
color: darken($navbar-default-bg,10%);
color: $navbar-dropdown-menu;
content: '';
display: block;
height: 0;
@ -461,7 +496,7 @@ input::-moz-focus-inner {
}
.open > .navbar-dropdown-menu {
background-color: darken($navbar-default-bg,10%);
background-color: $navbar-dropdown-menu;
display: block;
width: 200px;
border: 0;
@ -563,7 +598,9 @@ input::-moz-focus-inner {
.btn {
border-color: transparent;
border-radius: 3px;
font-weight: 500;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
transition: .3s ease-in-out;
&:hover {
@ -715,6 +752,11 @@ input::-moz-focus-inner {
width: 110px;
}
.img-circle-medium {
height: 80px;
width: 80px;
}
.img-circle-small {
height: 30px;
width: 30px;
@ -748,6 +790,7 @@ label {
.form-control[disabled],
.form-control[readonly] {
background-color: $text-color-inverse;
border: 1px solid $gray-lighter;
}
.form-group-action {
@ -851,7 +894,7 @@ label {
li {
border-right: 1px solid $gray-lighter;
color: $headings-color;
color: $brand-primary;
display: inline;
float: left;
font-size: 16px;
@ -878,6 +921,22 @@ label {
}
}
.stats-md {
padding: 20px;
li {
font-size: 25px;
font-weight: 500;
line-height: normal;
padding: 0 20px;
}
span {
font-size: 11px;
padding-top: 4px;
}
}
.stats-lg {
padding: 20px;
@ -895,8 +954,35 @@ label {
/* Action Items */
.action-wrappers {
.action-wrappers,
.action-items {
.action-item {
margin: 0 5px;
}
.btn-group {
padding: 0 12px;
}
}
/* Page style without the borders */
.pager-link {
li:first-child {
a {
padding-left: 0;
}
}
li:last-child {
a {
padding-right: 0;
}
}
li {
a {
background-color: transparent !important;
border: 0;
}
}
}

2
src/main/webapp/static/dist/dashboard.html vendored
View file

@ -163,7 +163,7 @@
<!-- /row -->
<div class="row">
<div class="col-md-4 col-md-offset-4">
<p><a class="btn btn-default btn-block" href="/owners">See All Owners</a></p>
<p><a class="btn btn-default btn-block" href="owners.html">See All Owners</a></p>
</div>
</div>
</div>