Improve subscription list drag and drop (#3953)

* it works

* more beautiful

* optimize JS

* CSS - optimized for dark theme

* delete not used form

* phpcs

* optimize

* more optimization

* fixed javaScript syntax

* better css class name

* template.css RTL

* fix failed test for RTL

* fix broken CSS Syntax

* fixed failed test

* fixed: empty lines in RTL CSS

* again a fixed CSS test....

* fixed test

* less magic numbers

1 files changed, 39 insertions, 42 deletions

diff --git a/app/views/subscription/index.phtml b/app/views/subscription/index.phtml
index 92b1c7ec9..8b9176e27 100644
--- a/app/views/subscription/index.phtml
+++ b/app/views/subscription/index.phtml
@@ -3,7 +3,7 @@
 	$this->partial('aside_subscription');
 ?>
 
-<main class="post drop-section">
+<main class="post">
 	<div class="link-back-wrapper">
 		<a class="link-back" href="<?= _url('index', 'index') ?>"><?= _t('gen.action.back_to_rss_feeds') ?></a>
 	</div>
@@ -25,55 +25,53 @@
 			<a class="btn" href="<?= _url('subscription', 'index', 'error', '1') ?>"><?= _i('look') ?> <?= _t('sub.feed.show.error') ?></a>
 		</div>
 	<?php } ?>
-
-	<form id="controller-category" method="post" aria-hidden="true">
-		<input type="hidden" name="_csrf" value="<?= FreshRSS_Auth::csrfToken() ?>" />
-	</form>
-
-	<?php
-		$signalError = false;
-		foreach ($this->categories as $cat) {
-			$feeds = $cat->feeds();
-	?>
-	<div class="box">
-		<div class="box-title">
-			<a class="configure open-slider" href="<?= _url('subscription', 'category', 'id', $cat->id()) ?>"><?= _i('configure') ?></a>
-			<?= $cat->name() ?>
-		</div>
-		<ul class="box-content" data-cat-id="<?= $cat->id() ?>">
-			<?php if (!empty($feeds)) { ?>
-			<?php
+	
+	<div class="drop-section">
+		<?php
+			$signalError = false;
+			foreach ($this->categories as $cat) {
+				$feeds = $cat->feeds();
+		?>
+		<div class="box">
+			<div class="box-title">
+				<a class="configure open-slider" href="<?= _url('subscription', 'category', 'id', $cat->id()) ?>"><?= _i('configure') ?></a>
+				<?= $cat->name() ?>
+			</div>
+			<ul class="box-content drop-zone" dropzone="move" data-cat-id="<?= $cat->id() ?>">
+				<?php
+				if (!empty($feeds)) {
 					foreach ($feeds as $feed) {
 						if ($this->onlyFeedsWithError && !$feed->inError()) {
 							continue;
 						}
 						$error = $feed->inError() ? ' error' : '';
 						$empty = $feed->nbEntries() == 0 ? ' empty' : '';
-			?>
-			<li class="item feed<?= $error, $empty, $feed->mute() ? ' mute' : '' ?>"
-				draggable="true"
-				data-feed-id="<?= $feed->id() ?>"
-				dropzone="move">
-				<a class="configure open-slider" href="<?= _url('subscription', 'feed', 'id', $feed->id()) ?>"><?= _i('configure') ?></a>
-				<?php if (FreshRSS_Context::$user_conf->show_favicons): ?><img class="favicon" src="<?= $feed->favicon() ?>" alt="✇" loading="lazy" /><?php endif; ?>
-				<?= $feed->name() ?>
-			</li>
-			<?php 	}
+				?>
+				<li class="item feed<?= $error, $empty, $feed->mute() ? ' mute' : '' ?>"
+					draggable="true"
+					data-feed-id="<?= $feed->id() ?>">
+					<a class="configure open-slider" href="<?= _url('subscription', 'feed', 'id', $feed->id()) ?>"><?= _i('configure') ?></a>
+					<?php if (FreshRSS_Context::$user_conf->show_favicons): ?><img class="favicon" src="<?= $feed->favicon() ?>" alt="✇" loading="lazy" /><?php endif; ?>
+					<?= $feed->name() ?>
+				</li>
+				<?php
+					}
 				} else {
-			?>
-			<li class="item feed disabled" dropzone="move"><div class="alert-warn"><?= _t('sub.category.empty') ?></div></li>
-			<?php } ?>
-			<li class="item feed">✚ <a href="<?= _url('subscription', 'add') ?>"><?= _t('sub.feed.add') ?></a></li>
-		</ul>
-	</div>
-	<?php } ?>
+				?>
+				<li class="item feed disabled"><div class="alert-warn"><?= _t('sub.category.empty') ?></div></li>
+				<?php } ?>
+				<li class="item feed">✚ <a href="<?= _url('subscription', 'add') ?>"><?= _t('sub.feed.add') ?></a></li>
+			</ul>
+		</div>
+		<?php } ?>
 
-	<div class="box visible-semi">
-		<div class="box-title">
-			✚ <a href="<?= _url('subscription', 'add') ?>"><?= _t('sub.category.add') ?></a>
+		<div class="box visible-semi">
+			<div class="box-title">
+				✚ <a href="<?= _url('subscription', 'add') ?>"><?= _t('sub.category.add') ?></a>
+			</div>
+			<div class="box-content">
+			</div>
 		</div>
-		<ul class="box-content">
-		</ul>
 	</div>
 
 	<?php $class = $this->displaySlider ? ' class="active"' : ''; ?>
@@ -89,5 +87,4 @@
 		}
 	?>
 	</div>
-
 </main>