raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-02-28 01:53:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

Remove old Javascript hacks for the main menu and replace with flex-based CSS properties

Browse Source
This commit is contained in:
Matt-Yorkley
2020-10-15 18:10:37 +01:00
parent d886b1dcea
commit 52cfa0a103
6 changed files with 7 additions and 226 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/javascripts/admin/all.js
View File

@@ -15,8 +15,6 @@
//= require jquery.cookie
//= require jquery.jstree/jquery.jstree
//= require jquery.vAlign
//= require jquery.horizontalNav
//= require jquery.adaptivemenu
//= require angular
//= require angular-resource
//= require angular-animate

17
app/assets/javascripts/admin/spree/base.js.erb
View File

@@ -8,27 +8,10 @@ Hopefully, this will evolve into a propper class.
**/
jQuery(function($) {
// Make main menu use full width
mainMenu = $('.fullwidth-menu')
if (typeof mainMenu.horizontalNav === 'function' )
mainMenu.horizontalNav({
tableDisplay: false,
responsiveDelay: 0
});
// Vertical align of checkbox fields
if (typeof $('.field.checkbox label').vAlign === 'function' )
$('.field.checkbox label').vAlign()
// We activate AdaptiveMenu only if not on webdriver
// Re-adjusting the admin menu during tests causes tests to fail.
if (!navigator.webdriver && typeof Spree !== 'undefined') {
$('.main-menu-wrapper ul').AdaptiveMenu({
text: "<a href='#'><i class='icon-chevron-down'></i> " + Spree.translations.more + "</a>",
klass: "dropdown"
});
}
// Add some tips
if (typeof $('.with-tip').powerTip === 'function' ) {
$('.with-tip').powerTip({

7
app/assets/stylesheets/admin/components/navigation.scss
View File

@@ -65,12 +65,17 @@ nav.menu {
#admin-menu {
background-color: $color-3;
ul {
display: flex;
}
li {
min-width: 90px;
flex-grow: 1;
a {
display: block;
padding: 25px 20px;
padding: 25px 5px;
color: $color-1 !important;
text-transform: uppercase;
position: relative;

2
app/views/spree/layouts/_admin_body.html.haml
View File

@@ -21,7 +21,7 @@
%nav#admin-menu{ data: { hook: '' }}
.container.no-gutter
.sixteen.columns.main-menu-wrapper
%ul.inline-menu.fullwidth-menu{"data-hook" => "admin_tabs"}
%ul.inline-menu{"data-hook" => "admin_tabs"}
= render :partial => 'spree/admin/shared/tabs'
- if content_for?(:sub_menu)

64
vendor/assets/javascripts/jquery.adaptivemenu.js vendored
View File

@@ -1,64 +0,0 @@
/*
* Original from spree/core/vendor/assets/javascripts/jquery.adaptivemenu.js
*/
/*
* Used for the spree admin tab bar (Orders, Products, Reports etc.).
* Using parent's width instead of window width.
*/
jQuery.fn.AdaptiveMenu = function(options){
var options = jQuery.extend({
text: "More...",
accuracy:0, // originally 70, but not needed anymore
'class':null,
'classLinckMore':null
},options);
var menu = this;
var li = $(menu).find("li");
var width = 0;
var widthLi = [];
$.each( li , function(i, l){
width += $(l).width();
widthLi.push( width );
});
var buildingMenu = function(){
// Using parent width instead of given window width
var windowWidth = $(menu.parent()).width() - options.accuracy;
for(var i = 0; i<widthLi.length; i++ ){
if ( widthLi[i] > windowWidth )
$( li[i] ).hide();
else
$( li[i] ).show();
}
$(menu).find('#more').remove();
var hideLi = $(li).filter(':not(:visible)');
var lastLi = $(li).filter(':visible').last();
if ( hideLi.length > 0 ){
var more = $("<li>")
.css({"display":"inline-block","white-space":"nowrap"})
.addClass(options.classLinckMore)
.attr({"id":"more"})
.html(options.text)
.click(function(){$(this).find('li').toggle()});
var ul = $("<ul>")
.css({"position":"absolute"})
.addClass(options.klass)
.html(hideLi.clone()).prepend(lastLi.clone().hide());
more.append(ul);
lastLi.hide().before(more);
}
}
// calling buildingMenu without parameter jQuery(window).width()
jQuery(window).resize(buildingMenu);
jQuery(window).ready(buildingMenu);
};

141
vendor/assets/javascripts/jquery.horizontalNav.js vendored
View File

@@ -1,141 +0,0 @@
/**
* jQuery Horizontal Navigation 1.0
* https://github.com/sebnitu/horizontalNav
*
* By Sebastian Nitu - Copyright 2012 - All rights reserved
* Author URL: http://sebnitu.com
*/
(function($) {
$.fn.horizontalNav = function(options) {
// Extend our default options with those provided.
var opts = $.extend({}, $.fn.horizontalNav.defaults, options);
return this.each(function () {
// Save our object
var $this = $(this);
// Build element specific options
// This lets me access options with this syntax: o.optionName
var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
// Save the wrapper. The wrapper is the element that
// we figure out what the full width should be
if ($this.is('ul')) {
var ul_wrap = $this.parent();
} else {
var ul_wrap = $this;
}
// let's append a clearfixing element to the ul wrapper
ul_wrap.css({ 'zoom' : '1' }).append('<div class="clearHorizontalNav">');
$('.clearHorizontalNav').css({
'display' : 'block',
'overflow' : 'hidden',
'visibility' : 'hidden',
'width' : 0,
'height' : 0,
'clear' : 'both'
});
// Grab elements we'll need and add some default styles
var ul = $this.is('ul') ? $this : ul_wrap.find('> ul'), // The unordered list element
li = ul.find('> li'), // All list items
li_last = li.last(), // Last list item
li_count = li.size(), // The number of navigation elements
li_a = li.find('> a'); // Remove padding from the links
// If set to responsive, re-construct after every browser resize
if ( o.responsive === true ) {
// Only need to do this for IE7 and below
// or if we set tableDisplay to false
if ( (o.tableDisplay != true) || ($.browser.msie && parseInt($.browser.version, 10) <= 7) ) {
resizeTrigger( _construct, o.responsiveDelay );
}
}
// Initiate the plugin
_construct();
// Returns the true inner width of an element
// Essentially it's the inner width without padding.
function trueInnerWidth(element) {
return element.innerWidth() - (
parseInt(element.css('padding-left')) + parseInt(element.css('padding-right'))
);
}
// Call funcion on browser resize
function resizeTrigger(callback, delay) {
// Delay before function is called
delay = delay || 100;
// Call function on resize
var resizeTimer;
$(window).resize(function() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
callback();
}, delay);
});
}
// The heavy lifting of this plugin. This is where we
// find and set the appropriate widths for list items
function _construct() {
if ( (o.tableDisplay != true) || ($.browser.msie && parseInt($.browser.version, 10) <= 7) ) {
// IE7 doesn't support the "display: table" method
// so we need to do it the hard way.
// Add some styles
ul.css({ 'float' : 'left' });
li.css({ 'float' : 'left', 'width' : 'auto' });
li_a.css({ 'padding-left' : 0, 'padding-right' : 0 });
// Grabbing widths and doing some math
var ul_width = trueInnerWidth(ul),
ul_width_outer = ul.outerWidth(true),
ul_width_extra = ul_width_outer - ul_width,
full_width = trueInnerWidth(ul_wrap),
extra_width = (full_width - ul_width_extra) - ul_width,
li_padding = Math.floor( extra_width / li_count );
// Cycle through the list items and give them widths
li.each(function(index) {
var li_width = trueInnerWidth( $(this) );
$(this).css({ 'width' : (li_width + li_padding) + 'px' });
});
// Get the leftover pixels after we set every itms width
var li_last_width = trueInnerWidth(li_last) + ( (full_width - ul_width_extra) - trueInnerWidth(ul) );
// I hate to do this but for some reason Firefox (v13.0) and IE are always
// one pixel off when rendering. So this is a quick fix for that.
if ($.browser.mozilla || $.browser.msie) {
li_last_width = li_last_width - 1;
}
// Add the leftovers to the last navigation item
li_last.css({ 'width' : li_last_width + 'px' });
} else {
// Every modern browser supports the "display: table" method
// so this is the best way to do it for them.
ul.css({ 'display' : 'table', 'float' : 'none', 'width' : '100%' });
li.css({ 'display' : 'table-cell', 'float' : 'none' });
}
}
}); // @end of return this.each()
};
$.fn.horizontalNav.defaults = {
responsive : true,
responsiveDelay : 100,
tableDisplay : true
};
})(jQuery);