Form:Publication plain layout

This (test) form is used for creating and editing pages for articles and books. Layout is intended to be plain functional and “smart” no excessive use of bold.

 

Technical Dependencies

• Template: Publication
• Template: Hidden

MediaWiki:Common.js JavaScript for jQuery UI tabs

/**
 * @description create jQuery UI Tabs on CSS class="use-jquery-ui-tabs"
 * 
 * @requires https://www.mediawiki.org/wiki/Extension:Semantic_Forms
 * @requires jQuery-UI mw.loader.using( 'jquery.ui.tabs', function () {});
 * @returns {undefined}
 */
window.initUiTabsInForms = function () {
  console.log("initUiTabsInForms");
  var use_jquery_ui_tabs= $(".use-jquery-ui-tabs");
  var use_jquery_ui_tabs_vertical= $(".use-jquery-ui-tabs-vertical");
  if (use_jquery_ui_tabs.length || use_jquery_ui_tabs_vertical.length) {
    mw.loader.using( 'jquery.ui.tabs', function () {
      var use_jquery_ui_tabs= $(".use-jquery-ui-tabs");// Google Chrome Fix
      var use_jquery_ui_tabs_vertical= $(".use-jquery-ui-tabs-vertical");// Google Chrome Fix
      console.log("initUiTabsInForms mw.loader.using");
      if ($(".use-jquery-ui-tabs").length) {
        $(".use-jquery-ui-tabs").tabs({
            hide: { duration: 600 }, show: { duration: 600 }
          });
        console.log("initUiTabsInForms tabs");
      }
      if (use_jquery_ui_tabs_vertical.length) {
        use_jquery_ui_tabs_vertical.tabs({event: "mouseover"}).addClass( "ui-tabs-vertical ui-helper-clearfix" );
        use_jquery_ui_tabs_vertical.find( "li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );
        console.log("initUiTabsInForms tabs_vertical");
      }
    });
  }
};
if(mw.config.get('wgAction')==="formedit" 
  || mw.config.get('wgCanonicalSpecialPageName')==="FormEdit"){
  initUiTabsInForms();
}

MediaWiki:Common.css Layout

/* comments*/
 .comment-gray{ color:#828282; }

/* SemanticForms reduced border lines using a table with CSS class="formtable-plain-layout" */
#sfForm table.formtable-plain-layout input.createboxInput, form input.formInput, 
#sfForm table.formtable-plain-layout input.yearInput, #sfForm table.formtable-plain-layout input.dayInput, 
#sfForm table.formtable-plain-layout input.hoursInput, #sfForm table.formtable-plain-layout input.minutesInput, 
#sfForm table.formtable-plain-layout input.secondsInput, #sfForm table.formtable-plain-layout input[type=text] {
  border:1px solid transparent;
  border-bottom:1px dotted #ccc;
  background-color: #fff;
}
#sfForm table.formtable-plain-layout textarea, #sfForm table.formtable-plain-layout textarea.createboxInput {
  border:1px dotted #ccc;
  background-color: #fff;
}
/* hover */
#sfForm table.formtable-plain-layout textarea:hover, form input.formInput:hover, 
#sfForm table.formtable-plain-layout input.yearInput:hover, #sfForm table.formtable-plain-layout input.dayInput:hover, 
#sfForm table.formtable-plain-layout input.hoursInput:hover, #sfForm table.formtable-plain-layout input.minutesInput:hover, 
#sfForm table.formtable-plain-layout input.secondsInput:hover,
#sfForm table.formtable-plain-layout input.createboxInput:hover,
#sfForm table.formtable-plain-layout input[type=text]:hover,
#sfForm table.formtable-plain-layout select.createboxInput:hover {
  border:1px solid #cccccc;
}
/* focus */
#sfForm table.formtable-plain-layout textarea:focus, form input.formInput:focus, 
#sfForm table.formtable-plain-layout input.yearInput:focus, #sfForm table.formtable-plain-layout input.dayInput:focus, 
#sfForm table.formtable-plain-layout input.hoursInput:focus, #sfForm table.formtable-plain-layout input.minutesInput:focus, 
#sfForm table.formtable-plain-layout input.secondsInput:focus,
#sfForm table.formtable-plain-layout input.createboxInput:focus,
#sfForm table.formtable-plain-layout input[type=text]:focus,
#sfForm table.formtable-plain-layout select.createboxInput:focus,
/* active */
#sfForm table.formtable-plain-layout textarea:active, form input.formInput:active, 
#sfForm table.formtable-plain-layout input.yearInput:active, #sfForm table.formtable-plain-layout input.dayInput:active, 
#sfForm table.formtable-plain-layout input.hoursInput:active, #sfForm table.formtable-plain-layout input.minutesInput:active, 
#sfForm table.formtable-plain-layout input.secondsInput:active,
#sfForm table.formtable-plain-layout input.createboxInput:active,
#sfForm table.formtable-plain-layout input[type=text]:active,
#sfForm table.formtable-plain-layout select.createboxInput:active {
  border:1px solid #8e8e8e;
}
#sfForm table.formtable-plain-layout .mandatoryField, #sfForm table.formtable-plain-layout .createboxInput.mandatoryField {
  border-bottom-color:orange;
}
#sfForm table.formtable-plain-layout .mandatoryField:hover,
#sfForm table.formtable-plain-layout .createboxInput.mandatoryField:hover,
#sfForm table.formtable-plain-layout .mandatoryField:focus,
#sfForm table.formtable-plain-layout .createboxInput.mandatoryField:focus,
#sfForm table.formtable-plain-layout .mandatoryField:active,
#sfForm table.formtable-plain-layout .createboxInput.mandatoryField:active {
  border-color:orange;
}

#sfForm div.mimimize-paddings-margins .multipleTemplateInstance.multipleTemplate,
#sfForm div.mimimize-paddings-margins .multipleTemplateInstance.multipleTemplate p {
  margin-top: 0px;
  margin-bottom: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  border-top:0 none;
  border-bottom:0 none;
}
.formtable.hide-local-upload-link a.sfUploadable { display: none; }