Merge pull request #3618 from scossar/add-wrapper-class

FIX: padding and alignment issues

app/assets/javascripts/discourse/templates/application.hbs

@@ -1,6 +1,6 @@
 {{render "header"}}
 
-<div id='main-outlet'>
+<div id='main-outlet' class='wrap'>
   {{outlet}}
   {{render "user-card"}}
 </div>

app/assets/javascripts/discourse/templates/header.hbs

@@ -1,4 +1,4 @@
-<div class='container'>
+<div class='wrap'>
   <div class='contents clearfix'>
 
     {{home-logo minimized=showExtraInfo}}

app/assets/stylesheets/common/base/discourse.scss

@@ -4,8 +4,13 @@ img.avatar {
 
 .container {
   @extend .clearfix;
+}
+
+.wrap {
+  @extend .clearfix;
   margin-right: auto;
   margin-left: auto;
+  padding: 0 8px;
   .contents {
     position: relative;
   }

app/assets/stylesheets/desktop/discourse.scss

@@ -6,7 +6,7 @@
   body {
     min-width: $medium-width;
   }
-  .container,
+  .wrap,
   .full-width {
     width: $medium-width;
   }
@@ -17,7 +17,7 @@ and (max-width : 570px) {
   body {
     min-width: 0;
   }
-  .container,
+  .wrap,
   .full-width {
     min-width: 0;
   }

app/assets/stylesheets/desktop/topic-list.scss

@@ -298,15 +298,6 @@ button.dismiss-read {
 @media all
 and (max-width : 850px) {
 
-  // add some left padding to topics otherwise everything is 100% flush
-  // with left edge in portrait tablet, which looks awful
-  #topic-title {
-    padding-left: 10px;
-  }
-  .container.posts {
-    padding-left: 10px;
-  }
-
   .nav-pills {
     > li > a {
       font-size: 1em;
@@ -315,7 +306,6 @@ and (max-width : 850px) {
   }
 
   .list-controls {
-    padding: 0 5px;
 
     .btn {
         font-size: 1em

app/assets/stylesheets/desktop/topic-post.scss

@@ -1,8 +1,5 @@
-.container {
-  @extend .clearfix;
+.wrap {
   max-width: $large-width;
-  margin-right: auto;
-  margin-left: auto;
 }
 
 .full-width {