[Bug 1247219] Fix Group settings UI elements

* Fix Group title overflow text * Limit select boxes width on mobile * Proper arrangement of checkbox labels
mozilla · Mar 29, 2016 · 23b8b7d · 23b8b7d
1 parent 0977c04
commit 23b8b7d
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 12 deletions.
diff --git a/mozillians/jinja2/groups/includes/group_edit_access.html b/mozillians/jinja2/groups/includes/group_edit_access.html
@@ -107,10 +107,8 @@ <h4>Closed</h4>
           <fieldset id="id_group_has_terms">
             <div class="form-group">
               <label class="checkbox">
+                <input type="checkbox" class="acknowledge">
                 {{ _('New members should accept terms') }}
-                <span>
-                  <input type="checkbox" class="acknowledge"></input>
-                </span>
               </label>
             </div>
           </fieldset>
@@ -133,10 +131,8 @@ <h4>Closed</h4>
           <fieldset id="id_membership_can_expire">
             <div class="form-group">
               <label class="checkbox">
+                <input type="checkbox" class="acknowledge"></input>
                 {{ _('Membership can expire') }}
-                <span>
-                  <input type="checkbox" class="acknowledge"></input>
-                </span>
               </label>
             </div>
           </fieldset>

diff --git a/mozillians/jinja2/groups/includes/group_edit_invitation.html b/mozillians/jinja2/groups/includes/group_edit_invitation.html
@@ -55,18 +55,16 @@
       <div class="panel-heading">{{ _('Invite new member') }}</div>
       <div class="panel-body">
 
-        <fieldset>
+        <fieldset id="invites">
           <div class="form-group">
             {{ mozillians_field(invite_form.invites) }}
           </div>
         </fieldset>
         <fieldset id="id_group_has_email_text">
           <div class="form-group">
             <label class="checkbox">
+              <input type="checkbox" class="acknowledge"></input>
               {{ _('Additional Email Text') }}
-              <span>
-                <input type="checkbox" class="acknowledge"></input>
-              </span>
             </label>
           </div>
         </fieldset>
@@ -76,8 +74,6 @@
             <div class="col-sm-6">
               <div class="form-group">
                 {{ mozillians_field(invite_form.invite_email_text) }}
-                <span class="under-input-field">
-                </span>
               </div>
             </div>
           </div>

diff --git a/mozillians/static/mozillians/css/main.less b/mozillians/static/mozillians/css/main.less
@@ -299,6 +299,13 @@ body {
     .select2-container--default .select2-selection--multiple .select2-selection__clear {
         margin-right: 0;
     }
+
+    @media (max-width: @breakMobileLandscape) {
+        .select2-selection--multiple,
+        .select2-dropdown.select2-dropdown--below {
+            max-width: 230px !important;
+        }
+    }
 }
 
 #outer-wrapper {
@@ -2384,6 +2391,12 @@ form.add-group {
             padding-left: 0px;
         }
     }
+    #id_group_email_text,
+    #id_group_terms,
+    #id_group_invalidation_days {
+        margin-top: 0px;
+        padding-top: 0px;
+    }
     .text-muted {
         margin: 20px 0;
         text-align: center;
@@ -2404,6 +2417,14 @@ form.add-group {
             }
         }
     }
+    @media (max-width: @breakMobileLandscape) {
+        fieldset#curators,
+        fieldset#invites {
+            .help-block {
+                max-width: 230px;
+            }
+        }
+    }
     .invite-controls a {
         color: @black;
     }
@@ -2422,6 +2443,7 @@ form.add-group {
     .panel-heading {
         overflow: hidden;
         text-overflow: ellipsis;
+        white-space: nowrap;
     }
 }