From aaf58272f118d6315350c2f11fb650da789f0262 Mon Sep 17 00:00:00 2001
From: Prospector <6166773+Prospector@users.noreply.github.com>
Date: Tue, 15 Mar 2022 22:11:00 -0700
Subject: [PATCH] Add an indicator for required fields (#413)

---
 pages/_type/_id/edit.vue | 16 ++++++++++------
 pages/create/project.vue | 37 +++++++++++++++++++++++++------------
 2 files changed, 35 insertions(+), 18 deletions(-)

diff --git a/pages/_type/_id/edit.vue b/pages/_type/_id/edit.vue
index 6bb2f3e6..675b72e0 100644
--- a/pages/_type/_id/edit.vue
+++ b/pages/_type/_id/edit.vue
@@ -34,7 +34,7 @@
       </button>
     </header>
     <section class="card essentials">
-      <h3>Name</h3>
+      <h3>Name<span class="required">*</span></h3>
       <label>
         <span>
           Be creative! Generic project names will be harder to search for.
@@ -48,7 +48,7 @@
           "
         />
       </label>
-      <h3>Summary</h3>
+      <h3>Summary<span class="required">*</span></h3>
       <label>
         <span>
           Give a short description of your project that will appear on search
@@ -93,7 +93,7 @@
           "
         />
       </label>
-      <h3>Vanity URL (slug)</h3>
+      <h3>Vanity URL (slug)<span class="required">*</span></h3>
       <label>
         <span>
           Set this to something that will looks nice in your project's URL.
@@ -146,7 +146,7 @@
       <div class="columns">
         <span> Let others know what environments your project supports. </span>
         <div class="labeled-control">
-          <h3>Client</h3>
+          <h3>Client<span class="required">*</span></h3>
           <Multiselect
             v-model="clientSideType"
             placeholder="Select one"
@@ -161,7 +161,7 @@
           />
         </div>
         <div class="labeled-control">
-          <h3>Server</h3>
+          <h3>Server<span class="required">*</span></h3>
           <Multiselect
             v-model="serverSideType"
             placeholder="Select one"
@@ -276,7 +276,7 @@
     </section>
     <section class="card license">
       <div class="title">
-        <h3>License</h3>
+        <h3>License<span class="required">*</span></h3>
       </div>
       <label>
         <span>
@@ -812,4 +812,8 @@ section.donations {
 .card {
   margin-bottom: 0;
 }
+
+.required {
+  color: var(--color-badge-red-bg);
+}
 </style>
diff --git a/pages/create/project.vue b/pages/create/project.vue
index 836979ce..c2a96554 100644
--- a/pages/create/project.vue
+++ b/pages/create/project.vue
@@ -22,7 +22,7 @@
         </button>
       </header>
       <section class="card essentials">
-        <h3>Project type</h3>
+        <h3>Project type<span class="required">*</span></h3>
         <label>
           <span class="no-padding">The project type of your project.</span>
           <Multiselect
@@ -35,14 +35,14 @@
             :allow-empty="false"
           />
         </label>
-        <h3>Name</h3>
+        <h3>Name<span class="required">*</span></h3>
         <label>
           <span>
             Be creative! Generic project names will be harder to search for.
           </span>
           <input v-model="name" type="text" placeholder="Enter the name" />
         </label>
-        <h3>Summary</h3>
+        <h3>Summary<span class="required">*</span></h3>
         <label>
           <span>
             Give a short description of your project that will appear on search
@@ -81,7 +81,7 @@
             placeholder="Choose categories"
           />
         </label>
-        <h3>Vanity URL (slug)</h3>
+        <h3>Vanity URL (slug)<span class="required">*</span></h3>
         <label>
           <span>
             Set this to something that will looks nice in your project's URL.
@@ -128,7 +128,7 @@
             Let others know what environments your project supports.
           </span>
           <div class="labeled-control">
-            <h3>Client</h3>
+            <h3>Client<span class="required">*</span></h3>
             <Multiselect
               v-model="clientSideType"
               placeholder="Select one"
@@ -140,7 +140,7 @@
             />
           </div>
           <div class="labeled-control">
-            <h3>Server</h3>
+            <h3>Server<span class="required">*</span></h3>
             <Multiselect
               v-model="serverSideType"
               placeholder="Select one"
@@ -276,6 +276,9 @@
             </tr>
           </tbody>
         </table>
+        <div v-if="versions.length === 0" class="no-versions-warning">
+          At least 1 version is required.
+        </div>
         <hr v-if="currentVersionIndex !== -1" />
         <div v-if="currentVersionIndex !== -1" class="new-version">
           <div class="controls">
@@ -307,7 +310,7 @@
                 placeholder="Enter the name"
               />
             </label>
-            <h3>Number</h3>
+            <h3>Number<span class="required">*</span></h3>
             <label>
               <span>
                 This is how your version will appear in project lists and URLs.
@@ -318,7 +321,7 @@
                 placeholder="Enter the number"
               />
             </label>
-            <h3>Channel</h3>
+            <h3>Channel<span class="required">*</span></h3>
             <label>
               <span>
                 It is important to notify everyone whether the version is stable
@@ -334,7 +337,7 @@
                 :allow-empty="false"
               />
             </label>
-            <h3>Mod loaders</h3>
+            <h3>Mod loaders<span class="required">*</span></h3>
             <label>
               <span> Mark all mod loaders this version works with. </span>
               <multiselect
@@ -360,7 +363,7 @@
                 placeholder="Choose mod loaders..."
               />
             </label>
-            <h3>Minecraft versions</h3>
+            <h3>Minecraft versions<span class="required">*</span></h3>
             <label>
               <span>
                 Mark all Minecraft version this project's version supports.
@@ -459,7 +462,7 @@
             </div>
           </div>
           <div class="files">
-            <h3>Files</h3>
+            <h3>Files<span class="required">*</span></h3>
             <SmartFileInput
               class="file-input"
               multiple
@@ -648,7 +651,7 @@
       <section class="card license">
         <div class="title">
           <div class="text">
-            <h3>License</h3>
+            <h3>License<span class="required">*</span></h3>
           </div>
         </div>
         <label>
@@ -1277,6 +1280,12 @@ section.versions {
     margin: 0.5rem 0;
   }
 
+  .no-versions-warning {
+    @extend .required;
+    text-align: center;
+    padding: 1rem;
+  }
+
   .new-version {
     display: grid;
     grid-template:
@@ -1539,4 +1548,8 @@ section.donations {
 .card {
   margin-bottom: 0;
 }
+
+.required {
+  color: var(--color-badge-red-bg);
+}
 </style>