auth-plugins, ui: added some tweeks to the ui

- make select2 code generic independent of number of fields
- decrease large inputs to fit our container width.

rhodecode/public/css/main-content.less

@@ -1,409 +1,419 b''
 
 // Contains the style definitions used for .main-content
 // elements which are mainly around the admin settings.
 
 
 // TODO: johbo: Integrate in a better way, this is for "main content" which
 // should not have a limit on the width.
 .main-content-full {
     clear: both;
 }
 
 
 .main-content {
     max-width: @maincontent-maxwidth;
 
     h3,
     // TODO: johbo: Change templates to use h3 instead of h4 here
     h4 {
         line-height: 1em;
     }
 
     // TODO: johbo: Check if we can do that on a global level
     table {
         th {
             padding: 0;
         }
         td.field{
                 .help-block{
                     margin-left: 0;
                 }
         }
     }
 
     // TODO: johbo: Tweak this into the general styling, for a full width
     // textarea
     .textarea-full {
         // 2x 10px padding and 2x 1px border
         margin-right: 22px;
     }
 
 }
 
 
 // TODO: johbo: duplicated, think about a mixins.less
 .block-left{
     float: left;
 }
 
 .form {
     .checkboxes {
         // TODO: johbo: Should be changed in .checkboxes already
         width: auto;
     }
 
     // TODO: johbo: some settings pages are broken and don't have the .buttons
     // inside the .fields, tweak those templates and remove this.
     .buttons {
         margin-top: @textmargin;
     }
 
     .help-block {
         display: block;
         margin-left: @label-width;
         &.pre-formatting {
             white-space: pre;
         }
     }
 
     .action_button {
         color: @grey4;
     }
 }
 
 .main-content-full-width {
     .main-content;
     width: 100%;
     min-width: 100%;
 }
 
 .main-content-auto-width {
     .main-content;
     width: auto;
     min-width: 100%;
     max-width: inherit;
 }
 
 .field {
     clear: left;
     margin-bottom: @padding;
 
 }
 
 .input-monospace {
     font-family: @text-monospace;
 }
 
 .fields {
 	label {
 		color: @grey2;
 	}
 
     .field {
         clear: right;
         margin-bottom: @textmargin;
         width: 100%;
 
         .label {
             float: left;
             margin-right: @form-vertical-margin;
             margin-top: 0;
             padding-top: @input-padding-px + @border-thickness-inputs;
             width: @label-width - @form-vertical-margin;
         }
         // used in forms for fields that show just text
         .label-text {
             .label;
             padding-top: 5px;
         }
         .label-branch-perm {
             .label;
             width: 115px;
         }
 
         // Used to position content on the right side of a .label
         .content,
         .side-by-side-selector {
             padding-top: @input-padding-px + @input-border-thickness;
         }
 
         .checkboxes,
         .input,
         .select,
         .textarea,
         .content {
             float: none;
             margin-left: @label-width;
 
             .help-block {
                 margin-left: 0;
             }
         }
 
         .input-branch-perm {
             .input;
             margin-left: 140px;
         }
 
         .input-branch-perm-order {
             width: 40px;
         }
 
         .checkboxes,
         .input,
         .select {
             .help-block {
                 display: block;
             }
         }
 
         .checkboxes,
         .radios {
             // TODO: johbo: We get a 4px margin from the from-bootstrap,
             // compensating here to align well with labels on the left.
             padding-top: @input-padding-px + @input-border-thickness - 3px;
         }
 
         .checkbox,
         .radio {
             display: block;
             width: auto;
         }
 
         .checkbox + .checkbox {
             display: block;
         }
 
         .input,
         .select {
             .help-block,
             .info-block {
                 margin-top: @form-vertical-margin / 2;
             }
         }
 
         .input {
             .branch-perm {
                 width: 80px;
             }
             .medium {
                 width: @fields-input-m;
             }
             .large {
                 width: @fields-input-l;
             }
 
             .text-as-placeholder {
                 padding-top: @input-padding-px + @border-thickness-inputs;
             }
+
+            .no-border {
+                border: 1px;
+            }
+
+            .no-horizontal-padding {
+                padding-left: 0;
+                padding-right: 0;
+            }
+
         }
 
         // TODO: johbo: Try to find a better integration of this bit.
         // When using a select2 inside of a field, it should not have the
         // top margin.
         .select .drop-menu {
             margin-top: 0;
         }
 
         .textarea {
             float: none;
 
             textarea {
                 // TODO: johbo: From somewhere we get a clear which does
                 // more harm than good here.
                 clear: none;
             }
 
             .CodeMirror {
                // TODO: johbo: Tweak to position the .help-block nicer,
                // figure out how to apply for .text-block instead.
                 margin-bottom: 10px;
             }
 
             // TODO: johbo: Check if we can remove the grey background on
             // the global level and remove this if possible.
             .help-block {
                 background: transparent;
                 padding: 0;
             }
         }
 
         &.tag_patterns,
         &.branch_patterns {
 
             input {
                 max-width: 430px;
             }
         }
     }
 
     .field-sm {
         .label {
             padding-top: @input-padding-px / 2 + @input-border-thickness;
         }
         .checkboxes,
         .radios {
             // TODO: johbo: We get a 4px margin from the from-bootstrap,
             // compensating here to align well with labels on the left.
             padding-top: @input-padding-px / 2 + @input-border-thickness - 3px;
         }
     }
 
     .field.customhooks {
         .label {
             padding-top: 0;
         }
         .input-wrapper {
             padding-right: 25px;
 
             input {
                 width: 100%;
             }
         }
         .input {
             padding-right: 25px;
         }
     }
 
     .buttons {
         // TODO: johbo: define variable for this value.
         // Note that this should be 40px but since most elements add some
         // space in the bottom, we are with 20 closer to 40.
         margin-top: 20px;
 		clear: both;
         margin-bottom: @padding;
     }
 
     .desc{
         margin-right: @textmargin;
     }
 
     input,
     .drop-menu {
         margin-right: @padding/3;
     }
 
 }
 
 .form-vertical .fields .field {
 
     .label {
         float: none;
         width: auto;
     }
 
     .checkboxes,
     .input,
     .select,
     .textarea {
         margin-left: 0;
     }
 
     // TODO: johbo: had to tweak the width here to make it big enough for
     // the license.
     .textarea.editor {
         max-width: none;
     }
 
     .textarea.large textarea {
         min-height: 200px;
     }
 
     .help-block {
         margin-left: 0;
     }
 }
 
 
 
 
 .main-content {
     .block-left;
 
     .section {
         margin-bottom: @space;
     }
 
 
     // Table aligning same way as forms in admin section, e.g.
     // python packages table
     table.formalign {
         float: left;
         width: auto;
 
         .label {
             width: @label-width;
         }
 
     }
 
 
     table.issuetracker {
 
         color: @text-color;
 
         .issue-tracker-example {
             color: @grey4;
         }
     }
 
     .side-by-side-selector{
         .left-group,
         .middle-group,
         .right-group{
             float: left;
         }
 
         .left-group,
         .right-group{
             width: 45%;
             text-align: center;
 
             label{
                 width: 100%;
                 text-align: left;
             }
 
             select{
                 width: 100%;
                 background: none;
                 border-color: @border-highlight-color;
                 color: @text-color;
                 font-family: @text-light;
                 font-size: @basefontsize;
                 color: @grey1;
                 padding: @textmargin/2;
             }
 
             select:after{
                 content: "";
             }
 
         }
 
         .middle-group{
             width: 10%;
             text-align: center;
             padding-top: 4em;
             i {
                 font-size: 18px;
                 cursor: pointer;
                 line-height: 2em;
             }
         }
 
     }
 
     .permissions_boxes{
         label, .label{
             margin-right: @textmargin/2;
         }
     }
 
     .radios{
         label{
             margin-right: @textmargin;
         }
     }
 }
 

