This update to AdminThemeUikit fixes various minor reported issues with Inputfields and some other small details

wire/modules/AdminTheme/AdminThemeUikit/AdminThemeUikit.module

@@ -24,7 +24,7 @@ class AdminThemeUikit extends AdminThemeFramework implements Module, Configurabl
 	public static function getModuleInfo() {
 		return array(
 			'title' => 'Uikit',
-			'version' => 21,
+			'version' => 22,
 			'summary' => 'Uikit v3 admin theme (beta)',
 			'autoload' => 'template=admin', 
 			'requires' => 'ProcessWire>=3.0.61'

wire/modules/AdminTheme/AdminThemeUikit/config.php

@@ -266,5 +266,30 @@ function AdminThemeUikitConfig(AdminTheme $adminTheme, InputfieldWrapper $inputf
 	$fieldset->add($f);
 	*/
 
+	/*
+	// The following is just for development/testing 
+	$f = $modules->get('InputfieldRadios');
+	$f->attr('name', 'test_radios');
+	$f->label = 'Test radios';
+	$f->addOption(1, 'Option 1');
+	$f->addOption(2, 'Option 2');
+	$f->addOption(3, 'Option 3');
+	$f->columnWidth = 30;
+	$inputfields->add($f);
+	
+	$f = $modules->get('InputfieldText'); 
+	$f->attr('name', 'test_text1');
+	$f->label = 'Test text 1'; 
+	$f->showIf = 'test_radios=1';
+	$f->columnWidth = 35;
+	$inputfields->add($f);
+	
+	$f = $modules->get('InputfieldText'); 
+	$f->attr('name', 'test_text2');
+	$f->label = 'Test text 2'; 
+	$f->showIf = 'test_radios=1|2';
+	$f->columnWidth = 35;
+	$inputfields->add($f);
+	*/
 
 }

wire/modules/AdminTheme/AdminThemeUikit/init.php

@@ -21,7 +21,7 @@ if(!defined("PROCESSWIRE")) die();
 // uk class => width %
 $ukGridWidths = array(
 	'80%' => '4-5',
-	'70%' => '3-4',
+	'70%' => '2-3',
 	'64%' => '2-3',
 	'60%' => '3-5',
 	'50%' => '1-2',
@@ -29,6 +29,7 @@ $ukGridWidths = array(
 	'34%' => '1-3', 
 	'33%' => '1-3',
 	'32%' => '2-6',
+	'30%' => '1-3',
 	'25%' => '1-4',
 	'20%' => '1-5',
 	'16%' => '1-6',

wire/modules/AdminTheme/AdminThemeUikit/scripts/main.js

@@ -543,17 +543,47 @@ var ProcessWireAdminTheme = {
 			} while($in.hasClass('InputfieldColumnWidth'));
 		}
 
-		function ukGridClass(width) {
-			var ukGridClass = 'uk-width-1-1';
-			if(!width || width >= 100) return ukGridClass;
-			for(var pct in ProcessWire.config.ukGridWidths) {
-				var cn = ProcessWire.config.ukGridWidths[pct];
-				pct = parseInt(pct);
-				if(width >= pct) {
-					ukGridClass = 'uk-width-' + cn + '@m';
-					break;
+		function ukGridClass(width, $in) {
+			
+			var ukGridClassDefault = 'uk-width-1-1';
+			var ukGridClass = ukGridClassDefault;
+			// var ukGrid = [1,1];
+			
+			if(!width || width >= 100) {
+				ukGridClass = ukGridClassDefault;
+			} else {
+				for(var pct in ProcessWire.config.ukGridWidths) {
+					var cn = ProcessWire.config.ukGridWidths[pct];
+					pct = parseInt(pct);
+					if(width >= pct) {
+						ukGridClass = 'uk-width-' + cn;
+						// ukGrid = cn.split('-');	
+						break;
+					}
 				}
 			}
+			
+			if(ukGridClass != ukGridClassDefault) {
+				ukGridClass += '@m';
+				if(typeof $in != "undefined") $in.removeClass(ukGridClassDefault);
+			}
+
+			if(typeof $in != "undefined") {
+				if($in.hasClass(ukGridClass)) {
+					// no need to do anything
+				} else {
+					var c = $in.attr('class');
+					if(c.indexOf('@m') > 0) {
+						// replace existing class
+						c = c.replace(/uk-width-\d-\d@m/, ukGridClass);
+						$in.attr('class', c);
+					} else {
+						$in.addClass(ukGridClass);
+					}
+				}
+				// $in.data('pwukgrid', ukGrid);
+			}
+			
 			return ukGridClass;
 		}
 
@@ -562,14 +592,16 @@ var ProcessWireAdminTheme = {
 			var $inputfields = $inputfield.parent().children('.Inputfield');
 			var $lastInputfield = null;
 			var width = 0;
-			var w = 0;
-			var lastW = 0;
+			var w = 0; // current Inputfield width
+			var lastW = 0; // last Inputfield width
 			var lastGridClass = '';
 
-			function consoleLog($in, msg) {
-				 var id = $in.attr('id');
-				 id = id.replace('wrap_Inputfield_', '');
-				 console.log(id + ' (width=' + width + ', w=' + w + '): ' + msg);	
+			function consoleLog(msg, $in) {
+				if(typeof $in == "undefined") $in = $inputfield;	
+				var id = $in.attr('id');
+				id = id.replace('wrap_Inputfield_', '');
+				//if(id.indexOf('test') !== 0) return;
+				console.log(id + ' (combined width=' + width + ', w=' + w + '): ' + msg);	
 			}
 
 			function updateLastInputfield(w) {
@@ -581,8 +613,8 @@ var ProcessWireAdminTheme = {
 					gridClass = '';
 				} else if(w >= 100) {
 					gridClass = 'uk-width-1-1';
-				} else {
-					// gridClass = ukGridClass(100 - width);
+				} else if($lastInputfield.hasClass('InputfieldColumnWidthLast')) {
+					ukGridClass(100 - (width - w), $lastInputfield); 
 				}
 				if(gridClass.length) {
 					if(lastGridClass.length) $lastInputfield.removeClass(lastGridClass);
@@ -592,7 +624,9 @@ var ProcessWireAdminTheme = {
 
 			$inputfields.each(function() {
 
-				var $inputfield = $(this);
+				$inputfield = $(this);
+				var isLastColumn = false;
+				var isFirstColumn = false;
 
 				if($inputfield.hasClass('InputfieldColumnWidth')) {
 					w = parseInt($inputfield.attr('data-colwidth'));
@@ -601,38 +635,53 @@ var ProcessWireAdminTheme = {
 				}
 
 				if($inputfield.hasClass('InputfieldStateHidden')) {
-					// hidden, and we'll reserve a spot for it by applying its width to lastInputfield
-					width += w;
-					updateLastInputfield(w);
+					// hidden, does not contribute to layout
+					// consoleLog('A: hidden', $inputfield);
 					return;
 				}
 
 				if(!width || width >= 100) {
 					// starting a new row
 					width = 0;
+					isFirstColumn = true;
+					$inputfield.removeClass('InputfieldColumnWidthLast');
+					// consoleLog('B: starting new row');
 				} else if(width + w > 100) {
 					// start new row and update width for last column
+					if($lastInputfield) $lastInputfield.addClass('InputfieldColumnWidthLast');
 					updateLastInputfield(lastW);
 					width = 0;
+					isFirstColumn = true;
+					// consoleLog('C: update last column for width and start new row');
+				} else if(width + w == 100) {
+					isLastColumn = true; 
+					// consoleLog('D: width is 100%');
 				} else {
-					// column that isn't first column
-					$inputfield.removeClass('InputfieldColumnWidthFirst');
+					// column that isn't first or last column
+					// consoleLog('E: not first or last column');
 				}
 
-				if(!width) {
-					// first column in a row
+				if(isLastColumn) {
+					$inputfield.addClass('InputfieldColumnWidthLast');
+				} else {
+					$inputfield.removeClass('InputfieldColumnWidthLast');
+				}
+				if(isFirstColumn) {
 					$inputfield.addClass('InputfieldColumnWidthFirst');
+				} else {
+					$inputfield.removeClass('InputfieldColumnWidthFirst');
 				}
 
 				width += w;
 				lastW = w; 
 				$lastInputfield = $inputfield;
-				lastGridClass = ukGridClass(w);
-				$inputfield.addClass(lastGridClass);
+				lastGridClass = ukGridClass(w, $inputfield);
 			});
+			
+			$inputfields.find('.InputfieldColumnWidthLast').removeClass('InputfieldColumnWidthLast');
 
 			if(width < 100) {
-				consoleLog($lastInputfield, 'outside call because ' + width + '<100');
+				// consoleLog('outside call because ' + width + '<100', $lastInputfield);
 				updateLastInputfield(w);
 			}
 		}

wire/modules/AdminTheme/AdminThemeUikit/uikit/dist/css/uikit.pw.css

@@ -14507,7 +14507,7 @@ a.tooltip:hover {
   background: #ffd;
 }
 .PageList .PageListItem > a.PageListPage {
-  line-height: 1.5em;
+  line-height: 1.6em;
   color: #7a002b;
   opacity: 1.0;
 }
@@ -14678,6 +14678,7 @@ body:not(.pw-narrow-width) .PageList .PageListItem.PageListNoChildren > a.PageLi
 .Inputfield {
   display: block;
   color: #354b60;
+  background: #fff;
   border: none;
   outline: 1px solid #d9e1ea;
 }
@@ -14746,6 +14747,14 @@ body:not(.pw-narrow-width) .PageList .PageListItem.PageListNoChildren > a.PageLi
 .Inputfield input[type=url]:not(.uk-input).InputfieldMaxWidth {
   width: 100%;
 }
+.Inputfield input[type=text]:not(.uk-input)[size],
+.Inputfield input[type=email]:not(.uk-input)[size],
+.Inputfield input[type=date]:not(.uk-input)[size],
+.Inputfield input[type=datetime]:not(.uk-input)[size],
+.Inputfield input[type=number]:not(.uk-input)[size],
+.Inputfield input[type=url]:not(.uk-input)[size] {
+  width: auto;
+}
 .Inputfield .InputfieldDatetime input.InputfieldDatetimeDatepicker {
   width: auto;
 }
@@ -14790,6 +14799,9 @@ body:not(.pw-narrow-width) .PageList .PageListItem.PageListNoChildren > a.PageLi
   padding-bottom: 4px;
   vertical-align: top;
 }
+.Inputfield input[size] {
+  width: auto;
+}
 .Inputfields .InputfieldIsOffset:not(.InputfieldColumnWidth) {
   margin-top: 20px;
   margin-bottom: 20px;
@@ -15974,7 +15986,7 @@ ul.uk-navbar-nav ul {
   position: absolute;
   bottom: -1px;
   left: 40%;
-  z-index: 999;
+  z-index: 99;
 }
 #pw-masthead .pw-search-form .pw-search-input {
   color: #8d939e;