AA: Add search modal/lightbox with a simple form and sample results view

src/main/webapp/components/_partials/_modal_search.html

@@ -0,0 +1,47 @@
+<!-- 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">
+        <h4>Search PetClinic</h4>
+        <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>
+        </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">
+            <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>
+        </div>
+      </div>
+      <!-- /row -->
+    </div>
+  </div>
+</div>

src/main/webapp/components/header.html

@@ -22,7 +22,7 @@
     </div><!-- /.navbar-collapse -->
 
     <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="#" 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 class="dropdown">
         <a href="#" class="dropdown-toggle img-profile" data-toggle="dropdown" role="button" aria-expanded="false">
@@ -47,3 +47,6 @@
      </ul>
   </div><!-- /.container-fluid -->
 </nav>
+
+<!-- Search modal -->
+<data-ng-include src="'components/_partials/_modal_search.html'"></data-ng-include>

src/main/webapp/static/app/styles/main.scss

@@ -35,6 +35,24 @@ body {
   @extend %font-smoothing;
 }
 
+/* Remove the dotted outline */
+a,
+a:hover,
+a:active,
+a:focus,
+button,
+button:hover,
+button:active,
+button:focus,
+object,
+embed {
+  outline: 0;
+}
+
+input::-moz-focus-inner {
+  border: 0;
+}
+
 /* Everything but the jumbotron gets side spacing for mobile first views */
 .header,
 .marketing,
@@ -64,6 +82,18 @@ body {
   padding-bottom: 10px;
 }
 
+/* Custom page footer */
+.footer {
+  font-size: 13px;
+  padding: 30px 0;
+}
+
+.colophon {
+  border-top: 1px solid $sections-border;
+  margin-top: 30px;
+  padding-top: 30px;
+}
+
 .container-narrow > hr {
   margin: 30px 0;
 }
@@ -146,6 +176,13 @@ body {
 
   .form-control {
     height: 54px;
+    border: 1px solid $text-color-inverse;
+    border-radius: 3px;
+    box-shadow: none;
+  }
+  
+  .form-control-group {
+    padding-top: $padding-large-vertical;
   }
 
   .btn-primary {
@@ -459,64 +496,7 @@ body {
   }
 }
 
-/* Show page */
-.show-hero {
-  background-color: $jumbotron-bg;
-  padding-top: 60px;
-  padding-bottom: 60px;
-  font-size: 24px;
-  text-align: left;
-
-  h1 {
-    margin-top: 0;
-  }
-}
-
-.form-control {
-  border: 1px solid $text-color-inverse;
-  border-radius: 3px;
-  box-shadow: none;
-}
-
-.form-control-group {
-  padding-top: $padding-large-vertical;
-}
-
-.btn {
-  border-color: transparent;
-  border-radius: 3px;
-  font-weight: 500;
-  transition: .3s ease-in-out;
-
-  &:hover {
-    border-color: transparent;
-  }
-
-  &:active,
-  &:focus {
-    border-color: rgba($gray-darker, 0.3);
-    outline: none 0;
-    box-shadow: inset 0 0 200px rgba($gray-darker, 0.3);
-  }
-}
-
-.btn-default {
-  border-color: $btn-default-border;
-
-  &:hover {
-    background-color: $btn-default-bg;
-    border-color: darken($btn-default-border,15%);
-    color: darken($btn-default-color,15%);
-  }
-}
-
-.btn-lg {
-  font-weight: 500;
-}
-
-/* Responsive: Portrait tablets and up */
 @media (max-width: 768px) {
-
   .navbar-brand {
     padding-right: 0;
   }
@@ -559,6 +539,51 @@ body {
   }
 }
 
+/* Show page */
+.show-hero {
+  background-color: $jumbotron-bg;
+  padding-top: 60px;
+  padding-bottom: 60px;
+  font-size: 24px;
+  text-align: left;
+
+  h1 {
+    margin-top: 0;
+  }
+}
+
+.btn {
+  border-color: transparent;
+  border-radius: 3px;
+  font-weight: 500;
+  transition: .3s ease-in-out;
+
+  &:hover {
+    border-color: transparent;
+  }
+
+  &:active,
+  &:focus {
+    border-color: rgba($gray-darker, 0.3);
+    outline: none 0;
+    box-shadow: inset 0 0 200px rgba($gray-darker, 0.3);
+  }
+}
+
+.btn-default {
+  border-color: $btn-default-border;
+
+  &:hover {
+    background-color: $btn-default-bg;
+    border-color: darken($btn-default-border,15%);
+    color: darken($btn-default-color,15%);
+  }
+}
+
+.btn-lg {
+  font-weight: 500;
+}
+
 /* Media Object */
 .media-welcome {
   .media-left {
@@ -635,22 +660,85 @@ body {
       margin: 5px 0 0 8px;
     }
   }
-
-
 }
 
 .thumbnail-wrapper {
   margin-bottom: 20px;
 }
 
-/* Custom page footer */
+/* Modals - Search */
-.footer {
+.modal-search {
-  font-size: 13px;
+  .modal-dialog {
-  padding: 30px 0;
+    border: 0;
-}
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+  }
   
-.colophon {
+  .modal-content {
-  border-top: 1px solid $sections-border;
+    height: 100%;
-  margin-top: 30px;
+    box-shadow: none;
-  padding-top: 30px;
+    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 {
+      border: 0;
+      background: transparent;
+      padding: 20;
+    }
+    
+    .glyphicon-search {
+      color: $gray-light;
+      font-size: 20px;
+    }
+  }
+  
+  .modal-seach-result {
+    h5 {
+      margin-bottom: 20px;
+    }
+  }
 }