LH :: Incorporated the new style into webapp

This commit is contained in:
Lim Han 2015-02-04 21:54:26 +08:00
parent 7181c37d3d
commit d5081563cb
32 changed files with 188 additions and 86 deletions

View file

@ -5,8 +5,8 @@
<title>Pet Clinic - Home</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="shortcut icon" href="static/dist/favicon.ico">
<link rel="stylesheet" href="static/dist/styles/main.css">
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="styles/main.css">
</head>
<body data-ng-controller="MainController">
<!--[if lt IE 10]>

View file

@ -4,7 +4,7 @@
<div class="row thumbnail-wrapper">
<div class="col-md-3">
<div class="thumbnail">
<img src="static/dist/images/owner-default.png" class="img-circle" alt="Generic placeholder image">
<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>
@ -13,7 +13,7 @@
<div class="action-bar">
<ul>
<li>
<a href="#"><img src="static/dist/images/pet-small.png" class="img-circle" alt="Generic placeholder image" height="30" width="30"></a>
<a href="#"><img src="images/pet-small.png" class="img-circle" alt="Generic placeholder image" height="30" width="30"></a>
</li>
<li>
<a href="#" class="btn-add-pet"><span class="glyphicon glyphicon-plus"></span></a>
@ -24,7 +24,7 @@
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="static/dist/images/owner-default.png" class="img-circle" alt="Generic placeholder image">
<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>
@ -33,7 +33,7 @@
<div class="action-bar">
<ul>
<li>
<a href="#"><img src="static/dist/images/pet-small.png" class="img-circle" alt="Generic placeholder image" height="30" width="30"></a>
<a href="#"><img src="images/pet-small.png" class="img-circle" alt="Generic placeholder image" height="30" width="30"></a>
</li>
<li>
<a href="#" class="btn-add-pet"><span class="glyphicon glyphicon-plus"></span></a>
@ -44,7 +44,7 @@
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="static/dist/images/owner-default.png" class="img-circle" alt="Generic placeholder image">
<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>
@ -53,7 +53,7 @@
<div class="action-bar">
<ul>
<li>
<a href="#"><img src="static/dist/images/pet-small.png" class="img-circle" alt="Generic placeholder image" height="30" width="30"></a>
<a href="#"><img src="images/pet-small.png" class="img-circle" alt="Generic placeholder image" height="30" width="30"></a>
</li>
<li>
<a href="#" class="btn-add-pet"><span class="glyphicon glyphicon-plus"></span></a>
@ -64,7 +64,7 @@
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="static/dist/images/owner-default.png" class="img-circle" alt="Generic placeholder image">
<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>
@ -73,7 +73,7 @@
<div class="action-bar">
<ul>
<li>
<a href="#"><img src="static/dist/images/pet-small.png" class="img-circle" alt="Generic placeholder image" height="30" width="30"></a>
<a href="#"><img src="images/pet-small.png" class="img-circle" alt="Generic placeholder image" height="30" width="30"></a>
</li>
<li>
<a href="#" class="btn-add-pet"><span class="glyphicon glyphicon-plus"></span></a>

View file

@ -4,7 +4,7 @@
<div class="row thumbnail-wrapper">
<div class="col-md-3">
<div class="thumbnail">
<img src="static/dist/images/pet-default.png" class="img-circle" alt="Generic placeholder image">
<img src="images/pet-default.png" class="img-circle" alt="Generic placeholder image">
<div class="caption">
<h3 class="caption-heading">Basil</h3>
<p class="caption-meta">08 August 2012</p>
@ -14,7 +14,7 @@
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="static/dist/images/pet-default.png" class="img-circle" alt="Generic placeholder image">
<img src="images/pet-default.png" class="img-circle" alt="Generic placeholder image">
<div class="caption">
<h3 class="caption-heading">Basil</h3>
<p class="caption-meta">08 August 2012</p>
@ -24,7 +24,7 @@
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="static/dist/images/pet-default.png" class="img-circle" alt="Generic placeholder image">
<img src="images/pet-default.png" class="img-circle" alt="Generic placeholder image">
<div class="caption">
<h3 class="caption-heading">Basil</h3>
<p class="caption-meta">08 August 2012</p>
@ -34,7 +34,7 @@
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="static/dist/images/pet-default.png" class="img-circle" alt="Generic placeholder image">
<img src="images/pet-default.png" class="img-circle" alt="Generic placeholder image">
<div class="caption">
<h3 class="caption-heading">Basil</h3>
<p class="caption-meta">08 August 2012</p>

