mirror of
https://github.com/spring-projects/spring-petclinic.git
synced 2025-07-17 21:35:50 +00:00
AA: Add static modal flow for Add/Edit Owner and Success, Add/Edit Pet and Success, Add Pet Visit and Success.
This commit is contained in:
Andrew Abogado
parent
8fc91bd0dd
commit
505b17c98c
4 changed files with 540 additions and 9 deletions
|
|
@ -45,8 +45,8 @@
|
|||
<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><a href="#" data-toggle="modal" data-target="#searchModal"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></a></li>
|
||||
<li><a href="#" data-toggle="modal" data-target="#addOwnerModal"><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">
|
||||
|
|
@ -95,7 +95,7 @@
|
|||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-9">
|
||||
<a href="#" class="btn btn-primary pull-right"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span> Edit Owner</a>
|
||||
<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">
|
||||
|
|
@ -159,7 +159,7 @@
|
|||
<section id="pets" class="sections sections-narrow">
|
||||
<div class="container">
|
||||
<div class="action-wrappers pull-right">
|
||||
<a class="btn btn-primary pull-right action-item">
|
||||
<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>
|
||||
<div class="pull-right action-item">
|
||||
|
|
@ -185,10 +185,10 @@
|
|||
<p class="caption-meta"><span class="caption-label">Hamster</span></p>
|
||||
</div>
|
||||
<div class="action-bar">
|
||||
<a class="btn btn-default">
|
||||
<a class="btn btn-default" data-toggle="modal" data-target="#editPetModal">
|
||||
<span class="glyphicon glyphicon-edit" aria-hidden="true"></span> Edit Pet
|
||||
</a>
|
||||
<a class="btn btn-default">
|
||||
<a class="btn btn-default" data-toggle="modal" data-target="#addPetVisitModal">
|
||||
<span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span> Add Visit
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -202,7 +202,7 @@
|
|||
<section id="pets" class="sections sections-bottom-nav sections-light">
|
||||
<div class="container">
|
||||
<ul class="pager pull-left">
|
||||
<li><a href="#"><span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span> Previous</a></li>
|
||||
<li><a href="#"><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>
|
||||
|
|
@ -219,6 +219,526 @@
|
|||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Add Owner Modal -->
|
||||
<div class="modal modal-owner fade" id="addOwnerModal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-8 col-md-offset-2">
|
||||
<h1 class="sub-header">Add An Owner</h1>
|
||||
<em class="text-muted">Fill up pet owners basic information and contact details</em>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-4 col-md-offset-2">
|
||||
<div class="form-group">
|
||||
<label for="firstName">First Name</label>
|
||||
<input type="text" class="form-control" id="firstName">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="lastName">Last Name</label>
|
||||
<input type="text" class="form-control" id="lastName">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="profileImg">Profile Photo</label>
|
||||
<input type="file" class="form-control-file" id="profileImg">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="occupation">Occupation</label>
|
||||
<input type="text" class="form-control" id="occupation">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="company">Company</label>
|
||||
<input type="text" class="form-control" id="company">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="form-group">
|
||||
<label for="birthDate">Birth Date</label>
|
||||
<input type="text" class="form-control" id="birthDate">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="address">Address</label>
|
||||
<input type="text" class="form-control" id="address">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="city">City</label>
|
||||
<input type="text" class="form-control" id="city">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="contactNumber">Contact Number</label>
|
||||
<input type="text" class="form-control" id="contactNumber">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="email">Email</label>
|
||||
<input type="text" class="form-control" id="email">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-8 col-md-offset-2">
|
||||
<div class="form-group form-group-action">
|
||||
<button type="submit" class="btn btn-primary" data-toggle="modal" data-target="#addOwnerSuccessModal" data-dismiss="modal" aria-label="Close">Add Owner</button>
|
||||
<button class="btn btn-link" class="close" data-dismiss="modal" aria-label="Close">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add Owner Success Modal -->
|
||||
<div class="modal modal-owner fade" id="addOwnerSuccessModal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-8 col-md-offset-2">
|
||||
<h1 class="sub-header">Owner added successfully!</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-8 col-md-offset-2">
|
||||
<div class="alert alert-success" role="alert">
|
||||
Well done! You've successfully added an a new owner.
|
||||
</div>
|
||||
<div class="form-group form-group-action">
|
||||
<a href="owner_details.html" class="btn btn-primary">View owner's details</a>
|
||||
<button class="btn btn-link" data-dismiss="modal" aria-label="Close">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Edit Owner Modal -->
|
||||
<div class="modal modal-owner fade" id="editOwnerModal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-8 col-md-offset-2">
|
||||
<h1 class="sub-header">Edit Owner</h1>
|
||||
<em class="text-muted">Fill up pet owners basic information and contact details</em>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-4 col-md-offset-2">
|
||||
<div class="form-group">
|
||||
<label for="firstName">First Name</label>
|
||||
<input type="text" class="form-control" id="firstName" value="Maria">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="lastName">Last Name</label>
|
||||
<input type="text" class="form-control" id="lastName" value="Rodriguez">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="profileImg">Profile Photo</label>
|
||||
<input type="file" class="form-control-file" id="profileImg">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="occupation">Occupation</label>
|
||||
<input type="text" class="form-control" id="occupation" value="Accountant">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="company">Company</label>
|
||||
<input type="text" class="form-control" id="company" value="Ledger Associates">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="form-group">
|
||||
<label for="birthDate">Birth Date</label>
|
||||
<input type="text" class="form-control" id="birthDate" value="04 Feb 1988">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="address">Address</label>
|
||||
<input type="text" class="form-control" id="address" value="345 Maple St.">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="city">City</label>
|
||||
<input type="text" class="form-control" id="city" value="Madison">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="contactNumber">Contact Number</label>
|
||||
<input type="text" class="form-control" id="contactNumber" value="6085557683">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="email">Email</label>
|
||||
<input type="text" class="form-control" id="email" value="maria.escobito@gmail.com">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-8 col-md-offset-2">
|
||||
<div class="form-group form-group-action">
|
||||
<button type="submit" class="btn btn-primary" data-toggle="modal" data-target="#editOwnerSuccessModal" data-dismiss="modal" aria-label="Close">Update Owner</button>
|
||||
<button class="btn btn-link" class="close" data-dismiss="modal" aria-label="Close">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Edit Owner Success Modal -->
|
||||
<div class="modal modal-owner fade" id="editOwnerSuccessModal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-8 col-md-offset-2">
|
||||
<h1 class="sub-header">Owner updated successfully!</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-8 col-md-offset-2">
|
||||
<div class="alert alert-success" role="alert">
|
||||
Well done! You've successfully updated an owner.
|
||||
</div>
|
||||
<div class="form-group form-group-action">
|
||||
<a href="owner_details.html" class="btn btn-primary">View owner's details</a>
|
||||
<button class="btn btn-link" data-dismiss="modal" aria-label="Close">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add New Pet Modal -->
|
||||
<div class="modal modal-owner fade" id="addPetModal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-4 col-md-offset-4">
|
||||
<h1 class="sub-header">Add a New Pet</h1>
|
||||
<em class="text-muted">Fill up pet basic information</em>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-4 col-md-offset-4">
|
||||
<div class="form-group">
|
||||
<label for="firstName">Owner</label>
|
||||
<input type="text" class="form-control" id="firstName" value="Maria Rodriguez" readonly>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="petName">Pet Name</label>
|
||||
<input type="text" class="form-control" id="petName">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="petProfileImg">Pet Photo</label>
|
||||
<input type="file" class="form-control-file" id="petProfileImg">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="birthDate">Birth Date</label>
|
||||
<input type="text" class="form-control" id="birthDate">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="type">Type</label>
|
||||
<select class="form-control" id="type">
|
||||
<option value="bird">bird</option>
|
||||
<option value="cat">cat</option>
|
||||
<option value="dog">dog</option>
|
||||
<option value="hamster">hamster</option>
|
||||
<option value="lizard">lizard</option>
|
||||
<option value="snake">snake</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group form-group-action">
|
||||
<button type="submit" class="btn btn-primary" data-toggle="modal" data-target="#addPetSuccessModal" data-dismiss="modal" aria-label="Close">Add Pet</button>
|
||||
<button class="btn btn-link" class="close" data-dismiss="modal" aria-label="Close">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add New Pet Success Modal -->
|
||||
<div class="modal modal-owner fade" id="addPetSuccessModal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-8 col-md-offset-2">
|
||||
<h1 class="sub-header">Pet added successfully!</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-8 col-md-offset-2">
|
||||
<div class="alert alert-success" role="alert">
|
||||
Well done! You've successfully added a pet.
|
||||
</div>
|
||||
<div class="form-group form-group-action">
|
||||
<button class="btn btn-primary" data-toggle="modal" data-target="#addPetVisitModal" data-dismiss="modal" aria-label="Close">Add New Visit</button>
|
||||
<button class="btn btn-link" data-dismiss="modal" aria-label="Close">Not Now</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Edit Pet Modal -->
|
||||
<div class="modal modal-owner fade" id="editPetModal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-4 col-md-offset-4">
|
||||
<h1 class="sub-header">Edit Pet</h1>
|
||||
<em class="text-muted">Fill up pet basic information</em>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-4 col-md-offset-4">
|
||||
<div class="form-group">
|
||||
<label for="firstName">Owner</label>
|
||||
<input type="text" class="form-control" id="firstName" value="Maria Rodriguez" readonly>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="petName">Pet Name</label>
|
||||
<input type="text" class="form-control" id="petName" value="Basil">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="petProfileImg">Pet Photo</label>
|
||||
<input type="file" class="form-control-file" id="petProfileImg">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="birthDate">Birth Date</label>
|
||||
<input type="text" class="form-control" id="birthDate" value="08 August 2012">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="type">Type</label>
|
||||
<select class="form-control" id="type">
|
||||
<option value="bird">bird</option>
|
||||
<option value="cat">cat</option>
|
||||
<option value="dog">dog</option>
|
||||
<option value="hamster" selected>hamster</option>
|
||||
<option value="lizard">lizard</option>
|
||||
<option value="snake">snake</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group form-group-action">
|
||||
<button type="submit" class="btn btn-primary" data-toggle="modal" data-target="#editPetSuccessModal" data-dismiss="modal" aria-label="Close">Update Pet</button>
|
||||
<button class="btn btn-link" class="close" data-dismiss="modal" aria-label="Close">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Edit Pet Success Modal -->
|
||||
<div class="modal modal-owner fade" id="editPetSuccessModal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-8 col-md-offset-2">
|
||||
<h1 class="sub-header">Pet update successfully!</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-8 col-md-offset-2">
|
||||
<div class="alert alert-success" role="alert">
|
||||
Well done! You've successfully update a pet.
|
||||
</div>
|
||||
<div class="form-group form-group-action">
|
||||
<a href="owner_details.html" class="btn btn-primary">View owner's pets</a>
|
||||
<button class="btn btn-link" data-dismiss="modal" aria-label="Close">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Add Pet Visit Modal -->
|
||||
<div class="modal modal-owner fade" id="addPetVisitModal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-4 col-md-offset-4">
|
||||
<h1 class="sub-header">New Visit</h1>
|
||||
<em class="text-muted">Fill up pet visit basic information</em>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-4 col-md-offset-4">
|
||||
<div class="form-group">
|
||||
<label for="petName">Pet Name</label>
|
||||
<input type="text" class="form-control" id="petName" value="Basil" readonly>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="visitDate">Visit Date</label>
|
||||
<input type="text" class="form-control" id="visitDate">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="visitDesc">Description</label>
|
||||
<textarea class="form-control" rows="3" id="visitDesc"></textarea>
|
||||
</div>
|
||||
<div class="form-group form-group-action">
|
||||
<button type="submit" class="btn btn-primary" data-toggle="modal" data-target="#addPetVisitSuccessModal" data-dismiss="modal" aria-label="Close">Add Visit</button>
|
||||
<button class="btn btn-link" class="close" data-dismiss="modal" aria-label="Close">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Edit Pet Success Modal -->
|
||||
<div class="modal modal-owner fade" id="addPetVisitSuccessModal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-8 col-md-offset-2">
|
||||
<h1 class="sub-header">Pet visit added successfully!</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-8 col-md-offset-2">
|
||||
<div class="alert alert-success" role="alert">
|
||||
Well done! You've successfully added a pet visit.
|
||||
</div>
|
||||
<div class="form-group form-group-action">
|
||||
<button class="btn btn-primary" data-dismiss="modal" aria-label="Close">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search Result Modal -->
|
||||
<div class="modal modal-search fade" id="searchModal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
|
||||
<div class="container">
|
||||
<h1 class="sub-header">Search PetClinic</h1>
|
||||
<em class="text-muted">Start typing to search for owner, pets, or veterinarians...</em>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="container">
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<input type="search" class="form-control">
|
||||
<button class="btn btn-default" type="button">
|
||||
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- ### TODO:
|
||||
Note by AA: I'm just showing the results for reference purpose
|
||||
This should be hidden by default and only be shown if there's result -->
|
||||
<div class="modal-seach-result">
|
||||
<h2 class="form-group-heading">Result of your search query</h2>
|
||||
<div class="row thumbnail-wrapper">
|
||||
<div class="col-md-3" ng-repeat="x in [1,2,3,4,5,6,7]">
|
||||
<div class="thumbnail">
|
||||
<a href="#"><img src="images/owner-default.png" class="img-circle" alt="Generic placeholder image"></a>
|
||||
<div class="caption">
|
||||
<h3 class="caption-heading"><a href="#">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>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /row -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- build:js(.) scripts/vendor.js -->
|
||||
<!-- bower:js -->
|
||||
<script src="bower_components/jquery/dist/jquery.js"></script>
|
||||
|
|
|
|||
|
|
@ -741,6 +741,15 @@ label {
|
|||
}
|
||||
}
|
||||
|
||||
.form-control-file {
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
.form-control[disabled],
|
||||
.form-control[readonly] {
|
||||
background-color: $text-color-inverse;
|
||||
}
|
||||
|
||||
.form-group-action {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
2
src/main/webapp/static/dist/styles/main.css
vendored
2
src/main/webapp/static/dist/styles/main.css
vendored
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue