Skip to content

Commit

Permalink
Merge pull request #2079 from gillesbourgeat/fix/backoffice-ux-improv…
Browse files Browse the repository at this point in the history 
…ements-for-tablet

BackOffice : UX improvements on tablets
  • Loading branch information
@gillesbourgeat
gillesbourgeat committed Apr 1, 2016
2 parents 389fe77 + 2b13acc commit 5cf634d
Show file tree
Hide file tree
Showing 6 changed files with 79 additions and 161 deletions.
4 changes: 2 additions & 2 deletions templates/backOffice/default/assets/css/styles.css
View file

Large diffs are not rendered by default.

225 changes: 70 additions & 155 deletions templates/backOffice/default/assets/js/main.js
View file
@@ -1,176 +1,91 @@
(function($, window, document){

$(function(){

$('#side-menu').metisMenu();

$(window).bind("load resize", function() {
topOffset = 52;
width = (this.window.innerWidth > 0) ? this.window.innerWidth : this.screen.width;
if (width < 768) {
$('div.navbar-collapse').addClass('collapse');
topOffset = 104;
} else {
$('div.navbar-collapse').removeClass('collapse');
}

height = ((this.window.innerHeight > 0) ? this.window.innerHeight : this.screen.height) - 1;
height = height - topOffset;


if (height < 1) height = 1;
if (height > topOffset) {
$("#page-wrapper").css("min-height", (height - topOffset - 25) + "px");
}
});

var testModal = $(".modal-force-show");
if(testModal.length > 0) {
testModal.modal("show");
}

// Autofocus first form field on modal
var $modal = $('.modal');
if ($modal.length > 0) {
$modal.on('shown.bs.modal', function() {
var $firstField = $('input:visible:first', $modal);
$firstField.focus();
});
"use strict";
(function($, window){
$('#side-menu').metisMenu();

$(window).bind("load resize", function(){
var topOffset = 52;
var width = (this.window.innerWidth > 0) ? this.window.innerWidth : this.screen.width;
if (width < 1200) {
$('div.navbar-collapse').addClass('collapse');
topOffset = 104;
} else {
$('div.navbar-collapse').removeClass('collapse');
}

// Init event trigger
var event = 'hover';
var height = (((this.window.innerHeight > 0) ? this.window.innerHeight : this.screen.height) - 1) - topOffset;

if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
event = 'click';
if (height < 1) height = 1;
if (height > topOffset) {
$("#page-wrapper").css("min-height", (height - topOffset - 25) + "px");
}
});

// Toolbar managment
$('.btn-toolbar').each(function() {
var $btn = $(this),
$content = $btn.next('.toolbar-options');

$btn.toolbar({
event: event,
content: $content,
style: 'info',
position: 'right'
});

$('a', '.tool-items').on('click', function(){
// If you want to prevent a link is followed, add .no-follow-link class to your link
if (!$(this).attr('data-toggle') && !$(this).is('.no-follow-link')) {
window.location = $(this).attr('href');
}
});
});

// -- Bootstrap tooltip --
if($('[rel="tooltip"]').length){
$('[rel="tooltip"]').tooltip();
}
$(".modal-force-show").modal("show");

// -- Bootstrap select --
if($('[data-toggle="selectpicker"]').length){
$('[data-toggle="selectpicker"]').selectpicker();
}
// Autofocus first form field on modal
$('.modal').on('shown.bs.modal', function(){
$('input:visible:first', $(this)).focus();
});

// -- Confirm Box --
if($('[data-toggle="confirm"]').length){
$('[data-toggle="confirm"]').click(function(e){
// Init event trigger
var event = 'hover';

var $this = $(this);
var $modal = $($this.data('target'));
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
event = 'click';
}

$modal.modal('show');
// Toolbar managment
$('.btn-toolbar').each(function(){
var $btn = $(this),
$content = $btn.next('.toolbar-options');

$modal.on('shown', function () {
if($this.data('script')){
$btn.toolbar({
event: event,
content: $content,
style: 'info',
position: 'right'
});

$('[data-confirm]').click(function(){
$('a', '.tool-items').on('click', function(){
// If you want to prevent a link is followed, add .no-follow-link class to your link
if (!$(this).attr('data-toggle') && !$(this).is('.no-follow-link')) {
window.location = $(this).attr('href');
}
});
});

eval($this.data('script'));
// -- Bootstrap tooltip --
$('[rel="tooltip"]').tooltip();

$modal.modal('hide');
return false;
});
// -- Bootstrap select --
var $selectpicker = $('[data-toggle="selectpicker"]');
if($selectpicker.length) {
$selectpicker.selectpicker();
}

}
else{
$('[data-confirm]').attr('href', $this.attr('href'));
}
});
// -- Confirm Box --
$('[data-toggle="confirm"]').click(function(e){
var $this = $(this);
var $modal = $($this.data('target'));

if($modal.is(':hidden')){
e.preventDefault();
}
$modal.modal('show');

});
}
$modal.on('shown', function (){
if($this.data('script')) {
$('[data-confirm]').click(function(){
eval($this.data('script'));

// -- Mini browser --
miniBrowser = function (root, url){

$.getJSON(url, {
root: root
})
.done(function(data) {
var resultat = data;

var breadcrumb = $('<div />');
$(resultat.breadcrumb).each(function(k, v){
breadcrumb.append(
$('<span />').html(' > '),
$('<a />').attr('href', '#').html(v.display).click(function(e){
e.preventDefault();
miniBrowser(v.url);
})
);
});

var categories = $('<div />');
$(resultat.categories).each(function(k, v){
categories.append(
$('<p />').append(
$('<a />').attr('href', '#').html(v.titre).click(function(e){
e.preventDefault();
miniBrowser(v.id);
})
)
);
$modal.modal('hide');
return false;
});

var products = $('<div />');
$(resultat.products).each(function(k, v){
products.append(
$('<p />').append(
$('<a />').attr('href', '#').html(v.titre).click(function(e){
e.preventDefault();

$('#productToAdd_ref').val(v.ref);
$('#productToAdd_titre').val(v.titre);
$('#productToAdd_quantite').val(1);

manageStock(v.variants, v.promo?v.prix2:v.prix);

$('#productToAdd_tva').val(v.tva);

$('.productToAddInformation').show();
$('#btn_ajout_produit').show();
})
)
);
});

$('#minibrowser-breadcrumb').unbind().empty().append(breadcrumb);
$('#minibrowser-categories').unbind().empty().append(categories);
})
.fail(function() {
console.log('An error occurred while reading from JSON file');
});

}
} else {
$('[data-confirm]').attr('href', $this.attr('href'));
}
});

if($modal.is(':hidden')) {
e.preventDefault();
}
});

}(window.jQuery, window, document));
}(window.jQuery, window));
2 changes: 1 addition & 1 deletion templates/backOffice/default/assets/js/thelia-states.js
View file
Expand Up @@ -5,7 +5,7 @@
var addressState = (function () {

// A private function which logs any arguments
initialize = function( element ) {
var initialize = function( element ) {
var elm = {};

elm.state = $(element);
Expand Down
2 changes: 1 addition & 1 deletion templates/backOffice/default/assets/less/thelia/navbar.less
View file
Expand Up @@ -5,7 +5,7 @@

// COMMON STYLES
// -------------
@media (min-width: @screen-sm){
@media (min-width: @screen-lg){
.sidebar {
z-index: 1;
position: absolute;
Expand Down
2 changes: 1 addition & 1 deletion templates/backOffice/default/assets/less/thelia/thelia.less
View file
Expand Up @@ -39,7 +39,7 @@
min-height: 568px;
background-color: #f5f5f5;

@media (min-width: @screen-sm){
@media (min-width: @screen-lg){
position: inherit;
margin: 0 0 0 250px;
padding: 0 30px 20px 30px;
Expand Down
5 changes: 4 additions & 1 deletion templates/backOffice/default/assets/less/thelia/variables.less
View file
Expand Up @@ -97,4 +97,7 @@
@input-color: #646464;
@input-border-focus: #ccc;

@table-border-color: #f0f0f0;
@table-border-color: #f0f0f0;

//** Point at which the navbar becomes uncollapsed.
@grid-float-breakpoint: @screen-lg-min;

0 comments on commit 5cf634d

Please sign in to comment.