bootstrap: swap BS4 (alexwine) CSS for bootstrap@5 npm
Completes the Bootstrap 4->5 migration now that every jQuery/BS4 widget is React
(navbar, carousel, dropdowns) — plus the feedback toggle here (Feedback.js:
global `$('#feedback-form').toggle()` -> React state).
- Load Bootstrap 5 CSS from the `bootstrap` npm package in client/index.js
(imported first so app + component styles and react-bootstrap override it).
- Remove the `alexwine:bootstrap-4` meteor package (BS4 CSS + jQuery + BS4 JS).
jQuery for jquery-validation still comes from the npm `jquery` dep.
- Utility renames to BS5: ml-auto->ms-auto, float-right->float-end,
btn-block->w-100, data-toggle->data-bs-toggle (FromNow tooltip).
- forms.scss `.form-label` is no longer a shim (BS5 ships it); comment updated.
Full-app build boots clean; server suite 36 passing. Needs a visual staging pass
across all pages (BS4->5 shifts grid gutters/typography); forms should improve
since react-bootstrap v2 already emitted BS5 markup.
This commit is contained in:
parent
9ff9abacc3
commit
bddfb392c1
12 changed files with 63 additions and 38 deletions
|
|
@ -18,6 +18,7 @@ import './Feedback.scss';
|
|||
class Feedback extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = { open: false };
|
||||
this.handleSubmit = this.handleSubmit.bind(this);
|
||||
this.onTabClick = this.onTabClick.bind(this);
|
||||
}
|
||||
|
|
@ -50,7 +51,9 @@ class Feedback extends Component {
|
|||
}
|
||||
|
||||
onTabClick() {
|
||||
$('#feedback-form').toggle('slide');
|
||||
// Was `$('#feedback-form').toggle('slide')` — global jQuery from the BS4
|
||||
// meteor package. React state instead, so nothing depends on that global.
|
||||
this.setState(s => ({ open: !s.open }));
|
||||
}
|
||||
|
||||
handleSubmit() {
|
||||
|
|
@ -76,7 +79,7 @@ class Feedback extends Component {
|
|||
<div>
|
||||
{ !this.props.isHome &&
|
||||
<div id="feedback">
|
||||
<div id="feedback-form" ref={formdiv => (this.formdiv = formdiv)} style={{ display: 'none' }} className="card">
|
||||
<div id="feedback-form" ref={formdiv => (this.formdiv = formdiv)} style={{ display: this.state.open ? 'block' : 'none' }} className="card">
|
||||
<form
|
||||
ref={form => (this.form = form)}
|
||||
className="form card-body"
|
||||
|
|
@ -109,7 +112,7 @@ class Feedback extends Component {
|
|||
/>
|
||||
<Form.Control.Feedback />
|
||||
</Form.Group>
|
||||
<Button type="submit" variant="success" className="float-right" id={testId('sendFeedbackBtn')} >
|
||||
<Button type="submit" variant="success" className="float-end" id={testId('sendFeedbackBtn')} >
|
||||
{t('Enviar')}
|
||||
</Button>
|
||||
</form>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue