Merge pull request #182 from gskema/dev

[*] FO: Refactor 404 page

themes/community-theme-16/404.tpl

@@ -1,21 +1,18 @@
-<div class="pagenotfound">
-  <h1>{l s='This page is not available'}</h1>
-
-  <p>
-    {l s='We\'re sorry, but the Web address you\'ve entered is no longer available.'}
-  </p>
-
-  <h3>{l s='To find a product, please type its name in the field below.'}</h3>
-  <form action="{$link->getPageLink('search')|escape:'html':'UTF-8'}" method="post" class="std">
-    <fieldset>
-      <div>
-        <label for="search_query">{l s='Search our product catalog:'}</label>
+<div class="pagenotfound jumbotron text-center">
+  <h2>{l s='This page is not available'}</h2>
+  <p>{l s='We\'re sorry, but the Web address you\'ve entered is no longer available.'}</p>
+  <p>{l s='To find a product, please type its name in the field below.'}</p>
+  <form action="{$link->getPageLink('search')|escape:'html':'UTF-8'}" method="post">
+    <div>
+      <label for="search_query">{l s='Search our product catalog:'}</label>
+      <div class="input-group">
         <input id="search_query" name="search_query" type="text" class="form-control" />
-        <button type="submit" name="Submit" value="OK" class="btn btn-primary"><span>{l s='Ok'}</span></button>
+        <span class="input-group-btn">
+          <button type="submit" name="Submit" value="OK" class="btn btn-primary"><i class="icon icon-search"></i></button>
+        </span>
       </div>
-    </fieldset>
+    </div>
   </form>
-
 </div>
 
 <nav>

themes/community-theme-16/sass/partials/pages/_404.scss

@@ -1,41 +1,6 @@
-//PAGE 404
-#pagenotfound {
-  .pagenotfound {
-    margin: 0 auto;
-    text-align: center;
-    .img-404 {
-      padding: 8px 0 27px 0;
-      img {
-        max-width: 100%;
-      }
-    }
-    h1 {
-      font-weight: 600;
-      font-size: 28px;
-      line-height: 34px;
-      text-transform: uppercase;
-      margin-bottom: 7px;
-    }
-    p {
-      font-weight: 600;
-      font-size: 16px;
-      line-height: 20px;
-      color: #555454;
-      text-transform: uppercase;
-      border-bottom: 1px solid $ps-border-color;
-      padding-bottom: 19px;
-      margin-bottom: 20px;
-    }
-    h3 {
-      font-weight: bold;
-      font-size: 13px;
-      line-height: normal;
-      margin-bottom: 18px;
-    }
-    .form-control {
-      max-width: 293px;
-      display: inline-block;
-      margin-right: 5px;
-    }
+.pagenotfound {
+  h2 {
+    font-size: 3.5em;
+    margin: 0 0 1em;
   }
 }

themes/community-theme-16/sass/vendor/_bootstrap.scss

@@ -10,7 +10,7 @@
 
 // Reset and dependencies
 @import "bootstrap/bootstrap/normalize";
-//@import "bootstrap/bootstrap/print";
+@import "bootstrap/bootstrap/print";
 //@import "bootstrap/bootstrap/glyphicons";
 
 // Core CSS
@@ -34,7 +34,7 @@
 @import "bootstrap/bootstrap/pager";
 @import "bootstrap/bootstrap/labels";
 @import "bootstrap/bootstrap/badges";
-//@import "bootstrap/bootstrap/jumbotron";
+@import "bootstrap/bootstrap/jumbotron";
 @import "bootstrap/bootstrap/thumbnails";
 @import "bootstrap/bootstrap/alerts";
 @import "bootstrap/bootstrap/progress-bars";
@@ -46,10 +46,10 @@
 @import "bootstrap/bootstrap/close";
 
 // Components w/ JavaScript
-//@import "bootstrap/bootstrap/modals";
-//@import "bootstrap/bootstrap/tooltip";
+@import "bootstrap/bootstrap/modals";
+@import "bootstrap/bootstrap/tooltip";
 @import "bootstrap/bootstrap/popovers";
-//@import "bootstrap/bootstrap/carousel";
+// @import "bootstrap/bootstrap/carousel";
 
 // Utility classes
 @import "bootstrap/bootstrap/utilities";