Display changes in file versions tab view and detailsView (#26511)

* Display changes in file versions tab view and detailsView

* versions tab enhancements

enhanced js test file
removed css superscript attribute for version size

* Replaced spaces with tabs

1 files changed, 23 insertions, 6 deletions

diff --git a/apps/files_versions/css/versions.css b/apps/files_versions/css/versions.css
index b159de82ea3..cd63a90ab51 100644
--- a/apps/files_versions/css/versions.css
+++ b/apps/files_versions/css/versions.css
@@ -1,6 +1,7 @@
 .versionsTabView .clear-float {
 	clear: both;
 }
+
 .versionsTabView li {
 	width: 100%;
 	cursor: default;
@@ -12,25 +13,30 @@
 	border-bottom: none;
 }
 
-.versionsTabView li > * {
+.versionsTabView a,
+.versionsTabView div > span {
 	vertical-align: middle;
 	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
 	filter: alpha(opacity=50);
 	opacity: .5;
 }
 
-.versionsTabView li > a,
-.versionsTabView li > span {
+.versionsTabView li a{
 	padding: 15px 10px 11px;
 }
 
-.versionsTabView li > *:hover,
-.versionsTabView li > *:focus {
+.versionsTabView a:hover,
+.versionsTabView a:focus {
 	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
 	filter: alpha(opacity=100);
 	opacity: 1;
 }
 
+.versionsTabView .preview-container {
+	display: inline-block;
+  vertical-align: top;
+}
+
 .versionsTabView img {
 	cursor: pointer;
 	padding-right: 4px;
@@ -38,7 +44,10 @@
 
 .versionsTabView img.preview {
 	cursor: default;
-	opacity: 1;
+}
+
+.versionsTabView .version-container {
+	display: inline-block;
 }
 
 .versionsTabView .versiondate {
@@ -46,6 +55,14 @@
 	vertical-align: super;
 }
 
+.versionsTabView .version-details {
+	text-align: left;
+}
+
+.versionsTabView .version-details > span {
+	padding: 0 10px;
+}
+
 .versionsTabView .revertVersion {
 	cursor: pointer;
 	float: right;