From 4304586464700fdc3ed2ab4c7049b28ce6819508 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Reinhard=20F=C3=BChricht?= <rf@typoheads.at>
Date: Sat, 16 Jan 2016 11:32:26 +0100
Subject: [PATCH] [TASK] Import/Export Reformat Fluid templates

Reformats Fluid templates to use Bootstrap markup.

Resolves: #72764
Releases: master
Change-Id: I4fea730c2c790e23574bfb8476d430e6c689becb
Reviewed-on: https://review.typo3.org/45995
Reviewed-by: Morton Jonuschat <m.jonuschat@mojocode.de>
Tested-by: Morton Jonuschat <m.jonuschat@mojocode.de>
Reviewed-by: Ludwig Rafelsberger <ludwig.rafelsberger@gmx.at>
Tested-by: Ludwig Rafelsberger <ludwig.rafelsberger@gmx.at>
Reviewed-by: Anja Leichsenring <aleichsenring@ab-softlab.de>
Tested-by: Anja Leichsenring <aleichsenring@ab-softlab.de>
---
 .../Controller/ImportExportController.php     |  44 +--
 .../Resources/Private/Language/locallang.xlf  |   3 +
 .../Resources/Private/Layouts/Default.html    |   3 +-
 .../Private/Partials/ContentOverview.html     | 110 +++----
 .../Partials/Export/AdvancedOptions.html      |  87 ++----
 .../Partials/Export/Configuration.html        | 290 +++++++++---------
 .../Private/Partials/Export/Save.html         | 160 +++++-----
 .../Private/Partials/Import/Import.html       | 215 +++++++------
 .../Private/Partials/Import/MetaData.html     |  54 ++--
 .../Private/Partials/Import/Upload.html       |  68 ++--
 .../Templates/ImportExport/Export.html        |  99 +++---
 .../Templates/ImportExport/Import.html        | 149 +++++----
 12 files changed, 629 insertions(+), 653 deletions(-)

diff --git a/typo3/sysext/impexp/Classes/Controller/ImportExportController.php b/typo3/sysext/impexp/Classes/Controller/ImportExportController.php
index b9c08611eda2..7083a35f6f44 100644
--- a/typo3/sysext/impexp/Classes/Controller/ImportExportController.php
+++ b/typo3/sysext/impexp/Classes/Controller/ImportExportController.php
@@ -172,7 +172,7 @@ class ImportExportController extends BaseScriptClass
         $this->doc = GeneralUtility::makeInstance(DocumentTemplate::class);
         $this->doc->bodyTagId = 'imp-exp-mod';
         $this->pageinfo = BackendUtility::readPageAccess($this->id, $this->perms_clause);
-        if(is_array($this->pageinfo)) {
+        if (is_array($this->pageinfo)) {
             $this->moduleTemplate->getDocHeaderComponent()->setMetaInformation($this->pageinfo);
         }
         // Setting up the context sensitive menu:
@@ -649,21 +649,21 @@ class ImportExportController extends BaseScriptClass
                 $nameSuggestion .= $tName . '_' . $rUid;
                 $rec = BackendUtility::getRecordWSOL($tName, $rUid);
                 if (!empty($rec)) {
-                    $records[] = '
-					<tr class="bgColor4">
-						<td><strong>' . $this->lang->getLL('makeconfig_record', true) . '</strong></td>
-						<td>' . $this->iconFactory->getIconForRecord($tName, $rec, Icon::SIZE_SMALL)->render() . BackendUtility::getRecordTitle($tName, $rec, true)
-                            . '<input type="hidden" name="tx_impexp[record][]" value="' . htmlspecialchars(($tName . ':' . $rUid)) . '" /></td>
-					</tr>';
+                    $records[] = array(
+                        'icon' => $this->iconFactory->getIconForRecord($tName, $rec, Icon::SIZE_SMALL)->render(),
+                        'title' => BackendUtility::getRecordTitle($tName, $rec, true),
+                        'tableName' => $tName,
+                        'recordUid' => $rUid
+                    );
                 }
             }
-            $this->standaloneView->assign('records', implode('', $records));
+            $this->standaloneView->assign('records', $records);
         }
         // Single tables/pids:
         if (is_array($inData['list'])) {
 
             // Display information about pages from which the export takes place
-            $tblList = '';
+            $tableList = array();
             foreach ($inData['list'] as $reference) {
                 $referenceParts = explode(':', $reference);
                 $tableName = $referenceParts[0];
@@ -677,24 +677,18 @@ class ImportExportController extends BaseScriptClass
                         $iconAndTitle = $this->iconFactory->getIconForRecord('pages', $record, Icon::SIZE_SMALL)->render()
                             . BackendUtility::getRecordTitle('pages', $record, true);
                     }
-                    $tblList .= 'Table "' . $tableName . '" from ' . $iconAndTitle
-                        . '<input type="hidden" name="tx_impexp[list][]" value="' . htmlspecialchars($reference) . '" /><br/>';
+                    $tableList[] = array(
+                        'tableName' => $tableName,
+                        'iconAndTitle' => $iconAndTitle,
+                        'reference' => $reference
+                    );
                 }
             }
-            $this->standaloneView->assign('tableList', $tblList);
+            $this->standaloneView->assign('tableList', $tableList);
         }
 
         $this->standaloneView->assign('externalReferenceTableSelectOptions', $this->getTableSelectOptions());
         $this->standaloneView->assign('externalStaticTableSelectOptions', $this->getTableSelectOptions());
-
-        // Exclude:
-        $excludeHiddenFields = '';
-        if (is_array($inData['exclude'])) {
-            foreach ($inData['exclude'] as $key => $value) {
-                $excludeHiddenFields .= '<input type="hidden" name="tx_impexp[exclude][' . $key . ']" value="1" />';
-            }
-            $this->standaloneView->assign('excludedKeys', implode(', ', array_keys($inData['exclude'])));
-        }
         $this->standaloneView->assign('nameSuggestion', $nameSuggestion);
     }
 
@@ -754,11 +748,7 @@ class ImportExportController extends BaseScriptClass
 
         $fileName = '';
         if ($saveFolder) {
-            $fileName = sprintf($this->lang->getLL('makesavefo_filenameSavedInS', true), $saveFolder->getPublicUrl())
-                . '<br/>
-						<input type="text" name="tx_impexp[filename]" value="'
-                . htmlspecialchars($inData['filename']) . '" /><br/>';
-
+            $this->standaloneView->assign('saveFolder', $saveFolder->getPublicUrl());
             $this->standaloneView->assign('hasSaveFolder', true);
         }
         $this->standaloneView->assign('fileName', $fileName);
