Version 5.0.13

2025-12-19 19:04:57 -08:00
1 parent b89858b2ff
commit 5efe744c5f
@@ -5,7 +5,7 @@
 </header>
 {{ $layout = \IPS\Member::loggedIn()->getLayoutValue( 'downloads_categories' ); }}
 {{if !$clubsOnly}}
-	<div class='ipsBox'>
+	<div class='ipsBox ipsBox--downloadCategories ipsPull'>
 		<h2 class='ipsBox__header'>{lang="categories"}</h2>
 		<i-data>
 			<ol class="ipsData {{if $layout === 'grid'}}ipsData--grid{{else}}ipsData--table ipsData--category{{endif}} ipsData--download-category" data-ips-hook="categories">
@@ -14,8 +14,8 @@
 		</i-data>
 	</div>
 {{endif}}
-{{if settings.club_nodes_in_apps and $clubNodes = \IPS\downloads\Category::clubNodes()}}
-	<div class='ipsBox'>
+{{if settings.clubs and settings.club_nodes_in_apps and $clubNodes = \IPS\downloads\Category::clubNodes()}}
+	<div class='ipsBox ipsBox--downloadClubs ipsPull'>
 		<h2 class='ipsBox__header'><a href="{url="app=downloads&module=downloads&controller=browse&id=clubs" seoTemplate="downloads_clubs"}">{lang="club_node_downloads"}</a></h2>
 		<i-data>
 			<ol class="ipsData {{if $layout === 'grid'}}ipsData--grid{{else}}ipsData--table ipsData--category{{endif}} ipsData--download-category" data-ips-hook="clubNodes">
@@ -97,7 +97,7 @@
 	<div id='elClubContainer'>
 {{endif}}

-<header class='ipsPageHeader ipsBox ipsPull'>
+<header class='ipsPageHeader ipsBox ipsBox--downloadsCategoryHeader ipsPull'>
 	<div class="ipsPageHeader__row">
 		<div data-ips-hook="header" class='ipsPageHeader__primary'>
 			<h1 data-ips-hook="title" data-ips-hook="title" class="ipsPageHeader__title">{$category->_title}</h1>
@@ -115,16 +115,17 @@
 </header>

 <div data-controller='downloads.front.downloads.browse' class='ipsBlockSpacer'>
-	{template="categoryMenu" group="browse" params="$category->children()"}
-
 	<ul class="ipsButtons ipsButtons--main">
 		{{if $category->hasChildren()}}
-			<li class="ipsResponsive_hideDesktop"><a href='#elDownloadsCategories_menu' data-ipsMenu id='elDownloadsCategories' class='ipsButton ipsButton--inherit'><span>{lang="subcategory"}</span><i class='fa-solid fa-caret-down'></i></a></li>
+			<li class="ipsResponsive_hideDesktop">
+				<button type="button" id="elDownloadsCategories" popovertarget="elDownloadsCategories_menu" class='ipsButton ipsButton--inherit'><span>{lang="subcategory"}</span><i class='fa-solid fa-caret-down'></i></button>
+			</li>
 		{{endif}}
 		{template="categoryButtons" group="browse" params="$category->can('add'), $category, FALSE"}
 	</ul>
+	{template="categoryMenu" group="browse" params="$category->children()"}

-	<div class='ipsBox ipsPull cDownloadsCategoryTable'>
+	<div class='ipsBox ipsBox--downloadsCategoryTable ipsPull cDownloadsCategoryTable'>
 		{$table|raw}
 	</div>

@@ -171,23 +172,26 @@
 	{{endif}}
 </li>
 {{endif}}]]></template>
- <template template_group="browse" template_name="categoryMenu" template_data="$categories" template_location="front" template_app="downloads"><![CDATA[<ul class='ipsMenu ipsMenu_auto ipsHide' id='elDownloadsCategories_menu'>
-	{{foreach $categories as $cat}}
-		{{if $cat->can('view')}}
-			<li class='ipsMenu_item'>
-				<a href='{$cat->url()}'>{$cat->_title}<span class="ipsMenu_itemCount">{number="\IPS\downloads\File::contentCount( $cat )"}</span></a>
-			</li>
-		{{endif}}
-	{{endforeach}}
-</ul>
-]]></template>
+ <template template_group="browse" template_name="categoryMenu" template_data="$categories" template_location="front" template_app="downloads"><![CDATA[<i-dropdown popover id="elDownloadsCategories_menu">
+	<div class="iDropdown">
+		<ul class="iDropdown__items">
+			{{foreach $categories as $cat}}
+				{{if $cat->can('view')}}
+					<li>
+						<a href='{$cat->url()}'>{$cat->_title}<span class="ipsMenu_itemCount">{number="\IPS\downloads\File::contentCount( $cat )"}</span></a>
+					</li>
+				{{endif}}
+			{{endforeach}}
+		</ul>
+	</div>
+</i-dropdown>]]></template>
 <template template_group="browse" template_name="categoryRow" template_data="$table, $headers, $categories, $layout='table'" template_location="front" template_app="downloads"><![CDATA[{{foreach $categories as $category}}
 	{{if $category->can('view') AND ( $category->open OR \IPS\Member::loggedIn()->isAdmin() )}}
 		{{$club = $category->club();}}
 		<li class="ipsData__item {$category->ui( 'css' )}" {{if !\IPS\downloads\File::containerUnread( $category )}}data-ips-read{{else}}data-ips-unread{{endif}} {$category->ui( 'dataAttributes' )}>
 			<a href="{$category->url()}" class="ipsLinkPanel" aria-hidden="true" tabindex="-1"><span>{{if $club}}{lang="club_node" sprintf="$club->name, $category->_title"}{{else}}{$category->_title}{{endif}}</span></a>
 		
-			<figure class='ipsData__image'>
+			<div class="ipsData__image" aria-hidden="true">
 				{{if $layout==="table"}}
 				
 					{{if $icon = $category->getIcon()}}
@@ -221,7 +225,7 @@
 					{{endif}}

 				{{endif}}
-			</figure>
+			</div>

 			<div class="ipsData__content">
 				<div class="ipsData__main">
@@ -273,20 +277,20 @@
 {{endforeach}}]]></template>
 <template template_group="browse" template_name="featuredFile" template_data="$file" template_location="front" template_app="downloads"><![CDATA[<li class="ipsData__item {{if $file->hidden()}}ipsModerated{{endif}} {$file->ui( 'css' )}" {$file->ui( 'dataAttributes' )}>
 	<a href='{$file->url( "getPrefComment" )}' class="ipsLinkPanel" aria-hidden="true" tabindex="-1"><span>{$file->name}</span></a>
-	<figure class='ipsData__image'>
-		{{if $file->primary_screenshot_thumb}}
-			<img src='{file="$file->primary_screenshot_thumb" extension="downloads_Screenshots"}' alt='' loading='lazy'>
+	<div class="ipsData__image" aria-hidden="true" data-ips-hook='image'>
+		{{if $screenshot = $file->primary_screenshot_thumb}}
+			<img src='{$screenshot->url}' alt='' loading='lazy'>
 		{{else}}
 			<i></i>
 		{{endif}}
-	</figure>
+	</div>
 	<div class='ipsData__content'>
 		<div class="ipsData__main">
-			<div class='ipsData__title'>
+			<div class='ipsData__title' data-ips--hook='title'>
 				{{if $file->unread()}}
 					<span class='ipsIndicator' data-ipsTooltip title='{{if $file->unread() === -1}}{lang="new"}{{else}}{lang="updated"}{{endif}}'></span>
 				{{endif}}
-				<div class='ipsBadges'>
+				<div class='ipsBadges' data-ips-hook='badges'>
 					{{foreach $file->badges() as $badge}}
 						{{if !\in_array($badge->badgeType, ['ipsBadge--featured', 'ipsBadge--pinned'])}}
 							{$badge|raw}
@@ -310,7 +314,7 @@
 					{{endif}}
 				</span>
 			{{endif}}
-			<ul class='ipsButtons ipsButtons--start i-margin-block_2' hidden>
+			<ul class='ipsButtons ipsButtons--start i-margin-block_2' hidden data-ips-hook='buttons'>
 				{{if ( $file->canDownload() or ( $file->container()->message('npd') and !$file->canBuy() ) ) && !$file->canBuy()}}
 					<li>
 						<a href='{{if settings.idm_antileech AND !$file->requiresDownloadConfirmation()}}{$file->url('download')->csrf()}{{else}}{$file->url('download')}{{endif}}' class='ipsButton ipsButton--secondary' {{if $file->requiresDownloadConfirmation()}}data-ipsDialog{{endif}}><i class="fa-solid fa-download"></i><span>{lang="download"}</span></a>
@@ -323,7 +327,7 @@
 			</ul>
 		</div>
 		<div class="ipsData__extra">
-			<ul class='ipsData__stats'>
+			<ul class='ipsData__stats' data-ips-hook='stats'>
 				{{if $file->isPaid() and !$file->nexus and \in_array( 'purchases', explode( ',', settings.idm_nexus_display ) ) and $file->purchaseCount()}}
 					<li data-statType="purchases">
 						<span class='ipsData__stats-icon' data-stat-value="{$file->purchaseCount()}" aria-hidden="true" data-ipstooltip title='{lang="x_purchases" pluralize="$file->purchaseCount()"}'></span>
@@ -362,7 +366,7 @@
 	</div>
 	{{endif}}
 	{template="thumbImage" group="global" app="core" params="$file->primary_screenshot_thumb, $file->name, 'medium', '', 'view_this', $file->url( 'getPrefComment' ), 'downloads_Screenshots', '', true"}
-	<h4 class='ipsData__title'>
+	<h4 class='ipsData__title' data-ips-hook='title'>
 		{{if $file->unread()}}
 			<span class='ipsIndicator' data-ipsTooltip title='{{if $file->unread() === -1}}{lang="new"}{{else}}{lang="updated"}{{endif}}'></span>
 		{{endif}}
@@ -381,7 +385,7 @@
 		{lang="in"} <a href="{$file->container()->url()}">{$file->container()->_title}</a>
 		{{endif}}
 	</p>
-	<div class='i-basis_220'>
+	<div class='i-basis_220' data-ips-hook='metadata'>
 		<p><strong>{{if $file->updated == $file->submitted}}{lang="submitted"} {datetime="$file->submitted" lowercase="true"}{{else}}{lang="updated"} {datetime="$file->updated" lowercase="true"}{{endif}}</strong></p>
 	</div>

@@ -392,7 +396,7 @@

 	<!-- Comments -->
 	{{if $file->container()->bitoptions['comments']}}
-	<p>
+	<p data-ips-hook='stats'>
 		{{if $file->comments}}
 		<a href='{$file->url()->setQueryString( 'tab', 'comments' )->setFragment('replies')}'>
 		{{endif}}
@@ -424,13 +428,13 @@
 		<span {{if !$file->downloads}}class='i-color_soft'{{endif}}><i class='fa-solid fa-circle-arrow-down'></i> {lang="num_downloads" pluralize="$file->downloads"}</span>
 		{{endif}}
 	</p>
-	<!-- Tags -->
+	{{endif}}
+    <!-- Tags -->
 	{{if \count( $file->tags() )}}
 		{template="tags" group="global" app="core" params="$file->tags(), TRUE"}
 	{{endif}}
-	{{endif}}
 </div>]]></template>