rhodecode/public/css/variables.less

@@ -1,148 +1,148 b''
 // variables for use in all RhodeCode products
 
 // FONTS
 //Primary Colors (brand)
 @rcblue: #427cc9;		//RhodeCode blue
 @rcdarkblue: #305b91;	//RhodeCode dark blue
 @rclightblue: lighten(@rcblue, 30%);
 @rchighlightblue: lighten(@rcblue, 35%);
 
 // Secondary Colors (greyscale)
 @grey1: #202020;		//midnight
 @grey2: #323232;		//charcoal
 @grey3: #666666;		//tungsten
 @grey4: #979797;		//light grey
 @grey5: #dbd9da;		//greyish
 @grey6: #eeeeee;		//silver
 @grey7: #f9f9f9;		//light silver
 
 // special for navigation
 @nav-grey: #CDCCCD;
 
 @grey5-alpha: rgba(219, 217, 218, 0.3);
 
 // Tertiary Colors
 @color1: #879938;		//olive green
 @color2: #fcc93a;		//bright yellow
 @color3: #ff9e07;		//orange-yellow
 @color4: #fc663a;		//bright orange
 @color5: #d63d44;		//signal red
 @color6: #99287c;		//violet
 @color7: #682668;		//dark purple
 @color8: #194f8e;		//dark blue
 
 // Alert Colors (bright)
 @alert1: #0ac878;		//bright green
 @alert2: #e85e4d;		//soft red
 @alert3: #ffc854;		//corn yellow
 @alert4: #84a5d2;		//light blue
 
 // Alert Inner Colors
 @alert1-inner: #daf7eb;		//bright green
 @alert2-inner: #fbdfdb;		//soft red
 @alert3-inner: #fff4dd;		//corn yellow
 @alert4-inner: #e6edf6;		//light blue
 
 // Highlight color for lines and colors
 @comment-highlight-color: #ffd887;
 
 // FONTS
 @basefontsize: 13px;
 @navigation-fontsize: 14px;
 @journal-fontsize: @basefontsize+7px;
 @text-color: @grey2;
 @repo-title-fontsize: 18px;
 
 @text-regular: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 @text-monospace: 'Menlo', 'Liberation Mono', 'Consolas', 'DejaVu Sans Mono', 'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace;
 
 @text-italic: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 
 @text-bold: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 @text-bold-weight: 600;
 
 @text-semibold: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 @text-semibold-weight: 500;
 
 @text-bold-italic: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 @text-bold-italic-weight: 600;
 
 @text-code: @text-monospace;
 @text-light: @text-regular;
 
 
 // Used for .close buttons
 @text-bootstrap: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 
 @panel-title: @basefontsize;
 @panel-footer: @basefontsize;
 
 // BORDERS
 @border-thickness: 1px;
 @border-thickness-buttons: 1px;
 @border-thickness-tags: 1px;
 @border-radius: 2px;
 @border-default-color: @grey5;
 @border-highlight-color: @grey4;
 
 // SPACING
 @contentpadding: 15px;  //padding on left and right of pages
 @pagepadding: 40px;		//padding on top and bottom of pages
 @menupadding: 12px;		//padding for sidebar and content
 @sidebarpadding: 15px;	//spacing between sections
 @space: 40px;			//spacing between sections
 @padding: 15px;			//padding inside modules
 @textmargin: 20px;		//spacing below headers
 @header-padding: 20px;
 @panel-padding: @padding;
 @gravatar-size: 16px;   // height/width of gravatar w/o border
 
 // ADMIN
 @form-max-width: 750px;
 
 // FORMS (new)
 @border-thickness-inputs: 1px;
 @input-padding: @button-padding; //needs to match button padding
 // TODO: johbo: Needed for working computation of paddings around labels etc.
 // Expected to be replaced once we are done with the form refactoring.
 @input-padding-px: 12px;
 @legend-width: 220px;
 @form-vertical-margin: 20px;
 @form-check-width: 20px;
 @form-radio-width: 10px;
 @form-textcolor: @grey3;
 
 // FORMS
 @label-width: 220px;
 //TODO: lisa: Eventually we don't need both of these; remove
 //            label-width when legend-width is no longer used
 
 @input-border-thickness: @border-thickness;
 @medium-inline-input-width: 115px;
 @input-description-minwidth: 300px;
 @label2-width: 200px;
 @checkboxes-width: 420px;
 @label-summary-minwidth: 80px;
 @search-form-width: 400px;
 @fields-input-m: 400px;
