Merge pull request #1239 from sg00dwin/radio-btn-spacing-issue1234

Merged by openshift-bot

Author: OpenShift Bot

app/styles/_forms.less

@@ -86,3 +86,12 @@
   // the sections just above.
   margin-top: @line-height-computed;
 }
+
+// Switch default bootstrap margin from left to the right side to enable left alignment of inputs at mobile
+.radio-inline,
+.radio-inline + .radio-inline,
+.checkbox-inline,
+.checkbox-inline + .checkbox-inline {
+  margin-left: 0;
+  margin-right: 10px;
+}

app/views/directives/edit-lifecycle-hook.html

@@ -10,24 +10,24 @@
 
       <div class="form-group">
         <label for="actionType" class="required">Lifecycle Action</label><br/>
-        <div class="radio">
-          <label class="radio-inline">
-            <input type="radio"
-                    name="{{type}}-action-newpod"
-                    ng-model="action.type"
-                    value="execNewPod"
-                    aria-describedby="action-help">
-            Run a specific command in a new pod
-          </label>
-          <label class="radio-inline">
-            <input type="radio"
-                  name="{{type}}-action-images"
-                  ng-model="action.type"
-                  value="tagImages"
-                  aria-describedby="action-help">
-              Tag image if the deployment succeeds
-          </label>
-        </div>
+        <label class="radio-inline">
+          <input
+            type="radio"
+            name="{{type}}-action-newpod"
+            ng-model="action.type"
+            value="execNewPod"
+            aria-describedby="action-help">
+          Run a specific command in a new pod
+        </label>
+        <label class="radio-inline">
+          <input
+            type="radio"
+            name="{{type}}-action-images"
+            ng-model="action.type"
+            value="tagImages"
+            aria-describedby="action-help">
+          Tag image if the deployment succeeds
+        </label>
         <div  id="action-help" class="help-block">
           <span ng-if="action.type === 'execNewPod'">Runs a command in a new pod using the container from the deployment template. You can add additional environment variables and volumes.</span>
           <span ng-if="action.type === 'tagImages'">Tags the current image as an image stream tag if the deployment succeeds.</span>

app/views/directives/osc-persistent-volume-claim.html

@@ -89,25 +89,19 @@
     </div>
 
     <div class="form-group" >
-      <label class="required">Access Mode</label>
-      <div class="radio">
-
-        <label class="radio-inline">
-            <input type="radio" name="accessModes" ng-model="claim.accessModes" value="ReadWriteOnce" aria-describedby="access-modes-help" ng-checked="true" >
-            Single User (RWO)
-        </label>
-
-        <label class="radio-inline">
-          <input type="radio" id="accessModes" name="accessModes" ng-model="claim.accessModes" value="ReadWriteMany" aria-describedby="access-modes-help" >
-            Shared Access (RWX)
-        </label>
-
-        <label class="radio-inline">
-            <input type="radio" name="accessModes" ng-model="claim.accessModes" value="ReadOnlyMany" aria-describedby="access-modes-help">
-            Read Only (ROX)
-        </label>
-
-      </div>
+      <label class="required">Access Mode</label><br/>
+      <label class="radio-inline">
+        <input type="radio" name="accessModes" ng-model="claim.accessModes" value="ReadWriteOnce" aria-describedby="access-modes-help" ng-checked="true" >
+        Single User (RWO)
+      </label>
+      <label class="radio-inline">
+        <input type="radio" id="accessModes" name="accessModes" ng-model="claim.accessModes" value="ReadWriteMany" aria-describedby="access-modes-help" >
+        Shared Access (RWX)
+      </label>
+      <label class="radio-inline">
+        <input type="radio" name="accessModes" ng-model="claim.accessModes" value="ReadOnlyMany" aria-describedby="access-modes-help">
+        Read Only (ROX)
+      </label>
       <div>
         <span id="access-modes-help" class="help-block">Permissions to the mounted volume.</span>
       </div>

dist/scripts/templates.js

@@ -6858,7 +6858,6 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "<fieldset ng-disabled=\"view.isDisabled\">\n" +
     "<div class=\"form-group\">\n" +
     "<label for=\"actionType\" class=\"required\">Lifecycle Action</label><br/>\n" +