- <template template_group="browse" template_name="index" template_data="$featured, $new, $rated, $downloaded" template_location="front" template_app="downloads"><![CDATA[<header class="ipsPageHeader">
+ <template template_group="browse" template_name="index" template_data="$featured, $new, $rated, $downloaded" template_location="front" template_app="downloads"><![CDATA[<header class="ipsPageHeader ipsPageHeader--downloadsBrowseHeader">
 	<div class="ipsPageHeader__row">
 		<div data-ips-hook="header" class='ipsPageHeader__primary'>
 			<h1 data-ips-hook="title" class='ipsPageHeader__title'>{lang="downloads"}</h1>
@@ -438,7 +442,7 @@
 		<ul data-ips-hook="buttons" class='ipsButtons ipsButtons--main'>
 			{{if !\IPS\downloads\Category::theOnlyNode()}}
 				<li class='ipsResponsive_showPhone'>
-					<a href='#elDownloadsCategories_menu' data-ipsMenu id='elDownloadsCategories' class='ipsButton ipsButton--inherit'><span>{lang="downloads_category_select"}</span><span>{lang="all"}</span><i class='fa-solid fa-caret-down'></i></a>
+					<button type="button" id="elDownloadsCategories" popovertarget="elDownloadsCategories_menu" class='ipsButton ipsButton--inherit'><span>{lang="downloads_category_select"}</span><span>{lang="all"}</span><i class='fa-solid fa-caret-down'></i></button>
 					{template="categoryMenu" group="browse" params="\IPS\downloads\Category::roots()"}
 				</li>
 			{{endif}}
@@ -452,7 +456,7 @@
 	</div>
 </header>
 {{if !empty( $featured )}}
-	<section class='ipsBox ipsPull'>
+	<section class='ipsBox ipsBox--downloadsFeatured ipsPull'>
 		<header class='ipsBox__header i-flex i-justify-content_space-between'>
 			<h2>{lang="featured_downloads"}</h2>
 			{template="carouselNavigation" group="global" app="core" params="'downloads-featured-files'"}
@@ -470,11 +474,10 @@
 {{endif}}

 {{if settings.idm_show_newest AND \count( $new ) }}
-	<section class='ipsBox ipsPull'>
+	<section class='ipsBox ipsBox--downloadsWhatsNew ipsPull'>
 		<header class='ipsBox__header i-flex i-justify-content_space-between'>
 			<h2>{lang="browse_whats_new"}</h2>
 			{template="carouselNavigation" group="global" app="core" params="'downloads-whats-new'"}
-
 		</header>
 		<div class='ipsBox__content'>
 			<i-data>
@@ -489,7 +492,7 @@
 {{endif}}

 {{if settings.idm_show_highest_rated AND \count( $rated )}}
-	<section class='ipsBox ipsPull'>
+	<section class='ipsBox ipsBox--downloadsHighestRated ipsPull'>
 		<header class='ipsBox__header i-flex i-justify-content_space-between'>
 			<h2>{lang="browse_highest_rated"}</h2>
 			{template="carouselNavigation" group="global" app="core" params="'downloads-highest-rated'"}
@@ -508,7 +511,7 @@
 {{endif}}

 {{if settings.idm_show_most_downloaded AND \count( $downloaded )}}
-	<section class='ipsBox ipsPull'>
+	<section class='ipsBox ipsBox--downloadsMostDownloaded ipsPull'>
 		<header class='ipsBox__header i-flex i-justify-content_space-between'>
 			<h2>{lang="browse_most_downloaded"}</h2>
 			{template="carouselNavigation" group="global" app="core" params="'downloads-most-downloaded'"}
@@ -533,29 +536,29 @@
 		{template="categoryButtons" group="browse" params="\IPS\downloads\Category::canOnAny('add'), NULL, TRUE"}
 	</ul>
 {{endif}}]]></template>
- <template template_group="browse" template_name="indexBlock" template_data="$file" template_location="front" template_app="downloads"><![CDATA[<li class="ipsData__item {{if $file->hidden()}}ipsModerated{{endif}}">
+ <template template_group="browse" template_name="indexBlock" template_data="$file" template_location="front" template_app="downloads"><![CDATA[<li class="ipsData__item {{if $file->hidden()}}ipsModerated{{endif}} {$file->ui('css')}" {$file->ui('dataAttributes')}>
 	<a href='{$file->url( "getPrefComment" )}' class="ipsLinkPanel" aria-hidden="true" tabindex="-1"><span>{$file->name}</span></a>
-	<figure class='ipsData__image'>
-		{{if $file->primary_screenshot_thumb}}
-			<img src='{file="$file->primary_screenshot_thumb" extension="downloads_Screenshots"}' alt='' loading='lazy'>
+	<div class="ipsData__image" aria-hidden="true" data-ips-hook='image'>
+		{{if $screenshot = $file->primary_screenshot_thumb}}
+			<img src='{$screenshot->url}' alt='' loading='lazy'>
 		{{else}}
 			<i></i>
 		{{endif}}
-	</figure>
+	</div>
 	<div class='ipsData__content'>
 		<div class="ipsData__main">
-			<div class='ipsData__title'>
+			<div class='ipsData__title' data-ips-hook='main'>
 				{{if $file->unread()}}
 					<span class='ipsIndicator' data-ipsTooltip title='{{if $file->unread() === -1}}{lang="new"}{{else}}{lang="updated"}{{endif}}'></span>
 				{{endif}}
-				<div class='ipsBadges'>
+				<div class='ipsBadges' data-ips-hook='badges'>
 					{{foreach $file->badges() as $badge}}
 						{{if !\in_array($badge->badgeType, ['ipsBadge--pinned'])}}
 							{$badge|raw}
 						{{endif}}
 					{{endforeach}}
 				</div>
-				<h3><a href='{$file->url( "getPrefComment" )}' title='{lang="view_this_file" sprintf="$file->name"}'>{$file->name}</a></h3>
+				<h3 data-ips-hook='title'><a href='{$file->url( "getPrefComment" )}' title='{lang="view_this_file" sprintf="$file->name"}'>{$file->name}</a></h3>
 				{{if $file->container()->bitoptions['reviews'] and $file->averageReviewRating()}}
 					{template="rating" group="global" location="front" app="core" params="'small', $file->averageReviewRating(), \IPS\Settings::i()->reviews_rating_out_of"}
 				{{endif}}
@@ -573,7 +576,7 @@
 			{{endif}}
 		</div>
 		<div class="ipsData__extra">
-			<ul class='ipsData__stats'>
+			<ul class='ipsData__stats' data-ips-hook='stats'>
 				{{if $file->isPaid() and !$file->nexus and \in_array( 'purchases', explode( ',', settings.idm_nexus_display ) ) and $file->purchaseCount()}}
 					<li data-statType="purchases">
 						<span class='ipsData__stats-icon' data-stat-value="{$file->purchaseCount()}" aria-hidden="true" data-ipstooltip title='{lang="x_purchases" pluralize="$file->purchaseCount()"}'></span>
@@ -627,9 +630,9 @@
 				{$file->ui( 'dataAttributes' )}
 			>
 				<a href="{$file->url( 'getPrefComment' )}" class="ipsLinkPanel" aria-hidden="true" tabindex="-1"><span>{$file->name}</span></a>
-				<a href="{$file->url( 'getPrefComment' )}" class='ipsData__image'>
-					{{if $file->primary_screenshot_thumb}}
-						<img src='{file="$file->primary_screenshot_thumb" extension="downloads_Screenshots"}' alt='' loading='lazy'>
+				<a href="{$file->url( 'getPrefComment' )}" class='ipsData__image' aria-hidden="true" tabindex="-1">
+					{{if $screenshot = $file->primary_screenshot_thumb}}
+						<img src='{$screenshot->url}' alt='' loading='lazy'>
 					{{else}}
 						<i></i>
 					{{endif}}
@@ -692,15 +695,15 @@
 									<span class='ipsData__stats-label'>{$file->comments} {lang="total_comments"}</span>
 								</li>
 							{{endif}}
-							{{if $table AND method_exists( $table, 'canModerate' ) AND $table->canModerate()}}
-								<li>
-									<input class='ipsInput ipsInput--toggle' type='checkbox' data-role='moderation' name="moderate[{$file->id}]" data-actions="{expression="implode( ' ', $table->multimodActions( $file ) )"}" data-state='{{if $file->tableStates()}}{$file->tableStates()}{{endif}}'>
-								</li>
-							{{endif}}
 						</ul>
 						<div class='ipsData__last'>{lang="byline_nodate" htmlsprintf="$file->author()->link( NULL, NULL, $file->isAnonymous() )"}</div>
 					</div>
 				</div>
+				{{if $table AND method_exists( $table, 'canModerate' ) AND $table->canModerate()}}
+					<div class="ipsData__mod">
+						<input class='ipsInput ipsInput--toggle' type='checkbox' data-role='moderation' name="moderate[{$file->id}]" data-actions="{expression="implode( ' ', $table->multimodActions( $file ) )"}" data-state='{{if $file->tableStates()}}{$file->tableStates()}{{endif}}'>
+					</div>
+				{{endif}}
 			</li>
 		{{endforeach}}
 	{{else}}
@@ -716,17 +719,17 @@
    {$file->ui( 'dataAttributes' )}
 >
 	<a href='{$file->url( "getPrefComment" )}' class="ipsLinkPanel" aria-hidden="true" tabindex="-1"><span>{$file->name}</span></a>
-	<a href="{$file->url( 'getPrefComment' )}" class='ipsData__image'>
-		{{if $file->primary_screenshot_thumb}}
-			<img src='{file="$file->primary_screenshot_thumb" extension="downloads_Screenshots"}' alt='' loading='lazy'>
+	<a href="{$file->url( 'getPrefComment' )}" class='ipsData__image' aria-hidden="true" tabindex="-1">
+		{{if $screenshot = $file->primary_screenshot_thumb}}
+			<img src='{$screenshot->url}' alt='' loading='lazy'>
 		{{else}}
 			<i></i>
 		{{endif}}
 	</a>
 	<div class='ipsData__content'>
 		<div class='ipsData__main'>
-			<div class='ipsData__title'>
-				<div class='ipsBadges'>
+			<div class='ipsData__title' data-ips-hook='main'>
+				<div class='ipsBadges' data-ips-hook='badges'>
 					{{foreach $file->badges() as $badge}}{$badge|raw}{{endforeach}}
 				</div>
 				{{if $file->prefix()}}
@@ -735,7 +738,7 @@
 				{{if $file->unread()}}
 					<span class='ipsIndicator' data-ipsTooltip title='{{if $file->unread() === -1}}{lang="new"}{{else}}{lang="updated"}{{endif}}'></span>
 				{{endif}}
-				<h4><a href='{$file->url( "getPrefComment" )}' title='{lang="view_this_file" sprintf="$file->name"} {{if $file->canEdit()}}{lang="click_hold_edit"}{{endif}}' {{if $file->canEdit()}}data-role="editableTitle"{{endif}}>{$file->name}</a></h4>
+				<h4 data-ips-hook='title'><a href='{$file->url( "getPrefComment" )}' title='{lang="view_this_file" sprintf="$file->name"} {{if $file->canEdit()}}{lang="click_hold_edit"}{{endif}}' {{if $file->canEdit()}}data-role="editableTitle"{{endif}}>{$file->name}</a></h4>
 			</div>
 			<div class='ipsData__desc'>{$file->truncated()|raw}</div>
 			<div class="i-flex i-align-items_center i-gap_2 i-flex-wrap_wrap">
@@ -748,7 +751,7 @@
 			</div>
 		</div>
 		<div class="ipsData__extra">
-			<ul class='ipsData__stats'>
+			<ul class='ipsData__stats' data-ips-hook='stats'>
 				{{if \IPS\Application::appIsEnabled( 'nexus' ) and settings.idm_nexus_on}}
 					<li data-stattype="price">
 						{{if $file->isPaid()}}
@@ -781,7 +784,7 @@
 			</ul>
 			<div class="ipsData__last">
 				{template="userPhoto" app="core" group="global" params="$file->author(), 'fluid'"}
-				<div class="ipsData__last-text">
+				<div class="ipsData__last-text" data-ips-hook='details'>
 					<div class="ipsData__last-primary">
 						{lang="byline_nodate" htmlsprintf="$file->author()->link( NULL, NULL, $file->isAnonymous() )"}
 						{{if \IPS\Request::i()->app != 'downloads'}}
@@ -839,7 +842,7 @@
 		<h3 class='ipsTitle ipsTitle--h3'><a href='{$file->url( "getPrefComment" )}' title='{lang="view_this_file" sprintf="$file->name"}'>{$file->mapped('title')}</a></h3>
 		<p class='i-color_soft i-link-color_inherit'>{lang="in"} <a href='{$file->container()->url()}'>{$file->container()->_title}</a></p>
 		{{if $file->container()->bitoptions['reviews']}}
-			{template="rating" group="global" location="front" app="core" params="'large', $file->rating, \IPS\Settings::i()->reviews_rating_out_of"} &nbsp;&nbsp;
+			{template="rating" group="global" location="front" app="core" params="'large', $file->averageReviewRating(), \IPS\Settings::i()->reviews_rating_out_of"} &nbsp;&nbsp;
 		{{endif}}

 		<span>{{if !$file->downloads}}<span class='i-color_soft'>{{endif}}<i class='fa-solid fa-circle-arrow-down'></i> {number="$file->downloads"}{{if !$file->downloads}}</span>{{endif}} {{if $file->container()->bitoptions['comments']}}&nbsp;&nbsp;{{if !$file->comments}}<span class='i-color_soft'>{{endif}}<i class='fa-solid fa-comment'></i> {$file->comments}{{endif}}{{if !$file->comments}}</span>{{endif}}</span>
@@ -911,9 +914,9 @@
 	{template="embedHeader" group="embed" app="core" params="$comment, $item->mapped('title'), $comment->mapped('date'), $url"}
 	<div class='ipsRichEmbed__content'>
 		<div class='ipsRichEmbed_originalItem'>
-			{{if $item->primary_screenshot_thumb}}
+			{{if $screenshot = $item->primary_screenshot_thumb}}
 				<a href='{$url}' title='{$item->mapped('title')}' class='ipsRichEmbed_masthead ipsRichEmbed_masthead--small'>
-					<img src='{file="$item->primary_screenshot_thumb" extension="downloads_Screenshots"}' alt="{$item->mapped('title')}" loading="lazy">
+					<img src='{$screenshot->url}' alt="{$item->mapped('title')}" loading="lazy">
 				</a>
 			{{endif}}
 			<div class='ipsRichEmbed__content'>
@@ -962,9 +965,9 @@
 	<div class='ipsRichEmbed__content'>
 		<div class='ipsRichEmbed_originalItem'>
 			<div>
-				{{if $item->primary_screenshot_thumb}}
+				{{if $screenshot = $item->primary_screenshot_thumb}}
 					<a href='{$url}' title='{$item->mapped('title')}' class='ipsRichEmbed_masthead ipsRichEmbed_masthead--small'>
-						<img src='{file="$item->primary_screenshot_thumb" extension="downloads_Screenshots"}' alt="{$item->mapped('title')}" loading="lazy">
+						<img src='{$screenshot->url}' alt="{$item->mapped('title')}" loading="lazy">
 					</a>
 				{{else}}
 					<div class='ipsRichEmbed_masthead'></div>
@@ -997,13 +1000,13 @@
 	{{foreach $rows as $row}}
 	{{$idField = $row::$databaseColumnId;}}
 		<li class="ipsData__item {{if method_exists( $row, 'tableClass' ) && $row->tableClass()}}ipsData__item--{$row->tableClass()}{{endif}} {{if $row->hidden()}}ipsModerated{{endif}}" data-controller='core.front.system.manageFollowed' data-followID='{$row->_followData['follow_area']}-{$row->_followData['follow_rel_id']}' {{if $row->unread()}}data-ips-unread{{else}}data-ips-read{{endif}}>
-			<figure class='ipsData__image'>
+			<div class="ipsData__image" aria-hidden="true">
 				{{if $row->_primary_screenshot }}
 					<img src='{expression="str_replace( array( '(', ')' ), array( '\(', '\)' ), $row->primary_screenshot->url )"}' alt='' loading='lazy'>
 				{{else}}
 					<i></i>
 				{{endif}}
-			</figure>
+			</div>
 			<div class='ipsData__content'>
 				<div class='ipsData__main'>
 					<div class='ipsData__title'>
@@ -1134,9 +1137,9 @@
 <template template_group="nexus" template_name="fileInfo" template_data="$file" template_location="admin" template_app="downloads"><![CDATA[
 <div class='i-background_2 i-padding_3 i-margin-bottom_2 i-border-radius_box'>
 	<div class='ipsData__item'>
-		<a href="$file->url()" class='ipsData__image'>
-			{{if $file->primary_screenshot_thumb}}
-				<img src='{file="$file->primary_screenshot_thumb"}' alt='' loading='lazy'>
+		<a href="$file->url()" class='ipsData__image' aria-hidden="true" tabindex="-1">
+			{{if $screenshot = $file->primary_screenshot_thumb}}
+				<img src='{$screenshot->url}' alt='' loading='lazy'>
 			{{else}}
 				<i></i>
 			{{endif}}
@@ -1403,41 +1406,45 @@
 	<input type="hidden" name="{$k}" value="{$v}">
 	{{endforeach}}

-	<div class='ipsBox ipsPull i-margin-bottom_block'>
+	<div class='ipsBox ipsBox--downloadsSubmit1 ipsPull i-margin-bottom_block'>
 		<h3 class='ipsBox__header'>{$step}{{$step++;}}. {{if $category->multiple_files}}{lang="select_your_files"}{{else}}{lang="select_your_file"}{{endif}}</h3>
 		<div class='i-padding_3'>
 			{{if isset( $form->elements['']['import_files'] ) || isset( $form->elements['']['url_files'] )}}
 			<ul class='ipsButtons ipsButtons--end i-margin-bottom_2'>
 				{{if isset( $form->elements['']['url_files'] )}}
 				<li>
-					<button type="button" class='ipsButton ipsButton--soft ipsButton--small' id='elURLFiles' data-ipsMenu data-ipsMenu-closeOnClick='false' data-ipsMenu-appendTo='#elDownloadsSubmit'>
+					<button type="button" id="elURLFiles" popovertarget="elURLFiles_menu" class='ipsButton ipsButton--soft ipsButton--small'>
 						<i class='fa-solid fa-earth-americas'></i> {lang="add_files_by_url"} <i class='fa-solid fa-caret-down'></i>
 						<span class='ipsNotification {{if !\count( $form->elements['']['url_files']->value )}}ipsHide{{endif}}' data-role='fileCount'>{expression="\count( $form->elements['']['url_files']->value )"}</span>
 					</button>
-					<div id='elURLFiles_menu' class='ipsMenu ipsMenu_normal i-padding_0 ipsHide'>
-						<ul class='ipsForm ipsForm--fullWidth'>
-							{$form->elements['']['url_files']|raw}
-							<li class="ipsSubmitRow">
-								<button type="button" class='ipsButton ipsButton--wide ipsButton--primary' data-action='confirmUrls'>{lang="submit_menu_confirm"}</button>
-							</li>
-						</ul>
-					</div>
+					<i-dropdown popover id="elURLFiles_menu">
+						<div class="iDropdown">
+							<ul class='ipsForm ipsForm--fullWidth'>
+								{$form->elements['']['url_files']|raw}
+								<li class="ipsSubmitRow">
+									<button type="button" class='ipsButton ipsButton--wide ipsButton--primary' data-action='confirmUrls'>{lang="submit_menu_confirm"}</button>
+								</li>
+							</ul>
+						</div>
+					</i-dropdown>
 				</li>
 				{{endif}}
 				{{if isset( $form->elements['']['import_files'] )}}
 				<li>
-					<button type="button" class='ipsButton ipsButton--soft ipsButton--small' id='elImportFiles' data-ipsMenu data-ipsMenu-closeOnClick='false' data-ipsMenu-appendTo='#elDownloadsSubmit'>
+					<button type="button" id="elImportFiles" popovertarget="elImportFiles_menu" class='ipsButton ipsButton--soft ipsButton--small'>
 						<i class='fa-solid fa-folder'></i> {lang="add_files_by_path"} <i class='fa-solid fa-caret-down'></i>
 						<span class='ipsNotification {{if !\count( $form->elements['']['import_files']->value )}}ipsHide{{endif}}' data-role='fileCount'>{expression="\count( $form->elements['']['import_files']->value )"}</span>
 					</button>
-					<div id='elImportFiles_menu' class='ipsMenu ipsMenu_normal i-padding_0 ipsHide'>
-						<ul class='ipsForm ipsForm--fullWidth'>
-							{$form->elements['']['import_files']|raw}
-							<li class="ipsSubmitRow">
-								<button type="button" class='ipsButton ipsButton--wide ipsButton--primary' data-action='confirmImports'>{lang="submit_menu_confirm"}</button>
-							</li>
-						</ul>
-					</div>
+					<i-dropdown popover id="elImportFiles_menu">
+						<div class="iDropdown">
+							<ul class='ipsForm ipsForm--fullWidth'>
+								{$form->elements['']['import_files']|raw}
+								<li class="ipsSubmitRow">
+									<button type="button" class='ipsButton ipsButton--wide ipsButton--primary' data-action='confirmImports'>{lang="submit_menu_confirm"}</button>
+								</li>
+							</ul>
+						</div>
+					</i-dropdown>
 				</li>
 				{{endif}}
 			</ul>
@@ -1459,24 +1466,26 @@
 	{{if !$bulk }}
 	{{if $category->bitoptions['allowss'] }}
 		<div id='elDownloadsSubmit_screenshots'>
-			<div class='ipsBox ipsPull i-margin-bottom_block'>
+			<div class='ipsBox ipsBox--downloadsSubmit2 ipsPull i-margin-bottom_block'>
 				<h3 class='ipsBox__header'>{$step}{{$step++;}}. {lang="add_screenshots"}</h3>
 				<div class='i-padding_3'>
 					{{if isset( $form->elements['']['url_screenshots'] )}}
 					<ul class='ipsButtons ipsButtons--end i-margin-bottom_2'>
 						<li>
-							<button type="button" class='ipsButton ipsButton--soft ipsButton--small' id='elURLScreenshots' data-ipsMenu data-ipsMenu-closeOnClick='false' data-ipsMenu-appendTo='#elDownloadsSubmit_screenshots'>
+							<button type="button" id="elURLScreenshots" popovertarget="elURLScreenshots_menu" class='ipsButton ipsButton--soft ipsButton--small'>
 								<i class='fa-solid fa-earth-americas'></i> {lang="add_screenshots_by_url"} <i class='fa-solid fa-caret-down'></i>
 								<span class='ipsNotification {{if !isset( $form->elements['']['url_screenshots']->value['values'] ) OR !\count( $form->elements['']['url_screenshots']->value['values'] )}}ipsHide{{endif}}' data-role='fileCount'>{expression="\count( $form->elements['']['url_screenshots']->value['values'] ?? array() )"}</span>
 							</button>
-							<div id='elURLScreenshots_menu' class='ipsMenu ipsMenu_wide ipsHide'>
-								<ul class="ipsForm ipsForm--vertical">
-									{$form->elements['']['url_screenshots']|raw}
-									<li class="ipsSubmitRow">
-										<button type="button" class='ipsButton ipsButton--wide ipsButton--primary' data-action='confirmScreenshotUrls'>{lang="submit_menu_confirm"}</button>
-									</li>
-								</ul>
-							</div>
+							<i-dropdown popover id="elURLScreenshots_menu">
+								<div class="iDropdown">
+									<ul class="ipsForm ipsForm--vertical">
+										{$form->elements['']['url_screenshots']|raw}
+										<li class="ipsSubmitRow">
+											<button type="button" class='ipsButton ipsButton--wide ipsButton--primary' data-action='confirmScreenshotUrls'>{lang="submit_menu_confirm"}</button>
+										</li>
+									</ul>
+								</div>
+							</i-dropdown>
 						</li>
 					</ul>
 					{{endif}}
@@ -1491,7 +1500,7 @@
 	{{endif}}

 	<div id='elDownloadsSubmit_otherinfo'>
-		<div class='ipsBox ipsPull i-margin-bottom_block'>
+		<div class='ipsBox ipsBox--downloadsSubmit3 ipsPull i-margin-bottom_block'>
 			<h3 class='ipsBox__header'>{$step}{{$step++;}}. {{if $newSubmission}}{lang="submit_file_information"}{{else}}{lang="new_version_details"}{{endif}}</h3>
 			<ul class='ipsForm ipsForm--vertical ipsForm--submit-file'>
 				{{foreach $form->elements as $collection}}
@@ -1505,7 +1514,7 @@
 		</div>

 		{{if $terms}}
-			<div class='ipsBox ipsPull i-margin-bottom_block'>
+			<div class='ipsBox  ipsBox--downloadsSubmit4 ipsPull i-margin-bottom_block'>
 				<h3 class='ipsBox__header'>{$step}{{$step++;}}. {lang="csubmissionterms_placeholder"}</h3>
 				<div class='i-padding_3 ipsRichText'>
 					{$terms|raw}
@@ -1514,7 +1523,7 @@
 		{{endif}}
 	</div>
 	{{elseif $terms}}
-		<div class='ipsBox ipsPull i-margin-bottom_block'>
+		<div class='ipsBox  ipsBox--downloadsSubmit5 ipsPull i-margin-bottom_block'>
 			<h3 class='ipsBox__header'>{$step}{{$step++;}}. {lang="csubmissionterms_placeholder"}</h3>
 			<div class='i-padding_3 ipsRichText'>
 				{$terms|raw}
@@ -1522,7 +1531,7 @@
 		</div>
 	{{endif}}

-	<div class='ipsBox ipsPull i-padding_2 i-text-align_center'>
+	<div class='ipsBox ipsBox--downloadsSubmit6 ipsPull i-padding_2 i-text-align_center'>
 		<button type='submit' class='ipsButton ipsButton--primary' data-role='submitForm'>
 			{{if $bulk}}
 				{lang="continue"}
@@ -1559,7 +1568,7 @@
    </p>
    {{foreach $file->customFields( TRUE ) as $k => $v}}
        <p>
-            <strong><span data-ips-font-size="90">{lang="downloads_{$k}"} </span></strong> {$v|raw}
+            {$v|raw}
        </p>
    {{endforeach}}
 </div>
@@ -1574,7 +1583,7 @@
 	{{endif}}
 {{endforeach}}]]></template>
 <template template_group="view" template_name="changeLog" template_data="$file, $version" template_location="front" template_app="downloads"><![CDATA[{{$versionNumber = $version['b_version'] ?: (string) \IPS\DateTime::ts( $version['b_backup'] );}}
-<p class='i-color_soft i-margin-bottom_2'>{lang="file_version_released" htmlsprintf="\IPS\DateTime::ts( $version['b_backup'] )->html( false )"}</p>
+<p class='i-color_soft i-margin-bottom_1'>{lang="file_version_released" htmlsprintf="\IPS\DateTime::ts( $version['b_backup'] )->html( false )"}</p>
 <div class='ipsRichText'>
 	{{if $version['b_changelog']}}
 		{template="richText" group="global" app="core" location="global" params="$version['b_changelog']"}
@@ -1583,8 +1592,8 @@
 	{{endif}}
 </div>
 {{if isset( $version['b_id'] ) and ( $file->canDownload() or ( $file->canEdit() and member.group['idm_bypass_revision'] ) )}}
+	<div class="ipsTitle ipsTitle--h5 i-margin-top_3 i-margin-bottom_1">{lang="with_version" sprintf="$versionNumber"}</div>
 	<ul class='ipsList ipsList--inline'>
-		<li><img src='{resource="subitem_stem.png" app="core"}' alt=''> <strong>{lang="with_version" sprintf="$versionNumber"}</strong></li>
 		{{if $file->canDownload()}}
 			<li><a href='{{if settings.idm_antileech AND !$file->requiresDownloadConfirmation()}}{$file->url('download')->setQueryString( array( 'version' => $version['b_id'] ) )->csrf()}{{else}}{$file->url('download')->setQueryString( array( 'version' => $version['b_id'] ) )}{{endif}}' {{if $file->requiresDownloadConfirmation()}}data-ipsDialog{{endif}}>{lang="download"}</a></li>
 		{{endif}}
@@ -1707,7 +1716,7 @@
 ]]></template>
 <template template_group="view" template_name="downloadSidebar" template_data="$file" template_location="front" template_app="downloads"></template>
 <template template_group="view" template_name="downloadTeaser" template_data="" template_location="front" template_app="downloads"><![CDATA[
-<span class="i-color_soft ipsResponsive_hidePhone"><i class="fa-solid fa-circle-info"></i> {lang="download_teaser"}</span>
+<a class='ipsButton ipsButton--inherit ipsButton--wide' href='{url="app=core&module=system&controller=login" seoTemplate="login"}' data-ipsDialog data-ipsDialog-size='medium' data-ipsDialog-title='{lang="teaser_signin_button"}'><i class="fa-solid fa-circle-info"></i> {lang="download_teaser"}</a>
 ]]></template>
 <template template_group="view" template_name="downloadTerms" template_data="$file, $downloadTerms, $confirmUrl, $multipleFiles" template_location="front" template_app="downloads"><![CDATA[<div class='i-padding_3'>
 	<h1 class='ipsTitle ipsTitle--h3'>{lang="download_terms"}</h1>
@@ -1737,7 +1746,7 @@
 		</div>
 	</li>
 {{endforeach}}]]></template>
- <template template_group="view" template_name="logTable" template_data="$table, $headers, $rows, $quickSearch" template_location="front" template_app="downloads"><![CDATA[<div data-baseurl='{$table->baseUrl}' data-resort='{$table->resortKey}' data-controller='core.global.core.table' {{if $table->getPaginationKey() != 'page'}}data-pageParam='{$table->getPaginationKey()}'{{endif}} {{if !\IPS\Request::i()->isAjax() }}class="ipsBox"{{endif}}>
+ <template template_group="view" template_name="logTable" template_data="$table, $headers, $rows, $quickSearch" template_location="front" template_app="downloads"><![CDATA[<div data-baseurl='{$table->baseUrl}' data-resort='{$table->resortKey}' data-controller='core.global.core.table' {{if $table->getPaginationKey() != 'page'}}data-pageParam='{$table->getPaginationKey()}'{{endif}} {{if !\IPS\Request::i()->isAjax() }}class="ipsBox ipsBox--downloadLogTable"{{endif}}>

 	{{if $table->pages > 1}}
 		<div class="ipsButtonBar ipsButtonBar--top">
@@ -1823,7 +1832,7 @@
 <div>
 	<div class='{{if $file->primary_screenshot}}ipsColumns{{endif}}'>
 		<div {{if $file->primary_screenshot_thumb}}class='ipsColumns__primary'{{endif}}>
-            <header class='ipsPageHeader ipsBox ipsPull ipsPageHeader--downloads-pending'>
+            <header class='ipsPageHeader ipsBox ipsBox--downloadsPendingHeader ipsPull ipsPageHeader--downloads-pending'>
                <div class="ipsPageHeader__row">
 					<div class='ipsPageHeader__primary'>
 						<h1 class='ipsPageHeader__title'>
@@ -1885,7 +1894,7 @@
 		</div>
 	{{endif}}

-	<div class='ipsBox i-margin-top_block'>
+	<div class='ipsBox ipsBox--downloadsPending i-margin-top_block'>
 		{{if $file->screenshots( 0, TRUE, NULL, TRUE )->getInnerIterator()->count()}}
 			<h2 class='ipsBox__header ipsHide'>{lang="screenshots_ct" pluralize="$file->screenshots()->getInnerIterator()->count()"}</h2>
 			<div class='ipsBox__content'>
@@ -1992,31 +2001,33 @@
 	</ul>
 </div>]]></template>
 <template template_group="view" template_name="reviews" template_data="$file" template_location="front" template_app="downloads"><![CDATA[
-<div data-controller='core.front.core.commentFeed' {{if settings.auto_polling_enabled}}data-autoPoll{{endif}} data-commentsType='reviews' data-baseURL='{$file->url()}' {{if $file->isLastPage('reviews')}}data-lastPage{{endif}} data-feedID='{$file->reviewFeedId}' id='reviews' class='ipsEntries ipsEntries--reviews ipsEntries--download-reviews' data-follow-area-id="file-{$file->id}">
-	{{if $file->reviewForm()}}
-		{{if $file->locked()}}
-			<strong class='i-color_warning'><i class='fa-solid fa-circle-info'></i> {lang="item_locked_can_review"}</strong>
-		{{endif}}
-		<div id='elFileReviewForm'>
-			{$file->reviewForm()|raw}
-		</div>
-	{{else}}
-		{{if $file->hasReviewed()}}
-			<!-- Already reviewed -->
-		{{elseif $file->locked()}}
-			{template="commentUnavailable" group="forms" location="front" app="core" params="'item_locked_cannot_review'"}
-		{{elseif \IPS\Member::loggedin()->restrict_post}}
-			{{if \IPS\Member::loggedIn()->restrict_post == -1}}
-				{template="reviewUnavailable" group="forms" location="front" app="core" params="'restricted_cannot_comment'"}
-			{{else}}
-				{template="reviewUnavailable" group="forms" location="front" app="core" params="'restricted_cannot_comment', \IPS\Member::loggedIn()->warnings(5,NULL,'rpa'), \IPS\Member::loggedIn()->restrict_post"}
+<div data-controller='core.front.core.commentFeed' {{if settings.auto_polling_enabled}}data-autoPoll{{endif}} data-commentsType='reviews' data-baseURL='{$file->url()}' {{if $file->isLastPage('reviews')}}data-lastPage{{endif}} data-feedID='{$file->reviewFeedId}' id='reviews' data-follow-area-id="file-{$file->id}">
+	<div class="ipsComposeAreaWrapper">
+		{{if $file->reviewForm()}}
+			{{if $file->locked()}}
+				<strong class='i-color_warning'><i class='fa-solid fa-circle-info'></i> {lang="item_locked_can_review"}</strong>
+			{{endif}}
+			<div id='elFileReviewForm'>
+				{$file->reviewForm()|raw}
+			</div>
+		{{else}}
+			{{if $file->hasReviewed()}}
+				<!-- Already reviewed -->
+			{{elseif $file->locked()}}
+				{template="commentUnavailable" group="forms" location="front" app="core" params="'item_locked_cannot_review'"}
+			{{elseif \IPS\Member::loggedin()->restrict_post}}
+				{{if \IPS\Member::loggedIn()->restrict_post == -1}}
+					{template="reviewUnavailable" group="forms" location="front" app="core" params="'restricted_cannot_comment'"}
+				{{else}}
+					{template="reviewUnavailable" group="forms" location="front" app="core" params="'restricted_cannot_comment', \IPS\Member::loggedIn()->warnings(5,NULL,'rpa'), \IPS\Member::loggedIn()->restrict_post"}
+				{{endif}}
+			{{elseif $file->mustDownloadBeforeReview()}}
+				<p class='i-color_soft i-font-weight_600 i-text-align_center i-background_2 i-padding_2 i-border-start-start-radius_box i-border-start-end-radius_box'>{lang="no_download_review"}</p>
+			{{elseif \IPS\Member::loggedIn()->members_bitoptions['unacknowledged_warnings']}}
+				{template="reviewUnavailable" group="forms" location="front" app="core" params="'unacknowledged_warning_cannot_post', \IPS\Member::loggedIn()->warnings( 1, FALSE )"}
 			{{endif}}
-		{{elseif $file->mustDownloadBeforeReview()}}
-			<p class='i-color_soft i-font-weight_600 i-text-align_center i-background_2 i-padding_2 i-border-start-start-radius_box i-border-start-end-radius_box'>{lang="no_download_review"}</p>
-		{{elseif \IPS\Member::loggedIn()->members_bitoptions['unacknowledged_warnings']}}
-			{template="reviewUnavailable" group="forms" location="front" app="core" params="'unacknowledged_warning_cannot_post', \IPS\Member::loggedIn()->warnings( 1, FALSE )"}
 		{{endif}}
-	{{endif}}
+	</div>
 	{{if \count( $file->reviews( NULL, NULL, 'date', 'desc', NULL, NULL, NULL, NULL, isset( \IPS\Request::i()->showDeleted ) ) )}}

 		<div class='ipsButtonBar ipsButtonBar--top'>
@@ -2035,7 +2046,7 @@
 				{template="commentMultimodHeader" app="core" group="global" params="$file, '#reviews', 'review'"}
 			</div>
 		</div>		
-		<div data-role='commentFeed' data-controller='core.front.core.moderation'>
+		<div data-role='commentFeed' data-controller='core.front.core.moderation' class='ipsEntries ipsEntries--reviews ipsEntries--download-reviews'>
 			<form action="{$file->url()->csrf()->setQueryString( 'do', 'multimodReview' )->setPage('page',\IPS\Request::i()->page)}" method="post" data-ipsPageAction data-role='moderationTools'>
 				{{$reviewCount=0; $timeLastRead = $file->timeLastRead(); $lined = FALSE;}}
 				{{foreach $file->reviews( NULL, NULL, 'date', 'desc', NULL, NULL, NULL, NULL, isset( \IPS\Request::i()->showDeleted ) ) as $review}}
@@ -2070,15 +2081,15 @@
 {{endif}}

 <div class='ipsBlockSpacer' data-ips-hook="main">
-	<div class='ipsBox ipsPull'>
+	<div class='ipsBox ipsBox--downloadsFile ipsPull'>
 		<header class='ipsPageHeader'>
 			<div class="ipsPageHeader__row">
 				<div data-ips-hook="header" class='ipsPageHeader__primary'>
-					<div data-ips-hook="title" class='ipsPageHeader__title'>
+					<div class='ipsPageHeader__title'>
 						<div data-ips-hook="badges" class='ipsBadges'>
 							{{foreach $file->badges() as $badge}}{$badge|raw}{{endforeach}}
 						</div>
-						<h1>
+						<h1 data-ips-hook="title">
 							{{if $file->canEdit()}}
 								<span data-controller="core.front.core.moderation">
 									<span data-role="editableTitle" title="{lang="click_hold_edit"}">{$file->name}</span>{{if $file->container()->version_numbers}} <span class="i-color_soft">{$file->version}</span>{{endif}}
@@ -2105,7 +2116,7 @@
 						{template="tagsWithPrefix" group="global" app="core" params="$file->tags(), $file->prefix(), FALSE, FALSE, ( $file->canEdit() AND ( \count( $file->tags() ) OR $file::canTag( NULL, $file->container() ) ) ) ? $file->url() : NULL"}
 					{{endif}}
 				</div>
-				<div class='ipsButtons'>
+				<div class='ipsButtons' data-ips-hook='fileMainButtons'>
 					{{if \count( $file->shareLinks() )}}
 						{template="shareButton" app="core" group="sharelinks" params="$file"}
 					{{endif}}
@@ -2177,26 +2188,25 @@
 				</ul>
 			</div>
 		{{endif}}
-
+		{{if $file->screenshots()->getInnerIterator()->count()}}
+			<section class='i-border-bottom_3'>
+				<h2 class='ipsBox__header ipsHide'>{lang="screenshots_ct" pluralize="$file->screenshots()->getInnerIterator()->count()"}</h2>
+				<div data-ips-hook='screenshots'>
+					<ul class='ipsCarousel ipsCarousel--padding ipsCarousel--images ipsCarousel--downloads-file-screenshots' id='downloads-file-screenshots' tabindex="0">
+						{{$fullScreenshots = iterator_to_array( $file->screenshots() );}}
+						{{foreach $file->screenshots( 1 ) as $id => $screenshot}}
+							<li>
+								<a href="{$fullScreenshots[ $id ]->url}" class="ipsThumb" data-ipsLightbox data-ipsLightbox-group="download_{$file->id}">
+									<img src="{$screenshot->url}" alt="">
+								</a>
+							</li>
+						{{endforeach}}
+					</ul>
+					{template="carouselNavigation" group="global" app="core" params="'downloads-file-screenshots', 'i-margin-bottom_2'"}
+				</div>
+			</section>
+		{{endif}}
 		<div class='ipsColumns ipsColumns--lines'>
-			{{if $file->screenshots()->getInnerIterator()->count()}}
-				<section class='i-basis_100p'>
-					<h2 class='ipsBox__header ipsHide'>{lang="screenshots_ct" pluralize="$file->screenshots()->getInnerIterator()->count()"}</h2>
-					<div class=''>
-						<ul class='ipsCarousel ipsCarousel--padding ipsCarousel--images ipsCarousel--downloads-file-screenshots' id='downloads-file-screenshots' tabindex="0">
-							{{$fullScreenshots = iterator_to_array( $file->screenshots() );}}
-							{{foreach $file->screenshots( 1 ) as $id => $screenshot}}
-								<li>
-									<a href="{$fullScreenshots[ $id ]->url}" class="ipsThumb" data-ipsLightbox data-ipsLightbox-group="download_{$file->id}">
-										<img src="{$screenshot->url}" alt="">
-									</a>
-								</li>
-							{{endforeach}}
-						</ul>
-						{template="carouselNavigation" group="global" app="core" params="'downloads-file-screenshots', 'i-margin-bottom_2'"}
-					</div>
-				</section>
-			{{endif}} 
 			<article class='ipsColumns__primary i-flex i-flex-direction_column'>
 				{{$tabs = array();}}
 				{{foreach $cfields as $field}}
@@ -2227,26 +2237,35 @@
 								{{endif}}
 								{{if $versionData['b_changelog'] or !empty( $previousVersions )}}
 									<section data-controller='downloads.front.view.changeLog' class='i-margin-top_4 i-background_2 i-padding_3 i-border-radius_box'>
-										<div class='i-flex i-align-items_center i-gap_1 i-flex-wrap_wrap i-justify-content_space-between i-margin-bottom_3'>
+										<div class='i-flex i-align-items_center i-gap_1 i-flex-wrap_wrap i-justify-content_space-between i-margin-bottom_2'>
 											<h2 class='ipsTitle ipsTitle--h5'>{lang="whats_new_in_version" sprintf="$versionData['b_version'] ?: (string) \IPS\DateTime::ts( $versionData['b_backup'] )"}</h2>
-											{{if !empty( $previousVersions )}}<a href='#' id='elChangelog' data-ipsMenu data-ipsMenu-selectable="radio" class='i-color_soft i-font-weight_500' title='{lang="see_changelog_title"}'><span>{lang="see_changelog"}</span><i class='fa-solid fa-caret-down i-margin-start_icon'></i></a>{{endif}}
+											{{if !empty( $previousVersions )}}
+												<button type="button" id="elChangelog" popovertarget="elChangelog_menu" class='i-color_soft i-font-weight_500' title='{lang="see_changelog_title"}'><span>{lang="see_changelog"}</span><i class='fa-solid fa-caret-down i-margin-start_icon'></i></button>
+											{{endif}}
 										</div>
 										<div data-role='changeLogData'>
 											{template="changeLog" group="view" params="$file, $versionData"}
 										</div>
-										<ul class='ipsMenu ipsMenu_selectable ipsMenu_auto ipsHide' id='elChangelog_menu'>
-											{{$versionNumber = $file->version ?: (string) \IPS\DateTime::ts( $file->published );}}
-											<li class='ipsMenu_item {{if !request.changelog}}ipsMenu_itemChecked{{endif}}' data-ipsMenuValue='{$versionNumber}'><a href='{$file->url()->setQuerystring( 'changelog', 0 )}' title='{lang="see_changelog_for" sprintf="$versionNumber"}'>{$versionNumber}</a></li>
-											{{foreach $previousVersions as $version}}
-												{{$versionNumber = $version['b_version'] ?: (string) \IPS\DateTime::ts( $version['b_backup'] );}}
-												<li class='ipsMenu_item {{if request.changelog == $version['b_id']}}ipsMenu_itemChecked{{endif}} {{if $version['b_hidden']}}ipsModerated{{endif}}' data-ipsMenuValue='{expression="md5( $versionNumber . $version['b_backup'] . mt_rand() )"}' data-changelogTitle="{$versionNumber}">
-													<a href='{$file->url()->setQueryString( 'changelog', $version['b_id'] )}' title='{lang="see_changelog_for" sprintf="$versionNumber"}'>
-														{$versionNumber}<br>
-														<span class='i-color_soft'>{expression="\IPS\DateTime::ts( $version['b_backup'] )->html()" raw="true"}</span>
-													</a>
-												</li>
-											{{endforeach}}
-										</ul>
+										<i-dropdown popover id="elChangelog_menu" data-i-dropdown-selectable="radio">
+											<div class="iDropdown">
+												<ul class="iDropdown__items">
+													{{$versionNumber = $file->version ?: (string) \IPS\DateTime::ts( $file->published );}}
+													<li><a href='{$file->url()->setQuerystring( 'changelog', 0 )}' title='{lang="see_changelog_for" sprintf="$versionNumber"}' {{if !request.changelog}}aria-selected="true"{{endif}} data-ipsMenuValue='{$versionNumber}'><i class="iDropdown__input"></i>{$versionNumber}</a></li>
+													{{foreach $previousVersions as $version}}
+														{{$versionNumber = $version['b_version'] ?: (string) \IPS\DateTime::ts( $version['b_backup'] );}}
+														<li class='{{if $version['b_hidden']}}ipsModerated{{endif}}'>
+															<a href='{$file->url()->setQueryString( 'changelog', $version['b_id'] )}' title='{lang="see_changelog_for" sprintf="$versionNumber"}' {{if request.changelog == $version['b_id']}}aria-selected="true"{{endif}} data-ipsMenuValue='{expression="md5( $versionNumber . $version['b_backup'] . mt_rand() )"}' data-changelogTitle="{$versionNumber}">
+																<i class="iDropdown__input"></i>
+																<div>
+																	{$versionNumber}
+																	<span class='iDropdown__minor'>{expression="\IPS\DateTime::ts( $version['b_backup'] )->html()" raw="true"}</span>
+																</div>
+															</a>
+														</li>
+													{{endforeach}}
+												</ul>
+											</div>
+										</i-dropdown>
 									</section>
 								{{endif}}

@@ -2283,7 +2302,7 @@
 				{{if $menu->hasContent() || ( \IPS\IPS::classUsesTrait( $file, 'IPS\Content\Reactable' ) and settings.reputation_enabled )}}
 					<div class='ipsEntry__footer'>
 					    {{if $menu->hasContent()}}
-						<menu class='ipsEntry__controls'>
+						<menu class='ipsEntry__controls' data-ips-hook='menu'>
 							<li>{$menu|raw}</li>
 						</menu>
 						{{endif}}
@@ -2302,7 +2321,7 @@
 							{{endif}}
 							<li>
 								{{if !$file->isPurchasable( FALSE )}}
-									<button class="ipsButton ipsButton--inherit ipsResponsive_hidePhone" disabled type='button'><i class="fa-solid fa-circle-info"></i><span>{lang="purchasing_disabled"}</span></button>
+									<button class="ipsButton ipsButton--inherit" disabled type='button'><i class="fa-solid fa-circle-info"></i><span>{lang="purchasing_disabled"}</span></button>
 								{{else}}
 									<a href='{{if !$file->container()->message('disclaimer') OR !\in_array( $file->container()->disclaimer_location, [ 'purchase', 'both' ] )}}{$file->url('buy')->csrf()}{{else}}{$file->url('buy')}{{endif}}' class='ipsButton ipsButton--primary ipsButton--large i-width_100p' {{if $file->container()->message('disclaimer') AND \in_array( $file->container()->disclaimer_location, [ 'purchase', 'both'])}}data-ipsDialog{{endif}}><i class='fa-solid fa-cart-shopping'></i><span>{lang="buy_now"}{{if $price = $file->price()}} - {$price|raw}{{endif}}</span></a>
 								{{endif}}
@@ -2311,7 +2330,7 @@
 							{{if $file->canDownload() or !$file->downloadTeaser()}}
 								{template="downloadButton" group="view" app="downloads" params="$file"}
 							{{else}}
-								{$file->downloadTeaser()|raw}
+								<li>{$file->downloadTeaser()|raw}</li>
 							{{endif}}
 						{{endif}}
 						{{if ( isset( $purchasesToRenew ) or $purchasesToRenew = $file->purchasesToRenew() ) and \count( $purchasesToRenew )}}
@@ -2321,12 +2340,16 @@
 										<a href='{$purchase->url()->setQueryString('do', 'renew')->csrf()}' class='ipsButton ipsButton--primary ipsButton--large i-width_100p'><i class='fa-solid fa-arrows-rotate'></i><span>{lang="purchase_renew_now"} - {$purchase->renewals->cost}</span></a>
 									{{endforeach}}
 								{{else}}
-									<a href='#elFileRenew_menu' id='elFileRenew' class='ipsButton ipsButton--primary ipsButton--large i-width_100p' data-ipsMenu><i class='fa-solid fa-arrows-rotate'></i><span>{lang="purchase_renew_now"}</span><i class="fa-solid fa-caret-down"></i></a>
-									<ul id='elFileRenew_menu' class='ipsMenu ipsMenu_auto ipsHide'>
-										{{foreach $purchasesToRenew as $purchase}}
-											<li class='ipsMenu_item'><a href="{$purchase->url()->setQueryString('do', 'renew')->csrf()}">{$purchase->name}<br><span class='i-color_soft'>{$purchase->renewals}</span></a></li>
-										{{endforeach}}
-									</ul>		
+								<button type="button" id="elFileRenew" popovertarget="elFileRenew_menu" class='ipsButton ipsButton--primary ipsButton--large i-width_100p'><i class='fa-solid fa-arrows-rotate'></i><span>{lang="purchase_renew_now"}</span><i class="fa-solid fa-caret-down"></i></button>
+								<i-dropdown popover id="elFileRenew_menu">
+									<div class="iDropdown">
+										<ul class="iDropdown__items">
+											{{foreach $purchasesToRenew as $purchase}}
+												<li><a href="{$purchase->url()->setQueryString('do', 'renew')->csrf()}">{$purchase->name}<span class='iDropdown__minor'>{$purchase->renewals}</span></a></li>
+											{{endforeach}}
+										</ul>
+									</div>
+								</i-dropdown>
 								{{endif}}						
 							</li>
 						{{endif}}
@@ -2457,20 +2480,20 @@
 		<i-data>
 			<ul class='ipsData ipsData--{$layout} {{if $isCarousel}}ipsData--carousel{{endif}} ipsData--widget-downloads-commentFeed' {{if $isCarousel}}id='{$carouselID}' tabindex="0"{{endif}}>
 				{{foreach $comments as $comment}}
-					<li class='ipsData__item'>
+					<li class='ipsData__item {$comment->ui('css')}' {$comment->ui('dataAttributes')}>
 						<a href='{$comment->url()}' class="ipsLinkPanel" aria-hidden="true" tabindex="-1"><span>{$comment->item()->mapped('title')}</span></a>
 						{{if in_array($layout, array("wallpaper", "featured", "grid"))}}
-							<figure class='ipsData__image'>
+							<div class="ipsData__image" aria-hidden="true">
 								{{if $image = $comment->item()->primaryImage()}}
 									<img src="{$image->url}" alt="{$comment->item()->mapped('title')}" loading="lazy">
 								{{else}}
 									<i></i>
 								{{endif}}
-							</figure>
+							</div>
 						{{else}}
-							<figure class='ipsData__icon'>
+							<div class='ipsData__icon'>
 								{template="userPhoto" app="core" group="global" params="$comment->author(), 'fluid'"}
-							</figure>
+							</div>
 						{{endif}}
 						<div class="ipsData__content">
 							<div class='ipsData__main'>
@@ -2500,16 +2523,16 @@
 		<i-data>
 			<ul class='ipsData ipsData--{$layout} {{if $isCarousel}}ipsData--carousel{{endif}} ipsData--widget-downloads-reviews' {{if $isCarousel}}id='{$carouselID}' tabindex="0"{{endif}}>
 				{{foreach $reviews as $review}}
-					<li class='ipsData__item'>
+					<li class='ipsData__item {$review->ui('css')}' {$review->ui('dataAttributes')}>
 						<a href="{$review->item()->url( "getPrefComment" )}" class="ipsLinkPanel" aria-hidden="true" tabindex="-1"><span>{$review->item()->mapped('title')}</span></a>
 						{{if \in_array( $layout, array("grid", "wallpaper", "featured"))}}
-							<figure class="ipsData__image">
+							<div class="ipsData__image" aria-hidden="true">
 								{{if $image = $review->item()->primaryImage()}}
 									<img src="{$image->url}" alt="{$review->item()->mapped('title')}" loading="lazy">
 								{{else}}
 									<i></i>
 								{{endif}}
-							</figure>
+							</div>
 						{{else}}
 							<div class='ipsData__icon'>
 								{template="userPhoto" app="core" group="global" params="$review->author(), 'fluid'"}
@@ -2594,18 +2617,18 @@
 		<p class='ipsEmptyMessage'>{lang="no_new_files"}</p>
 	{{endif}}
 </div>]]></template>
- <template template_group="widgets" template_name="fileRow" template_data="$file, $layout='table', $isCarousel=false" template_location="front" template_app="downloads"><![CDATA[<li class='ipsData__item'>
+ <template template_group="widgets" template_name="fileRow" template_data="$file, $layout='table', $isCarousel=false" template_location="front" template_app="downloads"><![CDATA[<li class='ipsData__item {$file->ui('css')}' {$file->ui('dataAttributes')}>
 	<a href="{$file->url('getPrefComment')}" class="ipsLinkPanel" aria-hidden="true" tabindex="-1"><span>{$file->name}</span></a>
-	<figure class="ipsData__image">
-		{{if $file->primary_screenshot_thumb}}
-			<img src='{file="$file->primary_screenshot_thumb"}' alt='' loading='lazy'>
+	<div class="ipsData__image" aria-hidden="true" data-ips-hook='image'>
+		{{if $screenshot = $file->primary_screenshot_thumb}}
+			<img src='{$screenshot->url}' alt='' loading='lazy'>
 		{{else}}
 			<i></i>
 		{{endif}}
-	</figure>
+	</div>
 	<div class="ipsData__content">
 		<div class='ipsData__main'>
-			<h4 class='ipsData__title'>
+			<h4 class='ipsData__title' data-ips-hook='title'>
 				<a href="{$file->url( "getPrefComment" )}" title='{lang="view_this_file" sprintf="$file->name"}'>{$file->name}</a>
 			</h4>
 			{{$price = NULL;}}
@@ -2624,13 +2647,13 @@
 			{{if \in_array( $layout, array("minimal"))}}
 				<div class="ipsData__meta">{lang="byline_nodate" htmlsprintf="$file->author()->link( NULL, NULL, $file->isAnonymous() )"} &middot; {datetime="$file->mapped('date')" lowercase="true" short="true"}</div>
 			{{endif}}
-			{{if $file->container()->bitoptions['reviews'] and $file->rating > 0}}
-				{template="rating" group="global" location="front" app="core" params="'small', $file->rating, \IPS\Settings::i()->reviews_rating_out_of"}
+			{{if $file->container()->bitoptions['reviews']}}
+				{template="rating" group="global" location="front" app="core" params="'small', $file->averageReviewRating(), \IPS\Settings::i()->reviews_rating_out_of"}
 			{{endif}}
 		</div>
 		{{if !\in_array( $layout, array("minimal"))}}
 			<div class="ipsData__extra">
-				<ul class='ipsData__stats'>
+				<ul class='ipsData__stats' data-ips-hook='stats'>
 					{{if $file->isPaid() and !$file->nexus and \in_array( 'purchases', explode( ',', settings.idm_nexus_display ) ) }}
 						<li data-stattype="purchases" data-v="{$file->purchaseCount()}">
 							<span class="ipsData__stats-icon" data-stat-value="{$file->purchaseCount()}" aria-hidden="true" data-ipstooltip title='{$file->purchaseCount()} {lang="idm_purchases"}'></span>