Merge pull request #2018 from weseek/imprv/usesr-info-responsive

Imprv/usesr info responsive

src/client/js/components/Me/BasicInfoSettings.jsx

@@ -45,9 +45,9 @@ class BasicInfoSettings extends React.Component {
     return (
       <Fragment>
 
-        <div className="row form-group mb-3">
-          <label htmlFor="userForm[name]" className="col-sm-2 text-right">{t('Name')}</label>
-          <div className="col-sm-4 text-left">
+        <div className="form-group row">
+          <label htmlFor="userForm[name]" className="text-left text-md-right col-md-3 col-form-label">{t('Name')}</label>
+          <div className="col-md-6">
             <input
               className="form-control"
               type="text"
@@ -58,9 +58,9 @@ class BasicInfoSettings extends React.Component {
           </div>
         </div>
 
-        <div className="row form-group mb-3">
-          <label htmlFor="userForm[email]" className="col-sm-2 text-right">{t('Email')}</label>
-          <div className="col-sm-4 text-left">
+        <div className="form-group row">
+          <label htmlFor="userForm[email]" className="text-left text-md-right col-md-3 col-form-label">{t('Email')}</label>
+          <div className="col-md-6">
             <input
               className="form-control"
               type="text"
@@ -81,9 +81,9 @@ class BasicInfoSettings extends React.Component {
           )}
         </div>
 
-        <div className="row mb-3">
-          <label className="col-sm-2 text-right">{t('Disclose E-mail')}</label>
-          <div className="col-6">
+        <div className="form-group row">
+          <label className="text-left text-md-right col-md-3 col-form-label">{t('Disclose E-mail')}</label>
+          <div className="col-md-6">
             <div className="custom-control custom-radio custom-control-inline">
               <input
                 type="radio"
@@ -109,9 +109,9 @@ class BasicInfoSettings extends React.Component {
           </div>
         </div>
 
-        <div className="row mb-3">
-          <label className="col-sm-2 col-form-label text-right">{t('Language')}</label>
-          <div className="col-6">
+        <div className="form-group row">
+          <label className="text-left text-md-right col-md-3 col-form-label">{t('Language')}</label>
+          <div className="col-md-6">
             <div className="custom-control custom-radio custom-control-inline">
               <input
                 type="radio"

src/client/js/components/Me/ProfileImageSettings.jsx

@@ -102,7 +102,7 @@ class ProfileImageSettings extends React.Component {
     return (
       <React.Fragment>
         <div className="row">
-          <div className="col-md-2 offset-1 col-sm-4">
+          <div className="col-md-3 offset-1 col-sm-4">
             <h4>
               <div className="custom-control custom-radio radio-primary">
                 <input
@@ -126,7 +126,7 @@ class ProfileImageSettings extends React.Component {
             <img src={this.generateGravatarSrc()} width="64" />
           </div>
 
-          <div className="col-md-4 col-sm-7">
+          <div className="col-md-3 offset-1 col-sm-4">
             <h4>
               <div className="custom-control custom-radio radio-primary">
                 <input
@@ -144,19 +144,19 @@ class ProfileImageSettings extends React.Component {
               </div>
             </h4>
             <div className="row mb-3">
-              <label className="col-sm-4 control-label">
+              <label className="col-sm-4 col-12 control-label">
                 { t('Current Image') }
               </label>
-              <div className="col-sm-8">
+              <div className="col-sm-8 col-12">
                 {uploadedPictureSrc && (<p><img src={uploadedPictureSrc} className="picture picture-lg rounded-circle" id="settingUserPicture" /></p>)}
                 {isUploadedPicture && <button type="button" className="btn btn-danger" onClick={this.onClickDeleteBtn}>{ t('Delete Image') }</button>}
               </div>
             </div>
             <div className="row">
-              <label className="col-sm-4 control-label">
+              <label className="col-sm-4 col-12 control-label">
                 {t('Upload new image')}
               </label>
-              <div className="col-sm-8">
+              <div className="col-sm-8 col-12">
                 <input type="file" onChange={this.onSelectFile} name="profileImage" accept="image/*" />
               </div>
             </div>