-@fields-input-l: 750px;
+@fields-input-l: 720px;
 
 // BUTTONS
 @button-padding: .9em;
 
 // DEFAULT WIDTHS
 @wrapper-maxwidth: 1200px;
 @sidebar-width: 145px;
 @sidebar-all-width: @sidebar-width + 2 * @sidebarpadding;
 @sidebar-small-width: 100px;
 @sidebar-small-all-width: @sidebar-small-width + 2 * @sidebarpadding;
 @texteditor-width: 660px;
 @maincontent-maxwidth: 940px;
 @pullrequest-width: 1025px;
 @summary-menu-stats-width: 200px;
 
 // SCREEN WIDTHS
 @screen-sm-min: 320px;
 
 // For Bootstrap
 @panel-border-radius: @border-radius;

rhodecode/templates/admin/auth/plugin_settings.mako

@@ -1,124 +1,121 b''
 ## -*- coding: utf-8 -*-
 <%inherit file="/base/base.mako"/>
 
 <%def name="title()">
   ${_('Authentication Settings')}
   %if c.rhodecode_name:
     &middot; ${h.branding(c.rhodecode_name)}}
   %endif
 </%def>
 
 <%def name="breadcrumbs_links()">
   ${h.link_to(_('Admin'),h.route_path('admin_home'))}
   &raquo;
   ${h.link_to(_('Authentication Plugins'),request.resource_path(resource.__parent__, route_name='auth_home'))}
   &raquo;
   ${resource.display_name}
 </%def>
 
 <%def name="menu_bar_nav()">
   ${self.menu_items(active='admin')}
 </%def>
 
 <%def name="main()">
   <div class="box">
     <div class="title">
       ${self.breadcrumbs()}
     </div>
     <div class='sidebar-col-wrapper'>
 
       ## TODO: This is repeated in the auth root template and should be merged
       ##       into a single solution.
       <div class="sidebar">
         <ul class="nav nav-pills nav-stacked">
           % for item in resource.get_root().get_nav_list():
             <li ${'class=active' if item == resource else ''}>
               <a href="${request.resource_path(item, route_name='auth_home')}">${item.display_name}</a>
             </li>
           % endfor
         </ul>
       </div>
 
       <div class="main-content-full-width">
         <div class="panel panel-default">
           <div class="panel-heading">
             <h3 class="panel-title">${_('Plugin')}: ${resource.display_name}</h3>
           </div>
           <div class="panel-body">
             <div class="plugin_form">
               <div class="fields">
                 ${h.secure_form(request.resource_path(resource, route_name='auth_home'), request=request)}
                 <div class="form">
 
                   %for node in plugin.get_settings_schema():
                     <%
                       label_to_type = {'label-checkbox': 'bool', 'label-textarea': 'textarea'}
                     %>
 
                     <div class="field">
                       <div class="label ${label_to_type.get(node.widget)}"><label for="${node.name}">${node.title}</label></div>
                       <div class="input">
                         %if node.widget in ["string", "int", "unicode"]:
                           ${h.text(node.name, defaults.get(node.name), class_="large")}
                         %elif node.widget == "password":
                           ${h.password(node.name, defaults.get(node.name), class_="large")}
                         %elif node.widget == "bool":
                           <div class="checkbox">${h.checkbox(node.name, True, checked=defaults.get(node.name))}</div>
                         %elif node.widget == "select":
