mirror of
https://github.com/spring-projects/spring-petclinic.git
synced 2025-07-17 21:35:50 +00:00
AA: Add "Add Owner" modal and related style; Refactor Searc modal markup
This commit is contained in:
Andrew Abogado
parent
084f22ef65
commit
d5b99449f0
6 changed files with 238 additions and 124 deletions
76
src/main/webapp/components/_partials/_modal_add_owner.html
Normal file
76
src/main/webapp/components/_partials/_modal_add_owner.html
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
<!-- 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-12 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-8 col-md-offset-2">
|
||||
<h2 class="form-group-heading">Basic Information</h2>
|
||||
</div>
|
||||
<div class="col-md-5 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="birthDate">Birth Date</label>
|
||||
<input type="text" class="form-control" id="birthDate">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="form-group">
|
||||
<label for="exampleInputFile">Profile Photo</label>
|
||||
<div class="thumbnail">
|
||||
<img src="images/owner-default.png" class="img-circle" alt="Generic placeholder image">
|
||||
<div class="caption">
|
||||
<input type="file" id="exampleInputFile">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-8 col-md-offset-2">
|
||||
<h2 class="form-group-heading">Contact Details</h2>
|
||||
</div>
|
||||
<div class="col-md-5 col-md-offset-2">
|
||||
<div class="form-group">
|
||||
<label for="address">Address</label>
|
||||
<textarea class="form-control" rows="3" id="address"></textarea>
|
||||
</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 form-group-action">
|
||||
<button type="submit" class="btn btn-primary btn-md">Add Owner</button>
|
||||
<button class="btn btn-link btn-md">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -5,43 +5,41 @@
|
|||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
|
||||
<div class="container">
|
||||
<h4>Search PetClinic</h4>
|
||||
<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="input-group">
|
||||
<input type="text" class="form-control">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-default" type="button">
|
||||
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
|
||||
</button>
|
||||
</span>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ### 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 container">
|
||||
<h5>Result of your search query</h5>
|
||||
<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>
|
||||
|
||||
<!-- ### 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>
|
||||
<!-- /row -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
|
||||
<ul data-ng-if="getSession() != null" class="nav navbar-profile">
|
||||
<li data-ng-if="getSession() != null"><a href="#" data-toggle="modal" data-target="#searchModal"><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 data-ng-if="getSession() != null"><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">
|
||||
|
|
@ -49,4 +49,7 @@
|
|||
</nav>
|
||||
|
||||
<!-- Search modal -->
|
||||
<data-ng-include src="'components/_partials/_modal_search.html'"></data-ng-include>
|
||||
<data-ng-include src="'components/_partials/_modal_search.html'"></data-ng-include>
|
||||
|
||||
<!-- Add Owner modal -->
|
||||
<data-ng-include src="'components/_partials/_modal_add_owner.html'"></data-ng-include>
|
||||
|
|
@ -2,9 +2,9 @@ $icon-font-path: "fonts/";
|
|||
$brand-primary: #6cb947;
|
||||
$text-color: #747c83;
|
||||
$text-color-inverse: #fff;
|
||||
$headings-color: #555f64;
|
||||
$headings-color: #495256;
|
||||
$sections-bg: #f0f2f5;
|
||||
$sections-border: #DCDFE2;
|
||||
$sections-border: #EAEBED;
|
||||
$jumbotron-bg: #42494d;
|
||||
$navbar-default-bg: #2d4f61;
|
||||
$navbar-default-border: #2d4f61;
|
||||
|
|
@ -14,6 +14,7 @@ $navbar-default-link-active-color: #e6f2f5;
|
|||
$thumbnail-border: #e6e9ed;
|
||||
$btn-default-color: #495256;
|
||||
$btn-default-border: #D4D5D7;
|
||||
$input-bg: #D9DCDF;
|
||||
|
||||
%font-smoothing {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
|
@ -241,14 +242,6 @@ input::-moz-focus-inner {
|
|||
.thumbnail {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
hr {
|
||||
border-bottom-color: darken($sections-border,4%);
|
||||
}
|
||||
}
|
||||
|
||||
.sections+.sections {
|
||||
border-bottom-color: darken($sections-border,4%);
|
||||
}
|
||||
|
||||
.sections-narrow {
|
||||
|
|
@ -277,6 +270,12 @@ input::-moz-focus-inner {
|
|||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.hr-lg {
|
||||
border-top-color: darken($sections-border,4%);
|
||||
margin-bottom: 50px;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
height: 60px;
|
||||
}
|
||||
|
|
@ -588,6 +587,26 @@ input::-moz-focus-inner {
|
|||
}
|
||||
}
|
||||
|
||||
.btn-link {
|
||||
&:focus,
|
||||
&:active {
|
||||
border-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.form-group {
|
||||
.btn-link {
|
||||
color: $text-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-md {
|
||||
@extend .btn-lg;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.btn-lg {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
|
@ -616,12 +635,11 @@ input::-moz-focus-inner {
|
|||
}
|
||||
|
||||
.caption-heading {
|
||||
color: darken($headings-color,5%);
|
||||
font-size: 18px;
|
||||
font-size: 16px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
a {
|
||||
color: darken($headings-color,5%);
|
||||
color: $headings-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -694,95 +712,114 @@ input::-moz-focus-inner {
|
|||
width: 30px;
|
||||
}
|
||||
|
||||
/* Modals - Search */
|
||||
.modal-search {
|
||||
.modal-dialog {
|
||||
border: 0;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
/* Forms */
|
||||
label {
|
||||
color: $headings-color;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
border-radius: 3px;
|
||||
box-shadow: none;
|
||||
border: 0;
|
||||
color: $gray-dark;
|
||||
font-weight: 600;
|
||||
transition: background-color ease-in-out .15s;
|
||||
|
||||
.modal-content {
|
||||
background-color: transparent;
|
||||
height: 100%;
|
||||
&:active,
|
||||
&:focus {
|
||||
background-color: darken($input-bg,5%);
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
border: 0;
|
||||
padding: 50px 0 20px 0;
|
||||
|
||||
.close {
|
||||
font-size: 34px;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-bottom: 5px;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 0 0 40px;
|
||||
|
||||
form {
|
||||
background-color: $gray-lighter;
|
||||
border-radius: 3px;
|
||||
box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
.form-control {
|
||||
background-color: transparent;
|
||||
border-radius: 0;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
color: $gray-dark;
|
||||
height: 60px;
|
||||
padding: 10px 15px;
|
||||
font-size: 32px;
|
||||
line-height: 60px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.btn-default {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
padding: 17px;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.glyphicon-search {
|
||||
color: $gray-light;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-seach-result {
|
||||
h5 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-group-action {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-group-heading {
|
||||
@extend .h4;
|
||||
margin-bottom: 20px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
/* Modals */
|
||||
.modal-dialog {
|
||||
border: 0;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: transparent;
|
||||
height: 100%;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
border: 0;
|
||||
padding: 50px 0 20px 0;
|
||||
|
||||
.close {
|
||||
font-size: 34px;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
.sub-header {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.modal-backdrop {
|
||||
background-color: $text-color-inverse;
|
||||
background-color: $sections-bg;
|
||||
|
||||
&.in {
|
||||
opacity: .97;
|
||||
opacity: .98;
|
||||
}
|
||||
}
|
||||
|
||||
/* Modal Search */
|
||||
.modal-search {
|
||||
.form-control {
|
||||
border-bottom-right-radius: 3px;
|
||||
border-top-right-radius: 3px;
|
||||
height: 60px;
|
||||
padding: 10px 15px;
|
||||
font-size: 32px;
|
||||
line-height: 60px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.btn {
|
||||
background: 0 0;
|
||||
border: 0;
|
||||
padding: 17px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.glyphicon-search {
|
||||
color: $gray-light;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
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
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue