Site
/
clarion
11
0
Fork 0
Code Issues 4 Pull Requests 1 Packages Projects Releases Wiki Activity

UI Revamp

This commit is contained in:
Petko Bordjukov 2014-10-14 15:04:44 +03:00
parent 649c5a768c
commit c19154820c
13 changed files with 471 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/assets/javascripts/management/application.js
View File

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

29
app/assets/javascripts/management/navigation.js.coffee Normal file
View File

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

11
app/assets/stylesheets/management/_layout.css.scss Normal file
View File

@ -0,0 +1,11 @@
.content {
@extend .container-fluid;
}
@media(min-width:768px) {
#page-wrapper {
position: inherit;
margin: 0 0 0 250px;
padding: 0 30px;
}
}

23
app/assets/stylesheets/management/_model_details.css.scss
View File

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

3
app/assets/stylesheets/management/_navbar.css.scss
View File

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

71
app/assets/stylesheets/management/_navigation.css.scss Normal file
View File

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

62
app/assets/stylesheets/management/_record_table.css.scss
View File

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

8
app/assets/stylesheets/management/application.css.scss
View File

@ -3,6 +3,8 @@
@import "bootstrap";
@import "bootswatch/simplex/bootswatch";
@import "font-awesome";
@import "navbar";
@import "record_table";
@import "model_details";
@import "metisMenu/metisMenu";
@import "layout";
@import "navigation";

74
app/views/layouts/management.html.slim
View File

@ -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'

72
vendor/assets/javascripts/metisMenu/jquery.metisMenu.js vendored Normal file
View File

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

120
vendor/assets/javascripts/metisMenu/metisMenu.js vendored Normal file
View File

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

56
vendor/assets/stylesheets/metisMenu/jquery.metisMenu.css vendored Normal file
View File

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

64
vendor/assets/stylesheets/metisMenu/metisMenu.css vendored Normal file
View File

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