Merge pull request #160 from erqan/wide-screen

wide screen adaptation

css/style.css

@@ -126,6 +126,10 @@ button.disabled:hover
     background: #45474d;
     z-index: 2;
 }
+.userMenu.w1200 {
+    width: 1200px;
+    margin-left: -600px;
+}
 .userMenu:after
 {
     content: "";
@@ -273,11 +277,20 @@ button.disabled:hover
     z-index: 1;
     min-height: 100%;
 }
-.dashboard
-{
+.wrapper.w1200 {
+    width: 1200px;
+    padding: 55px 7px 15px 7px;
+}
+.dashboard.left {
+    width: 320px;
+    position: fixed;
+    top: 55px;
+}
+.dashboard.right {
     width: 320px;
     position: fixed;
     top: 55px;
+    margin-left: 864px;
 }
 .module
 {
@@ -778,6 +791,10 @@ ol.toptrends-list {
     border: solid 1px rgba( 69, 71, 77, .05 );
     padding: 10px;
 }
+.w1200 .postboard {
+    margin-left: 327px;
+    width: 530px;
+}
 .postboard h2
 {
     font-weight: bold;

home.html

@@ -107,7 +107,7 @@
   <div class="wrapper">
 
   <!-- LADO ESQUERDO DE MÓDULOS INIT --> 
-    <div class="dashboard">
+    <div class="dashboard left">
       
       <!-- PROFILE MODULE INIT -->
       <div class="module mini-profile">
@@ -179,6 +179,7 @@
     </div>
   <!-- ÁREA DE POSTS END -->
 
+      <div class="dashboard right"></div>
   </div>
 
   <!-- TEMPLATES INIT -->

js/interface_common.js

@@ -1287,6 +1287,25 @@ function mensAutocomplete() {
 ])
 }
 
+function replaceDashboards() {
+    if ($(window).width() >= 1200 && !$('.wrapper').hasClass('w1200')) {
+        $('.wrapper').addClass('w1200');
+        $('.userMenu').addClass('w1200');
+        var wf = $('.module.who-to-follow');
+        wf.remove();
+        wf.appendTo($('.dashboard.right'));
+    } else if ($(window).width() < 1200 && $('.wrapper').hasClass('w1200')) {
+        $('.wrapper').removeClass('w1200');
+        $('.userMenu').removeClass('w1200');
+        var wf = $('.module.who-to-follow');
+        wf.remove();
+        $('.module.mini-profile').after(wf);
+    }
+
+    $( ".who-to-follow .refresh-users" ).bind( "click", refreshWhoToFollow );
+    $( ".who-to-follow .view-all-users" ).bind( "click", openWhoToFollowModal );
+}
+
 function initInterfaceCommon() {
     $( "body" ).on( "click", function(event) { 
         if($(event.target).hasClass('cancel')) closeModal($(this));
@@ -1335,8 +1354,7 @@ function initInterfaceCommon() {
     $( ".open-following-modal").bind( "click", openFollowingModal );
     $( ".userMenu-connections a").bind( "click", openMentionsModal );
 
-    $( ".who-to-follow .refresh-users" ).bind( "click", refreshWhoToFollow );
-    $( ".who-to-follow .view-all-users" ).bind( "click", openWhoToFollowModal );
+    replaceDashboards();
 
     $('.tox-ctc').on('click', function(){
         window.prompt(polyglot.t('copy_to_clipboard'), $(this).attr('data'))

js/interface_home.js

@@ -132,7 +132,7 @@ var InterfaceFunctions = function()
 //***********************************************
 var interfaceFunctions = new InterfaceFunctions;
 $( document ).ready( interfaceFunctions.init );
-
+$( window ).resize(replaceDashboards);
 
 //função no window que fixa o header das postagens
 function fixDiv()

theme_calm/css/style.css

@@ -137,6 +137,10 @@ button.disabled:hover
     background: #43464d;
     z-index: 2;
 }
+.userMenu.w1200 {
+    width: 1200px;
+    margin-left: -600px;
+}
 .userMenu:after{
     position: absolute;
     content: '';
@@ -387,11 +391,20 @@ input.userMenu-search-field:focus::-ms-input-placeholder {
     z-index: 1;
     min-height: 100%;
 }
-.dashboard
-{
+.wrapper.w1200 {
+    width: 1200px;
+    padding: 55px 7px 15px 7px;
+}
+.dashboard.left {
+    width: 320px;
+    position: fixed;
+    top: 55px;
+}
+.dashboard.right {
     width: 320px;
     position: fixed;
     top: 55px;
+    margin-left: 864px;
 }
 .module
 {
@@ -402,6 +415,10 @@ input.userMenu-search-field:focus::-ms-input-placeholder {
 .dashboard .module {
     border-radius: 6px;
 }
+.options .module {
+    margin: 5px;
+    padding: 5px;
+}
 .messages-qtd
 {
     position: absolute;
@@ -941,6 +958,10 @@ textarea.splited-post {
     padding: 10px;
     border-radius: 6px;
 }
+.w1200 .postboard {
+    margin-left: 327px;
+    width: 530px;
+}
 .postboard h2 {
     font: 18px/40px 'Open Sans Condensed', sans-serif;
     color: rgba( 255, 255, 255, 1 );
@@ -2137,6 +2158,17 @@ textarea.splited-post {
     margin-top: 10px;
     font-size: 12px;
 }
+.suboptions {
+    margin: 5px 30px;
+    border: double 2px rgba( 69, 71, 77, .1 );
+    height: 0px;
+    overflow: hidden;
+    transition: height 1s linear;
+    -webkit-transition: height 1s linear;
+    -moz-transition: height 1s linear;
+    -o-transition: height 1s linear;
+    -ms-transition: height 1s linear;
+}
 /* Following page */
 .following ol.following-list > li{
     display: inline-block;