css layout change only in content block

diff --git a/app/assets/stylesheets/small.scss b/app/assets/stylesheets/small.scss
index 623d0f6b44c11d136b19a7d8e8b60d85cf7d38d3..83b112ce7a0241367564379cc3214a68ddd412ee 100644 (file)
--- a/app/assets/stylesheets/small.scss
+++ b/app/assets/stylesheets/small.scss
@@ -1,187 +1,186 @@
 @import "parameters";
 
 /* Styles specific to a small screen, such as iPhone, Android, etc... */
 @import "parameters";
 
 /* Styles specific to a small screen, such as iPhone, Android, etc... */

-@media (max-width: 640px) {
-  body {

 
 

-    input[type="submit"],
-    input[type="text"] {
-      -webkit-appearance: none;
-    }
+body.small {

 
 

-    .column-1 {
-      width: 100%;
-    }
-
-    #menu-icon {
-      display: inline-block !important;
-    }
+  input[type="submit"],
+  input[type="text"] {
+    -webkit-appearance: none;
+  }

 
 

-    nav.primary,
-    nav.secondary {
-      float: none !important;
-      position: relative;
-      display: block;
-      clear: both;
-    }
+  .column-1 {
+    width: 100%;
+  }

 
 

-    header {
-      height: auto;
-      min-height: $headerHeight;
-      background: #fff;
+  #menu-icon {
+    display: inline-block !important;
+  }

 
 

-      h1 {
-        padding-bottom: 15px;
-      }
+  nav.primary,
+  nav.secondary {
+    float: none !important;
+    position: relative;
+    display: block;
+    clear: both;
+  }

 
 

-      &.closed nav {
-        display: none;
-      }
+  header {
+    height: auto;
+    min-height: $headerHeight;
+    background: #fff;

 
 

-      .search_forms {
-        display: block;
-      }
+    h1 {
+      padding-bottom: 15px;

     }
 
     }
 

-    #sidebar .search_forms,
-    #edit_tab,
-    #export_tab {
+    &.closed nav {

       display: none;
     }
 
       display: none;
     }
 

-    nav.primary {
-      padding: 0;
+    .search_forms {
+      display: block;
+    }
+  }

 
 

-      ul, li {
-        border: none;
-        border-radius: 0;
-        width: 100%;
-      }
+  #sidebar .search_forms,
+  #edit_tab,
+  #export_tab {
+    display: none;
+  }

 
 

-      ul {
-        border-top: 1px solid #eee;
+  nav.primary {
+    padding: 0;

 
 

-        li {
-          border-bottom: 1px solid #eee;
-          border-right: none;
+    ul, li {
+      border: none;
+      border-radius: 0;
+      width: 100%;
+    }

 
 

-          > a {
-            border-radius: 0;
-            width: 100%;
-            text-align: center;
-            font-size: 15px;
-          }
+    ul {
+      border-top: 1px solid #eee;
+      li {
+        border-bottom: 1px solid #eee;
+        border-right: none;
+        > a {
+          border-radius: 0;
+          width: 100%;
+          text-align: center;
+          font-size: 15px;

         }
       }
         }
       }

-
-      .btn-group {
-        width: 100%;
-        padding: 10px;
-      }

     }
 
     }
 

-    nav.secondary {
-      .user-menu {
-        width: 100%;
-      }
+    .btn-group {
+      width: 100%;
+      padding: 10px;

     }
     }

+  }

 
 

-    #compact-secondary-nav {
-      display: none;
+  nav.secondary {
+    .user-menu {
+      width: 100%;

     }
     }

+  }

 
 

-    .compact-hide {
-      display: inline-block;
-    }
+  #compact-secondary-nav {
+    display: none;
+  }

 
 

-    &.map-layout {
-      #sidebar, #map {
-        position: relative;
-        overflow-x: hidden;
-        width: 100%;
-        height: 50%;
-      }
+  .compact-hide {
+    display: inline-block;
+  }
+  

 
 

-      .overlay-sidebar {
-        #sidebar {
-          position: absolute;
-          width: 300px;
-          height: auto;
-          overflow: hidden;
-        }
+  .overlay-sidebar #sidebar .welcome.visible {
+    display: none;
+  }

 
 

-        #map {
-          height: 100%;
-        }
-      }
+  .overlay-sidebar #sidebar #banner {
+    display: none;
+  }

 
 

-      #map-ui {
-        z-index: 9999;
-        width: 100%;
-        overflow-y: scroll;
-      }
-    }
+  .leaflet-top.leaflet-right {
+    top: 10px !important;
+  }

 
 

-    .overlay-sidebar #sidebar .welcome.visible {
-      display: none;
-    }
+  .content_map {
+    width: 100%;
+    border: none;
+    float: none;
+    height: 200px;
+    max-height: none;
+    min-height: auto;
+  }

 
 

-    .overlay-sidebar #sidebar #banner {
-      display: none;
-    }
+  /* Rules for the login form */

 
 

-    .leaflet-top.leaflet-right {
-      top: 10px !important;
-    }
+  #login_login input#user_email {
+    width: 100%;
+    max-width: 18em;
+  }

 
 

-    .content_map {
-      width: 100%;
-      border: none;
-      float: none;
-      height: 200px;
-      max-height: none;
-      min-height: auto;
-    }
+  #login_login input#user_password {
+    width: 100%;
+    max-width: 18em;
+  }

 
 

-    /* Rules for the login form */
+  #login_login input#openid_url {
+    width: 100%;
+    max-width: 18em;
+  }

 
 

-    #login_login input#user_email {
-      width: 100%;
-      max-width: 18em;
-    }
+  #login_openid_buttons td {
+    padding: 2px;
+  }

 
 

-    #login_login input#user_password {
-      width: 100%;
-      max-width: 18em;
-    }
+  /* Rules for the user view */

 
 

-    #login_login input#openid_url {
-      width: 100%;
-      max-width: 18em;
-    }
+  .user_map {
+    width: 100% !important;
+    height: 300px !important;
+  }

 
 

-    #login_openid_buttons td {
-      padding: 2px;
-    }
+  #userinformation .deemphasize {
+    position: relative;
+    right: auto; left: auto;
+    margin-top: 10px;
+    top: auto;
+  }

 
 

-    /* Rules for the user view */
+  &.site-about #content .attr h1 {
+    font-size: 28px;
+  }

 
 

-    .user_map {
-      width: 100% !important;
-      height: 300px !important;
-    }
+}

 
 

-    #userinformation .deemphasize {
+@media (max-width: 767.98px) {
+  body.map-layout {
+    #sidebar, #map {

       position: relative;
       position: relative;

-      right: auto;
-      left: auto;
-      margin-top: 10px;
-      top: auto;
+      overflow-x: hidden;
+      width: 100%;
+      height: 50%;

     }
 
     }
 

-    &.site-about #content .attr h1 {
-      font-size: 28px;
+    .overlay-sidebar {
+      #sidebar {
+        position: absolute;
+        width: 300px;
+        height: auto;
+        overflow: hidden;
+      }
+
+      #map {
+        height: 100%;
+      }

     }
 
     }
 

+    #map-ui {
+      z-index: 9999;
+      width: 100%;
+      overflow-y: scroll;
+    }

   }
 }
   }
 }