UI Revamp

app/assets/javascripts/management/application.js

@@ -1,4 +1,5 @@
 //= require jquery
 //= require jquery_ujs
 //= require bootstrap-sprockets
+//= require metisMenu/metisMenu
 //= require_directory .

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")

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;
+    }
+}

app/assets/stylesheets/management/_model_details.css.scss

@@ -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;
-        }
-    }
-}

app/assets/stylesheets/management/_navbar.css.scss

@@ -1,3 +0,0 @@
-body {
-  padding-top: 70px;
-}

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;
+        }
+    }
+}

app/assets/stylesheets/management/_record_table.css.scss

@@ -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;
-    }
-}

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 "metisMenu/metisMenu";
-@import "model_details";
+
+@import "layout";
+@import "navigation";

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
+    nav.navigation role="navigation"
-      .container
+      .header
-        .navbar-header
+        = button_tag type: 'button', class: 'toggle', data: {toggle: 'collapse', target: '.collapsable'}
-          button.navbar-toggle.collapsed type="button" data-toggle="collapse" data-target=".navbar-collapse"
+          span.sr-only Toggle Navigation
-            span.sr-only Toggle navigation
           span.icon-bar
           span.icon-bar
           span.icon-bar
-          = link_to 'Clarion', root_path, class: 'navbar-brand'
+        = link_to management_path, class: 'brand'
-        .navbar-collapse.collapse
+          | Clarion
-          ul.nav.navbar-nav
+      ul.right-menu.collapsable
-            li class="#{'active' if controller_name == 'users'}"
+        li.dropdown
-              = link_to User.model_name.human(count: 2), management_users_path
+          a.dropdown-toggle href="#" data-toggle="dropdown"
-            li class="dropdown #{'active' if controller_name == 'events'}"
+            i.fa.fa-users.fa-fw>
-              = link_to '#', class: 'dropdown-toggle', data: {toggle: "dropdown"}
+            span = Conference.current.title
-                = Event.model_name.human(count: 2)
+            span.caret<
-                span.caret
           ul.dropdown-menu role="menu"
-                li class="#{'active' if action_name == 'index'}"
+            - Conference.all.each do |conference|
-                  = link_to "Всички", management_events_path
+              li
-                li class="#{'active' if action_name == 'undecided'}"
+                = link_to conference.title, '#'
-                  = 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
 
-    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'

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 = "<!--[if gt IE " + (++v) + "]><i></i><![endif]-->",
+                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);

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 = "<!--[if gt IE " + (++v) + "]><i></i><![endif]-->",
+                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);

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";
+}

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";
+}