ref(assets): supprime les composants non utilisés de Bootstrap

feat/rubrique
Jérôme Lebleu 2021-08-11 17:41:31 +02:00
Parent d9d8253942
révision ecec9c03f3
5 fichiers modifiés avec 52 ajouts et 308 suppressions

Voir le fichier

@ -36,6 +36,15 @@
"quote-props": [
"error",
"consistent-as-needed"
],
"spaced-comment": [
"error",
"always",
{
"markers": [
"import"
]
}
]
}
}

Voir le fichier

@ -3,11 +3,6 @@ __webpack_public_path__ = window.STATIC_URL || '/';
import './vendor/bootstrap';
import Popover from 'bootstrap/popover';
import Toast from 'bootstrap/toast';
import Tooltip from 'bootstrap/tooltip';
import SelectorEngine from 'bootstrap/dom/selector-engine';
/**
* ------------------------------------------------------------------------
* Main application
@ -16,22 +11,4 @@ import SelectorEngine from 'bootstrap/dom/selector-engine';
window.addEventListener('load', () => {
document.documentElement.classList.remove('no-js');
// Initialize Popover, Tooltip and Toast components
SelectorEngine.find('[data-bs-toggle="popover"]').forEach(
(popover) => new Popover(popover)
);
SelectorEngine.find('[data-bs-toggle="tooltip"]').forEach(
(tooltip) => new Tooltip(tooltip)
);
SelectorEngine.find('.toast').forEach((toastNode) => {
const toast = new Toast(toastNode, {
autohide: false,
});
toast.show();
});
});

Voir le fichier

@ -1,13 +1,14 @@
// -----------------------------------------------------------------------------
// Bootstrap v5
// -----------------------------------------------------------------------------
// see: https://getbootstrap.com/docs/5.0/getting-started/javascript/
// see: https://getbootstrap.com/docs/5.1/getting-started/javascript/
import 'bootstrap/alert';
import 'bootstrap/button';
import 'bootstrap/carousel';
import 'bootstrap/collapse';
import 'bootstrap/dropdown';
import 'bootstrap/modal';
import 'bootstrap/scrollspy';
//import 'bootstrap/modal';
//import 'bootstrap/offcanvas';
//import 'bootstrap/scrollspy';
import 'bootstrap/tab';

Voir le fichier

@ -1,55 +1,55 @@
// ----------------------------------------------------------------------------
// Bootstrap v5
// ----------------------------------------------------------------------------
// see: https://getbootstrap.com/docs/5.0/customize/sass/
// see: https://getbootstrap.com/docs/5.1/customize/sass/
// Import all Bootstrap components
@import '~bootstrap/scss/bootstrap';
//@import '~bootstrap/scss/bootstrap';
// or import them individually
// Configuration
//@import "~bootstrap/scss/functions";
//@import "~bootstrap/scss/variables";
//@import "~bootstrap/scss/mixins";
//@import "~bootstrap/scss/utilities";
@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/mixins';
@import '~bootstrap/scss/utilities';
// Layout & components
//@import "~bootstrap/scss/root";
//@import "~bootstrap/scss/reboot";
//@import "~bootstrap/scss/type";
//@import "~bootstrap/scss/images";
//@import "~bootstrap/scss/containers";
//@import "~bootstrap/scss/grid";
//@import "~bootstrap/scss/tables";
//@import "~bootstrap/scss/forms";
//@import "~bootstrap/scss/buttons";
//@import "~bootstrap/scss/transitions";
//@import "~bootstrap/scss/dropdown";
//@import "~bootstrap/scss/button-group";
//@import "~bootstrap/scss/nav";
//@import "~bootstrap/scss/navbar";
//@import "~bootstrap/scss/card";
//@import "~bootstrap/scss/accordion";
//@import "~bootstrap/scss/breadcrumb";
//@import "~bootstrap/scss/pagination";
//@import "~bootstrap/scss/badge";
//@import "~bootstrap/scss/alert";
//@import "~bootstrap/scss/progress";
//@import "~bootstrap/scss/list-group";
//@import "~bootstrap/scss/close";
//@import "~bootstrap/scss/toasts";
//@import "~bootstrap/scss/modal";
//@import "~bootstrap/scss/tooltip";
//@import "~bootstrap/scss/popover";
//@import "~bootstrap/scss/carousel";
//@import "~bootstrap/scss/spinners";
//@import "~bootstrap/scss/offcanvas";
//@import "~bootstrap/scss/placeholders";
@import '~bootstrap/scss/root';
@import '~bootstrap/scss/reboot';
@import '~bootstrap/scss/type';
@import '~bootstrap/scss/images';
@import '~bootstrap/scss/containers';
@import '~bootstrap/scss/grid';
//@import '~bootstrap/scss/tables';
@import '~bootstrap/scss/forms';
@import '~bootstrap/scss/buttons';
@import '~bootstrap/scss/transitions';
@import '~bootstrap/scss/dropdown';
@import '~bootstrap/scss/button-group';
@import '~bootstrap/scss/nav';
@import '~bootstrap/scss/navbar';
@import '~bootstrap/scss/card';
@import '~bootstrap/scss/accordion';
@import '~bootstrap/scss/breadcrumb';
@import '~bootstrap/scss/pagination';
@import '~bootstrap/scss/badge';
@import '~bootstrap/scss/alert';
//@import '~bootstrap/scss/progress';
@import '~bootstrap/scss/list-group';
@import '~bootstrap/scss/close';
//@import '~bootstrap/scss/toasts';
//@import '~bootstrap/scss/modal';
//@import '~bootstrap/scss/tooltip';
//@import '~bootstrap/scss/popover';
@import '~bootstrap/scss/carousel';
//@import '~bootstrap/scss/spinners';
//@import '~bootstrap/scss/offcanvas';
//@import '~bootstrap/scss/placeholders';
// Helpers
//@import "~bootstrap/scss/helpers";
@import '~bootstrap/scss/helpers';
// Utilities
//@import "~bootstrap/scss/utilities/api";
@import '~bootstrap/scss/utilities/api';

Voir le fichier

@ -79,15 +79,9 @@
<li><a class="d-inline-flex align-items-center rounded" href="#carousel">Carousel</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#dropdowns">Dropdowns</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#list-group">List group</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#modal">Modal</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#navs">Navs</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#navbar">Navbar</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#pagination">Pagination</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#popovers">Popovers</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#progress">Progress</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#scrollspy">Scrollspy</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#toasts">Toasts</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#tooltips">Tooltips</a></li>
</ul>
</li>
</ul>
@ -1023,31 +1017,6 @@
</div>
</div>
</article>
<article class="my-3" id="modal">
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
<h3>Modal</h3>
<a class="d-flex align-items-center" href="https://getbootstrap.com/docs/5.1/components/modal/">Documentation</a>
</div>
<div>
<div class="bd-example">
<div class="d-flex justify-content-between flex-wrap">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalDefault">
Launch demo modal
</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdropLive">
Launch static backdrop modal
</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalCenteredScrollable">
Vertically centered scrollable modal
</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreen">
Full screen
</button>
</div>
</div>
</div>
</article>
<article class="my-3" id="navs">
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
<h3>Navs</h3>
@ -1249,221 +1218,9 @@
</div>
</div>
</article>
<article class="my-3" id="popovers">
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
<h3>Popovers</h3>
<a class="d-flex align-items-center" href="https://getbootstrap.com/docs/5.1/components/popovers/">Documentation</a>
</div>
<div>
<div class="bd-example">
<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
</div>
<div class="bd-example">
<button type="button" class="btn btn-primary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on top
</button>
<button type="button" class="btn btn-primary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on end
</button>
<button type="button" class="btn btn-primary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on bottom
</button>
<button type="button" class="btn btn-primary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on start
</button>
</div>
</div>
</article>
<article class="my-3" id="progress">
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
<h3>Progress</h3>
<a class="d-flex align-items-center" href="https://getbootstrap.com/docs/5.1/components/progress/">Documentation</a>
</div>
<div>
<div class="bd-example">
<div class="progress mb-3">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
</div>
<div class="progress mb-3">
<div class="progress-bar bg-success w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
<div class="progress mb-3">
<div class="progress-bar bg-blue text-dark w-50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>
</div>
<div class="progress mb-3">
<div class="progress-bar bg-red text-dark w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div>
</div>
<div class="progress">
<div class="progress-bar bg-yellow w-100" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">100%</div>
</div>
</div>
<div class="bd-example">
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar progress-bar-striped progress-bar-animated bg-blue" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</article>
<article class="my-3" id="scrollspy">
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
<h3>Scrollspy</h3>
<a class="d-flex align-items-center" href="https://getbootstrap.com/docs/5.1/components/scrollspy/">Documentation</a>
</div>
<div>
<div class="bd-example">
<nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#scrollspyHeading1">First</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading2">Second</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#scrollspyHeading3">Third</a></li>
<li><a class="dropdown-item" href="#scrollspyHeading4">Fourth</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#scrollspyHeading5">Fifth</a></li>
</ul>
</li>
</ul>
</nav>
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example" tabindex="0">
<h4 id="scrollspyHeading1">First heading</h4>
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
<h4 id="scrollspyHeading2">Second heading</h4>
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
<h4 id="scrollspyHeading3">Third heading</h4>
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
<h4 id="scrollspyHeading4">Fourth heading</h4>
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
<h4 id="scrollspyHeading5">Fifth heading</h4>
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
</div>
</div>
</div>
</article>
<article class="my-3" id="toasts">
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
<h3>Toasts</h3>
<a class="d-flex align-items-center" href="https://getbootstrap.com/docs/5.1/components/toasts/">Documentation</a>
</div>
<div>
<div class="bd-example bg-dark p-5 align-items-center">
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<svg class="bd-placeholder-img rounded me-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#007aff"/></svg>
<strong class="me-auto">Bootstrap</strong>
<small class="text-muted">11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
</div>
</div>
</article>
<article class="mt-3 mb-5 pb-5" id="tooltips">
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
<h3>Tooltips</h3>
<a class="d-flex align-items-center" href="https://getbootstrap.com/docs/5.1/components/tooltips/">Documentation</a>
</div>
<div>
<div class="bd-example tooltip-demo">
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">Tooltip on top</button>
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on end">Tooltip on end</button>
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on start">Tooltip on start</button>
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">Tooltip with HTML</button>
</div>
</div>
</article>
</section>
</div>
<div class="modal fade" id="exampleModalDefault" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="staticBackdropLive" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLiveLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLiveLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>I will not close if you click outside me. Don't even try to press escape key.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Understood</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="exampleModalCenteredScrollable" tabindex="-1" aria-labelledby="exampleModalCenteredScrollableTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalCenteredScrollableTitle">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>This is some placeholder content to show the scrolling behavior for modals. We use repeated line breaks to demonstrate how content can exceed minimum inner height, thereby showing inner scrolling. When content becomes longer than the prefedined max-height of modal, content will be cropped and scrollable within the modal.</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p>This content should appear at the bottom after you scroll.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="exampleModalFullscreen" tabindex="-1" aria-labelledby="exampleModalFullscreenLabel" aria-hidden="true">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title h4" id="exampleModalFullscreenLabel">Full screen modal</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="/static/main.js"></script>
<script src="/styleguide/cheatsheet.js"></script>
</body>