-    "<div class=\"radio\">\n" +
     "<label class=\"radio-inline\">\n" +
     "<input type=\"radio\" name=\"{{type}}-action-newpod\" ng-model=\"action.type\" value=\"execNewPod\" aria-describedby=\"action-help\">\n" +
     "Run a specific command in a new pod\n" +
@@ -6867,7 +6866,6 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "<input type=\"radio\" name=\"{{type}}-action-images\" ng-model=\"action.type\" value=\"tagImages\" aria-describedby=\"action-help\">\n" +
     "Tag image if the deployment succeeds\n" +
     "</label>\n" +
-    "</div>\n" +
     "<div id=\"action-help\" class=\"help-block\">\n" +
     "<span ng-if=\"action.type === 'execNewPod'\">Runs a command in a new pod using the container from the deployment template. You can add additional environment variables and volumes.</span>\n" +
     "<span ng-if=\"action.type === 'tagImages'\">Tags the current image as an image stream tag if the deployment succeeds.</span>\n" +
@@ -8125,8 +8123,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "</div>\n" +
     "</div>\n" +
     "<div class=\"form-group\">\n" +
-    "<label class=\"required\">Access Mode</label>\n" +
-    "<div class=\"radio\">\n" +
+    "<label class=\"required\">Access Mode</label><br/>\n" +
     "<label class=\"radio-inline\">\n" +
     "<input type=\"radio\" name=\"accessModes\" ng-model=\"claim.accessModes\" value=\"ReadWriteOnce\" aria-describedby=\"access-modes-help\" ng-checked=\"true\">\n" +
     "Single User (RWO)\n" +
@@ -8139,7 +8136,6 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "<input type=\"radio\" name=\"accessModes\" ng-model=\"claim.accessModes\" value=\"ReadOnlyMany\" aria-describedby=\"access-modes-help\">\n" +
     "Read Only (ROX)\n" +
     "</label>\n" +
-    "</div>\n" +
     "<div>\n" +
     "<span id=\"access-modes-help\" class=\"help-block\">Permissions to the mounted volume.</span>\n" +
     "</div>\n" +

dist/styles/main.css

@@ -703,7 +703,7 @@ textarea.form-control{height:auto}
 .checkbox input[type=checkbox],.checkbox-inline input[type=checkbox],.radio input[type=radio],.radio-inline input[type=radio]{position:absolute;margin-left:-20px;margin-top:4px\9}
 .checkbox+.checkbox,.radio+.radio{margin-top:-5px}
 .checkbox-inline,.radio-inline{position:relative;display:inline-block;padding-left:20px;margin-bottom:0;vertical-align:middle;font-weight:400;cursor:pointer}
-.checkbox-inline+.checkbox-inline,.radio-inline+.radio-inline{margin-top:0;margin-left:10px}
+.checkbox-inline+.checkbox-inline,.radio-inline+.radio-inline{margin-top:0}
 .checkbox-inline.disabled,.checkbox.disabled label,.radio-inline.disabled,.radio.disabled label,fieldset[disabled] .checkbox label,fieldset[disabled] .checkbox-inline,fieldset[disabled] .radio label,fieldset[disabled] .radio-inline,fieldset[disabled] input[type=checkbox],fieldset[disabled] input[type=radio],input[type=checkbox].disabled,input[type=checkbox][disabled],input[type=radio].disabled,input[type=radio][disabled]{cursor:not-allowed}
 .form-control-static{padding-top:3px;padding-bottom:3px;margin-bottom:0;min-height:34px}
 .form-control-static.input-lg,.form-control-static.input-sm{padding-left:0;padding-right:0}
@@ -3660,6 +3660,7 @@ table.dataTable th:active{outline:0}
 }
 .osc-file-input textarea{font-family:Menlo,Monaco,Consolas,monospace;margin:5px 0}
 .health-checks-form .pause-rollouts-checkbox,.set-limits-form .pause-rollouts-checkbox{margin-top:21px}
+.checkbox-inline,.checkbox-inline+.checkbox-inline,.radio-inline,.radio-inline+.radio-inline{margin-left:0;margin-right:10px}
 .card-pf{box-shadow:0 3px 1px -2px rgba(0,0,0,.15),0 2px 2px 0 rgba(0,0,0,.1),0 1px 5px 0 rgba(0,0,0,.09)}
 .card-pf .image-icon,.card-pf .template-icon{font-size:28px;line-height:1;margin-right:15px;opacity:.38}
 .card-pf-badge{color:#999;font-size:11px;text-transform:uppercase}