View file

@ -0,0 +1,53 @@
<section id="owners" class="sections">
<div class="container">
<h2 class="sub-header">Veterinarians</h2>
<div class="row thumbnail-wrapper">
<div class="col-md-3">
<div class="thumbnail">
<img src="images/veterinarian-default.jpg" class="img-circle" alt="Generic placeholder image">
<div class="caption">
<h3 class="caption-heading">Helen Leary</h3>
<p class="caption-meta"><span class="glyphicon glyphicon-phone-alt"></span> +6085558763</p>
<p class="caption-meta"><span class="caption-label">Surgery</span></p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="images/veterinarian-default.jpg" class="img-circle" alt="Generic placeholder image">
<div class="caption">
<h3 class="caption-heading">Helen Leary</h3>
<p class="caption-meta"><span class="glyphicon glyphicon-phone-alt"></span> +6085558763</p>
<p class="caption-meta"><span class="caption-label">Surgery</span></p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="images/veterinarian-default.jpg" class="img-circle" alt="Generic placeholder image">
<div class="caption">
<h3 class="caption-heading">Helen Leary</h3>
<p class="caption-meta"><span class="glyphicon glyphicon-phone-alt"></span> +6085558763</p>
<p class="caption-meta"><span class="caption-label">Surgery</span></p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="images/veterinarian-default.jpg" class="img-circle" alt="Generic placeholder image">
<div class="caption">
<h3 class="caption-heading">Helen Leary</h3>
<p class="caption-meta"><span class="glyphicon glyphicon-phone-alt"></span> +6085558763</p>
<p class="caption-meta"><span class="caption-label">Surgery</span></p>
</div>
</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>

View file

@ -3,7 +3,7 @@
<div class="container">
<div class="media media-welcome">
<div class="media-left">
<img src="static/dist/images/avatar.jpg" class="img-circle media-object" width="90" height="90">
<img src="images/avatar.jpg" class="img-circle media-object" width="90" height="90">
</div>
<div class="media-body">
<h4 class="h3">Welcome, John Doe</h4>

View file

@ -0,0 +1,11 @@
<!-- Welcome -->
<data-ng-include src="'components/landing/_welcome.html'"></data-ng-include>
<!-- Owners -->
<data-ng-include src="'components/landing/_owners.html'"></data-ng-include>
<!-- Pets -->
<data-ng-include src="'components/landing/_pets.html'"></data-ng-include>
<!-- Vets -->
<data-ng-include src="'components/landing/_vets.html'"></data-ng-include>

View file

@ -3,7 +3,7 @@
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="/petclinic/">
<img alt="Pet Clinic Brand" height="27" width="auto" src="static/dist/images/logo.png">
<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>
@ -21,13 +21,12 @@
</ul>
</div><!-- /.navbar-collapse -->
<ul class="nav navbar-profile">
<ul data-ng-if="getSession() != null" class="nav navbar-profile">
<li data-ng-if="getSession() != null"><a href="#"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></a></li>
<li data-ng-if="getSession() != null"><a href="#"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></a></li>
<li class="dropdown">
<a href="#" data-ng-if="getSession() == null" data-ng-click="login()">Sign in</a>
<a data-ng-if="getSession() != null" href="#" class="dropdown-toggle img-profile" data-toggle="dropdown" role="button" aria-expanded="false">
<img class="img-circle" src="static/dist/images/avatar.jpg" width="30" height="30">
<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">
</a>
<ul data-ng-if="getSession() != null" class="dropdown-menu navbar-dropdown-menu">
<li><a href="#">View Profile</a></li>
@ -38,5 +37,13 @@
</ul>
</li>
</ul>
<ul data-ng-if="getSession() == null" class="nav navbar-links pull-right">
<li>
<a href="#appointment" class="js-scroll-nav">Get started</a>
</li>
<li>
<a href="#" data-ng-click="login()">Login</a>
</li>
</ul>
</div><!-- /.container-fluid -->
</nav>

View file

