Fix screen size reference

frontend/src/components/UserHeader.vue

@@ -88,7 +88,7 @@ const canEditCurrentUser = computed<boolean>(() => {
         </div>
       </div>
       <div class="flex-grow" />
-      <div class="<md:hidden flex flex-col space-y-1 items-end flex-shrink-0">
+      <div class="lt-md:hidden flex flex-col space-y-1 items-end flex-shrink-0">
         <span>{{ i18n.t("author.memberSince", [i18n.d(user.joinDate, "date")]) }}</span>
         <span>{{ i18n.t("author.numProjects", [user.projectCount], user.projectCount) }}</span>
         <span class="inline-flex space-x-1">

frontend/src/components/layout/Header.vue

@@ -227,7 +227,7 @@ function isRecent(date: string): boolean {
 
       <!-- Right side items -->
       <div class="flex items-center gap-2">
-        <div v-if="authStore.user" class="flex items-center <sm:hidden">
+        <div v-if="authStore.user" class="flex items-center lt-sm:hidden">
           <DropdownButton name="Create">
             <template #default="{ close }">
               <DropdownItem to="/new" @click="close()">{{ t("nav.new.project") }}</DropdownItem>

frontend/src/components/projects/ProjectHeader.vue

@@ -110,15 +110,15 @@ function requiresConfirmation(): ConfirmationType {
     </Alert>
   </div>
   <Card accent>
-    <div class="flex <sm:flex-col">
+    <div class="flex lt-sm:flex-col">
       <UserAvatar
-        class="flex-shrink-0 mr-3 <sm:hidden"
+        class="flex-shrink-0 mr-3 lt-sm:hidden"
         :username="project.namespace.owner"
         :to="'/' + project.namespace.owner + '/' + project.name"
         :img-src="project.avatarUrl"
       />
-      <div class="flex-grow sm:mr-4 <sm:mb-4 overflow-clip overflow-hidden">
+      <div class="flex-grow sm:mr-4 lt-sm:mb-4 overflow-clip overflow-hidden">
-        <div class="text-2xl <sm:text-lg pb-1 inline-flex space-x-0.3 items-center">
+        <div class="text-2xl lt-sm:text-lg pb-1 inline-flex space-x-0.3 items-center">
           <UserAvatar
             class="!w-8 !h-8 sm:hidden"
             :username="project.namespace.owner"
@@ -135,7 +135,7 @@ function requiresConfirmation(): ConfirmationType {
         </div>
         <p class="sm:ml-1">{{ project.description }}</p>
       </div>
-      <div class="flex flex-col justify-around <sm:items-center space-y-2 items-end justify-between flex-shrink-0">
+      <div class="flex flex-col justify-around lt-sm:items-center space-y-2 items-end justify-between flex-shrink-0">
         <span v-if="Object.keys(project.mainChannelVersions).length !== 0" class="inline-flex items-center">
           <Tooltip v-if="requiresConfirmation() !== ConfirmationType.NO" :content="i18n.t(requiresConfirmation())">
             <IconMdiAlertCircleOutline class="mr-2 text-2xl" />

frontend/src/lib

@@ -1 +1 @@
-Subproject commit 13d3736b86069a5fb7f147a94bbb57b094a1e540
+Subproject commit 02eeea75a0267aa5cbcdb0012c6cba03a4279d68

frontend/src/pages/[user]/[project]/settings.vue

@@ -250,7 +250,7 @@ useHead(useSeo(i18n.t("project.settings.title") + " | " + props.project.name, pr
   <div class="flex gap-4 flex-col md:flex-row">
     <Card class="basis-full md:basis-9/12">
       <template #header>
-        <div class="flex justify-between <sm:items-center">
+        <div class="flex justify-between lt-sm:items-center">
           {{ i18n.t("project.settings.title") }}
           <div class="text-lg">
             <Button :disabled="v.$invalid" :loading="loading.save" @click="save">
@@ -350,7 +350,7 @@ useHead(useSeo(i18n.t("project.settings.title") + " | " + props.project.name, pr
             <InputText v-model.trim="form.settings.wiki" :label="i18n.t('project.new.step3.wiki')" :rules="[url()]" />
           </ProjectSettingsSection>
           <ProjectSettingsSection title="project.settings.license" description="project.settings.licenseSub">
-            <div class="flex md:gap-2 <md:flex-wrap">
+            <div class="flex md:gap-2 lt-md:flex-wrap">
               <div class="basis-full" :md="isCustomLicense ? 'basis-4/12' : 'basis-6/12'">
                 <InputSelect v-model="form.settings.license.type" :values="useLicenseOptions" :label="i18n.t('project.settings.licenseType')" />
               </div>

frontend/src/pages/[user]/[project]/versions/[version]/index.vue

@@ -147,7 +147,7 @@ async function restoreVersion() {
 </script>
 
 <template>
-  <div v-if="projectVersion" class="flex <sm:flex-col flex-wrap md:flex-nowrap gap-4">
+  <div v-if="projectVersion" class="flex lt-sm:flex-col flex-wrap md:flex-nowrap gap-4">
     <section class="basis-full md:basis-11/15 flex-grow">
       <div class="flex flex-wrap gap-2 justify-between">
         <div>
@@ -156,7 +156,7 @@ async function restoreVersion() {
             {{ projectVersion.name }}
           </h2>
           <h3>
-            <span class="inline-flex <sm:flex-wrap ml-1">
+            <span class="inline-flex lt-sm:flex-wrap ml-1">
               {{ i18n.t("version.page.subheader", [projectVersion.author, lastUpdated(new Date(projectVersion.createdAt))]) }}
               <!--<span v-if="projectVersion.downloads[platform?.enumName]?.fileInfo?.sizeBytes" class="inline-flex items-center sm:ml-3">
                 <IconMdiFile class="mr-1" />

frontend/src/pages/[user]/[project]/versions/index.vue

@@ -115,11 +115,11 @@ function getVisibilityTitle(visibility: Visibility) {
             <li class="mb-2">
               <Card :class="getBorderClasses(item)" class="pb-1">
                 <router-link :to="`/${project.namespace.owner}/${project.namespace.slug}/versions/${item.name}`">
-                  <div class="flex flex-wrap">
+                  <div class="flex lt-lg:flex-wrap">
                     <div class="basis-full lg:(basis-6/15 pb-4) truncate">
                       <div class="flex flex-wrap items-center">
-                        <h2 class="lg:basis-full <lg:mr-1 text-1.15rem leading-relaxed">{{ item.name }}</h2>
+                        <h2 class="lg:basis-full lt-lg:mr-1 text-1.15rem leading-relaxed">{{ item.name }}</h2>
-                        <span class="lg:hidden flex-grow"></span>
+                        <span class="lg:hidden flex-grow" />
                         <Tag :name="item.channel.name" :color="{ background: item.channel.color }" />
                         <IconMdiCancel v-if="item.visibility === Visibility.SOFT_DELETE" class="ml-1"></IconMdiCancel>
                         <span v-else-if="item.visibility !== Visibility.PUBLIC" class="ml-1 inline-flex items-center">
@@ -131,7 +131,7 @@ function getVisibilityTitle(visibility: Visibility) {
                       </div>
                     </div>
                     <hr class="lg:hidden basis-full mt-1 border-gray-400 dark:border-gray-500" />
-                    <div class="basis-6/15 <lg:(mt-2 basis-6/12)">
+                    <div class="basis-6/15 lt-lg:(mt-2 basis-6/12)">
                       <div v-for="(v, p) in item.platformDependenciesFormatted" :key="p" class="basis-full">
                         <div class="inline-flex items-center">
                           <PlatformLogo :platform="p" :size="22" class="mr-1 flex-shrink-0" />
@@ -139,7 +139,7 @@ function getVisibilityTitle(visibility: Visibility) {
                         </div>
                       </div>
                     </div>
-                    <div class="basis-3/15 <lg:(mt-2 basis-6/12) text-0.95rem leading-normal">
+                    <div class="basis-3/15 lt-lg:(mt-2 basis-6/12) text-0.95rem leading-normal">
                       <div class="flex flex-wrap">
                         <span class="basis-full inline-flex items-center">
                           <IconMdiCalendar class="mr-1" />

frontend/src/pages/[user]/[project]/versions/new.vue

@@ -351,7 +351,7 @@ useHead(useSeo(i18n.t("version.new.title") + " | " + props.project.name, props.p
     </template>
     <template #basic>
       <p class="mb-4">{{ i18n.t("version.new.form.versionDescription") }}</p>
-      <div class="flex flex-wrap mt-2 md:-space-x-2 <md:space-y-2">
+      <div class="flex flex-wrap mt-2 md:-space-x-2 lt-md:space-y-2">
         <!-- TODO validate version string against existing versions - now super easy! -->
         <div v-if="pendingVersion" class="basis-full md:basis-4/12 items-center">
           <InputText
@@ -367,13 +367,13 @@ useHead(useSeo(i18n.t("version.new.title") + " | " + props.project.name, props.p
       <p class="mt-8 text-xl">{{ t("version.new.form.addedArtifacts") }}</p>
       <div v-for="(pendingFile, idx) in pendingVersion?.files" :key="idx" class="mb-2">
         <div class="flex flex-wrap items-center mt-4 gap-2">
-          <div v-if="pendingFile.fileInfo" class="basis-full <md:mt-4 md:basis-4/12">
+          <div v-if="pendingFile.fileInfo" class="basis-full lt-md:mt-4 md:basis-4/12">
             <InputText :model-value="pendingFile.fileInfo.name" :label="t('version.new.form.fileName')" disabled />
           </div>
-          <div v-if="pendingFile.fileInfo" class="basis-full <md:mt-4 md:(basis-2/12)">
+          <div v-if="pendingFile.fileInfo" class="basis-full lt-md:mt-4 md:(basis-2/12)">
             <InputText :model-value="String(formatSize(pendingFile.fileInfo.sizeBytes))" :label="t('version.new.form.fileSize')" disabled />
           </div>
-          <div v-else class="basis-full <md:mt-4 md:basis-6/12">
+          <div v-else class="basis-full lt-md:mt-4 md:basis-6/12">
             <InputText v-model="pendingFile.externalUrl" :label="t('version.new.form.externalUrl')" disabled />
           </div>
           <div class="ml-2 flex flex-wrap items-center">

frontend/src/pages/admin/user/[user].vue

@@ -85,7 +85,7 @@ useHead(useSeo(i18n.t("userAdmin.title") + " " + route.params.user, null, route,
         {{ $route.params.user }}
       </Link>
     </PageTitle>
-    <div class="flex <md:flex-col mb-2 gap-2">
+    <div class="flex lt-md:flex-col mb-2 gap-2">
       <Card class="basis-full md:basis-8/12">
         <template #header>{{ i18n.t("userAdmin.roles") }}</template>
         <div class="space-x-1">

frontend/src/pages/guidelines.vue

@@ -57,8 +57,8 @@ Functionality may not be hidden behind a paywall or an author-granted license ke
 off-site addons or "full" versions of a "lite" plugin version. Hooks into paid software are allowed if they exist for
 compatibility reasons or are part of a feature that is also usable through other, not similarly restricted means.
 
-Advertisements and other revenue generating links (such as adfly) are not permitted. Informative mentions of (optional)
+Advertisements are not allowed, with the exception of informative mentions of (optional) platform or plugin dependencies.
-platform or plugin dependencies are exempt from this.
+Revenue generating links (such as adfly) are not permitted.
 
 On the resource page, you may link to the following:
 

frontend/src/pages/new.vue

@@ -182,8 +182,8 @@ function createProject() {
             :rules="[required()]"
           />
         </div>
-        <span class="text-3xl <md:hidden ml-2 mr-2">/</span>
+        <span class="text-3xl lt-md:hidden ml-2 mr-2">/</span>
-        <div class="basis-full md:basis-4/12 <md:mt-4">
+        <div class="basis-full md:basis-4/12 lt-md:mt-4">
           <InputText
             v-model.trim="form.name"
             :label="i18n.t('project.new.step2.projectName')"
@@ -236,7 +236,7 @@ function createProject() {
         {{ i18n.t("project.new.step3.license") }}
         <hr />
       </div>
-      <div class="flex md:gap-2 <md:flex-wrap">
+      <div class="flex md:gap-2 lt-md:flex-wrap">
         <div class="basis-full mt-4" :md="isCustomLicense ? 'basis-4/12' : 'basis-6/12'">
           <InputSelect v-model="form.settings.license.type" :values="useLicenseOptions" :label="i18n.t('project.new.step3.type')" :rules="[required()]" />
         </div>