Merge pull request #1598 from akvo/1596-language-dropdown

[#1596] fix language dropdown on narrow viewports
akvo · Jun 3, 2015 · b2a8aec · b2a8aec
2 parents bb06d7b + 4d4cff3
commit b2a8aec
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 0 deletions.
diff --git a/akvo/rsr/static/styles-src/main.css b/akvo/rsr/static/styles-src/main.css
@@ -417,6 +417,43 @@ nav.navbar-fixed-top {
         color: #ff5500; }
     nav.navbar-fixed-top .navbar-nav.navbar-right li .langDropdown {
       margin-top: 10px; }
+      @media only screen and (max-width: 768px) {
+        nav.navbar-fixed-top .navbar-nav.navbar-right li .langDropdown {
+          padding-left: 15px;
+          padding-right: 15px; } }
+      @media only screen and (max-width: 1024px) and (min-width: 768px) {
+        nav.navbar-fixed-top .navbar-nav.navbar-right li .langDropdown .dropdown-menu {
+          position: initial;
+          float: none; } }
+      @media only screen and (max-width: 768px) {
+        nav.navbar-fixed-top .navbar-nav.navbar-right li .langDropdown .dropdown-menu {
+          background-color: #FFF;
+          border: 1px solid rgba(0, 0, 0, 0.14902);
+          box-shadow: rgba(0, 0, 0, 0.17255) 0px 6px 12px 0px;
+          -webkit-box-shadow: rgba(0, 0, 0, 0.17255) 0px 6px 12px 0px; }
+          nav.navbar-fixed-top .navbar-nav.navbar-right li .langDropdown .dropdown-menu a {
+            color: #00aaff;
+            font-family: 'Montserrat', "Helvetica Neue", Helvetica, Arial, sans-serif;
+            border: thin solid transparent; }
+            nav.navbar-fixed-top .navbar-nav.navbar-right li .langDropdown .dropdown-menu a:hover {
+              color: #ff5500; }
+            nav.navbar-fixed-top .navbar-nav.navbar-right li .langDropdown .dropdown-menu a.active {
+              color: #72742a;
+              font-weight: bold;
+              background: rgba(255, 85, 0, 0.1);
+              -moz-border-radius: 3px;
+              -o-border-radius: 3px;
+              -webkit-border-radius: 3px;
+              border-radius: 3px; }
+              @media only screen and (max-width: 1024px) {
+                nav.navbar-fixed-top .navbar-nav.navbar-right li .langDropdown .dropdown-menu a.active {
+                  background: rgba(255, 85, 0, 0.1); } } }
+
+/*  Allow language dropdown menu to extend the height of the nav container.
+    Otherwise, we get a scrollbar in the nav area on small screens */
+@media only screen and (max-width: 768px) {
+  .navbar .container .navbar-collapse.in {
+    overflow-y: initial; } }
 
 @media only screen and (min-width: 768px) and (max-width: 1024px) {
   .navbar-header {

diff --git a/akvo/rsr/static/styles-src/main.scss b/akvo/rsr/static/styles-src/main.scss
@@ -430,6 +430,54 @@ nav.navbar-fixed-top {
                 }
                 .langDropdown {
                     margin-top: 10px;
+                    @include responsive(small-max-screens) {
+                        padding-left: 15px;
+                        padding-right: 15px;
+                    }
+
+                    .dropdown-menu {
+                        @media only screen and (max-width: $width-middle) and (min-width: $width-small) {
+                            position: initial;
+                            float: none;
+                        }
+                        @include responsive(small-max-screens) {
+                            background-color: #FFF;
+                            border: 1px solid rgba(0, 0, 0, 0.14902);
+                            box-shadow: rgba(0, 0, 0, 0.17255) 0px 6px 12px 0px;
+                            -webkit-box-shadow: rgba(0, 0, 0, 0.17255) 0px 6px 12px 0px;
+                            a {
+                                color: $anchorLink;
+                                font-family: $titleFont;
+                                border: thin solid transparent;
+                                &:hover {
+                                    color: $anchorLinkHover;
+                                }
+                                &.active {
+                                    color: complement($rsrBlue);
+                                    font-weight: bold;
+                                    background: rgba($anchorLinkHover, 0.1);
+                                    @include border-radius(3px);
+                                    @include responsive(tablets) {
+                                        background: rgba($anchorLinkHover, 0.1);
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+/*  Allow language dropdown menu to extend the height of the nav container.
+    Otherwise, we get a scrollbar in the nav area on small screens */
+.navbar {
+    .container {
+        .navbar-collapse {
+            &.in {
+                @include responsive(small-max-screens) {
+                    overflow-y: initial;
                 }
             }
         }