From c2da25dd5cfaf05e2654d030825845362523c4fb Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Fri, 24 Nov 2017 12:41:31 -0500
Subject: [PATCH] Cleaning up the 404 page (#5363)

---
 .../stylesheets/common/base/not-found.scss    | 50 +++++++++++++++++++
 app/assets/stylesheets/desktop/discourse.scss | 30 -----------
 app/assets/stylesheets/mobile/discourse.scss  | 28 -----------
 app/views/exceptions/not_found.html.erb       |  8 ++-
 4 files changed, 53 insertions(+), 63 deletions(-)
 create mode 100644 app/assets/stylesheets/common/base/not-found.scss

diff --git a/app/assets/stylesheets/common/base/not-found.scss b/app/assets/stylesheets/common/base/not-found.scss
new file mode 100644
index 00000000000..aa9165f29e1
--- /dev/null
+++ b/app/assets/stylesheets/common/base/not-found.scss
@@ -0,0 +1,50 @@
+// Page not found styles 
+
+h1.page-not-found {
+  font-size: 2.25em;
+  line-height: 1.25;
+}
+
+.page-not-found {
+  margin: 0 0 40px 0;
+  &-search {
+    margin-top: 20px;
+  }
+}
+
+.page-not-found-topics {
+  display: flex;
+  @media screen and (max-width: 600px) {
+    flex-wrap: wrap;
+  }
+}
+
+.popular-topics, .recent-topics {
+  box-sizing: border-box;
+  width: 50%;
+  max-width: 400px;
+  margin-bottom: 40px;  
+  padding-right: 20px;
+  @media screen and (max-width: 600px) {
+    width: 100%;
+  }
+  h2 {
+    margin-bottom: 10px;    
+  }
+}
+
+.not-found-topic {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  margin-bottom: 15px;
+  @media screen and (max-width: 600px) {
+    &:nth-of-type(n+6) {
+      display: none;
+    }
+  }
+  .badge-wrapper {
+    flex-basis: 100%;
+  }
+}
+
diff --git a/app/assets/stylesheets/desktop/discourse.scss b/app/assets/stylesheets/desktop/discourse.scss
index c187528f84b..65326986595 100644
--- a/app/assets/stylesheets/desktop/discourse.scss
+++ b/app/assets/stylesheets/desktop/discourse.scss
@@ -64,36 +64,6 @@ pre {
   font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace;
 }
 
-/* page not found styles */
-h1.page-not-found {
-  line-height: 30px;
-}
-
-.page-not-found {
-  margin: 20px 0 40px 0;
-
-  &-search {
-    margin-top: 20px;
-  }
-
-  &-topics .span8 {
-    line-height: 1.5em;
-    margin-right: 20px;
-  }
-}
-
-.popular-topics-title,
-.recent-topics-title {
-  margin-bottom: 10px;
-}
-
-.not-found-topic {
-  > a {
-    margin-right: 10px;
-    line-height: 2;
-  }
-}
-
 // this removes the unwanted top margin on a paragraph under a heading
 h1,
 h2,
diff --git a/app/assets/stylesheets/mobile/discourse.scss b/app/assets/stylesheets/mobile/discourse.scss
index 2acd1d8412d..110663e05e1 100644
--- a/app/assets/stylesheets/mobile/discourse.scss
+++ b/app/assets/stylesheets/mobile/discourse.scss
@@ -26,23 +26,6 @@ blockquote {
 
 }
 
-h1.page-not-found {
-  line-height: 24px;
-  margin: 5px 0 -5px 0;
-}
-
-h2 {
-  &.popular-topics-title {
-    margin-bottom: 6px;
-    font-size: 1.2em;
-  }
-
-  &.recent-topics-title {
-    margin-bottom: 6px;
-    font-size: 1.2em;
-  }
-}
-
 // Common classes
 .wrap {
   padding: 0 10px;
@@ -146,17 +129,6 @@ h2 {
   }
 }
 
-/* page not found styles */
-.page-not-found {
-  &-topics a.badge-wrapper {
-    margin-left: 8px;
-  }
-
-  &-search h2 {
-    font-size: 1.2em;
-  }
-}
-
 .form-vertical {
   .control-group {
     margin-bottom: 12px;
diff --git a/app/views/exceptions/not_found.html.erb b/app/views/exceptions/not_found.html.erb
index 4d61d9d7bc3..899c231514d 100644
--- a/app/views/exceptions/not_found.html.erb
+++ b/app/views/exceptions/not_found.html.erb
@@ -4,24 +4,22 @@
 
 <% unless SiteSetting.login_required? && current_user.nil? %>
   <div class="row page-not-found-topics">
-    <div class="span8 popular-topics">
+    <div class="popular-topics">
       <h2 class="popular-topics-title"><%= t 'page_not_found.popular_topics' %></h2>
       <% @top_viewed.each do |t| %>
         <div class='not-found-topic'>
           <%= link_to t.title, t.relative_url %><%= category_badge(t.category) %>
         </div>
       <% end %>
-      <br/>
       <a href="<%= path "/top" %>" class="btn"><%= t 'page_not_found.see_more' %>&hellip;</a>
     </div>
-    <div class="span8 recent-topics">
+    <div class="recent-topics">
       <h2 class="recent-topics-title"><%= t 'page_not_found.recent_topics' %></h2>
       <% @recent.each do |t| %>
         <div class='not-found-topic'>
           <%= link_to t.title, t.relative_url %><%= category_badge(t.category) %>
         </div>
       <% end %>
-      <br/>
       <a href="<%= path "/latest" %>" class="btn"><%= t 'page_not_found.see_more' %>&hellip;</a>
     </div>
   </div>
@@ -31,7 +29,7 @@
   <% local_domain = "#{request.protocol}#{request.host_with_port}" %>
 
   <div class="row">
-    <div class="span10 page-not-found-search">
+    <div class="page-not-found-search">
       <h2><%= t 'page_not_found.search_title' %></h2>
       <p>
         <form action='//google.com/search' id='google-search'>