@ -0,0 +1,15 @@
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<div class="jumbotron-headline">
<div class="jumbotron-headline-cell">
<h1>Pet care for the People who love them</h1>
<p>PetClinic is here to enhance people's relationships with their pets</p>
<p><a class="btn btn-primary btn-lg" data-scroll-to-target href="#contact-us" role="button">Learn more</a></p>
</div>
</div>
</div>
<video loop="loop" preload="auto" class="jumbotron-video" autoplay muted>
<source src="videos/hero-bird.mp4" type="video/mp4">
</video>
</div>

View file

@ -1,31 +0,0 @@
<section id="companies" class="sections sections-narrow">
<div class="container text-center">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="text-center">
<p class="section-desc">Trusted by some of the world's smartest companies</p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-2">
<img src="http://placehold.it/100x40" alt="Companies placeholder image">
</div>
<div class="col-lg-2">
<img src="http://placehold.it/100x40" alt="Companies placeholder image">
</div>
<div class="col-lg-2">
<img src="http://placehold.it/100x40" alt="Companies placeholder image">
</div>
<div class="col-lg-2">
<img src="http://placehold.it/100x40" alt="Companies placeholder image">
</div>
<div class="col-lg-2">
<img src="http://placehold.it/100x40" alt="Companies placeholder image">
</div>
<div class="col-lg-2">
<img src="http://placehold.it/100x40" alt="Companies placeholder image">
</div>
</div>
</div>
</section>

View file

@ -1,4 +1,4 @@
<section id="add_owner" class="sections sections-narrow">
<section id="contact-us" class="sections sections-narrow">
<div class="container">
<!-- Three columns of text below the carousel -->
<div class="row">

View file

@ -1,44 +1,69 @@
<section id="owners" class="sections">
<!-- Featured veterinarians -->
<section class="sections">
<div class="container">
<h2 class="sub-header">Veterinarians</h2>
<div class="row thumbnail-wrapper">
<div class="col-md-3">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="text-center">
<h3 id="veterianarians" class="section-heading">Our Veterinarians</h3>
<p class="section-desc">A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="thumbnail">
<img src="static/dist/images/veterinarian-default.jpg" class="img-circle" alt="Generic placeholder image">
<img src="images/avatars/vet1.jpg" alt="Generic placeholder image">
<div class="caption">
<h3 class="caption-heading">Helen Leary</h3>
<p class="caption-meta"><span class="glyphicon glyphicon-phone-alt"></span> +6085558763</p>
<p class="caption-meta"><span class="caption-label">Surgery</span></p>
<h3>Thumbnail label</h3>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. </p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="static/dist/images/veterinarian-default.jpg" class="img-circle" alt="Generic placeholder image">
<img src="images/avatars/vet2.jpg" alt="Generic placeholder image">
<div class="caption">
<h3 class="caption-heading">Helen Leary</h3>
<p class="caption-meta"><span class="glyphicon glyphicon-phone-alt"></span> +6085558763</p>
<p class="caption-meta"><span class="caption-label">Surgery</span></p>
<h3>Thumbnail label</h3>
<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">
<img src="static/dist/images/veterinarian-default.jpg" class="img-circle" alt="Generic placeholder image">
<img src="images/avatars/vet3.jpg" alt="Generic placeholder image">
<div class="caption">
<h3 class="caption-heading">Helen Leary</h3>
<p class="caption-meta"><span class="glyphicon glyphicon-phone-alt"></span> +6085558763</p>
<p class="caption-meta"><span class="caption-label">Surgery</span></p>
<h3>Thumbnail label</h3>
<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>
<!-- /row -->
<div class="row">
<div class="col-md-3">
<div class="thumbnail">
<img src="images/avatars/vet4.jpg" alt="Generic placeholder image">
<div class="caption">
<h3>Thumbnail label</h3>
<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">
<img src="static/dist/images/veterinarian-default.jpg" class="img-circle" alt="Generic placeholder image">
<img src="images/avatars/vet3.jpg" alt="Generic placeholder image">
<div class="caption">
<h3 class="caption-heading">Helen Leary</h3>
<p class="caption-meta"><span class="glyphicon glyphicon-phone-alt"></span> +6085558763</p>
<p class="caption-meta"><span class="caption-label">Surgery</span></p>
<h3>Thumbnail label</h3>
<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-6">
<div class="thumbnail">
<img src="images/avatars/vet2.jpg" alt="Generic placeholder image">
<div class="caption">
<h3>Thumbnail label</h3>
<p>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli.</p>
</div>
</div>
</div>
@ -46,7 +71,7 @@
<!-- /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>
<p><a class="btn btn-primary btn-lg btn-block" data-ui-sref="vets">View More »</a></p>
</div>
</div>
</div>

