diff --git a/public/_includes/_version-dropdown.jade b/public/_includes/_version-dropdown.jade index ac28a484f5..e77e805f0c 100644 --- a/public/_includes/_version-dropdown.jade +++ b/public/_includes/_version-dropdown.jade @@ -8,11 +8,12 @@ version = current.path[2].replace(/\_+/gm, ".") -mixin tree(directory, urlPrefix, name) +mixin tree(directory, urlPrefix, name, latest) ul - for val, key in directory - if key !== '.git' && key !== '_data' - li #{name} #{key} + for val, semvar in directory + if semvar !== '.git' && semvar !== '_data' + libVersion = (semvar == "latest") ? latest : semvar.replace(/\_+/gm, ".") + li #{name} #{libVersion} @@ -31,11 +32,14 @@ if language == 'dart' -h2.hero-subtitle.text-subhead - button(md-button ng-click="showVersionMenu($event)") #{title} +nav.hero-subtitle.text-subhead.dropdown + button(md-button class="dropdown-button" ng-click="toggleVersionMenu($event)") #{title} + div(class="overlay ng-hide" ng-click="toggleVersionMenu($event)" ng-show="showMenu") - - -nav.dropdown.is-hidden - mixin tree(public.docs.js, "/docs/js", "Javascript") - mixin tree(public.docs.dart, "/docs/dart", "Dart") \ No newline at end of file + + div(class="dropdown-menu ng-hide" ng-show="showMenu") + mixin tree(public.docs.js, "/docs/js", "Javascript", jsLatest) + mixin tree(public.docs.dart, "/docs/dart", "Dart", dartLatest) + ul + li #{name} Angular 1.X + li #{name} AngularDart 1.X diff --git a/public/resources/css/main.scss b/public/resources/css/main.scss index cc09177173..6cd3b37365 100644 --- a/public/resources/css/main.scss +++ b/public/resources/css/main.scss @@ -27,6 +27,7 @@ @import 'module/code'; @import 'module/sticker'; @import 'module/bio-card'; +@import 'module/overlay'; /* diff --git a/public/resources/css/module/_dropdown.scss b/public/resources/css/module/_dropdown.scss index e69de29bb2..f63d7b569b 100644 --- a/public/resources/css/module/_dropdown.scss +++ b/public/resources/css/module/_dropdown.scss @@ -0,0 +1,48 @@ +.dropdown { + position: relative; + z-index: $layer-5; + + .dropdown-button { + background: none; + border: none; + text-transform: none; + font-weight: normal; + line-height: $unit * 4; + padding: 0px $unit; + cursor: pointer; + } + + .dropdown-menu { + background: $snow; + box-shadow: 0px 2px 5px rgba($coal, .3); + position: absolute; + top: 0px; + left: 0px; + z-index: $layer-5; + + ul { + list-style-type: none; + margin: 0px 0px ($unit * 2) 0px; + padding: 0px; + + &:last-child { + margin: 0; + } + } + + li { + margin: 0px; + } + + a { + display: block; + line-height: $unit * 5; + padding: 0px ($unit * 2); + font-size: 14px; + text-decoration: none; + text-align: left; + font-weight: 400; + text-transform: uppercase; + } + } +} \ No newline at end of file diff --git a/public/resources/css/module/_overlay.scss b/public/resources/css/module/_overlay.scss new file mode 100644 index 0000000000..026a922496 --- /dev/null +++ b/public/resources/css/module/_overlay.scss @@ -0,0 +1,8 @@ +.overlay { + position: fixed; + top: 0px; + left: 0px; + right: 0px; + bottom: 0px; + z-index: $layer-3; +} \ No newline at end of file diff --git a/public/resources/js/site.js b/public/resources/js/site.js index e6f04c7c0b..d13fbc4df4 100644 --- a/public/resources/js/site.js +++ b/public/resources/js/site.js @@ -14,20 +14,16 @@ var angularIO = angular.module('angularIOApp', ['ngMaterial']) }); }); + angularIO.controller('AppCtrl', ['$scope', '$mdSidenav', '$mdDialog', function($scope, $mdSidenav, $mdDialog){ $scope.toggleSidenav = function(menuId) { $mdSidenav(menuId).toggle(); }; - $scope.showVersionMenu = function() { - $mdDialog.show( - $mdDialog.alert() - .title('Choose a Version') - .content('libraries') - .ariaLabel('Angular Version Menu') - .ok('Done') - .targetEvent(event) - ); + $scope.toggleVersionMenu = function(event) { + $scope.showMenu = !$scope.showMenu; + + item.toggleClass('is-hidden'); }; $scope.showBio = function (event) {