M-Labs/web2019
5
0
Fork 2
Code Issues 20 Pull Requests 3 Releases Wiki Activity

Fix dropdown, accordion and modal

Browse Source 
Signed-off-by: Egor Savkin <es@m-labs.hk>
This commit is contained in:
Egor Savkin 2023-07-10 17:46:45 +08:00
parent 85429b64f8
commit 76dc20c798
5 changed files with 115 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
static/css/order-hardware.css
View File

@ -13,19 +13,31 @@
}
#accordion_categories,
#accordion_categories .card {
#accordion_categories .accordion-header,
#accordion_categories .accordion-button,
#accordion_categories .accordion-item {
background-color: inherit;
border: none;
}
#accordion_categories .card:not(:first-child) {
.accordion-button:focus {
box-shadow: none;
border-color: rgba(0,0,0,.125);
}
#accordion_categories .accordion-item:not(:first-child) {
border-top: thin rgba(255,255, 255, 20%) solid ;
border-radius: 0;
}
#accordion_categories .card-header {
#accordion_categories .accordion-header {
padding: 0;
}
#accordion_categories .accordion-button:after {
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
}
#accordion_categories button {
color: white;
font-weight: bold;
@ -33,11 +45,11 @@
padding: .75rem 2rem;
}
#accordion_categories .card .card-body {
#accordion_categories .accordion .accordion-body {
padding: 0;
}
#accordion_categories .card-header:hover {
#accordion_categories .accordion-header:hover {
background-color: #1f4f68;
transition: 0.3s;
text-decoration: none;

2
static/js/shop.bundle.js
View File

File diff suppressed because one or more lines are too long

16
static/js/shop.jsx
View File