View file

@ -1,11 +1,20 @@
<!-- Welcome -->
<data-ng-include src="'components/landing/_welcome.html'"></data-ng-include>
<data-ng-include src="'components/landing/_banner.html'"></data-ng-include>
<!-- Owners -->
<data-ng-include src="'components/landing/_owners.html'"></data-ng-include>
<data-ng-include src="'components/landing/_vets.html'"></data-ng-include>
<!-- Pets -->
<data-ng-include src="'components/landing/_pets.html'"></data-ng-include>
<data-ng-include src="'components/landing/_services.html'"></data-ng-include>
<!-- Vets -->
<data-ng-include src="'components/landing/_vets.html'"></data-ng-include>
<!-- Testimonials -->
<data-ng-include src="'components/landing/_testimonials.html'"></data-ng-include>
<!-- Companies -->
<data-ng-include src="'components/landing/_companies.html'"></data-ng-include>
<!-- Appointment -->
<data-ng-include src="'components/landing/_appointment.html'"></data-ng-include>
<!-- Contact us -->
<data-ng-include src="'components/landing/_contact_us.html'"></data-ng-include>

View file

@ -42,13 +42,13 @@
</div>
<div class="row">
<div class="col-md-3" ng-repeat="owner in owners">
<div class="col-md-3" data-ng-repeat="owner in owners">
<div class="thumbnail">
<a href="show.html"><a href="show.html"><img src="/petclinic/images/avatars/owner{{owner.id}}.jpg" alt="Generic placeholder image"></a></a>
<a href="show.html"><img src="/petclinic/images/avatars/owner{{owner.id}}.jpg" alt="Generic placeholder image"></img></a>
<div class="caption">
<a href="show.html"><a href="show.html"><h3>{{owner.firstName}}&nbsp{{owner.lastName}}</h3></a></a>
<p>{{owner.city}}</p>
<p>{{owner.address}}</p>
<h3><a href="show.html" data-ng-bind="owner.firstName + ' ' +owner.lastName"></a></h3>
<p data-ng-bind="owner.city"></p>
<p data-ng-bin="owner.address"></p>
</div>
</div>
</div>

View file

@ -14,7 +14,7 @@
<div class="thumbnail">
<img src="http://placehold.it/600x600" alt="Generic placeholder image">
<div class="caption">
<h3 ng-bind="'Dr. ' + vet.firstName + ' ' + vet.lastName">Veterinarian Name</h3>
<h3 data-ng-bind="'Dr. ' + vet.firstName + ' ' + vet.lastName">Veterinarian Name</h3>
<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>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 60 KiB

After

Width:  |  Height:  |  Size: 63 KiB

View file

Before

Width:  |  Height:  |  Size: 56 KiB

After

Width:  |  Height:  |  Size: 56 KiB

View file

Before

Width:  |  Height:  |  Size: 73 KiB

After

Width:  |  Height:  |  Size: 73 KiB

View file

Before

Width:  |  Height:  |  Size: 41 KiB

After

Width:  |  Height:  |  Size: 41 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

View file

Before

Width:  |  Height:  |  Size: 82 KiB

After

Width:  |  Height:  |  Size: 82 KiB

View file

Before

Width:  |  Height:  |  Size: 63 KiB

After

Width:  |  Height:  |  Size: 63 KiB

View file

Before

Width:  |  Height:  |  Size: 73 KiB

After

Width:  |  Height:  |  Size: 73 KiB

View file

Before

Width:  |  Height:  |  Size: 77 KiB

After

Width:  |  Height:  |  Size: 77 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 KiB

View file

@ -41,4 +41,17 @@ app.controller('VisitController', VisitController);
app.factory('Owner', Owner);
app.factory('Pet', Pet);
app.factory('Vet', Vet);
app.factory('Visit', Visit);
app.factory('Visit', Visit);
/** Directives **/
app.directive('scrollToTarget', function() {
return function(scope, element) {
element.bind('click', function() {
angular.element('html, body').stop().animate({
scrollTop: angular.element(angular.element(element).attr('href')).offset().top - 20
}, 1500);
return false;
});
};
});

File diff suppressed because one or more lines are too long

Binary file not shown.