-                          ${h.select(node.name, defaults.get(node.name), node.validator.choices)}
+                          ${h.select(node.name, defaults.get(node.name), node.validator.choices, class_="select2AuthSetting")}
                         %elif node.widget == "textarea":
                           <div class="textarea" style="margin-left: 0px">${h.textarea(node.name, defaults.get(node.name), rows=10)}</div>
                         %elif node.widget == "readonly":
                           ${node.default}
                         %else:
                           This field is of type ${node.typ}, which cannot be displayed. Must be one of [string|int|bool|select].
                         %endif
 
                         %if node.name in errors:
                           <span class="error-message">${errors.get(node.name)}</span>
                           <br />
                         %endif
                         <p class="help-block pre-formatting">${node.description}</p>
                       </div>
                     </div>
                   %endfor
 
                   ## Allow derived templates to add something below the form
                   ## input fields
                   %if hasattr(next, 'below_form_fields'):
                     ${next.below_form_fields()}
                   %endif
 
                   <div class="buttons">
                     ${h.submit('save',_('Save'),class_="btn")}
                   </div>
 
                 </div>
                 ${h.end_form()}
               </div>
             </div>
           </div>
         </div>
       </div>
 
     </div>
   </div>
 
 ## TODO: Ugly hack to get ldap select elements to work.
 ##       Find a solution to integrate this nicely.
 <script>
 $(document).ready(function() {
   var select2Options = {
         containerCssClass: 'drop-menu',
         dropdownCssClass: 'drop-menu-dropdown',
         dropdownAutoWidth: true,
         minimumResultsForSearch: -1
-    };
-    $("#tls_kind").select2(select2Options);
-    $("#tls_reqcert").select2(select2Options);
-    $("#search_scope").select2(select2Options);
-    $("#group_extraction_type").select2(select2Options);
-    $("#admin_groups_sync").select2(select2Options);
+  };
+  $('.select2AuthSetting').select2(select2Options);
+
 });
 </script>
 </%def>