@@ -834,7 +824,7 @@ class ImportExportController extends BaseScriptClass
                 if (GeneralUtility::_POST('_upload')) {
                     $this->standaloneView->assign('submitted', GeneralUtility::_POST('_upload'));
                     $this->standaloneView->assign('noFileUploaded', $this->fileProcessor->internalUploadMap[1]);
-                    if($this->uploadedFiles[0]) {
+                    if ($this->uploadedFiles[0]) {
                         $this->standaloneView->assign('uploadedFile', $this->uploadedFiles[0]->getName());
                     }
                 }
diff --git a/typo3/sysext/impexp/Resources/Private/Language/locallang.xlf b/typo3/sysext/impexp/Resources/Private/Language/locallang.xlf
index f4ab7b0f3e20..4cbd983aad20 100644
--- a/typo3/sysext/impexp/Resources/Private/Language/locallang.xlf
+++ b/typo3/sysext/impexp/Resources/Private/Language/locallang.xlf
@@ -90,6 +90,9 @@
 			<trans-unit id="makeconfig_tablePids">
 				<source>Table/Pids:</source>
 			</trans-unit>
+			<trans-unit id="makeconfig_tableListEntry">
+            	<source>Table "%s" from %s</source>
+            </trans-unit>
 			<trans-unit id="makeconfig_relationsAndExclusions">
 				<source>Relations and Exclusions:</source>
 			</trans-unit>
diff --git a/typo3/sysext/impexp/Resources/Private/Layouts/Default.html b/typo3/sysext/impexp/Resources/Private/Layouts/Default.html
index 365344fcf0e9..58f06163d621 100644
--- a/typo3/sysext/impexp/Resources/Private/Layouts/Default.html
+++ b/typo3/sysext/impexp/Resources/Private/Layouts/Default.html
@@ -1,8 +1,7 @@
 <form action="{moduleUrl}" method="post" id="ImportExportController" enctype="multipart/form-data" xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers">
-	<input type="hidden" name="id" value="{id}" />
+	<f:form.hidden name="id" value="{id}" />
 
 	<h3><f:translate key="title_{inData.action}" /></h3>
-	<div style="padding-top: 5px;"></div>
 
 	<f:render section="content" />
 
diff --git a/typo3/sysext/impexp/Resources/Private/Partials/ContentOverview.html b/typo3/sysext/impexp/Resources/Private/Partials/ContentOverview.html
index 4829097a6715..0026384097e6 100644
--- a/typo3/sysext/impexp/Resources/Private/Partials/ContentOverview.html
+++ b/typo3/sysext/impexp/Resources/Private/Partials/ContentOverview.html
@@ -1,5 +1,4 @@
-<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
-			data-namespace-typo3-fluid="true">
+<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
 <f:if condition="{import.mode} == 'import'">
 	<f:then>
 		<h2>
@@ -21,72 +20,73 @@
 </f:if>
 <div>
 	<f:if condition="{contentOverview.dat.header.pagetree -> f:count()} > 0">
-		<strong><f:translate key="impexpcore_displaycon_insidePagetree" /></strong>
-		<br /><br />
-		<table border="0" cellpadding="0" cellspacing="1">
-			<tr class="bgColor5 tableheader">
-				<td><f:translate key="impexpcore_displaycon_controls" /></td>
-				<td><f:translate key="impexpcore_displaycon_title" /></td>
-				<td><f:translate key="impexpcore_displaycon_size" /></td>
-				<td><f:translate key="impexpcore_displaycon_message" /></td>
-				<f:if condition="{contentOverview.update}">
-					<td><f:translate key="impexpcore_displaycon_updateMode" /></td>
-					<td><f:translate key="impexpcore_displaycon_currentPath" /></td>
-				</f:if>
-				<f:if condition="{contentOverview.showDiff}">
-					<td><f:translate key="impexpcore_displaycon_result" /></td>
-				</f:if>
-			</tr>
-			<f:for each="{contentOverview.pagetreeLines}" as="line">
-				<tr class="{line.class}">
-					<td><f:format.raw>{line.controls}</f:format.raw></td>
-					<td nowrap="nowrap"><f:format.raw>{line.preCode}{line.title}</f:format.raw></td>
-					<td nowrap="nowrap"><f:format.raw>{line.fileSize}</f:format.raw></td>
-					<td nowrap="nowrap"><f:format.raw>{line.message}</f:format.raw></td>
+		<h3><f:translate key="impexpcore_displaycon_insidePagetree" /></h3>
+		<table class="table table-striped table-hover">
+			<tbody>
+				<tr>
+					<th><f:translate key="impexpcore_displaycon_controls" /></th>
+					<th><f:translate key="impexpcore_displaycon_title" /></th>
+					<th><f:translate key="impexpcore_displaycon_size" /></th>
+					<th><f:translate key="impexpcore_displaycon_message" /></th>
 					<f:if condition="{contentOverview.update}">
-						<td nowrap="nowrap"><f:format.raw>{line.updateMode}</f:format.raw></td>
-						<td nowrap="nowrap"><f:format.raw>{line.updatePath}</f:format.raw></td>
+						<th><f:translate key="impexpcore_displaycon_updateMode" /></th>
+						<th><f:translate key="impexpcore_displaycon_currentPath" /></th>
 					</f:if>
 					<f:if condition="{contentOverview.showDiff}">
-						<td><f:format.raw>{line.showDiffContent}</f:format.raw></td>
+						<th><f:translate key="impexpcore_displaycon_result" /></th>
 					</f:if>
 				</tr>
-			</f:for>
+				<f:for each="{contentOverview.pagetreeLines}" as="line">
+					<tr>
+						<td><f:format.raw>{line.controls}</f:format.raw></td>
+						<td class="col-nowrap"><f:format.raw>{line.preCode}{line.title}</f:format.raw></td>
+						<td class="col-nowrap"><f:format.raw>{line.fileSize}</f:format.raw></td>
+						<td class="col-nowrap"><f:format.raw>{line.message}</f:format.raw></td>
+						<f:if condition="{contentOverview.update}">
+							<td class="col-nowrap"><f:format.raw>{line.updateMode}</f:format.raw></td>
+							<td class="col-nowrap"><f:format.raw>{line.updatePath}</f:format.raw></td>
+						</f:if>
+						<f:if condition="{contentOverview.showDiff}">
+							<td><f:format.raw>{line.showDiffContent}</f:format.raw></td>
+						</f:if>
+					</tr>
+				</f:for>
+			</tbody>
 		</table>
-		<br /><br />
 	</f:if>
 	<f:if condition="{contentOverview.remainingRecords -> f:count()} > 0">
-		<strong><f:translate key="impexpcore_singlereco_outsidePagetree" /></strong>
-		<br /><br />
-		<table border="0" cellpadding="0" cellspacing="1">
-			<tr class="bgColor5 tableheader">
-				<td><f:translate key="impexpcore_displaycon_controls" /></td>
-				<td><f:translate key="impexpcore_displaycon_title" /></td>
-				<td><f:translate key="impexpcore_displaycon_size" /></td>
-				<td><f:translate key="impexpcore_displaycon_message" /></td>
-				<f:if condition="{contentOverview.update}">
-					<td><f:translate key="impexpcore_displaycon_updateMode" /></td>
-					<td><f:translate key="impexpcore_displaycon_currentPath" /></td>
-				</f:if>
-				<f:if condition="{contentOverview.showDiff}">
-					<td><f:translate key="impexpcore_displaycon_result" /></td>
-				</f:if>
-			</tr>
-			<f:for each="{contentOverview.remainingRecords}" as="line">
-				<tr class="{line.class}">
-					<td><f:format.raw>{line.controls}</f:format.raw></td>
-					<td nowrap="nowrap"><f:format.raw>{line.preCode}{line.title}</f:format.raw></td>
-					<td nowrap="nowrap"><f:format.raw>{line.fileSize}</f:format.raw></td>
-					<td nowrap="nowrap"><f:format.raw>{line.message}</f:format.raw></td>
+		<h3><f:translate key="impexpcore_singlereco_outsidePagetree" /></h3>
+		<table class="table table-striped table-hover">
+			<tbody>
+				<tr>
+					<th><f:translate key="impexpcore_displaycon_controls" /></th>
+					<th><f:translate key="impexpcore_displaycon_title" /></th>
+					<th><f:translate key="impexpcore_displaycon_size" /></th>
+					<th><f:translate key="impexpcore_displaycon_message" /></th>
 					<f:if condition="{contentOverview.update}">
-						<td nowrap="nowrap"><f:format.raw>{line.updateMode}</f:format.raw></td>
-						<td nowrap="nowrap"><f:format.raw>{line.updatePath}</f:format.raw></td>
+						<th><f:translate key="impexpcore_displaycon_updateMode" /></th>
+						<th><f:translate key="impexpcore_displaycon_currentPath" /></th>
 					</f:if>
 					<f:if condition="{contentOverview.showDiff}">
-						<td><f:format.raw>{line.showDiffContent}</f:format.raw></td>
+						<th><f:translate key="impexpcore_displaycon_result" /></th>
 					</f:if>
 				</tr>
-			</f:for>
+				<f:for each="{contentOverview.remainingRecords}" as="line">
+					<tr>
+						<td><f:format.raw>{line.controls}</f:format.raw></td>
+						<td class="col-nowrap"><f:format.raw>{line.preCode}{line.title}</f:format.raw></td>
+						<td class="col-nowrap"><f:format.raw>{line.fileSize}</f:format.raw></td>
+						<td class="col-nowrap"><f:format.raw>{line.message}</f:format.raw></td>
+						<f:if condition="{contentOverview.update}">
+							<td class="col-nowrap"><f:format.raw>{line.updateMode}</f:format.raw></td>
+							<td class="col-nowrap"><f:format.raw>{line.updatePath}</f:format.raw></td>
+						</f:if>
+						<f:if condition="{contentOverview.showDiff}">
+							<td><f:format.raw>{line.showDiffContent}</f:format.raw></td>
+						</f:if>
+					</tr>
+				</f:for>
+			</tbody>
 		</table>
 	</f:if>
 </div>
diff --git a/typo3/sysext/impexp/Resources/Private/Partials/Export/AdvancedOptions.html b/typo3/sysext/impexp/Resources/Private/Partials/Export/AdvancedOptions.html
index dfbf51573245..b4210bd8979f 100644
--- a/typo3/sysext/impexp/Resources/Private/Partials/Export/AdvancedOptions.html
+++ b/typo3/sysext/impexp/Resources/Private/Partials/Export/AdvancedOptions.html
@@ -1,55 +1,32 @@
-<table border="0" cellpadding="1" cellspacing="1" xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers">
-	<tr class="tableheader bgColor5">
-		<td colspan="2">
-			<f:translate key="makeadvanc_softReferences" />
-		</td>
-	</tr>
-	<tr class="bgColor4">
-		<td><label for="checkExcludeHTMLfileResources"><strong>
-			<f:translate key="makeadvanc_excludeHtmlCssFile" />
-		</strong></label>
-			<f:be.buttons.csh table="xMOD_tx_impexp" field="htmlCssResources" />
-		</td>
-		<td>
-			<input type="checkbox" name="tx_impexp[excludeHTMLfileResources]" id="checkExcludeHTMLfileResources" value="1" {f:if(condition: inData.excludeHTMLfileResources, then: ' checked="checked"')}>
-		</td>
-	</tr>
-	<tr class="tableheader bgColor5">
-		<td colspan="2">
-			<f:translate key="makeadvanc_files" />
-		</td>
-	</tr>
-	<tr class="bgColor4">
-		<td><label for="saveFilesOutsideExportFile"><strong>
-			<f:translate key="makeadvanc_saveFilesOutsideExportFile" />
-			<f:translate key="makeadvanc_saveFilesOutsideExportFile_limit" />
-		</strong></label></td>
-		<td>
-			<input type="checkbox" name="tx_impexp[saveFilesOutsideExportFile]" id="saveFilesOutsideExportFile" value="1" {f:if(condition: inData.saveFilesOutsideExportFile, then: ' checked="checked"')} />
-		</td>
-	</tr>
-	<tr class="tableheader bgColor5">
-		<td colspan="2">
-			<f:translate key="makeadvanc_extensionDependencies" />
-		</td>
-	</tr>
-	<tr class="bgColor4">
-		<td><strong>
-			<f:translate key="makeadvanc_selectExtensionsThatThe" />
-		</strong>
-			<f:be.buttons.csh table="xMOD_tx_impexp" field="extensionDependencies" />
-		</td>
-		<td>
-			<f:form.select name="tx_impexp[extension_dep]" multiple="multiple"
-										 size="{f:if(condition: '{extensions -> f:count()} > 9', then: '10', else: '5')}"
-										 options="{extensions}" value="{inData.extension_dep}"/>
-		</td>
-	</tr>
-	<tr class="bgColor4">
-		<td>&nbsp;</td>
-		<td>
-			<input class="btn btn-default" type="submit" value="{f:translate(key: 'makesavefo_update')}">
-			<input type="hidden" name="tx_impexp[download_export_name]" value="">
-		</td>
-	</tr>
-</table>
+<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
+<h4><f:translate key="makeadvanc_softReferences" /></h4>
+<div class="form-group">
+	<label for="checkExcludeHTMLfileResources">
+		<f:form.checkbox name="tx_impexp[excludeHTMLfileResources]" id="checkExcludeHTMLfileResources" value="1" checked="{inData.excludeHTMLfileResources} == 1" />
+		<f:translate key="makeadvanc_excludeHtmlCssFile" />
+		<f:be.buttons.csh table="xMOD_tx_impexp" field="htmlCssResources" />
+	</label>
+</div>
+<h4><f:translate key="makeadvanc_files" /></h4>
+<div class="form-group">
+	<label for="saveFilesOutsideExportFile">
+		<f:form.checkbox name="tx_impexp[saveFilesOutsideExportFile]" id="saveFilesOutsideExportFile" value="1" checked="{inData.saveFilesOutsideExportFile} == 1" />
+		<f:translate key="makeadvanc_saveFilesOutsideExportFile" />
+		<f:translate key="makeadvanc_saveFilesOutsideExportFile_limit" />
+	</label>
+</div>
+<h4><f:translate key="makeadvanc_extensionDependencies" /></h4>
+<div class="form-group">
+	<label for="saveFilesOutsideExportFile">
+		<f:translate key="makeadvanc_selectExtensionsThatThe" />
+		<f:be.buttons.csh table="xMOD_tx_impexp" field="extensionDependencies" />
+		<f:form.select class="form-control" name="tx_impexp[extension_dep]" multiple="multiple"
+									 size="{f:if(condition: '{extensions -> f:count()} > 9', then: '10', else: '5')}"
+									 options="{extensions}" value="{inData.extension_dep}"/>
+	</label>
+</div>
+<div class="form-group">
+	<f:form.submit class="btn btn-default" value="{f:translate(key: 'makesavefo_update')}" />
+	<f:form.hidden name="tx_impexp[download_export_name]" value="{nameSuggestion -> f:format.crop(maxCharacters: 30, append: '')}" />
+</div>
+</html>
diff --git a/typo3/sysext/impexp/Resources/Private/Partials/Export/Configuration.html b/typo3/sysext/impexp/Resources/Private/Partials/Export/Configuration.html
index c0f67e2546ea..a2ba66458896 100644
--- a/typo3/sysext/impexp/Resources/Private/Partials/Export/Configuration.html
+++ b/typo3/sysext/impexp/Resources/Private/Partials/Export/Configuration.html
@@ -1,142 +1,158 @@
-<table border="0" cellpadding="1" cellspacing="1" xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers">
-	<f:if condition="{inData.pagetree.id}">
-		<tr class="tableheader bgColor5">
-			<td colspan="2">
-				<f:translate key="makeconfig_exportPagetreeConfiguration" />
-				<f:be.buttons.csh table="xMOD_tx_impexp" field="pageTreeCfg" />
-			</td>
-		</tr>
-		<tr class="bgColor4">
-			<td><strong><f:translate key="makeconfig_pageId" /></strong></td>
-			<td>{inData.pagetree.id}<input type="hidden" value="{inData.pagetree.id}" name="tx_impexp[pagetree][id]" /></td>
-		</tr>
-		<tr class="bgColor4">
-			<td>
-				<strong><f:translate key="makeconfig_tree" /></strong>
+<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
+<f:if condition="{inData.pagetree.id}">
+	<h3>
+		<f:translate key="makeconfig_exportPagetreeConfiguration" />
+		<f:be.buttons.csh table="xMOD_tx_impexp" field="pageTreeCfg" />
+	</h3>
+	<div class="row">
+		<div class="col-sm-2">
+			<label class="control-label"><f:translate key="makeconfig_pageId" /></label>
+		</div>
+		<div class="col-sm-10">
+			{inData.pagetree.id}
+			<f:form.hidden value="{inData.pagetree.id}" name="tx_impexp[pagetree][id]" />
+		</div>
+	</div>
+	<div class="row">
+		<div class="col-sm-2">
+			<label class="control-label">
+				<f:translate key="makeconfig_tree" />
 				<f:be.buttons.csh table="xMOD_tx_impexp" field="pageTreeDisplay" />
-			</td>
-			<td>
-				<f:if condition="{treeHTML}">
-					<f:then><f:format.raw>{treeHTML}</f:format.raw></f:then>
-					<f:else><f:translate key="makeconfig_noTreeExportedOnly" /></f:else>
-				</f:if>
-			</td>
-		</tr>
-		<tr class="bgColor4">
-			<td>
-				<strong><f:translate key="makeconfig_levels" /></strong>
-				<f:be.buttons.csh table="xMOD_tx_impexp" field="pageTreeMode" />
-			</td>
-			<td>
-				<f:form.select name="tx_impexp[pagetree][levels]" options="{levelSelectOptions}" value="{inData.pagetree.levels}" />
-			</td>
-		</tr>
-		<tr class="bgColor4">
-			<td>
-				<strong><f:translate key="makeconfig_includeTables" /></strong>
-				<f:be.buttons.csh table="xMOD_tx_impexp" field="pageTreeRecordLimit" />
-			</td>
-			<td>
-				<f:form.select name="tx_impexp[pagetree][tables]" options="{tableSelectOptions}"
-											 multiple="multiple" value="{inData.pagetree.tables}"
-											 size="{f:if(condition: '{tableSelectOptions -> f:count()} > 9', then: '10', else: '5')}" />
-				<br/>
-				<f:translate key="makeconfig_maxNumberOfRecords" />
-				<br/>
-				<f:form.textfield name="tx_impexp[pagetree][maxNumber]" value="{inData.pagetree.maxNumber}" />
-				<br/>
-			</td>
-		</tr>
-	</f:if>
-	<f:if condition="{records}">
-		<tr class="tableheader bgColor5">
-			<td colspan="2">
-				<f:translate key="makeconfig_exportSingleRecord" />
-				<f:be.buttons.csh table="xMOD_tx_impexp" field="singleRecord" />
-			</td>
-		</tr>
-		<f:format.raw>{records}</f:format.raw>
-	</f:if>
-	<f:if condition="{tableList}">
-		<tr class="tableheader bgColor5">
-			<td colspan="2"><f:translate key="makeconfig_exportTablesFromPages" /></td>
-		</tr>
-		<tr class="bgColor4">
-			<td>
-				<strong><f:translate key="makeconfig_exportSingleRecord" /></strong>
+			</label>
+		</div>
+		<div class="col-sm-10">
+			<f:if condition="{treeHTML}">
+				<f:then><f:format.raw>{treeHTML}</f:format.raw></f:then>
+				<f:else><f:translate key="makeconfig_noTreeExportedOnly" /></f:else>
+			</f:if>
+		</div>
+		<f:form.hidden value="{inData.pagetree.id}" name="tx_impexp[pagetree][id]" />
+	</div>
+	<div class="form-group">
+		<label for="impexp-pagetree-levels">
+			<f:translate key="makeconfig_levels" />
+			<f:be.buttons.csh table="xMOD_tx_impexp" field="pageTreeMode" />
+		</label>
+		<f:form.select class="form-control" name="tx_impexp[pagetree][levels]" id="impexp-pagetree-levels" options="{levelSelectOptions}" value="{inData.pagetree.levels}" />
+	</div>
+	<div class="form-group">
+		<label for="impexp-pagetree-includetables">
+			<f:translate key="makeconfig_includeTables" />
+			<f:be.buttons.csh table="xMOD_tx_impexp" field="pageTreeRecordLimit" />
+		</label>
+		<f:form.select class="form-control" name="tx_impexp[pagetree][tables]" id="impexp-pagetree-includetables"
+									 options="{tableSelectOptions}" multiple="multiple" value="{inData.pagetree.tables}"
+									 size="{f:if(condition: '{tableSelectOptions -> f:count()} > 9', then: '10', else: '5')}" />
+	</div>
+	<div class="form-group">
+		<label for="impexp-pagetree-maxnumber">
+			<f:translate key="makeconfig_maxNumberOfRecords" />
+		</label>
+		<f:form.textfield class="form-control" name="tx_impexp[pagetree][maxNumber]" id="impexp-pagetree-maxnumber" value="{inData.pagetree.maxNumber}" />
+	</div>
+</f:if>
+<f:if condition="{records -> f:count()} > 0">
+	<h4>
+		<f:translate key="makeconfig_exportSingleRecord" />
+		<f:be.buttons.csh table="xMOD_tx_impexp" field="singleRecord" />
+	</h4>
+	<div class="row">
+		<div class="col-sm-2">
+			<label><f:translate key="makeconfig_record" /></label>
+		</div>
+		<div class="col-sm-10">
+			<f:for each="{records}" as="record">
+				<f:format.raw>{record.icon}</f:format.raw>
+				{record.title}
+				<f:form.hidden name="tx_impexp[record][]" value="{record.tableName}:{record.recordUid}" />
+				<br />
+			</f:for>
+		</div>
+	</div>
+</f:if>
+<f:if condition="{tableList -> f:count()} > 0">
+	<h4><f:translate key="makeconfig_exportTablesFromPages" /></h4>
+	<div class="row">
+		<div class="col-sm-2">
+			<label>
+				<f:translate key="makeconfig_tablePids" />
 				<f:be.buttons.csh table="xMOD_tx_impexp" field="tableList" />
-			</td>
-			<td>{tableList}</td>
-		</tr>
-		<tr class="bgColor4">
-			<td>
-				<strong><f:translate key="makeconfig_maxNumberOfRecords" /></strong>
-				<f:be.buttons.csh table="xMOD_tx_impexp" field="tableListMaxNumber" />
-			</td>
-			<td>
-				<f:form.textfield name="tx_impexp[listCfg][maxNumber]" value="{inData.listCfg.maxNumber}" /><br/>
-			</td>
-		</tr>
-	</f:if>
-	<tr class="tableheader bgColor5">
-		<td colspan="2"><f:translate key="makeconfig_relationsAndExclusions" /></td>
-	</tr>
-	<tr class="bgColor4">
-		<td>
-			<strong><f:translate key="makeconfig_includeRelationsToTables" /></strong>
-			<f:be.buttons.csh table="xMOD_tx_impexp" field="inclRelations" />
-		</td>
-		<td>
-			<f:form.select name="tx_impexp[external_ref][tables]" options="{externalReferenceTableSelectOptions}"
-										 multiple="multiple" value="{inData.external_ref.tables}"
-										 size="{f:if(condition: '{externalReferenceTableSelectOptions -> f:count()} > 9', then: '10', else: '5')}" />
-		</td>
-	</tr>
-	<tr class="bgColor4">
-		<td>
-			<strong><f:translate key="makeconfig_useStaticRelationsFor" /></strong>
-			<f:be.buttons.csh table="xMOD_tx_impexp" field="staticRelations" />
-		</td>
-		<td>
-			<f:form.select name="tx_impexp[external_static][tables]" options="{externalStaticTableSelectOptions}"
-										 multiple="multiple" value="{inData.external_static.tables}"
-										 size="{f:if(condition: '{externalStaticTableSelectOptions -> f:count()} > 9', then: '10', else: '5')}" />
-			<br/>
-			<label for="checkShowStaticRelations">
-				<f:translate key="makeconfig_showStaticRelations" />
 			</label>
-			<f:form.checkbox name="tx_impexp[showStaticRelations]" id="checkShowStaticRelations" value="1"
-											 checked="{inData.showStaticRelations} == 1" />
-		</td>
-	</tr>
-	<tr class="bgColor4">
-		<td>
-			<strong><f:translate key="makeconfig_excludeElements" /></strong>
-			<f:be.buttons.csh table="xMOD_tx_impexp" field="excludedElements" />
-		</td>
-		<td>
-			<f:for each="{inData.exclude}" key="key" as="value">
-				<input type="hidden" name="tx_impexp[exclude][{key}]" value="1" />
+		</div>
+		<div class="col-sm-10">
+			<f:for each="{tableList}" as="table">
+				<f:translate key="makeconfig_tableListEntry" arguments="{0: table.tableName, 1: table.iconAndTitle}" />
+				<f:form.hidden name="tx_impexp[list][]" value="{table.reference}" />
+				<br />
 			</f:for>
-			<f:if condition="{excludedKeys}">
-				<f:then>
-					<em>{excludedKeys}</em><hr/>
-					<label for="checkExclude"><f:translate key="makeconfig_clearAllExclusions" /></label>
-					<input type="checkbox" name="tx_impexp[exclude]" id="checkExclude" value="1" />
-				</f:then>
-				<f:else>
+		</div>
+	</div>
+	<div class="form-group">
+		<label for="impexp-listcfg-maxnumber">
+			<f:translate key="makeconfig_maxNumberOfRecords" />
+			<f:be.buttons.csh table="xMOD_tx_impexp" field="tableListMaxNumber" />
+		</label>
+		<f:form.textfield class="form-control" name="tx_impexp[listCfg][maxNumber]" id="impexp-listcfg-maxnumber"value="{inData.listCfg.maxNumber}" />
+	</div>
+</f:if>
+<h4><f:translate key="makeconfig_relationsAndExclusions" /></h4>
+<div class="form-group">
+	<label for="impexp-externalref-tables">
+		<f:translate key="makeconfig_includeRelationsToTables" />
+		<f:be.buttons.csh table="xMOD_tx_impexp" field="inclRelations" />
+	</label>
+	<f:form.select class="form-control" name="tx_impexp[external_ref][tables]" id="impexp-externalref-tables"
+								 options="{externalReferenceTableSelectOptions}" multiple="multiple" value="{inData.external_ref.tables}"
+								 size="{f:if(condition: '{externalReferenceTableSelectOptions -> f:count()} > 9', then: '10', else: '5')}" />
+</div>
+<div class="form-group">
+	<label for="impexp-externalstatic-tables">
+		<f:translate key="makeconfig_useStaticRelationsFor" />
+		<f:be.buttons.csh table="xMOD_tx_impexp" field="staticRelations" />
+	</label>
+	<f:form.select class="form-control" name="tx_impexp[external_static][tables]" id="impexp-externalstatic-tables"
+								 options="{externalStaticTableSelectOptions}" multiple="multiple" value="{inData.external_static.tables}"
+								 size="{f:if(condition: '{externalStaticTableSelectOptions -> f:count()} > 9', then: '10', else: '5')}" />
+</div>
+<div class="form-group">
+	<label for="checkShowStaticRelations">
+		<f:form.checkbox name="tx_impexp[showStaticRelations]" id="checkShowStaticRelations" value="1"
+										 checked="{inData.showStaticRelations} == 1" />
+		<f:translate key="makeconfig_showStaticRelations" />
+	</label>
+</div>
+
+<div class="form-group">
+	<label class="control-label">
+		<f:translate key="makeconfig_excludeElements" />
+		<f:be.buttons.csh table="xMOD_tx_impexp" field="excludedElements" />
+	</label>
+	<p class="form-control-static">
+		<f:if condition="{inData.exclude -> f:count()} > 0">
+			<f:then>
+				<f:for each="{inData.exclude}" key="key" as="value" iteration="index">
+					<f:form.hidden name="tx_impexp[exclude][{key}]" value="1" />
+					<f:if condition="{index.isLast}">
+						<f:then>{key}</f:then>
+						<f:else>{key}, </f:else>
+					</f:if>
+				</f:for>
+				<label for="checkExclude">
+					<f:form.checkbox name="tx_impexp[exclude]" id="checkExclude" value="1" />
+					<f:translate key="makeconfig_clearAllExclusions" />
+				</label>
+			</f:then>
+			<f:else>
 					<f:translate key="makeconfig_noExcludedElementsYet" />
-				</f:else>
-			</f:if>
-		</td>
-	</tr>
-	<tr class="bgColor4">
-		<td>&nbsp;</td>
-		<td>
-			<input class="btn btn-default" type="submit" value="{f:translate(key: 'makeadvanc_update')}" />
-			<input type="hidden"
-						 name="tx_impexp[download_export_name]"
-						 value="{nameSuggestion -> f:format.crop(maxCharacters: 30, append: '')}" />
-		</td>
-	</tr>
-</table>
+			</f:else>
+		</f:if>
+	</p>
+</div>
+
+<div class="form-group">
+	<f:form.submit class="btn btn-default" value="{f:translate(key: 'makeadvanc_update')}" />
+	<f:form.hidden
+				 name="tx_impexp[download_export_name]"
+				 value="{nameSuggestion -> f:format.crop(maxCharacters: 30, append: '')}" />
+</div>
+</html>
diff --git a/typo3/sysext/impexp/Resources/Private/Partials/Export/Save.html b/typo3/sysext/impexp/Resources/Private/Partials/Export/Save.html
index 0c16b74875aa..79562c314f1d 100644
--- a/typo3/sysext/impexp/Resources/Private/Partials/Export/Save.html
+++ b/typo3/sysext/impexp/Resources/Private/Partials/Export/Save.html
@@ -1,80 +1,82 @@
-<table border="0" cellpadding="1" cellspacing="1" xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers">
-	<tr class="tableheader bgColor5">
-		<td colspan="2"><f:translate key="makesavefo_presets" /></td>
-	</tr>
-	<tr class="bgColor4">
-		<td>
-			<strong><f:translate key="makesavefo_presets" /></strong>
-			<f:be.buttons.csh table="xMOD_tx_impexp" field="presets" />
-		<td>
-			<f:translate key="makesavefo_selectPreset" />
-			<br/>
-			<f:form.select name="preset[select]" options="{presetSelectOptions}" />
+<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
+<h3>
+	<f:translate key="makesavefo_presets" />
+	<f:be.buttons.csh table="xMOD_tx_impexp" field="presets" />
+</h3>
+<div class="form-group">
+	<label for="preset-select"><f:translate key="makesavefo_selectPreset" /></label>
+	<f:form.select class="form-control" id="preset-select" name="preset[select]" options="{presetSelectOptions}" />
+</div>
+<div class="form-group">
+	<f:form.hidden name="not-set" value="1" id="t3js-submit-field" />
+	<f:form.submit class="btn btn-default" value="{f:translate(key: 'makesavefo_load')}" name="preset[load]" />
+	<f:form.button class="btn btn-default t3js-confirm-trigger"
+								 type="button" name="preset[save]"
+								 data="{title: '{f:translate(key: \'pleaseConfirm\')}', message: '{f:translate(key: \'makesavefo_areYouSure\')}'}">
+		<f:translate key="makesavefo_save" />
+	</f:form.button>
+	<f:form.button class="btn btn-default t3js-confirm-trigger"
+								 type="button" name="preset[delete]"
+								 data="{title: '{f:translate(key: \'pleaseConfirm\')}', message: '{f:translate(key: \'makesavefo_areYouSure\')}'}">
+		<f:translate key="makesavefo_delete" />
+	</f:form.button>
+	<f:form.button class="btn btn-default t3js-confirm-trigger"
+								 type="button" name="preset[merge]"
+								 data="{title: '{f:translate(key: \'pleaseConfirm\')}', message: '{f:translate(key: \'makesavefo_areYouSure\')}'}">
+		<f:translate key="makesavefo_merge" />
+	</f:form.button>
+</div>
+<div class="form-group">
+	<label for="preset-title"><f:translate key="makesavefo_titleOfNewPreset" /></label>
+	<f:form.textfield class="form-control" id="preset-title" name="tx_impexp[preset][title]" value="{inData.preset.title}" />
+</div>
+<div class="form-group">
+	<label for="checkPresetPublic">
+		<f:form.checkbox name="tx_impexp[preset][public]" id="checkPresetPublic" value="1"
+									 checked="{inData.preset.public} == 1" />
+		<f:translate key="makesavefo_public" />
+	</label>
+</div>
 
-			<br/>
-			<input type="hidden" name="not-set" value="1" id="t3js-submit-field" />
-			<input class="btn btn-default" type="submit" value="{f:translate(key: 'makesavefo_load')}" name="preset[load]" />
-			<input class="btn btn-default t3js-confirm-trigger" type="button" value="{f:translate(key: 'makesavefo_save')}"
-						 name="preset[save]" data-title="{f:translate(key: 'pleaseConfirm')}" data-message="{f:translate(key: 'makesavefo_areYouSure')}" />
-			<input class="btn btn-default t3js-confirm-trigger" type="button" value="{f:translate(key: 'makesavefo_delete')}"
-						 name="preset[delete]" data-title="{f:translate(key: 'pleaseConfirm')}" data-message="{f:translate(key: 'makesavefo_areYouSure')}" />
-			<input class="btn btn-default t3js-confirm-trigger" type="button" value="{f:translate(key: 'makesavefo_merge')}"
-						 name="preset[merge]" data-title="{f:translate(key: 'pleaseConfirm')}" data-message="{f:translate(key: 'makesavefo_areYouSure')}" />
-			<br/>
-			<f:translate key="makesavefo_titleOfNewPreset" />
-			<input type="text" name="tx_impexp[preset][title]" value="{inData.preset.title}" />
-			<br/>
-			<label for="checkPresetPublic"><f:translate key="makesavefo_public" /></label>
-			<f:form.checkbox name="tx_impexp[preset][public]" id="checkPresetPublic" value="1"
-											 checked="{inData.preset.public} == 1" />
-			<br/>
-		</td>
-	</tr>
-	<tr class="tableheader bgColor5">
-		<td colspan="2"><f:translate key="makesavefo_outputOptions" /></td>
-	</tr>
-	<tr class="bgColor4">
-		<td>
-			<strong><f:translate key="makesavefo_metaData" /></strong>
-			<f:be.buttons.csh table="xMOD_tx_impexp" field="metadata" />
-		</td>
-		<td>
-			<f:translate key="makesavefo_title" />
-			<br/>
-			<input type="text" name="tx_impexp[meta][title]" value="{inData.meta.title}" /><br/>
-			<f:translate key="makesavefo_description" /><br/>
-			<input type="text" name="tx_impexp[meta][description]" value="{inData.meta.description}" /><br/>
-			<f:translate key="makesavefo_notes" /><br/>
-			<textarea name="tx_impexp[meta][notes]">{inData.meta.notes}</textarea><br/>
-			<f:if condition="{saveFolder}">
-				<input type="file" name="upload_1"  size="30" /><br/>
-				<input type="hidden" name="file[upload][1][target]" value="{saveFolder}" />
-				<input type="hidden" name="file[upload][1][data]" value="1" /><br />
-			</f:if>
-		</td>
-	</tr>
-	<tr>
-		<td>
-			<strong><f:translate key="makesavefo_fileFormat" /></strong>
-			<f:be.buttons.csh table="xMOD_tx_impexp" field="fileFormat" />
-		</td>
-		<td>
-			<f:form.select name="tx_impexp[filetype]" options="{filetypeSelectOptions}" value="{inData.filetype}" />
-			<br/>
-			<f:translate key="makesavefo_maxSizeOfFiles" /><br/>
-			<input type="text" name="tx_impexp[maxFileSize]" value="{inData.maxFileSize}" />
-			<br/>
-			<f:format.raw>{fileName}</f:format.raw>
-		</td>
-	</tr>
-	<tr>
-		<td>&nbsp;</td>
-		<td>
-			<input class="btn btn-default" type="submit" value="{f:translate(key: 'makesavefo_update')}" /> -
-			<input class="btn btn-default" type="submit" value="{f:translate(key: 'makesavefo_downloadExport')}" name="tx_impexp[download_export]" />
-			<f:if condition="{hasSaveFolder}">
-				- <input class="btn btn-default" type="submit" value="{f:translate(key: 'importdata_saveToFilename')}" name="tx_impexp[save_export]" />
-			</f:if>
-		</td>
-	</tr>
-</table>
+<h3><f:translate key="makesavefo_outputOptions" /></h3>
+
+<h4>
+	<f:translate key="makesavefo_metaData" />
+	<f:be.buttons.csh table="xMOD_tx_impexp" field="metadata" />
+</h4>
+<div class="form-group">
+	<label for="meta-title"><f:translate key="makesavefo_title" /></label>
+	<f:form.textfield class="form-control" name="tx_impexp[meta][title]" id="meta-title" value="{inData.meta.title}" />
+</div>
+<div class="form-group">
+	<label for="meta-description"><f:translate key="makesavefo_description" /></label>
+	<f:form.textfield class="form-control" name="tx_impexp[meta][description]" id="meta-description" value="{inData.meta.description}" />
+</div>
+<div class="form-group">
+	<label for="meta-notes"><f:translate key="makesavefo_notes" /></label>
+	<f:form.textarea class="form-control" name="tx_impexp[meta][notes]" id="meta-notes" value="{inData.meta.notes}" />
+</div>
+
+<h4>
+	<f:translate key="makesavefo_fileFormat" />
+	<f:be.buttons.csh table="xMOD_tx_impexp" field="fileFormat" />
+</h4>
+<div class="form-group">
+	<f:form.select class="form-control" name="tx_impexp[filetype]" options="{filetypeSelectOptions}" value="{inData.filetype}" />
+</div>
+<div class="form-group">
+	<label for="impexp-maxfilesize"><f:translate key="makesavefo_maxSizeOfFiles" /></label>
+	<f:form.textfield class="form-control" name="tx_impexp[maxFileSize]" id="impexp-maxfilesize" value="{inData.maxFileSize}" />
+</div>
+<div class="form-group">
+	<label for="impexp-filename"><f:translate key="makesavefo_filenameSavedInS" arguments="{0: saveFolder}" /></label>
+	<f:form.textfield class="form-control" name="tx_impexp[filename]" id="impexp-filename" value="{inData.filename}" />
+</div>
+<div class="form-group">
+	<f:form.submit class="btn btn-default" value="{f:translate(key: 'makesavefo_update')}" /> -
+	<f:form.submit class="btn btn-default" value="{f:translate(key: 'makesavefo_downloadExport')}" name="tx_impexp[download_export]" />
+	<f:if condition="{hasSaveFolder}">
+		- <f:form.submit class="btn btn-default" value="{f:translate(key: 'importdata_saveToFilename')}" name="tx_impexp[save_export]" />
+	</f:if>
+</div>
+</html>
diff --git a/typo3/sysext/impexp/Resources/Private/Partials/Import/Import.html b/typo3/sysext/impexp/Resources/Private/Partials/Import/Import.html
index fdef421294d3..7ef8c5d7ca62 100644
--- a/typo3/sysext/impexp/Resources/Private/Partials/Import/Import.html
+++ b/typo3/sysext/impexp/Resources/Private/Partials/Import/Import.html
@@ -1,117 +1,114 @@
-<table border="0" cellpadding="1" cellspacing="1" xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers">
-	<tr>
-		<th colspan="2"><f:translate key="importdata_selectFileToImport" /></th>
-	</tr>
-	<tr>
-		<td valign="top">
-			<f:translate key="importdata_file" />
-			<f:be.buttons.csh table="xMOD_tx_impexp" field="importFile" />
-		</td>
-		<td>
-			<f:form.select name="tx_impexp[file]" value="{inData.file}" options="{fileSelectOptions}" />
-			<br />
-			{importPath}
-			<f:if condition="{import.compress}">
-				<f:then></f:then>
-				<f:else><br /><span class="text-danger"><f:translate key="importdata_noteNoDecompressorAvailable" /></span></f:else>
+<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
+<h3><f:translate key="importdata_selectFileToImport" /></h3>
+<div class="form-group">
+	<label for="impexp-file">
+		<f:translate key="importdata_file" />
+		<f:be.buttons.csh table="xMOD_tx_impexp" field="importFile" />
+	</label>
+	<f:form.select name="tx_impexp[file]" class="form-control" id="impexp-file" value="{inData.file}" options="{fileSelectOptions}" />
+	<p class="help-block">{importPath}</p>
+	<f:if condition="{import.compress}">
+		<f:then></f:then>
+		<f:else><span class="text-danger"><f:translate key="importdata_noteNoDecompressorAvailable" /></span></f:else>
+	</f:if>
+</div>
+<h3><f:translate key="importdata_importOptions" /></h3>
 
-			</f:if>
-		</td>
-	</tr>
-	<tr>
-		<th colspan="2">
-			<f:translate key="importdata_importOptions" />
-		</th>
-	</tr>
-	<tr>
-		<td valign="top">
-			<f:translate key="importdata_update" />
-			<f:be.buttons.csh table="xMOD_tx_impexp" field="update" />
-		</td>
-		<td>
-			<f:form.checkbox name="tx_impexp[do_update]" id="checkDo_update" value="1"
-											 checked="{inData.do_update} == 1" />
+<h4>
+	<f:translate key="importdata_update" />
+	<f:be.buttons.csh table="xMOD_tx_impexp" field="update" />
+</h4>
+<div class="form-group">
+	<label for="checkDo_update">
+		<f:form.checkbox name="tx_impexp[do_update]" id="checkDo_update" value="1" checked="{inData.do_update} == 1" />
+		<f:translate key="importdata_updateRecords" />
+	</label>
+	<p class="help-block">(<f:translate key="importdata_thisOptionRequiresThat" />)</p>
+</div>
+<f:if condition="{inData.do_update}">
+	<div class="form-group">
+		<label for="checkGlobal_ignore_pid">
+			<f:form.checkbox name="tx_impexp[global_ignore_pid]" id="checkGlobal_ignore_pid" value="1" checked="{inData.global_ignore_pid} == 1" />
+			<f:translate key="importdata_ignorePidDifferencesGlobally" />
+		</label>
+		<p class="help-block">(<f:translate key="importdata_ifYouSetThis" />)</p>
+	</div>
+</f:if>
+
+<h4>
+	<f:translate key="importdata_options" />
+	<f:be.buttons.csh table="xMOD_tx_impexp" field="options" />
+</h4>
+<div class="form-group">
+	<label for="checkNotShowDiff">
+		<f:form.checkbox name="tx_impexp[notShowDiff]" id="checkNotShowDiff" value="1" checked="{inData.notShowDiff} == 1" />
+		<f:translate key="importdata_doNotShowDifferences" />
+	</label>
+	<p class="help-block">(<f:translate key="importdata_greenValuesAreFrom" />)</p>
+</div>
+<f:if condition="{isAdmin}">
+	<div class="form-group">
+		<label for="checkAllowPHPScripts">
+			<f:form.checkbox name="tx_impexp[allowPHPScripts]" id="checkAllowPHPScripts" value="1"
+											 checked="{inData.allowPHPScripts} == 1" />
+			<f:translate key="importdata_allowToWriteBanned" />
+		</label>
+	</div>
+	<f:if condition="!{inData.do_update}">
+		<div class="form-group">
+			<label for="checkForce_all_UIDS">
+				<f:form.checkbox name="tx_impexp[force_all_UIDS]" id="checkForce_all_UIDS" value="1"
+												 checked="{inData.force_all_UIDS} == 1" />
+				<span class="text-danger">
+					<f:translate key="importdata_force_all_UIDS" />
+				</span>
+			</label>
+			<p class="help-block">(<f:translate key="importdata_force_all_UIDS_descr" />)</p>
+		</div>
+	</f:if>
+</f:if>
 
-			<label for="checkDo_update"><f:translate key="importdata_updateRecords" /></label>
-			<br/>
-			<em>(<f:translate key="importdata_thisOptionRequiresThat" />)</em>
+<h4>
+	<f:translate key="importdata_action" />
+	<f:be.buttons.csh table="xMOD_tx_impexp" field="action" />
+</h4>
+<f:if condition="{inData.import_file}">
+	<f:then>
+		<f:form.submit class="btn btn-default" name="tx_impexp[new_import]" value="{f:translate(key: 'importdata_newImport')}" />
+	</f:then>
+	<f:else>
+		<f:form.submit class="btn btn-default" value="{f:translate(key: 'importdata_preview')}" />
+		<f:if condition="{inData.file}">
+			- <f:form.hidden name="not-set" value="1" id="t3js-submit-field" />
 			<f:if condition="{inData.do_update}">
-				<hr/>
-				<input type="checkbox" name="tx_impexp[global_ignore_pid]" id="checkGlobal_ignore_pid" value="1"
-							 checked="{inData.global_ignore_pid} == 1" />
-				<label for="checkGlobal_ignore_pid"><f:translate key="importdata_ignorePidDifferencesGlobally" /></label><br/>
-				<em>(<f:translate key="importdata_ifYouSetThis" />)</em>
-			</f:if>
-		</td>
-	</tr>
-	<tr>
-		<td valign="top">
-			<f:translate key="importdata_options" />
-			<f:be.buttons.csh table="xMOD_tx_impexp" field="options" />
-		</td>
-		<td>
-			<f:form.checkbox name="tx_impexp[notShowDiff]" id="checkNotShowDiff" value="1"
-						 checked="{inData.notShowDiff} == 1" />
-			<label for="checkNotShowDiff"><f:translate key="importdata_doNotShowDifferences" /></label><br/>
-			<em>(<f:translate key="importdata_greenValuesAreFrom" />)</em>
-			<br/><br/>
-			<f:if condition="{isAdmin}">
-				<f:form.checkbox name="tx_impexp[allowPHPScripts]" id="checkAllowPHPScripts" value="1"
-												 checked="{inData.allowPHPScripts} == 1" />
-				<label for="checkAllowPHPScripts"><f:translate key="importdata_allowToWriteBanned" /></label><br/>
-				<f:if condition="!{inData.do_update}">
-					<br/>
-					<f:form.checkbox name="tx_impexp[force_all_UIDS]" id="checkForce_all_UIDS" value="1"
-													 checked="{inData.force_all_UIDS} == 1" />
-					<label for="checkForce_all_UIDS">
-						<span class="text-danger">
-							<f:translate key="importdata_force_all_UIDS" />
-						</span>
-					</label><br/>
-					<em>(<f:translate key="importdata_force_all_UIDS_descr" />)</em>
-				</f:if>
-			</f:if>
-		</td>
-	</tr>
-	<tr>
-		<td valign="top">
-			<f:translate key="importdata_action" />
-			<f:be.buttons.csh table="xMOD_tx_impexp" field="action" />
-		</td>
-		<td>
-			<f:if condition="{inData.import_file}">
 				<f:then>
-					<input class="btn btn-default" type="submit" name="tx_impexp[new_import]" value="{f:translate(key: 'importdata_newImport')}" />
+					<f:form.button type="button" class="btn btn-default t3js-confirm-trigger">
+						<f:translate key="importdata_update_299e" />
+					</f:form.button>
 				</f:then>
 				<f:else>
-					<input class="btn btn-default" type="submit" value="{f:translate(key: 'importdata_preview')}" />
-					<f:if condition="{inData.file}">
-						- <input type="hidden" name="not-set" value="1" id="t3js-submit-field" />
-						<f:if condition="{inData.do_update}">
-							<f:then>
-								<input class="btn btn-default t3js-confirm-trigger" type="button" value="{f:translate(key: 'importdata_update_299e')}" />
-							</f:then>
-							<f:else>
-								<input class="btn btn-default t3js-confirm-trigger" type="button" value="{f:translate(key: 'importdata_import')}"
-											 name="tx_impexp[import_file]" data-title="{f:translate(key: 'pleaseConfirm')}" data-message="{f:translate(key: 'importdata_areYouSure')}" />
-							</f:else>
-						</f:if>
-					</f:if>
+					<f:form.button class="btn btn-default t3js-confirm-trigger"
+												 type="button" name="tx_impexp[import_file]"
+												 data="{title: '{f:translate(key: \'pleaseConfirm\')}', message: '{f:translate(key: \'makesavefo_areYouSure\')}'}">
+						<f:translate key="importdata_import" />
+					</f:form.button>
 				</f:else>
 			</f:if>
-			<input type="hidden" name="tx_impexp[action]" value="import" />
-		</td>
-	</tr>
-	<tr>
-		<td valign="top">
-			<f:translate key="importdata_enableLogging" />
-			<f:be.buttons.csh table="xMOD_tx_impexp" field="enableLogging" />
-		</td>
-		<td>
-			<f:form.checkbox name="tx_impexp[enableLogging]" id="checkEnableLogging" value="1"
-											 checked="{inData.enableLogging} == 1" />
-			<label for="checkEnableLogging"><f:translate key="importdata_writeIndividualDbActions" /></label><br/>
-			<em>(<f:translate key="importdata_thisIsDisabledBy" />)</em>
-		</td>
-	</tr>
-</table>
+		</f:if>
+	</f:else>
+</f:if>
+<f:form.hidden name="tx_impexp[action]" value="import" />
+
+<h4>
+	<f:translate key="importdata_enableLogging" />
+	<f:be.buttons.csh table="xMOD_tx_impexp" field="enableLogging" />
+</h4>
+<div class="form-group">
+	<label for="checkEnableLogging">
+		<f:form.checkbox name="tx_impexp[enableLogging]" id="checkEnableLogging" value="1"
+										 checked="{inData.enableLogging} == 1" />
+		<f:translate key="importdata_writeIndividualDbActions" />
+	</label>
+	<p class="help-block">(<f:translate key="importdata_thisIsDisabledBy" />)</p>
+</div>
+</html>
diff --git a/typo3/sysext/impexp/Resources/Private/Partials/Import/MetaData.html b/typo3/sysext/impexp/Resources/Private/Partials/Import/MetaData.html
index 9084dfc7462a..458341e3ceab 100644
--- a/typo3/sysext/impexp/Resources/Private/Partials/Import/MetaData.html
+++ b/typo3/sysext/impexp/Resources/Private/Partials/Import/MetaData.html
@@ -1,25 +1,29 @@
-<table border="0" cellpadding="1" cellspacing="1" xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers">
-	<tr class="bgColor5">
-		<td colspan="2"><strong><f:translate key="importdata_metaData" /></strong></td>
-	</tr>
-	<tr class="bgColor4">
-		<td><strong><f:translate key="importdata_title" /></strong></td>
-		<td width="95%"><f:format.nl2br>{import.dat.header.meta.title}</f:format.nl2br></td>
-	</tr>
-	<tr class="bgColor4">
-		<td><strong><f:translate key="importdata_description" /></strong></td>
-		<td width="95%"><f:format.nl2br>{import.dat.header.meta.description}</f:format.nl2br></td>
-	</tr>
-	<tr class="bgColor4">
-		<td><strong><f:translate key="importdata_notes" /></strong></td>
-		<td width="95%"><f:format.nl2br>{import.dat.header.meta.notes}</f:format.nl2br></td>
-	</tr>
-	<tr class="bgColor4">
-		<td><strong><f:translate key="importdata_packager" /></strong></td>
-		<td width="95%">
-			<f:format.nl2br>{import.dat.header.meta.packager_name} ({import.dat.header.meta.packager_username})</f:format.nl2br>
-			<br/>
-			<f:translate key="importdata_email" /> {import.dat.header.meta.packager_email}
-		</td>
-	</tr>
-</table>
+<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
+<h3><f:translate key="importdata_metaData" /></h3>
+<div class="table-fit table-fit-wrap">
+	<table class="table table-striped table-hover">
+		<tbody>
+			<tr>
+				<th class="col-nowrap"><f:translate key="importdata_title" /></th>
+				<td><f:format.nl2br>{import.dat.header.meta.title}</f:format.nl2br></td>
+			</tr>
+			<tr>
+				<th class="col-nowrap"><f:translate key="importdata_description" /></th>
+				<td><f:format.nl2br>{import.dat.header.meta.description}</f:format.nl2br></td>
+			</tr>
+			<tr>
+				<th class="col-nowrap"><f:translate key="importdata_notes" /></th>
+				<td><f:format.nl2br>{import.dat.header.meta.notes}</f:format.nl2br></td>
+			</tr>
+			<tr>
+				<th class="col-nowrap"><f:translate key="importdata_packager" /></th>
+				<td>
+					<f:format.nl2br>{import.dat.header.meta.packager_name} ({import.dat.header.meta.packager_username})</f:format.nl2br>
+					<br/>
+					<f:translate key="importdata_email" /> {import.dat.header.meta.packager_email}
+				</td>
+			</tr>
+		</tbody>
+	</table>
+</div>
+</html>
diff --git a/typo3/sysext/impexp/Resources/Private/Partials/Import/Upload.html b/typo3/sysext/impexp/Resources/Private/Partials/Import/Upload.html
index 71766f0d356f..b489d4e54dbb 100644
--- a/typo3/sysext/impexp/Resources/Private/Partials/Import/Upload.html
+++ b/typo3/sysext/impexp/Resources/Private/Partials/Import/Upload.html
@@ -1,38 +1,32 @@
-<table border="0" cellpadding="1" cellspacing="1" xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers">
-	<tr>
-		<th colspan="2"><f:translate key="importdata_uploadFileFromLocal" /></th>
-	</tr>
-	<tr>
-		<td valign="top">
-			<f:translate key="importdata_browse" />
-			<f:be.buttons.csh table="xMOD_tx_impexp" field="upload" />
-		</td>
-		<td>
-			<input type="file" name="upload_1" size="40" />
-			<input type="hidden" name="file[upload][1][target]" value="{tempFolder}" />
-			<input type="hidden" name="file[upload][1][data]" value="1" />
-			<br />
-			<input class="btn btn-default" type="submit" name="_upload" value="{f:translate(key: 'LLL:EXT:lang/locallang_core.xlf:file_upload.php.submit')}" />
-			<input type="checkbox" name="overwriteExistingFiles" id="checkOverwriteExistingFiles" value="1" checked="checked" />
-			<label for="checkOverwriteExistingFiles">
-				<f:translate key="LLL:EXT:lang/locallang_misc.xlf:overwriteExistingFiles" />
-			</label>
-		</td>
-	</tr>
-	<f:if condition="{submitted}">
-		<tr class="bgColor4">
-			<td><f:translate key="importdata_uploadStatus" /></td>
-			<td>
-				<f:if condition="{noFileUploaded}">
-					<f:then>
-						<f:translate key="importdata_success" />
-						{uploadedFile}
-					</f:then>
-					<f:else>
-						<span class="text-danger"><f:translate key="importdata_failureNoFileUploaded" /></span>
-					</f:else>
-				</f:if>
-			</td>
-		</tr>
+<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
+<h3><f:translate key="importdata_uploadFileFromLocal" /></h3>
+<h4>
+	<f:translate key="importdata_browse" />
+	<f:be.buttons.csh table="xMOD_tx_impexp" field="upload" />
+</h4>
+<div class="form-group">
+	<f:form.upload name="upload_1" />
+	<f:form.hidden name="file[upload][1][target]" value="{tempFolder}" />
+	<f:form.hidden name="file[upload][1][data]" value="1" />
+</div>
+<div class="form-group">
+	<f:form.submit class="btn btn-default" name="_upload" value="{f:translate(key: 'LLL:EXT:lang/locallang_core.xlf:file_upload.php.submit')}" />
+</div>
+<div class="form-group">
+	<label for="checkOverwriteExistingFiles">
+		<f:form.checkbox name="overwriteExistingFiles" id="checkOverwriteExistingFiles" value="1" checked="checked" />
+		<f:translate key="LLL:EXT:lang/locallang_misc.xlf:overwriteExistingFiles" />
+	</label>
+</div>
+<f:if condition="{submitted}">
+	<h4><f:translate key="importdata_uploadStatus" /></h4>
+	<f:if condition="{noFileUploaded}">
+		<f:then>
+			<f:be.infobox  title="{f:translate(key: 'importdata_success')} {uploadedFile}" state="0" />
+		</f:then>
+		<f:else>
+			<f:be.infobox  title="{f:translate(key: 'importdata_failureNoFileUploaded')}" state="2" />
+		</f:else>
 	</f:if>
-</table>
+</f:if>
+</html>
diff --git a/typo3/sysext/impexp/Resources/Private/Templates/ImportExport/Export.html b/typo3/sysext/impexp/Resources/Private/Templates/ImportExport/Export.html
index 95820a0324a4..1fdea615a340 100644
--- a/typo3/sysext/impexp/Resources/Private/Templates/ImportExport/Export.html
+++ b/typo3/sysext/impexp/Resources/Private/Templates/ImportExport/Export.html
@@ -3,68 +3,65 @@
 <f:layout name="Default" />
 
 <f:section name="content">
-	<div>
-		<div role="tabpanel">
-			<ul class="nav nav-tabs" role="tablist">
-				<li role="presentation" class="active">
-					<a class="text-capitalize" href="#export-configuration" aria-controls="export-configuration" role="tab" data-toggle="tab">
-						<f:translate key="tableselec_configuration" />
-					</a>
-				</li>
-				<li role="presentation">
-					<a class="text-capitalize" href="#export-filepreset" aria-controls="export-filepreset" role="tab" data-toggle="tab">
-						<f:translate key="exportdata_filePreset" />
-					</a>
-				</li>
-				<li role="presentation">
-					<a class="text-capitalize" href="#export-advancedoptions" aria-controls="export-advancedoptions" role="tab" data-toggle="tab">
-						<f:translate key="exportdata_advancedOptions" />
-					</a>
-				</li>
-				<f:if condition="{errors}">
-					<li role="presentation">
-						<a class="text-capitalize" href="#export-errors" aria-controls="export-errors" role="tab" data-toggle="tab">
-							<f:translate key="exportdata_messages" />
-							<core:icon identifier="status-dialog-warning" />
-						</a>
-					</li>
-				</f:if>
-			</ul>
+	<ul class="nav nav-tabs" role="tablist">
+		<li role="presentation" class="active">
+			<a class="text-capitalize" href="#export-configuration" aria-controls="export-configuration" role="tab" data-toggle="tab">
+				<f:translate key="tableselec_configuration" />
+			</a>
+		</li>
+		<li role="presentation">
+			<a class="text-capitalize" href="#export-filepreset" aria-controls="export-filepreset" role="tab" data-toggle="tab">
+				<f:translate key="exportdata_filePreset" />
+			</a>
+		</li>
+		<li role="presentation">
+			<a class="text-capitalize" href="#export-advancedoptions" aria-controls="export-advancedoptions" role="tab" data-toggle="tab">
+				<f:translate key="exportdata_advancedOptions" />
+			</a>
+		</li>
+		<f:if condition="{errors}">
+			<li role="presentation">
+				<a class="text-capitalize" href="#export-errors" aria-controls="export-errors" role="tab" data-toggle="tab">
+					<f:translate key="exportdata_messages" />
+					<core:icon identifier="status-dialog-warning" />
+				</a>
+			</li>
+		</f:if>
+	</ul>
+	<div class="tab-content">
+		<div role="tabpanel" class="tab-pane active" id="export-configuration">
+			<div class="panel panel-tab">
+				<div class="panel-body">
+					<f:render partial="Export/Configuration" arguments="{_all}"/>
+				</div>
+			</div>
 		</div>
-		<div class="tab-content">
-			<div role="tabpanel" class="tab-pane active" id="export-configuration">
-				<div class="panel panel-tab">
-					<div class="panel-body">
-						<f:render partial="Export/Configuration" arguments="{_all}"/>
-					</div>
+		<div role="tabpanel" class="tab-pane" id="export-filepreset">
+			<div class="panel panel-tab">
+				<div class="panel-body">
+					<f:render partial="Export/Save" arguments="{_all}"/>
 				</div>
 			</div>
-			<div role="tabpanel" class="tab-pane" id="export-filepreset">
-				<div class="panel panel-tab">
-					<div class="panel-body">
-						<f:render partial="Export/Save" arguments="{_all}"/>
-					</div>
+		</div>
+		<div role="tabpanel" class="tab-pane" id="export-advancedoptions">
+			<div class="panel panel-tab">
+				<div class="panel-body">
+					<f:render partial="Export/AdvancedOptions" arguments="{_all}"/>
 				</div>
 			</div>
-			<div role="tabpanel" class="tab-pane" id="export-advancedoptions">
+		</div>
+		<f:if condition="{errors}">
+			<div role="tabpanel" class="tab-pane" id="export-errors">
 				<div class="panel panel-tab">
 					<div class="panel-body">
-						<f:render partial="Export/AdvancedOptions" arguments="{_all}"/>
+						<f:format.raw>{errors}</f:format.raw>
 					</div>
 				</div>
 			</div>
-			<f:if condition="{errors}">
-				<div role="tabpanel" class="tab-pane" id="export-errors">
-					<div class="panel panel-tab">
-						<div class="panel-body">
-							<f:format.raw>{errors}</f:format.raw>
-						</div>
-					</div>
-				</div>
-			</f:if>
-		</div>
-		<input type="hidden" name="tx_impexp[action]" value="export" />
+		</f:if>
 	</div>
+	<f:form.hidden name="tx_impexp[action]" value="export" />
+
 	<f:render partial="ContentOverview" arguments="{_all}"/>
 </f:section>
 </html>
diff --git a/typo3/sysext/impexp/Resources/Private/Templates/ImportExport/Import.html b/typo3/sysext/impexp/Resources/Private/Templates/ImportExport/Import.html
index c31065398b57..b374c71990ec 100644
--- a/typo3/sysext/impexp/Resources/Private/Templates/ImportExport/Import.html
+++ b/typo3/sysext/impexp/Resources/Private/Templates/ImportExport/Import.html
@@ -3,95 +3,92 @@
 <f:layout name="Default" />
 
 <f:section name="content">
-	<div>
-		<f:flashMessages as="flashMessages" queueIdentifier="impexp.errors">
-			<f:for each="{flashMessages}" as="flashMessage">
-				<div class="alert {flashMessage.class}">
-					<div class="media">
-						<div class="media-left">
-							<span class="fa-stack fa-lg">
-								<i class="fa fa-circle fa-stack-2x"></i>
-								<i class="fa fa-{flashMessage.iconName} fa-stack-1x"></i>
-							</span>
-						</div>
-						<div class="media-body">
-							<f:if condition="{flashMessage.title}">
-								<h4 class="alert-title">{flashMessage.title}</h4>
-							</f:if>
-							<div class="alert-message">{flashMessage.message}</div>
-						</div>
+	<f:flashMessages as="flashMessages" queueIdentifier="impexp.errors">
+		<f:for each="{flashMessages}" as="flashMessage">
+			<div class="alert {flashMessage.class}">
+				<div class="media">
+					<div class="media-left">
+						<span class="fa-stack fa-lg">
+							<i class="fa fa-circle fa-stack-2x"></i>
+							<i class="fa fa-{flashMessage.iconName} fa-stack-1x"></i>
+						</span>
 					</div>
+					<div class="media-body">
+						<f:if condition="{flashMessage.title}">
+							<h4 class="alert-title">{flashMessage.title}</h4>
+						</f:if>
+						<div class="alert-message">{flashMessage.message}</div>
+					</div>
+				</div>
+			</div>
+		</f:for>
+	</f:flashMessages>
+	<ul class="nav nav-tabs" role="tablist">
+		<li role="presentation" class="active">
+			<a class="text-capitalize" href="#import-import" aria-controls="import-import" role="tab" data-toggle="tab">
+				<f:translate key="importdata_import" />
+			</a>
+		</li>
+		<f:if condition="{hasTempUploadFolder}">
+			<li role="presentation">
+				<a class="text-capitalize" href="#import-upload" aria-controls="import-upload" role="tab" data-toggle="tab">
+					<f:translate key="importdata_upload" />
+				</a>
+			</li>
+		</f:if>
+		<f:if condition="{metaDataInFileExists}">
+			<li role="presentation">
+				<a class="text-capitalize" href="#import-metadata" aria-controls="import-metadata" role="tab" data-toggle="tab">
+					<f:translate key="importdata_metaData_1387" />
+				</a>
+			</li>
+		</f:if>
+		<f:if condition="{errors}">
+			<li role="presentation">
+				<a class="text-capitalize" href="#import-errors" aria-controls="import-errors" role="tab" data-toggle="tab">
+					<f:translate key="importdata_messages" />
+					<core:icon identifier="status-dialog-warning" />
+				</a>
+			</li>
+		</f:if>
+	</ul>
+	<div class="tab-content">
+		<div role="tabpanel" class="tab-pane active" id="import-import">
+			<div class="panel panel-tab">
+				<div class="panel-body">
+					<f:render partial="Import/Import" arguments="{_all}"/>
 				</div>
-			</f:for>
-		</f:flashMessages>
-		<div role="tabpanel">
-			<ul class="nav nav-tabs" role="tablist">
-				<li role="presentation" class="active">
-					<a class="text-capitalize" href="#import-import" aria-controls="import-import" role="tab" data-toggle="tab">
-						<f:translate key="importdata_import" />
-					</a>
-				</li>
-				<f:if condition="{hasTempUploadFolder}">
-					<li role="presentation">
-						<a class="text-capitalize" href="#import-upload" aria-controls="import-upload" role="tab" data-toggle="tab">
-							<f:translate key="importdata_upload" />
-						</a>
-					</li>
-				</f:if>
-				<f:if condition="{metaDataInFileExists}">
-					<li role="presentation">
-						<a class="text-capitalize" href="#import-metadata" aria-controls="import-metadata" role="tab" data-toggle="tab">
-							<f:translate key="importdata_metaData_1387" />
-						</a>
-					</li>
-				</f:if>
-				<f:if condition="{errors}">
-					<li role="presentation">
-						<a class="text-capitalize" href="#import-errors" aria-controls="import-errors" role="tab" data-toggle="tab">
-							<f:translate key="importdata_messages" />
-							<core:icon identifier="status-dialog-warning" />
-						</a>
-					</li>
-				</f:if>
-			</ul>
+			</div>
 		</div>
-		<div class="tab-content">
-			<div role="tabpanel" class="tab-pane active" id="import-import">
+		<f:if condition="{hasTempUploadFolder}">
+			<div role="tabpanel" class="tab-pane" id="import-upload">
 				<div class="panel panel-tab">
 					<div class="panel-body">
-						<f:render partial="Import/Import" arguments="{_all}"/>
+						<f:render partial="Import/Upload" arguments="{_all}"/>
 					</div>
 				</div>
 			</div>
-			<f:if condition="{hasTempUploadFolder}">
-				<div role="tabpanel" class="tab-pane" id="import-upload">
-					<div class="panel panel-tab">
-						<div class="panel-body">
-							<f:render partial="Import/Upload" arguments="{_all}"/>
-						</div>
-					</div>
-				</div>
-			</f:if>
-			<f:if condition="{metaDataInFileExists}">
-				<div role="tabpanel" class="tab-pane" id="import-metadata">
-					<div class="panel panel-tab">
-						<div class="panel-body">
-							<f:render partial="Import/MetaData" arguments="{_all}"/>
-						</div>
+		</f:if>
+		<f:if condition="{metaDataInFileExists}">
+			<div role="tabpanel" class="tab-pane" id="import-metadata">
+				<div class="panel panel-tab">
+					<div class="panel-body">
+						<f:render partial="Import/MetaData" arguments="{_all}"/>
 					</div>
 				</div>
-			</f:if>
-			<f:if condition="{errors}">
-				<div role="tabpanel" class="tab-pane" id="import-errors">
-					<div class="panel panel-tab">
-						<div class="panel-body">
-							<f:format.raw>{errors}</f:format.raw>
-						</div>
+			</div>
+		</f:if>
+		<f:if condition="{errors}">
+			<div role="tabpanel" class="tab-pane" id="import-errors">
+				<div class="panel panel-tab">
+					<div class="panel-body">
+						<f:format.raw>{errors}</f:format.raw>
 					</div>
 				</div>
-			</f:if>
-		</div>
+			</div>
+		</f:if>
 	</div>
+
 	<f:render partial="ContentOverview" arguments="{_all}"/>
 </f:section>
 </html>
-- 
GitLab