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,
#accordion_categories .card { #accordion_categories .accordion-header,
#accordion_categories .accordion-button,
#accordion_categories .accordion-item {
background-color: inherit; 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-top: thin rgba(255,255, 255, 20%) solid ;
border-radius: 0; border-radius: 0;
} }
#accordion_categories .card-header { #accordion_categories .accordion-header {
padding: 0; 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 { #accordion_categories button {
color: white; color: white;
font-weight: bold; font-weight: bold;
@ -33,11 +45,11 @@
padding: .75rem 2rem; padding: .75rem 2rem;
} }
#accordion_categories .card .card-body { #accordion_categories .accordion .accordion-body {
padding: 0; padding: 0;
} }
#accordion_categories .card-header:hover { #accordion_categories .accordion-header:hover {
background-color: #1f4f68; background-color: #1f4f68;
transition: 0.3s; transition: 0.3s;
text-decoration: none; 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) => { const groups = ordered_groups.map((group, g_index) => {
return ( return (
<div className="card"> <div className="accordion-item">
<h2 className="card-header"> <h2 className="accordion-header">
<button className="btn btn-link btn-block text-left " type="button" data-toggle="collapse" <button className="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-target={`#collapse${g_index}`} aria-expanded="true" aria-controls={`collapse${g_index}`}> data-bs-target={`#collapse${g_index}`} aria-expanded="true" aria-controls={`collapse${g_index}`}>
{group.name} {group.name}
</button> </button>
</h2> </h2>
<div id={`collapse${g_index}`} className="collapse" aria-labelledby="headingOne" <div id={`collapse${g_index}`} className="accordion-collapse collapse" aria-labelledby="headingOne"
data-parent="#accordion_categories"> data-bs-parent="#accordion_categories">
<div className="card-body"> <div className="accordion-body">
{group.items.map(item => ( {group.items.map(item => (
<ProductItem <ProductItem
key={item.id} key={item.id}
@ -1565,7 +1565,7 @@ class Backlog extends React.PureComponent {
</div> </div>
) : null} ) : null}
<div className="accordion" id="accordion_categories"> <div className="accordion accordion-flush" id="accordion_categories">
{groups} {groups}
</div> </div>

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

@ -3,6 +3,7 @@
var _react = _interopRequireDefault(require("react")); var _react = _interopRequireDefault(require("react"));
var _axios = _interopRequireDefault(require("axios")); var _axios = _interopRequireDefault(require("axios"));
var _reactDom = _interopRequireDefault(require("react-dom")); var _reactDom = _interopRequireDefault(require("react-dom"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _reactBeautifulDnd = require("react-beautiful-dnd"); var _reactBeautifulDnd = require("react-beautiful-dnd");
var _uuid = require("uuid"); var _uuid = require("uuid");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } 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 _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 _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 _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 data = window.shop_data;
var productStyle = function productStyle(style, snapshot, removeAnim, hovered, selected) { var productStyle = function productStyle(style, snapshot, removeAnim, hovered, selected) {
var custom = { var custom = {
@ -347,17 +348,17 @@ var Layout = /*#__PURE__*/function (_React$PureComponent) {
key: "propTypes", key: "propTypes",
get: function get() { get: function get() {
return { return {
aside: PropTypes.any, aside: _propTypes["default"].any,
main: PropTypes.any, main: _propTypes["default"].any,
mobileSideMenuShouldOpen: PropTypes.bool, mobileSideMenuShouldOpen: _propTypes["default"].bool,
isMobile: PropTypes.bool, isMobile: _propTypes["default"].bool,
newCardJustAdded: PropTypes.bool, newCardJustAdded: _propTypes["default"].bool,
onClickToggleMobileSideMenu: PropTypes.func, onClickToggleMobileSideMenu: _propTypes["default"].func,
onClickCloseRFQFeedback: PropTypes.func, onClickCloseRFQFeedback: _propTypes["default"].func,
RFQBodyType: PropTypes.string, RFQBodyType: _propTypes["default"].string,
RFQBodyOrder: PropTypes.string, RFQBodyOrder: _propTypes["default"].string,
onClickLoadCustomConf: PropTypes.func, onClickLoadCustomConf: _propTypes["default"].func,
items: PropTypes.object items: _propTypes["default"].object
}; };
} }
}, { }, {
@ -456,16 +457,16 @@ var ProductItem = /*#__PURE__*/function (_React$PureComponent2) {
key: "propTypes", key: "propTypes",
get: function get() { get: function get() {
return { return {
id: PropTypes.string.isRequired, id: _propTypes["default"].string.isRequired,
name: PropTypes.string.isRequired, name: _propTypes["default"].string.isRequired,
name_codename: PropTypes.string, name_codename: _propTypes["default"].string,
price: PropTypes.number.isRequired, price: _propTypes["default"].number.isRequired,
currency: PropTypes.string.isRequired, currency: _propTypes["default"].string.isRequired,
image: PropTypes.string.isRequired, image: _propTypes["default"].string.isRequired,
specs: PropTypes.array, specs: _propTypes["default"].array,
datasheet_file: PropTypes.string, datasheet_file: _propTypes["default"].string,
datasheet_name: PropTypes.string, datasheet_name: _propTypes["default"].string,
onClickAddItem: PropTypes.func onClickAddItem: _propTypes["default"].func
}; };
} }
}]); }]);
@ -652,16 +653,16 @@ var ProductCartItem = /*#__PURE__*/function (_React$PureComponent3) {
key: "propTypes", key: "propTypes",
get: function get() { get: function get() {
return { return {
isMobile: PropTypes.bool, isMobile: _propTypes["default"].bool,
hovered: PropTypes.bool, hovered: _propTypes["default"].bool,
index: PropTypes.number.isRequired, index: _propTypes["default"].number.isRequired,
model: PropTypes.object.isRequired, model: _propTypes["default"].object.isRequired,
data: PropTypes.object, data: _propTypes["default"].object,
onToggleProgress: PropTypes.func, onToggleProgress: _propTypes["default"].func,
onToggleWarning: PropTypes.func, onToggleWarning: _propTypes["default"].func,
onToggleOverlayRemove: PropTypes.func, onToggleOverlayRemove: _propTypes["default"].func,
onClickRemoveItem: PropTypes.func, onClickRemoveItem: _propTypes["default"].func,
shouldTooltipWarningClassInverted: PropTypes.bool shouldTooltipWarningClassInverted: _propTypes["default"].bool
}; };
} }
}, { }, {
@ -711,9 +712,9 @@ var FakePlaceholder = /*#__PURE__*/function (_React$PureComponent4) {
key: "propTypes", key: "propTypes",
get: function get() { get: function get() {
return { return {
isDraggingOver: PropTypes.bool, isDraggingOver: _propTypes["default"].bool,
nbrSlots: PropTypes.number.isRequired, nbrSlots: _propTypes["default"].number.isRequired,
items: PropTypes.array.isRequired items: _propTypes["default"].array.isRequired
}; };
} }
}]); }]);
@ -786,14 +787,14 @@ var Cart = /*#__PURE__*/function (_React$PureComponent5) {
key: "propTypes", key: "propTypes",
get: function get() { get: function get() {
return { return {
isMobile: PropTypes.bool, isMobile: _propTypes["default"].bool,
nbrSlots: PropTypes.number, nbrSlots: _propTypes["default"].number,
itemHovered: PropTypes.string, itemHovered: _propTypes["default"].string,
data: PropTypes.object.isRequired, data: _propTypes["default"].object.isRequired,
onToggleProgress: PropTypes.func, onToggleProgress: _propTypes["default"].func,
onToggleWarning: PropTypes.func, onToggleWarning: _propTypes["default"].func,
onToggleOverlayRemove: PropTypes.func, onToggleOverlayRemove: _propTypes["default"].func,
onClickRemoveItem: PropTypes.func onClickRemoveItem: _propTypes["default"].func
}; };
} }
}]); }]);
@ -843,9 +844,9 @@ var CrateMode = /*#__PURE__*/function (_React$PureComponent6) {
key: "propTypes", key: "propTypes",
get: function get() { get: function get() {
return { return {
items: PropTypes.array.isRequired, items: _propTypes["default"].array.isRequired,
mode: PropTypes.string.isRequired, mode: _propTypes["default"].string.isRequired,
onClickMode: PropTypes.func onClickMode: _propTypes["default"].func
}; };
} }
}]); }]);
@ -890,8 +891,8 @@ var Crate = /*#__PURE__*/function (_React$PureComponent7) {
key: "propTypes", key: "propTypes",
get: function get() { get: function get() {
return { return {
rules: PropTypes.array, rules: _propTypes["default"].array,
cart: PropTypes.element cart: _propTypes["default"].element
}; };
} }
}]); }]);
@ -949,15 +950,15 @@ var OrderPanel = /*#__PURE__*/function (_React$PureComponent8) {
key: "propTypes", key: "propTypes",
get: function get() { get: function get() {
return { return {
title: PropTypes.string, title: _propTypes["default"].string,
description: PropTypes.string, description: _propTypes["default"].string,
crateMode: PropTypes.element, crateMode: _propTypes["default"].element,
crate: PropTypes.element, crate: _propTypes["default"].element,
summaryPrice: PropTypes.element, summaryPrice: _propTypes["default"].element,
form: PropTypes.element, form: _propTypes["default"].element,
isMobile: PropTypes.bool, isMobile: _propTypes["default"].bool,
onClickToggleMobileSideMenu: PropTypes.func, onClickToggleMobileSideMenu: _propTypes["default"].func,
onClickOpenImport: PropTypes.func onClickOpenImport: _propTypes["default"].func
}; };
} }
}]); }]);
@ -1147,9 +1148,9 @@ var OrderForm = /*#__PURE__*/function (_React$PureComponent9) {
key: "propTypes", key: "propTypes",
get: function get() { get: function get() {
return { return {
isProcessing: PropTypes.bool, isProcessing: _propTypes["default"].bool,
isProcessingComplete: PropTypes.bool, isProcessingComplete: _propTypes["default"].bool,
onClickSubmit: PropTypes.func onClickSubmit: _propTypes["default"].func
}; };
} }
}]); }]);
@ -1316,16 +1317,16 @@ var OrderSumary = /*#__PURE__*/function (_React$PureComponent10) {
key: "propTypes", key: "propTypes",
get: function get() { get: function get() {
return { return {
currency: PropTypes.string, currency: _propTypes["default"].string,
modes: PropTypes.array, modes: _propTypes["default"].array,
currentMode: PropTypes.string, currentMode: _propTypes["default"].string,
summary: PropTypes.array, summary: _propTypes["default"].array,
itemsData: PropTypes.array, itemsData: _propTypes["default"].array,
onDeleteItem: PropTypes.func, onDeleteItem: _propTypes["default"].func,
onDeleteAllItems: PropTypes.func, onDeleteAllItems: _propTypes["default"].func,
onMouseEnterItem: PropTypes.func, onMouseEnterItem: _propTypes["default"].func,
onMouseLeaveItem: PropTypes.func, onMouseLeaveItem: _propTypes["default"].func,
onClickSelectItem: PropTypes.func onClickSelectItem: _propTypes["default"].func
}; };
} }
}]); }]);
@ -1361,23 +1362,23 @@ var Backlog = /*#__PURE__*/function (_React$PureComponent11) {
}); });
var groups = ordered_groups.map(function (group, g_index) { var groups = ordered_groups.map(function (group, g_index) {
return /*#__PURE__*/_react["default"].createElement("div", { return /*#__PURE__*/_react["default"].createElement("div", {
className: "card" className: "accordion-item"
}, /*#__PURE__*/_react["default"].createElement("h2", { }, /*#__PURE__*/_react["default"].createElement("h2", {
className: "card-header" className: "accordion-header"
}, /*#__PURE__*/_react["default"].createElement("button", { }, /*#__PURE__*/_react["default"].createElement("button", {
className: "btn btn-link btn-block text-left ", className: "accordion-button collapsed",
type: "button", type: "button",
"data-toggle": "collapse", "data-bs-toggle": "collapse",
"data-target": "#collapse".concat(g_index), "data-bs-target": "#collapse".concat(g_index),
"aria-expanded": "true", "aria-expanded": "true",
"aria-controls": "collapse".concat(g_index) "aria-controls": "collapse".concat(g_index)
}, group.name)), /*#__PURE__*/_react["default"].createElement("div", { }, group.name)), /*#__PURE__*/_react["default"].createElement("div", {
id: "collapse".concat(g_index), id: "collapse".concat(g_index),
className: "collapse", className: "accordion-collapse collapse",
"aria-labelledby": "headingOne", "aria-labelledby": "headingOne",
"data-parent": "#accordion_categories" "data-bs-parent": "#accordion_categories"
}, /*#__PURE__*/_react["default"].createElement("div", { }, /*#__PURE__*/_react["default"].createElement("div", {
className: "card-body" className: "accordion-body"
}, group.items.map(function (item) { }, group.items.map(function (item) {
return /*#__PURE__*/_react["default"].createElement(ProductItem, { return /*#__PURE__*/_react["default"].createElement(ProductItem, {
key: item.id, key: item.id,
@ -1409,7 +1410,7 @@ var Backlog = /*#__PURE__*/function (_React$PureComponent11) {
src: "/images/shop/icon-close-white.svg", src: "/images/shop/icon-close-white.svg",
alt: "add" alt: "add"
}))) : null, /*#__PURE__*/_react["default"].createElement("div", { }))) : null, /*#__PURE__*/_react["default"].createElement("div", {
className: "accordion", className: "accordion accordion-flush",
id: "accordion_categories" id: "accordion_categories"
}, groups), provided.placeholder && /*#__PURE__*/_react["default"].createElement("div", { }, groups), provided.placeholder && /*#__PURE__*/_react["default"].createElement("div", {
style: { style: {
@ -1422,12 +1423,12 @@ var Backlog = /*#__PURE__*/function (_React$PureComponent11) {
key: "propTypes", key: "propTypes",
get: function get() { get: function get() {
return { return {
currency: PropTypes.string, currency: _propTypes["default"].string,
data: PropTypes.object.isRequired, data: _propTypes["default"].object.isRequired,
items: PropTypes.object, items: _propTypes["default"].object,
isMobile: PropTypes.bool, isMobile: _propTypes["default"].bool,
onClickAddItem: PropTypes.func, onClickAddItem: _propTypes["default"].func,
onClickToggleMobileSideMenu: PropTypes.func onClickToggleMobileSideMenu: _propTypes["default"].func
}; };
} }
}, { }, {
@ -2179,7 +2180,7 @@ var Shop = /*#__PURE__*/function (_React$PureComponent12) {
key: "propTypes", key: "propTypes",
get: function get() { get: function get() {
return { 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' %} {% 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 %}"> <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 }} {{ subsection.title }}
</a> </a>
<div class="dropdown-menu shadow-none shadow-lg text-left text-lg-left" aria-labelledby="navbarDropdown"> <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"> <img src="" id="enlarged" class="img-fluid">
</div> </div>
<div class="modal-footer"> <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> </div>
</div> </div>