Merge pull request #3116 from ccnmtl/expression-style

Adjust expression styles to fill column width

Author: ndittren

media/js/src/editors/TemplateGraphEditor.jsx

@@ -22,11 +22,11 @@ export default class TemplateGraphEditor extends React.Component {
     render() {
         return (
             <>
-                <div className="d-flex flex-wrap">
+                <div className="d-flex flex-column">
                     <div className="row">
-                        <div className="col">
+                        <div className="col d-flex">
                             <label
-                                className="form-check-label me-2"
+                                className="form-check-label me-2 flex-shrink-1 d-flex align-self-center"
                                 htmlFor="gExpression">
                                 <MathJaxProvider>
                                     <MathJaxFormula formula="$$y = $$" />
@@ -35,6 +35,7 @@ export default class TemplateGraphEditor extends React.Component {
                             <EditableControl
                                 id="gExpression"
                                 name="Expression"
+                                className="w-100"
                                 value={this.props.gExpression}
                                 valueEditable={true}
                                 onBlur={true}
@@ -49,11 +50,11 @@ export default class TemplateGraphEditor extends React.Component {
                     </div>
                 </div>
 
-                <div className="d-flex flex-wrap mt-2">
+                <div className="d-flex flex-column mt-2">
                     <div className="row">
-                        <div className="col">
+                        <div className="col d-flex">
                             <label
-                                className="form-check-label me-2"
+                                className="form-check-label me-2 flex-shrink-1 d-flex align-self-center"
                                 htmlFor="gExpression2">
                                 <MathJaxProvider>
                                     <MathJaxFormula formula="$$y = $$" />
@@ -63,6 +64,7 @@ export default class TemplateGraphEditor extends React.Component {
                             <EditableControl
                                 id="gExpression2"
                                 name="Expression 2"
+                                className="w-100"
                                 value={this.props.gExpression2}
                                 valueEditable={true}
                                 onBlur={true}
@@ -77,11 +79,11 @@ export default class TemplateGraphEditor extends React.Component {
                     </div>
                 </div>
 
-                <div className="d-flex flex-wrap mt-2">
+                <div className="d-flex flex-column mt-2">
                     <div className="row">
-                        <div className="col">
+                        <div className="col d-flex">
                             <label
-                                className="form-check-label me-2"
+                                className="form-check-label me-2 flex-shrink-1 d-flex align-self-center"
                                 htmlFor="gExpression3">
                                 <MathJaxProvider>
                                     <MathJaxFormula formula="$$y = $$" />
@@ -91,6 +93,7 @@ export default class TemplateGraphEditor extends React.Component {
                             <EditableControl
                                 id="gExpression3"
                                 name="Expression 3"
+                                className="w-100"
                                 value={this.props.gExpression3}
                                 valueEditable={true}
                                 onBlur={true}

media/js/src/form-components/EditableControl.jsx

@@ -39,7 +39,7 @@ export default class EditableControl extends React.Component {
         return (
             <React.Fragment>
                 {(this.props.isInstructor || this.props.valueEditable) && (
-                    <label>
+                    <label className={this.props.className}>
                         {this.props.name}
                         {input}
                     </label>
@@ -60,6 +60,10 @@ EditableControl.propTypes = {
     isInstructor: PropTypes.bool.isRequired,
     value: PropTypes.string,
     valueEditable: PropTypes.bool.isRequired,
+
+    // Custom classes for the parent element of this component.
+    className: PropTypes.string,
+
     onBlur: PropTypes.bool,
     disabled: PropTypes.bool,
     maxLength: PropTypes.number