Removing form-horizontal so labels don't overlay inputs

Fixes #250
openshift · May 25, 2017 · d869765 · d869765
1 parent cf3741c
commit d869765
Show file tree

Hide file tree

Showing 9 changed files with 72 additions and 86 deletions.
diff --git a/dist/less/order-service.less b/dist/less/order-service.less
@@ -75,6 +75,9 @@
 
 .order-service-config {
   padding: 0 (@grid-gutter-width / 2);
+  @media (max-width: @screen-xs-max) {
+    position: relative; // so label.required:before are positioned correctly
+  }
   @media (min-width: @screen-sm-min) {
     margin-bottom: -(@grid-gutter-width / 2);
     margin-top: -(@grid-gutter-width / 2);
@@ -85,9 +88,6 @@
     _::-webkit-full-page-media, _:future, :root & { // only target Safari
       .scroll-shadows-vertical-with-covers(65%, 0.25);
     }
-    .form-horizontal .control-label {
-      padding-right: 0;
-    }
   }
   h3 {
     line-height: 1.4;

diff --git a/dist/less/overlay-panel.less b/dist/less/overlay-panel.less
@@ -58,9 +58,7 @@ body.overlay-open {
     @media (min-width: @screen-sm-min) {
       min-height: 100%;
       padding: (@grid-gutter-width / 2) @grid-gutter-width (@grid-gutter-width / 2) (@grid-gutter-width / 2);
-      .form-horizontal .control-label {
-        padding-right: 0;
-      }
+      position: relative; // so label.required:before are positioned correctly
       .scroll-shadows-vertical-covers();
       _::-webkit-full-page-media, _:future, :root & { // only target Safari
         background: none;

diff --git a/dist/origin-web-catalogs.css b/dist/origin-web-catalogs.css
diff --git a/dist/origin-web-catalogs.js b/dist/origin-web-catalogs.js
diff --git a/src/components/create-from-builder/create-from-builder-configure.html b/src/components/create-from-builder/create-from-builder-configure.html
@@ -1,25 +1,23 @@
 <div class="config-top">
-  <form name="$ctrl.builderForm" class="form-horizontal config-form">
+  <form name="$ctrl.builderForm" class="config-form">
     <div class="form-group">
-      <label class="col-sm-4 control-label" for="version">Version</label>
-      <div class="col-sm-8">
-        <ui-select ng-model="$ctrl.istag" required search-enabled="false">
-          <ui-select-match>
-            {{$select.selected.name}}
-          </ui-select-match>
-          <ui-select-choices repeat="tag in $ctrl.versions track by tag.name">
-            {{tag.name}}
-            <small ng-repeat="otherTag in $ctrl.referencedBy[tag.name]">
-              <span ng-if="$first"> &mdash; </span>{{otherTag}}<span ng-if="!$last">,</span>
-            </small>
-          </ui-select-choices>
-        </ui-select>
-      </div>
+      <label class="control-label" for="version">Version</label>
+      <ui-select ng-model="$ctrl.istag" required search-enabled="false">
+        <ui-select-match>
+          {{$select.selected.name}}
+        </ui-select-match>
+        <ui-select-choices repeat="tag in $ctrl.versions track by tag.name">
+          {{tag.name}}
+          <small ng-repeat="otherTag in $ctrl.referencedBy[tag.name]">
+            <span ng-if="$first"> &mdash; </span>{{otherTag}}<span ng-if="!$last">,</span>
+          </small>
+        </ui-select-choices>
+      </ui-select>
     </div>
     <select-project selected-project="$ctrl.selectedProject" name-taken="$ctrl.projectNameTaken"></select-project>
     <div class="form-group">
-      <label class="col-sm-4 control-label required" for="app-name">Application Name</label>
-      <div class="col-sm-8" ng-class="{ 'has-error': $ctrl.builderForm.name.$touched && $ctrl.builderForm.name.$invalid }">
+      <label class="control-label required" for="app-name">Application Name</label>
+      <div ng-class="{ 'has-error': $ctrl.builderForm.name.$touched && $ctrl.builderForm.name.$invalid }">
         <input
           class="form-control"
           type="text"
@@ -60,8 +58,8 @@
     </div>
 
     <div class="form-group">
-      <label class="col-sm-4 control-label required" for="repository">Git Repository</label>
-      <div class="col-sm-8" ng-class="{ 'has-error': $ctrl.builderForm.repository.$touched && $ctrl.builderForm.repository.$error.$required }">
+      <label class="control-label required" for="repository">Git Repository</label>
+      <div ng-class="{ 'has-error': $ctrl.builderForm.repository.$touched && $ctrl.builderForm.repository.$error.$required }">
         <input class="form-control"
           type="text"
           id="repository"
@@ -96,10 +94,8 @@
     <div ng-hide="$ctrl.selectedProject && !$ctrl.selectedProject.metadata.uid"
          ng-class="{ invisible: !$ctrl.selectedProject || !$ctrl.istag }"
          class="form-group">
-      <div class="col-sm-8 col-sm-offset-4">
-        If you have a private Git repository or need to change application defaults, view
-        <a href="" ng-click="$ctrl.navigateToAdvancedForm()">advanced options</a>.
-      </div>
+      If you have a private Git repository or need to change application defaults, view
+      <a href="" ng-click="$ctrl.navigateToAdvancedForm()">advanced options</a>.
     </div>
   </form>
 </div>
diff --git a/src/components/order-service/order-service-configure.html b/src/components/order-service/order-service-configure.html
@@ -1,5 +1,5 @@
 <div class="config-top">
-  <form name="$ctrl.forms.orderConfigureForm" class="form-horizontal config-form">
+  <form name="$ctrl.forms.orderConfigureForm" class="config-form">
     <select-project selected-project="$ctrl.selectedProject" name-taken="$ctrl.nameTaken"></select-project>
     <!-- TODO: add parameters -->
     <!-- <div class="form-group"> -->
@@ -9,7 +9,7 @@
     <!--   </div> -->
     <!-- </div> -->
   </form>
-  <div ng-if="$ctrl.error" class="col-sm-12 has-error">
+  <div ng-if="$ctrl.error" class="has-error">
     <span class="help-block">{{$ctrl.error}}</span>
   </div>
 </div>
diff --git a/src/components/select-project/selectProject.html b/src/components/select-project/selectProject.html
@@ -1,28 +1,26 @@
 <ng-form>
-    <div class="form-group">
-        <label class="col-sm-4 control-label" for="project">Add to Project</label>
-      <div class="col-sm-8">
-        <ui-select ng-model="$ctrl.selectedProject">
-          <ui-select-match>
-            {{$select.selected | displayName}}
-          </ui-select-match>
-          <ui-select-choices repeat="project in $ctrl.projects | searchProjects : $select.search track by (project | uid)">
-            <span ng-bind-html="project | displayName | highlightKeywords : $select.search"></span>
-                <span ng-if="project | displayName : true" class="small text-muted">
-                  <span ng-if="project.metadata.name">&ndash;</span>
-                  <span ng-bind-html="project.metadata.name | highlightKeywords : $select.search"></span>
-                </span>
-          </ui-select-choices>
-        </ui-select>
-      </div>
-    </div>
+  <div class="form-group">
+    <label class="control-label" for="project">Add to Project</label>
+    <ui-select ng-model="$ctrl.selectedProject">
+      <ui-select-match>
+        {{$select.selected | displayName}}
+      </ui-select-match>
+      <ui-select-choices repeat="project in $ctrl.projects | searchProjects : $select.search track by (project | uid)">
+        <span ng-bind-html="project | displayName | highlightKeywords : $select.search"></span>
+        <span ng-if="project | displayName : true" class="small text-muted">
+          <span ng-if="project.metadata.name">&ndash;</span>
+          <span ng-bind-html="project.metadata.name | highlightKeywords : $select.search"></span>
+        </span>
+      </ui-select-choices>
+    </ui-select>
+  </div>
 </ng-form>
 
 <ng-form name="$ctrl.forms.createProjectForm"
     ng-if="$ctrl.isNewProject()">
   <div class="form-group">
-    <label for="name" class="col-sm-4 control-label required">Project Name</label>
-    <div class="col-sm-8" ng-class="{'has-error': ($ctrl.forms.createProjectForm.name.$error.pattern && $ctrl.forms.createProjectForm.name.$touched) || $ctrl.nameTaken}">
+    <label for="name" class="control-label required">Project Name</label>
+    <div ng-class="{'has-error': ($ctrl.forms.createProjectForm.name.$error.pattern && $ctrl.forms.createProjectForm.name.$touched) || $ctrl.nameTaken}">
       <input class="form-control"
           name="name"
           id="name"
@@ -62,25 +60,21 @@
   </div>
 
   <div class="form-group">
-    <label for="displayName" class="col-sm-4 control-label">Project Display Name</label>
-    <div class="col-sm-8">
-      <input class="form-control"
-        name="displayName"
-        id="displayName"
-        placeholder="My Project"
-        type="text"
-        ng-model="$ctrl.selectedProject.metadata.annotations['new-display-name']">
-    </div>
+    <label for="displayName" class="control-label">Project Display Name</label>
+    <input class="form-control"
+      name="displayName"
+      id="displayName"
+      placeholder="My Project"
+      type="text"
+      ng-model="$ctrl.selectedProject.metadata.annotations['new-display-name']">
   </div>
 
   <div class="form-group">
-    <label for="description" class="col-sm-4 control-label">Project Description</label>
-    <div class="col-sm-8">
-      <textarea class="form-control"
-        name="description"
-        id="description"
-        placeholder="A short description."
-        ng-model="$ctrl.selectedProject.metadata.annotations['openshift.io/description']"></textarea>
-    </div>
+    <label for="description" class="control-label">Project Description</label>
+    <textarea class="form-control"
+      name="description"
+      id="description"
+      placeholder="A short description."
+      ng-model="$ctrl.selectedProject.metadata.annotations['openshift.io/description']"></textarea>
   </div>
 </ng-form>
diff --git a/src/styles/order-service.less b/src/styles/order-service.less
@@ -75,6 +75,9 @@
 
 .order-service-config {
   padding: 0 (@grid-gutter-width / 2);
+  @media (max-width: @screen-xs-max) {
+    position: relative; // so label.required:before are positioned correctly
+  }
   @media (min-width: @screen-sm-min) {
     margin-bottom: -(@grid-gutter-width / 2);
     margin-top: -(@grid-gutter-width / 2);
@@ -85,9 +88,6 @@
     _::-webkit-full-page-media, _:future, :root & { // only target Safari
       .scroll-shadows-vertical-with-covers(65%, 0.25);
     }
-    .form-horizontal .control-label {
-      padding-right: 0;
-    }
   }
   h3 {
     line-height: 1.4;

diff --git a/src/styles/overlay-panel.less b/src/styles/overlay-panel.less
@@ -58,9 +58,7 @@ body.overlay-open {
     @media (min-width: @screen-sm-min) {
       min-height: 100%;
       padding: (@grid-gutter-width / 2) @grid-gutter-width (@grid-gutter-width / 2) (@grid-gutter-width / 2);
-      .form-horizontal .control-label {
-        padding-right: 0;
-      }
+      position: relative; // so label.required:before are positioned correctly
       .scroll-shadows-vertical-covers();
       _::-webkit-full-page-media, _:future, :root & { // only target Safari
         background: none;