Tweak Featured styling, fix various issues

app/flatpages/help.md

@@ -9,6 +9,7 @@ toc: False
 * [Ranks and Permissions](ranks_permissions)
 * [Reporting Content](reporting)
 * [Top Packages Algorithm](top_packages)
+* [Featured Packages](featured)
 
 ## Help for Package Authors
 

app/flatpages/help/featured.md

@@ -0,0 +1,6 @@
+title: Featured Packages
+
+Editors can choose packages to feature on the homepage.
+This is done using the Featured tag.
+
+We are still deciding on a policy for choosing Featured packages. 

app/logic/packages.py

@@ -134,7 +134,7 @@ def do_edit_package(user: User, package: Package, was_new: bool, data: dict, rea
 		package.provides.append(m)
 
 	if "tags" in data:
-		old_tags = package.tags
+		old_tags = list(package.tags)
 		package.tags.clear()
 		for tag_id in data["tags"]:
 			if is_int(tag_id):

app/scss/custom.scss

@@ -173,12 +173,33 @@ pre code {
 	}
 }
 
-.fs-2 {
+#featuredCarousel {
-	font-size: calc(1.325rem + .9vw) !important;
+	.embed-responsive-item {
+		filter: brightness(0.85);
+		object-fit: cover;
+	}
+	.carousel-item, .embed-responsive-item {
+		max-height: 50vh;
+	}
+	.carousel-inner {
+		background-color: #000;
+		border-radius: 3px;
+		overflow: hidden;
+	}
+	.carousel-indicators {
+		margin-bottom: 0 !important;
+		opacity: 0.6;
+	}
+}
+
+@media (min-width: 768px) {
+	#featuredCarousel h3 {
+		font-size: calc(1.325rem + .9vw) !important;
+	}
 }
 
 .text-shadow {
-	text-shadow: 3px 3px 3px rgba(10,10,10,0.2);
+	text-shadow: 0 0 10px rgba(10, 10, 10, 0.2), 3px 3px 3px rgba(10, 10, 10, 0.4);
 }
 
 @import "dracula.scss";

app/templates/base.html

@@ -6,7 +6,7 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<title>{% block title %}title{% endblock %} - {{ config.USER_APP_NAME }}</title>
 	<link rel="stylesheet" type="text/css" href="/static/libs/bootstrap.min.css">
-	<link rel="stylesheet" type="text/css" href="/static/custom.css?v=29">
+	<link rel="stylesheet" type="text/css" href="/static/custom.css?v=30">
 	<link rel="search" type="application/opensearchdescription+xml" href="/static/opensearch.xml" title="ContentDB" />
 	<link rel="shortcut icon" href="/favicon-16.png" sizes="16x16">
 	<link rel="icon" href="/favicon-128.png" sizes="128x128">

app/templates/index.html

@@ -21,7 +21,7 @@
 
 {% block content %}
 	{% from "macros/packagegridtile.html" import render_pkggrid %}
-	<div id="featuredCarousel" class="carousel slide mb-5" data-ride="carousel">
+	<div id="featuredCarousel" class="carousel slide my-0" data-ride="carousel" data-interval="7500">
 		<ol class="carousel-indicators">
 			{% for package in featured %}
 				<li data-target="#featuredCarousel" data-slide-to="{{ loop.index - 1 }}" {% if loop.index == 1 %}class="active"{% endif %}></li>
@@ -37,14 +37,14 @@
 							<img class="embed-responsive-item" src="{{ cover_image }}"
 								alt="{{ _('%(title)s by %(author)s', title=package.title, author=package.author.display_name) }}">
 						</div>
-						<div class="carousel-caption d-none d-md-block text-shadow">
+						<div class="carousel-caption text-shadow">
-							<h3 class="mt-0 mb-3 fs-2">
+							<h3 class="mt-0 mb-3">
 								{{ _('<strong>%(title)s</strong> by %(author)s', title=package.title, author=package.author.display_name) }}
 							</h3>
 							<p>
 								{{ package.short_desc }}
 							</p>
-							<div>
+							<div class="d-none d-md-block">
 								<span class="mr-2">
 									{{ package.type.value }}
 								</span>
@@ -84,6 +84,12 @@
 			<span class="sr-only">{{ _("Next") }}</span>
 		</a>
 	</div>
+	<div class="text-right mb-5 text-muted" style="opacity: 0.4;">
+		<a href="/help/featured/" class="btn">
+			<i class="fas fa-question-circle mr-1"></i>
+			Featured
+		</a>
+	</div>
 
 	<a href="{{ url_for('packages.list_all', sort='approved_at', order='desc') }}" class="btn btn-secondary float-right">
 		{{ _("See more") }}