@ -1514,16 +1514,16 @@ class Backlog extends React.PureComponent {
}));
const groups = ordered_groups.map((group, g_index) => {
return (
<div className="card">
<h2 className="card-header">
<button className="btn btn-link btn-block text-left " type="button" data-toggle="collapse"
data-target={`#collapse${g_index}`} aria-expanded="true" aria-controls={`collapse${g_index}`}>
<div className="accordion-item">
<h2 className="accordion-header">
<button className="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target={`#collapse${g_index}`} aria-expanded="true" aria-controls={`collapse${g_index}`}>
{group.name}
</button>
</h2>
<div id={`collapse${g_index}`} className="collapse" aria-labelledby="headingOne"
data-parent="#accordion_categories">
<div className="card-body">
<div id={`collapse${g_index}`} className="accordion-collapse collapse" aria-labelledby="headingOne"
data-bs-parent="#accordion_categories">
<div className="accordion-body">
{group.items.map(item => (
<ProductItem
key={item.id}
@ -1565,7 +1565,7 @@ class Backlog extends React.PureComponent {
</div>
) : null}
<div className="accordion" id="accordion_categories">
<div className="accordion accordion-flush" id="accordion_categories">
{groups}
</div>

173
static/js/shop.min.js vendored
View File

@ -3,6 +3,7 @@
var _react = _interopRequireDefault(require("react"));
var _axios = _interopRequireDefault(require("axios"));
var _reactDom = _interopRequireDefault(require("react-dom"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _reactBeautifulDnd = require("react-beautiful-dnd");
var _uuid = require("uuid");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@ -28,7 +29,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } //import PropTypes from "prop-types";
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
var data = window.shop_data;
var productStyle = function productStyle(style, snapshot, removeAnim, hovered, selected) {
var custom = {
@ -347,17 +348,17 @@ var Layout = /*#__PURE__*/function (_React$PureComponent) {
key: "propTypes",
get: function get() {
return {
aside: PropTypes.any,
main: PropTypes.any,
mobileSideMenuShouldOpen: PropTypes.bool,
isMobile: PropTypes.bool,
newCardJustAdded: PropTypes.bool,
onClickToggleMobileSideMenu: PropTypes.func,
onClickCloseRFQFeedback: PropTypes.func,
RFQBodyType: PropTypes.string,
RFQBodyOrder: PropTypes.string,
onClickLoadCustomConf: PropTypes.func,
items: PropTypes.object
aside: _propTypes["default"].any,
main: _propTypes["default"].any,
mobileSideMenuShouldOpen: _propTypes["default"].bool,
isMobile: _propTypes["default"].bool,
newCardJustAdded: _propTypes["default"].bool,
onClickToggleMobileSideMenu: _propTypes["default"].func,
onClickCloseRFQFeedback: _propTypes["default"].func,
RFQBodyType: _propTypes["default"].string,
RFQBodyOrder: _propTypes["default"].string,
onClickLoadCustomConf: _propTypes["default"].func,
items: _propTypes["default"].object
};
}
}, {
@ -456,16 +457,16 @@ var ProductItem = /*#__PURE__*/function (_React$PureComponent2) {
key: "propTypes",
get: function get() {
return {
id: PropTypes.string.isRequired,
name: PropTypes.string.isRequired,
name_codename: PropTypes.string,
price: PropTypes.number.isRequired,
currency: PropTypes.string.isRequired,
image: PropTypes.string.isRequired,
specs: PropTypes.array,
datasheet_file: PropTypes.string,
datasheet_name: PropTypes.string,
onClickAddItem: PropTypes.func
id: _propTypes["default"].string.isRequired,
name: _propTypes["default"].string.isRequired,
name_codename: _propTypes["default"].string,
price: _propTypes["default"].number.isRequired,
currency: _propTypes["default"].string.isRequired,
image: _propTypes["default"].string.isRequired,
specs: _propTypes["default"].array,
datasheet_file: _propTypes["default"].string,
datasheet_name: _propTypes["default"].string,
onClickAddItem: _propTypes["default"].func
};
}
}]);
@ -652,16 +653,16 @@ var ProductCartItem = /*#__PURE__*/function (_React$PureComponent3) {
key: "propTypes",
get: function get() {
return {
isMobile: PropTypes.bool,
hovered: PropTypes.bool,
index: PropTypes.number.isRequired,
model: PropTypes.object.isRequired,
data: PropTypes.object,
onToggleProgress: PropTypes.func,
onToggleWarning: PropTypes.func,
onToggleOverlayRemove: PropTypes.func,
onClickRemoveItem: PropTypes.func,
shouldTooltipWarningClassInverted: PropTypes.bool
isMobile: _propTypes["default"].bool,
hovered: _propTypes["default"].bool,
index: _propTypes["default"].number.isRequired,
model: _propTypes["default"].object.isRequired,
data: _propTypes["default"].object,
onToggleProgress: _propTypes["default"].func,
onToggleWarning: _propTypes["default"].func,
onToggleOverlayRemove: _propTypes["default"].func,
onClickRemoveItem: _propTypes["default"].func,
shouldTooltipWarningClassInverted: _propTypes["default"].bool
};
}
}, {
@ -711,9 +712,9 @@ var FakePlaceholder = /*#__PURE__*/function (_React$PureComponent4) {
key: "propTypes",
get: function get() {
return {
isDraggingOver: PropTypes.bool,
nbrSlots: PropTypes.number.isRequired,
items: PropTypes.array.isRequired
isDraggingOver: _propTypes["default"].bool,
nbrSlots: _propTypes["default"].number.isRequired,
items: _propTypes["default"].array.isRequired
};
}
}]);
@ -786,14 +787,14 @@ var Cart = /*#__PURE__*/function (_React$PureComponent5) {
key: "propTypes",
get: function get() {
return {
isMobile: PropTypes.bool,
nbrSlots: PropTypes.number,
itemHovered: PropTypes.string,
data: PropTypes.object.isRequired,
onToggleProgress: PropTypes.func,
onToggleWarning: PropTypes.func,
onToggleOverlayRemove: PropTypes.func,
onClickRemoveItem: PropTypes.func
isMobile: _propTypes["default"].bool,
nbrSlots: _propTypes["default"].number,
itemHovered: _propTypes["default"].string,
data: _propTypes["default"].object.isRequired,
onToggleProgress: _propTypes["default"].func,
onToggleWarning: _propTypes["default"].func,
onToggleOverlayRemove: _propTypes["default"].func,
onClickRemoveItem: _propTypes["default"].func
};
}
}]);
@ -843,9 +844,9 @@ var CrateMode = /*#__PURE__*/function (_React$PureComponent6) {
key: "propTypes",
get: function get() {
return {
items: PropTypes.array.isRequired,
mode: PropTypes.string.isRequired,
onClickMode: PropTypes.func
items: _propTypes["default"].array.isRequired,
mode: _propTypes["default"].string.isRequired,
onClickMode: _propTypes["default"].func
};
}
}]);
@ -890,8 +891,8 @@ var Crate = /*#__PURE__*/function (_React$PureComponent7) {
key: "propTypes",
get: function get() {
return {
rules: PropTypes.array,
cart: PropTypes.element
rules: _propTypes["default"].array,
cart: _propTypes["default"].element
};
}
}]);
@ -949,15 +950,15 @@ var OrderPanel = /*#__PURE__*/function (_React$PureComponent8) {
key: "propTypes",
get: function get() {
return {
title: PropTypes.string,
description: PropTypes.string,
crateMode: PropTypes.element,
crate: PropTypes.element,
summaryPrice: PropTypes.element,
form: PropTypes.element,
isMobile: PropTypes.bool,
onClickToggleMobileSideMenu: PropTypes.func,
onClickOpenImport: PropTypes.func
title: _propTypes["default"].string,
description: _propTypes["default"].string,
crateMode: _propTypes["default"].element,
crate: _propTypes["default"].element,
summaryPrice: _propTypes["default"].element,
form: _propTypes["default"].element,
isMobile: _propTypes["default"].bool,
onClickToggleMobileSideMenu: _propTypes["default"].func,
onClickOpenImport: _propTypes["default"].func
};
}
}]);
@ -1147,9 +1148,9 @@ var OrderForm = /*#__PURE__*/function (_React$PureComponent9) {
key: "propTypes",
get: function get() {
return {
isProcessing: PropTypes.bool,
isProcessingComplete: PropTypes.bool,
onClickSubmit: PropTypes.func
isProcessing: _propTypes["default"].bool,
isProcessingComplete: _propTypes["default"].bool,
onClickSubmit: _propTypes["default"].func
};
}
}]);
@ -1316,16 +1317,16 @@ var OrderSumary = /*#__PURE__*/function (_React$PureComponent10) {
key: "propTypes",
get: function get() {
return {
currency: PropTypes.string,
modes: PropTypes.array,
currentMode: PropTypes.string,
summary: PropTypes.array,
itemsData: PropTypes.array,
onDeleteItem: PropTypes.func,
onDeleteAllItems: PropTypes.func,
onMouseEnterItem: PropTypes.func,
onMouseLeaveItem: PropTypes.func,
onClickSelectItem: PropTypes.func
currency: _propTypes["default"].string,
modes: _propTypes["default"].array,
currentMode: _propTypes["default"].string,
summary: _propTypes["default"].array,
itemsData: _propTypes["default"].array,
onDeleteItem: _propTypes["default"].func,
onDeleteAllItems: _propTypes["default"].func,
onMouseEnterItem: _propTypes["default"].func,
onMouseLeaveItem: _propTypes["default"].func,
onClickSelectItem: _propTypes["default"].func
};
}
}]);
@ -1361,23 +1362,23 @@ var Backlog = /*#__PURE__*/function (_React$PureComponent11) {
});
var groups = ordered_groups.map(function (group, g_index) {
return /*#__PURE__*/_react["default"].createElement("div", {
className: "card"
className: "accordion-item"
}, /*#__PURE__*/_react["default"].createElement("h2", {
className: "card-header"
className: "accordion-header"
}, /*#__PURE__*/_react["default"].createElement("button", {
className: "btn btn-link btn-block text-left ",
className: "accordion-button collapsed",
type: "button",
"data-toggle": "collapse",
"data-target": "#collapse".concat(g_index),
"data-bs-toggle": "collapse",
"data-bs-target": "#collapse".concat(g_index),
"aria-expanded": "true",
"aria-controls": "collapse".concat(g_index)
}, group.name)), /*#__PURE__*/_react["default"].createElement("div", {
id: "collapse".concat(g_index),
className: "collapse",
className: "accordion-collapse collapse",
"aria-labelledby": "headingOne",
"data-parent": "#accordion_categories"
"data-bs-parent": "#accordion_categories"
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "card-body"
className: "accordion-body"
}, group.items.map(function (item) {
return /*#__PURE__*/_react["default"].createElement(ProductItem, {
key: item.id,
@ -1409,7 +1410,7 @@ var Backlog = /*#__PURE__*/function (_React$PureComponent11) {
src: "/images/shop/icon-close-white.svg",
alt: "add"
}))) : null, /*#__PURE__*/_react["default"].createElement("div", {
className: "accordion",
className: "accordion accordion-flush",
id: "accordion_categories"
}, groups), provided.placeholder && /*#__PURE__*/_react["default"].createElement("div", {
style: {
@ -1422,12 +1423,12 @@ var Backlog = /*#__PURE__*/function (_React$PureComponent11) {
key: "propTypes",
get: function get() {
return {
currency: PropTypes.string,
data: PropTypes.object.isRequired,
items: PropTypes.object,
isMobile: PropTypes.bool,
onClickAddItem: PropTypes.func,
onClickToggleMobileSideMenu: PropTypes.func
currency: _propTypes["default"].string,
data: _propTypes["default"].object.isRequired,
items: _propTypes["default"].object,
isMobile: _propTypes["default"].bool,
onClickAddItem: _propTypes["default"].func,
onClickToggleMobileSideMenu: _propTypes["default"].func
};
}
}, {
@ -2179,7 +2180,7 @@ var Shop = /*#__PURE__*/function (_React$PureComponent12) {
key: "propTypes",
get: function get() {
return {
data: PropTypes.object.isRequired
data: _propTypes["default"].object.isRequired
};
}
}]);

4
templates/_base.html
View File

@ -77,7 +77,7 @@
{% if subsection.pages|length > 0 and subsection.title != 'Other' %}
<li class="nav-item ml-0 ml-md-4 dropdown {% if root_current_path == root_section_path %}active{% endif %}">
<a class="nav-link dropdown-toggle {% if current_path == subsection.path %}active{% endif %}" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<a class="nav-link dropdown-toggle {% if current_path == subsection.path %}active{% endif %}" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{ subsection.title }}
</a>
<div class="dropdown-menu shadow-none shadow-lg text-left text-lg-left" aria-labelledby="navbarDropdown">
@ -175,7 +175,7 @@
<img src="" id="enlarged" class="img-fluid">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>