IMPROVEMENT: auto-size embed elements

This commit is contained in:
Tony Air 2019-12-31 18:55:51 +07:00
parent b6c80e762a
commit ca678eb090
3 changed files with 27 additions and 19 deletions

View File

@ -1,6 +1,6 @@
{ {
"name": "@a2nt/ss-bootstrap-ui-webpack-boilerplate", "name": "@a2nt/ss-bootstrap-ui-webpack-boilerplate",
"version": "1.5.2", "version": "1.5.3",
"author": "Tony Air <tony@twma.pro>", "author": "Tony Air <tony@twma.pro>",
"license": "MIT", "license": "MIT",
"description": "This UI Kit allows you to build Bootstrap 4 webapp with some extra UI features. It's easy to extend and easy to convert HTML templates to CMS templates.", "description": "This UI Kit allows you to build Bootstrap 4 webapp with some extra UI features. It's easy to extend and easy to convert HTML templates to CMS templates.",

View File

@ -1,13 +1,13 @@
/* /*
* Conflicts with 'bootstrap/js/dist/dropdown' * Conflicts with 'bootstrap/js/dist/dropdown'
*/ */
"use strict"; 'use strict';
import $ from 'jquery'; import $ from 'jquery';
import Events from '../_events'; import Events from '../_events';
import 'jquery-hoverintent/jquery.hoverIntent.js'; import 'jquery-hoverintent/jquery.hoverIntent.js';
const HoverUI = (($) => { const HoverUI = ($ => {
// Constants // Constants
const W = window; const W = window;
const D = document; const D = document;
@ -33,7 +33,11 @@ const HoverUI = (($) => {
// find target // find target
let $target = $el.data('target'); let $target = $el.data('target');
$target = $target && $target.length ? $target : null; $target = $target && $target.length ? $target : null;
$target = $target ? $target : ($parent ? $parent.find('.dropdown-menu') : null); $target = $target
? $target
: $parent
? $parent.find('.dropdown-menu')
: null;
if (!$target || !$target.length) { if (!$target || !$target.length) {
console.warn(`${NAME}: Missing target for:`); console.warn(`${NAME}: Missing target for:`);
@ -47,7 +51,7 @@ const HoverUI = (($) => {
ui.$triger = $triger; ui.$triger = $triger;
// integrate with dropdown-toggle // integrate with dropdown-toggle
$('[data-toggle="dropdown"]').on('click touch', (e) => { $('[data-toggle="dropdown"]').on('click touch', e => {
ui.hide(); ui.hide();
}); });
@ -64,9 +68,8 @@ const HoverUI = (($) => {
}); });
} }
$el.on('click touch', (e) => { $el.on('click touch', e => {
if (!$el.data('allow-click')) { if (!$el.data('allow-click')) {
console.log('aaaa');
e.preventDefault(); e.preventDefault();
} }
@ -86,11 +89,14 @@ const HoverUI = (($) => {
show() { show() {
const ui = this; const ui = this;
ui.$el.parents('.dropdown').not('.active').each((i, el) => { ui.$el
const $el = $(el); .parents('.dropdown')
$el.find('.dropdown').removeClass('show'); .not('.active')
$el.addClass('show'); .each((i, el) => {
}); const $el = $(el);
$el.find('.dropdown').removeClass('show');
$el.addClass('show');
});
ui.$target.addClass('show'); ui.$target.addClass('show');
} }
@ -144,7 +150,7 @@ const HoverUI = (($) => {
}); });
// rewrite 'bootstrap/js/dist/dropdown' // rewrite 'bootstrap/js/dist/dropdown'
$('[data-toggle="dropdown"]').on('click touch', (e) => { $('[data-toggle="dropdown"]').on('click touch', e => {
e.preventDefault(); e.preventDefault();
const $el = $(e.currentTarget); const $el = $(e.currentTarget);
@ -157,7 +163,6 @@ const HoverUI = (($) => {
$parent.addClass('show'); $parent.addClass('show');
$parent.find('.dropdown-menu').addClass('show'); $parent.find('.dropdown-menu').addClass('show');
} }
}); });
return HoverUI; return HoverUI;

View File

@ -1,6 +1,6 @@
@import "../_variables"; @import '../_variables';
@import "~bootstrap/scss/tables"; @import '~bootstrap/scss/tables';
img, img,
.captionImage, .captionImage,
@ -42,6 +42,7 @@ img,
iframe { iframe {
width: 100% !important; width: 100% !important;
height: 100% !important;
} }
} }
@ -75,7 +76,9 @@ table {
&.table-none { &.table-none {
border: 0; border: 0;
tr, td, th { tr,
td,
th {
border: 0; border: 0;
background: none !important; background: none !important;
} }
@ -89,9 +92,9 @@ ul {
list-style: none; list-style: none;
&:before { &:before {
content: "\2022"; content: '\2022';
display: inline-block; display: inline-block;
margin-right: .5em; margin-right: 0.5em;
} }
} }
} }