From c19154820c75f9b34b5d23c569290215c17366ec Mon Sep 17 00:00:00 2001 From: Petko Bordjukov Date: Tue, 14 Oct 2014 15:04:44 +0300 Subject: [PATCH] UI Revamp --- .../javascripts/management/application.js | 1 + .../management/navigation.js.coffee | 29 +++++ .../stylesheets/management/_layout.css.scss | 11 ++ .../management/_model_details.css.scss | 23 ---- .../stylesheets/management/_navbar.css.scss | 3 - .../management/_navigation.css.scss | 71 +++++++++++ .../management/_record_table.css.scss | 62 --------- .../management/application.css.scss | 8 +- app/views/layouts/management.html.slim | 74 ++++++----- .../javascripts/metisMenu/jquery.metisMenu.js | 72 +++++++++++ .../assets/javascripts/metisMenu/metisMenu.js | 120 ++++++++++++++++++ .../metisMenu/jquery.metisMenu.css | 56 ++++++++ .../stylesheets/metisMenu/metisMenu.css | 64 ++++++++++ 13 files changed, 471 insertions(+), 123 deletions(-) create mode 100644 app/assets/javascripts/management/navigation.js.coffee create mode 100644 app/assets/stylesheets/management/_layout.css.scss delete mode 100644 app/assets/stylesheets/management/_model_details.css.scss delete mode 100644 app/assets/stylesheets/management/_navbar.css.scss create mode 100644 app/assets/stylesheets/management/_navigation.css.scss delete mode 100644 app/assets/stylesheets/management/_record_table.css.scss create mode 100644 vendor/assets/javascripts/metisMenu/jquery.metisMenu.js create mode 100644 vendor/assets/javascripts/metisMenu/metisMenu.js create mode 100644 vendor/assets/stylesheets/metisMenu/jquery.metisMenu.css create mode 100644 vendor/assets/stylesheets/metisMenu/metisMenu.css diff --git a/app/assets/javascripts/management/application.js b/app/assets/javascripts/management/application.js index bffe770..0400cd5 100644 --- a/app/assets/javascripts/management/application.js +++ b/app/assets/javascripts/management/application.js @@ -1,4 +1,5 @@ //= require jquery //= require jquery_ujs //= require bootstrap-sprockets +//= require metisMenu/metisMenu //= require_directory . diff --git a/app/assets/javascripts/management/navigation.js.coffee b/app/assets/javascripts/management/navigation.js.coffee new file mode 100644 index 0000000..84396ee --- /dev/null +++ b/app/assets/javascripts/management/navigation.js.coffee @@ -0,0 +1,29 @@ +$ -> + $('#side-menu').metisMenu(); + +$ -> + $(window).bind "load resize", -> + topOffset = 50 + width = if this.window.innerWidth > 0 + this.window.innerWidth + else + this.screen.width + + if width < 768 + $('.collapsable').addClass 'collapse' + topOffset = 100 + else + $('.collapsable').removeClass 'collapse' + + height = if this.window.innerHeight > 0 ? + this.window.innerHeight + else + this.screen.height + + height = height - topOffset + + if height < 1 + height = 1 + + if height > topOffset + $("#page-wrapper").css("min-height", (height) + "px") diff --git a/app/assets/stylesheets/management/_layout.css.scss b/app/assets/stylesheets/management/_layout.css.scss new file mode 100644 index 0000000..1e0de61 --- /dev/null +++ b/app/assets/stylesheets/management/_layout.css.scss @@ -0,0 +1,11 @@ +.content { + @extend .container-fluid; +} + +@media(min-width:768px) { + #page-wrapper { + position: inherit; + margin: 0 0 0 250px; + padding: 0 30px; + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/management/_model_details.css.scss b/app/assets/stylesheets/management/_model_details.css.scss deleted file mode 100644 index 5f11cae..0000000 --- a/app/assets/stylesheets/management/_model_details.css.scss +++ /dev/null @@ -1,23 +0,0 @@ -.model-details { - @extend .modal; - @extend .fade; - .center { - text-align: center; - } - - .profile-image { - @extend .img-thumbnail; - max-width: 171px; - max-height: 180px; - } - - .social { - @extend .btn-group; - margin-top: 10px; - - a { - @extend .btn; - @extend .btn-default; - } - } -} \ No newline at end of file diff --git a/app/assets/stylesheets/management/_navbar.css.scss b/app/assets/stylesheets/management/_navbar.css.scss deleted file mode 100644 index e2b26c5..0000000 --- a/app/assets/stylesheets/management/_navbar.css.scss +++ /dev/null @@ -1,3 +0,0 @@ -body { - padding-top: 70px; -} diff --git a/app/assets/stylesheets/management/_navigation.css.scss b/app/assets/stylesheets/management/_navigation.css.scss new file mode 100644 index 0000000..3236073 --- /dev/null +++ b/app/assets/stylesheets/management/_navigation.css.scss @@ -0,0 +1,71 @@ +.navigation { + @extend .navbar; + @extend .navbar-default; + @extend .navbar-static-top; + + .header { + @extend .navbar-header; + + .brand { + @extend .navbar-brand; + } + + .toggle { + @extend .navbar-toggle; + @extend .collapsed; + } + } + + .right-menu { + @extend .nav; + @extend .navbar-nav; + @extend .navbar-right; + margin-right: 15px; + } + + .sidebar { + @extend .navbar-default; + padding: 0; + } + + .collapsable { + @extend .navbar-collapse; + margin-top: 0; + margin-bottom: 0; + } + + .sidebar .arrow { + float: right; + } + + .sidebar .fa.arrow:before { + content: "\f104"; + } + + .sidebar .active > a > .fa.arrow:before { + content: "\f107"; + } + + .sidebar .nav-second-level li, + .sidebar .nav-third-level li { + border-bottom: none !important; + } + + .sidebar .nav-second-level li a { + padding-left: 37px; + } + + .sidebar .nav-third-level li a { + padding-left: 52px; + } + + @media(min-width:768px) { + .sidebar { + z-index: 1; + position: absolute; + width: 250px; + margin-top: 41px; + padding-right: 30px; + } + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/management/_record_table.css.scss b/app/assets/stylesheets/management/_record_table.css.scss deleted file mode 100644 index 16d5049..0000000 --- a/app/assets/stylesheets/management/_record_table.css.scss +++ /dev/null @@ -1,62 +0,0 @@ -.record-table { - @extend .table; - @extend .table-striped; - - td { - vertical-align: middle !important; - } - - th.picture, td.picture { - text-align: center; - width: 60px; - } - - th.admin, td.admin { - width: 60px; - } - - th.actions, td.actions { - width: 120px; - } - - .actions div { - @extend .pull-right; - @extend .btn-group; - white-space: nowrap; - } - - .actions > div > a { - @extend .btn; - @extend .btn-default; - } - - .toggle { - a { - @extend .btn; - } - - a.checked { - @extend .btn-success; - } - - a.unchecked { - @extend .btn-primary; - } - } - - .subtitle { - font-size: 0.9em; - font-style: italic; - } -} - -.picture-placeholder { - @extend .img-thumbnail; - - .glyphicon { - width: 50px; - height: 50px; - font-size: 48px; - text-align: center; - } -} diff --git a/app/assets/stylesheets/management/application.css.scss b/app/assets/stylesheets/management/application.css.scss index 6d33057..5905962 100644 --- a/app/assets/stylesheets/management/application.css.scss +++ b/app/assets/stylesheets/management/application.css.scss @@ -3,6 +3,8 @@ @import "bootstrap"; @import "bootswatch/simplex/bootswatch"; @import "font-awesome"; -@import "navbar"; -@import "record_table"; -@import "model_details"; \ No newline at end of file + +@import "metisMenu/metisMenu"; + +@import "layout"; +@import "navigation"; diff --git a/app/views/layouts/management.html.slim b/app/views/layouts/management.html.slim index 03f7c7c..a205d9c 100644 --- a/app/views/layouts/management.html.slim +++ b/app/views/layouts/management.html.slim @@ -5,41 +5,51 @@ html meta charset="utf-8" meta http-equiv="X-UA-Compatible" content="IE=edge" meta name="viewport" content="width=device-width, initial-scale=1" - title Clarion + title + - if content_for? :title + = content_for :title + | | Clarion + - else + | Clarion + = stylesheet_link_tag "management/application" - = stylesheet_link_tag '//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.2.4/bootstrap-table.min.css' = csrf_meta_tags body - nav.navbar.navbar-default.navbar-fixed-top - .container - .navbar-header - button.navbar-toggle.collapsed type="button" data-toggle="collapse" data-target=".navbar-collapse" - span.sr-only Toggle navigation - span.icon-bar - span.icon-bar - span.icon-bar - = link_to 'Clarion', root_path, class: 'navbar-brand' - .navbar-collapse.collapse - ul.nav.navbar-nav - li class="#{'active' if controller_name == 'users'}" - = link_to User.model_name.human(count: 2), management_users_path - li class="dropdown #{'active' if controller_name == 'events'}" - = link_to '#', class: 'dropdown-toggle', data: {toggle: "dropdown"} - = Event.model_name.human(count: 2) - span.caret - ul.dropdown-menu role="menu" - li class="#{'active' if action_name == 'index'}" - = link_to "Всички", management_events_path - li class="#{'active' if action_name == 'undecided'}" - = link_to "Нерешени", undecided_management_events_path - li class="#{'active' if action_name == 'approved'}" - = link_to "Одобрени", approved_management_events_path - li class="#{'active' if action_name == 'backup'}" - = link_to "Резерви", backup_management_events_path - li class="#{'active' if action_name == 'rejected'}" - = link_to "Отхвърлени", rejected_management_events_path + nav.navigation role="navigation" + .header + = button_tag type: 'button', class: 'toggle', data: {toggle: 'collapse', target: '.collapsable'} + span.sr-only Toggle Navigation + span.icon-bar + span.icon-bar + span.icon-bar + = link_to management_path, class: 'brand' + | Clarion + ul.right-menu.collapsable + li.dropdown + a.dropdown-toggle href="#" data-toggle="dropdown" + i.fa.fa-users.fa-fw> + span = Conference.current.title + span.caret< + ul.dropdown-menu role="menu" + - Conference.all.each do |conference| + li + = link_to conference.title, '#' - div.container + li + a href="#" + i.fa.fa-flag.fa-fw> + span = I18n.locale + li + a href="#" + i.fa.fa-cogs.fa-fw> + span = t :settings + .sidebar.collapsable + ul.nav#side-menu + li + a.active href="index.html" + i.fa.fa-wrench.fa-fw + | Dashboard + + div.content#page-wrapper == yield = javascript_include_tag "management/application" - = javascript_include_tag '//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.2.4/bootstrap-table.min.js' diff --git a/vendor/assets/javascripts/metisMenu/jquery.metisMenu.js b/vendor/assets/javascripts/metisMenu/jquery.metisMenu.js new file mode 100644 index 0000000..9f8d627 --- /dev/null +++ b/vendor/assets/javascripts/metisMenu/jquery.metisMenu.js @@ -0,0 +1,72 @@ +/* + * metismenu - v1.0.3 + * Easy menu jQuery plugin for Twitter Bootstrap 3 + * https://github.com/onokumus/metisMenu + * + * Made by Osman Nuri Okumuş + * Under MIT License + */ +;(function ($, window, document, undefined) { + + var pluginName = "metisMenu", + defaults = { + toggle: true + }; + + function Plugin(element, options) { + this.element = element; + this.settings = $.extend({}, defaults, options); + this._defaults = defaults; + this._name = pluginName; + this.init(); + } + + Plugin.prototype = { + init: function () { + + var $this = $(this.element), + $toggle = this.settings.toggle; + + if (this.isIE() <= 9) { + $this.find("li.active").has("ul").children("ul").collapse("show"); + $this.find("li").not(".active").has("ul").children("ul").collapse("hide"); + } else { + $this.find("li.active").has("ul").children("ul").addClass("collapse in"); + $this.find("li").not(".active").has("ul").children("ul").addClass("collapse"); + } + + $this.find("li").has("ul").children("a").on("click", function (e) { + e.preventDefault(); + + $(this).parent("li").toggleClass("active").children("ul").collapse("toggle"); + + if ($toggle) { + $(this).parent("li").siblings().removeClass("active").children("ul.in").collapse("hide"); + } + }); + }, + + isIE: function() {//https://gist.github.com/padolsey/527683 + var undef, + v = 3, + div = document.createElement("div"), + all = div.getElementsByTagName("i"); + + while ( + div.innerHTML = "", + all[0] + ) { + return v > 4 ? v : undef; + } + } + }; + + $.fn[ pluginName ] = function (options) { + return this.each(function () { + if (!$.data(this, "plugin_" + pluginName)) { + $.data(this, "plugin_" + pluginName, new Plugin(this, options)); + } + }); + }; + +})(jQuery, window, document); diff --git a/vendor/assets/javascripts/metisMenu/metisMenu.js b/vendor/assets/javascripts/metisMenu/metisMenu.js new file mode 100644 index 0000000..6daf7d4 --- /dev/null +++ b/vendor/assets/javascripts/metisMenu/metisMenu.js @@ -0,0 +1,120 @@ +/* + * metismenu - v1.1.1 + * Easy menu jQuery plugin for Twitter Bootstrap 3 + * https://github.com/onokumus/metisMenu + * + * Made by Osman Nuri Okumus + * Under MIT License + */ +;(function($, window, document, undefined) { + + var pluginName = "metisMenu", + defaults = { + toggle: true, + doubleTapToGo: false + }; + + function Plugin(element, options) { + this.element = $(element); + this.settings = $.extend({}, defaults, options); + this._defaults = defaults; + this._name = pluginName; + this.init(); + } + + Plugin.prototype = { + init: function() { + + var $this = this.element, + $toggle = this.settings.toggle, + obj = this; + + if (this.isIE() <= 9) { + $this.find("li.active").has("ul").children("ul").collapse("show"); + $this.find("li").not(".active").has("ul").children("ul").collapse("hide"); + } else { + $this.find("li.active").has("ul").children("ul").addClass("collapse in"); + $this.find("li").not(".active").has("ul").children("ul").addClass("collapse"); + } + + //add the "doubleTapToGo" class to active items if needed + if (obj.settings.doubleTapToGo) { + $this.find("li.active").has("ul").children("a").addClass("doubleTapToGo"); + } + + $this.find("li").has("ul").children("a").on("click" + "." + pluginName, function(e) { + e.preventDefault(); + + //Do we need to enable the double tap + if (obj.settings.doubleTapToGo) { + + //if we hit a second time on the link and the href is valid, navigate to that url + if (obj.doubleTapToGo($(this)) && $(this).attr("href") !== "#" && $(this).attr("href") !== "") { + e.stopPropagation(); + document.location = $(this).attr("href"); + return; + } + } + + $(this).parent("li").toggleClass("active").children("ul").collapse("toggle"); + + if ($toggle) { + $(this).parent("li").siblings().removeClass("active").children("ul.in").collapse("hide"); + } + + }); + }, + + isIE: function() { //https://gist.github.com/padolsey/527683 + var undef, + v = 3, + div = document.createElement("div"), + all = div.getElementsByTagName("i"); + + while ( + div.innerHTML = "", + all[0] + ) { + return v > 4 ? v : undef; + } + }, + + //Enable the link on the second click. + doubleTapToGo: function(elem) { + var $this = this.element; + + //if the class "doubleTapToGo" exists, remove it and return + if (elem.hasClass("doubleTapToGo")) { + elem.removeClass("doubleTapToGo"); + return true; + } + + //does not exists, add a new class and return false + if (elem.parent().children("ul").length) { + //first remove all other class + $this.find(".doubleTapToGo").removeClass("doubleTapToGo"); + //add the class on the current element + elem.addClass("doubleTapToGo"); + return false; + } + }, + + remove: function() { + this.element.off("." + pluginName); + this.element.removeData(pluginName); + } + + }; + + $.fn[pluginName] = function(options) { + this.each(function () { + var el = $(this); + if (el.data(pluginName)) { + el.data(pluginName).remove(); + } + el.data(pluginName, new Plugin(this, options)); + }); + return this; + }; + +})(jQuery, window, document); \ No newline at end of file diff --git a/vendor/assets/stylesheets/metisMenu/jquery.metisMenu.css b/vendor/assets/stylesheets/metisMenu/jquery.metisMenu.css new file mode 100644 index 0000000..a6f0481 --- /dev/null +++ b/vendor/assets/stylesheets/metisMenu/jquery.metisMenu.css @@ -0,0 +1,56 @@ +/* + * metismenu - v1.0.3 + * Easy menu jQuery plugin for Twitter Bootstrap 3 + * https://github.com/onokumus/metisMenu + * + * Made by Osman Nuri Okumuş + * Under MIT License + */ +.arrow { + float: right; +} + +.glyphicon.arrow:before { + content: "\e079"; +} + +.active > a > .glyphicon.arrow:before { + content: "\e114"; +} + +.fa.arrow:before { + content: "\f104"; +} + +.active > a > .fa.arrow:before { + content: "\f107"; +} + +.plus-times { + float: right; +} + +.fa.plus-times:before { + content: "\f067"; +} + +.active > a > .fa.plus-times { + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + -ms-transform: rotate(45deg); + -o-transform: rotate(45deg); + transform: rotate(45deg); +} + +.plus-minus { + float: right; +} + +.fa.plus-minus:before { + content: "\f067"; +} + +.active > a > .fa.plus-minus:before { + content: "\f068"; +} \ No newline at end of file diff --git a/vendor/assets/stylesheets/metisMenu/metisMenu.css b/vendor/assets/stylesheets/metisMenu/metisMenu.css new file mode 100644 index 0000000..ae40032 --- /dev/null +++ b/vendor/assets/stylesheets/metisMenu/metisMenu.css @@ -0,0 +1,64 @@ +/* + * metismenu - v1.1.1 + * Easy menu jQuery plugin for Twitter Bootstrap 3 + * https://github.com/onokumus/metisMenu + * + * Made by Osman Nuri Okumus + * Under MIT License + */ +.arrow { + float: right; + line-height: 1.42857; +} + +.glyphicon.arrow:before { + content: "\e079"; +} + +.active > a > .glyphicon.arrow:before { + content: "\e114"; +} + + +/* + * Require Font-Awesome + * http://fortawesome.github.io/Font-Awesome/ +*/ + + +.fa.arrow:before { + content: "\f104"; +} + +.active > a > .fa.arrow:before { + content: "\f107"; +} + +.plus-times { + float: right; +} + +.fa.plus-times:before { + content: "\f067"; +} + +.active > a > .fa.plus-times { + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + -ms-transform: rotate(45deg); + -o-transform: rotate(45deg); + transform: rotate(45deg); +} + +.plus-minus { + float: right; +} + +.fa.plus-minus:before { + content: "\f067"; +} + +.active > a > .fa.plus-minus:before { + content: "\f068"; +} \ No newline at end of file