change class and adjust margin

src/server/views/me/index.html

@@ -148,86 +148,98 @@
     </form>
   </div>
 
-  <div class="form-box m-t-20">
+  <div class="form-box mt-3">
 
     <!-- separeted form tag -->
     <form action="/me/imagetype" id="formImageType" method="post" class="form" role="form"></form>
 
     <fieldset>
-
-      <legend>{{ t('Set Profile Image') }}</legend>
-
-      <div class="form-group col-md-2 col-sm-offset-1 col-sm-4">
-        <h4>
-          <div class="radio radio-primary">
-            <input type="radio" id="radioGravatar" form="formImageType" name="imagetypeForm[isGravatarEnabled]" value="true" {% if user.isGravatarEnabled %}checked="checked"{% endif %}>
-            <label for="radioGravatar">
-              <img src="https://gravatar.com/avatar/00000000000000000000000000000000?s=24" /> Gravatar
-            </label>
-            <a href="https://gravatar.com/">
-              <small><i class="icon-arrow-right-circle" aria-hidden="true"></i></small>
-            </a>
-          </div>
-        </h4>
-
-        <img src="{{ user|gravatar }}" width="64">
-      </div><!-- /.col-sm* -->
-
-      <div class="form-group col-md-4 col-sm-7">
-        <h4>
-          <div class="radio radio-primary">
-            <input type="radio" id="radioUploadPicture" form="formImageType" name="imagetypeForm[isGravatarEnabled]" value="false" {% if !user.isGravatarEnabled  %}checked="checked"{% endif %}>
-            <label for="radioUploadPicture">
-              {{ t('Upload Image') }}
-            </label>
-          </div>
-        </h4>
-        <div class="form-group">
-          <div id="pictureUploadFormMessage"></div>
-          <label for="" class="col-sm-4 control-label">
-            {{ t('Current Image') }}
-          </label>
-          <div class="col-sm-8">
-            <p>
-            <img src="{{ user|uploadedpicture }}" class="picture picture-lg img-circle" id="settingUserPicture"><br>
-            </p>
-            <p>
-            <form id="remove-attachment" action="/_api/attachments.removeProfileImage" method="post" class="form-horizontal"
-                style="{% if not user.imageAttachment %}display: none{% endif %}">
-              <input type="hidden" name="_csrf" value="{{ csrf() }}">
-              <button type="submit" class="btn btn-danger">{{ t('Delete Image') }}</button>
-            </form>
-            </p>
+      <legend class="border-bottom mb-5">{{ t('Set Profile Image') }}</legend>
+      <div class="form-group row">
+        <div class="col-sm-4 offset-sm-1">
+          <h4>
+            <div class="custom-control custom-radio custom-control-inline">
+              <input
+                type="radio"
+                id="radioGravatar"
+                form="formImageType"
+                name="imagetypeForm[isGravatarEnabled]"
+                value="true"
+                {% if user.isGravatarEnabled %}checked="checked"{% endif %}
+                class="custom-control-input"
+              >
+              <label class="custom-control-label custom-control-inline" for="radioGravatar">
+                <img src="https://gravatar.com/avatar/00000000000000000000000000000000?s=24" />
+                <span class="pl-1">Gravatar</span>
+              </label>
+              <a href="https://gravatar.com/">
+                <small>
+                  <i class="icon-arrow-right-circle" aria-hidden="true"></i>
+                </small>
+              </a>
+            </div>
+          </h4>
+  
+          <img src="{{ user|gravatar }}" width="64">
+        </div>
+        <div class="col-sm-7">
+          <h4>
+            <div class="custom-control custom-radio custom-control-inline">
+              <input
+                type="radio"
+                id="radioUploadPicture"
+                form="formImageType"
+                name="imagetypeForm[isGravatarEnabled]"
+                value="false"
+                {% if !user.isGravatarEnabled  %}checked="checked"{% endif %}
+                class="custom-control-input"
+              >
+              <label for="radioUploadPicture" class="custom-control-label">{{ t('Upload Image') }}</label>
+            </div>
+          </h4>
+          <div class="form-group">
+            <div id="pictureUploadFormMessage" class=""></div>
+            <div class="row">
+              <label for="" class="col-sm-4">{{ t('Current Image') }}</label>
+              <div class="col-sm-8">
+                <p><img src="{{ user|uploadedpicture }}" class="picture picture-lg rounded-circle" id="settingUserPicture"></p>
+                <form
+                  id="remove-attachment"
+                  action="/_api/attachments.removeProfileImage"
+                  method="post"
+                  class="form-horizontal"
+                  style="{% if not user.imageAttachment %}display: none{% endif %}"
+                >
+                  <input type="hidden" name="_csrf" value="{{ csrf() }}">
+                  <button type="submit" class="btn btn-danger">{{ t('Delete Image') }}</button>
+                </form>
+              </div>
+            </div>
           </div>
-        </div><!-- /.form-group -->
-
-        <div class="form-group">
-          <label for="" class="col-sm-4 control-label">
-            {{ t('Upload new image') }}
-          </label>
-          <div class="col-sm-8">
-            {% if fileUploadService.getIsUploadable() %}
-            <form action="/_api/attachments.uploadProfileImage" id="pictureUploadForm" method="post" class="form-horizontal" role="form">
-              <input type="hidden" name="_csrf" value="{{ csrf() }}">
-              <input type="file" name="profileImage" accept="image/*">
-              <div id="pictureUploadFormProgress" class="d-flex align-items-center">
+          <div class="row">
+              <label for="" class="col-sm-4">{{ t('Upload new image') }}</label>
+              <div class="col-sm-8">
+                {% if fileUploadService.getIsUploadable() %}
+                <form action="/_api/attachments.uploadProfileImage" id="pictureUploadForm" method="post" class="form-group" role="form">
+                  <input type="hidden" name="_csrf" value="{{ csrf() }}">
+                  <input type="file" name="profileImage" accept="image/*">
+                  <div id="pictureUploadFormProgress" class="d-flex align-items-center">
+                  </div>
+                </form>
+                {% else %}
+                * {{ t('page_me.form_help.profile_image1') }}<br>
+                * {{ t('page_me.form_help.profile_image2') }}<br>
+                {% endif %}
               </div>
-            </form>
-            {% else %}
-            * {{ t('page_me.form_help.profile_image1') }}<br>
-            * {{ t('page_me.form_help.profile_image2') }}<br>
-            {% endif %}
           </div>
-        </div><!-- /.form-group -->
-
-      </div><!-- /.col-sm- -->
+        </div>
+      </div>
 
       <div class="form-group">
-        <div class="col-sm-offset-4 col-sm-6">
+        <div class="offset-sm-4 col-sm-6">
           <button type="submit" form="formImageType" class="btn btn-primary">{{ t('Update') }}</button>
         </div>
       </div>
-
     </fieldset>
   </div><!-- /.form-box -->