ID

724f142

date

2025-01-26 01:03:41+00:00

author

Alex Chan <alex@alexwlchan.net>

parent

f405e56

message

Make it look better on mobile; improve the copy

changed files

1 file, 34 additions, 11 deletions

• index.html

Changed files

index.html (12513 → 12995)

diff --git a/index.html b/index.html
index 24ff3a1..885c300 100644
--- a/index.html
+++ b/index.html
@@ -73,6 +73,14 @@
       width: 150px;
     }
 
+    input[type="file"] {
+      max-width: 100%;
+    }
+
+    button {
+      margin-top: 0.5em;
+    }
+
     input[type="file"], button {
       font-size: 1em;
     }
@@ -91,7 +99,7 @@
       margin-top: 3em;
     }
 
-    dl, p {
+    dl, p, #errors li {
       line-height: 1.5em;
     }
 
@@ -121,6 +129,16 @@
       color: red;
       font-weight: bold;
     }
+
+    #instructions {
+      display: none;
+    }
+
+    #errors {
+      color: red;
+      display: none;
+      margin-bottom: 0;
+    }
   </style>
 </head>
 
@@ -160,25 +178,20 @@
       <p id="instructions">&nbsp;</p>
 
       <ul id="results"></ul>
+
+      <ul id="errors"></ul>
     </form>
 
     <script>
       const uploadForm = document.querySelector("#uploadForm");
 
       function reportError(message) {
-        document.querySelector('#results').style.display = 'block';
+        document.querySelector('#errors').style.display = 'block';
 
-        document.querySelector('#results ul').innerHTML +=
+        document.querySelector('#errors').innerHTML +=
           `<li><strong>Something went wrong:</strong> ${message}</li>`;
       }
 
-      function reportSuccess(message) {
-        document.querySelector('#results').style.display = 'block';
-
-        document.querySelector('#results ul').innerHTML +=
-          `<li><strong>Something worked:</strong> ${message}</li>`;
-      }
-
       uploadForm
         .addEventListener("submit", function(event) {
           // Clicking the button shouldn't submit the form; we do all
@@ -197,7 +210,7 @@
               const contentOpfPath = findContentOpfPath(zip);
 
               if (contentOpfPath === null) {
-                reportError(`Unable to find content.opf in this ePub!`);
+                reportError(`Unable to find content.opf in this ePub! Did this ePub come from AO3?`);
                 return;
               }
 
@@ -256,6 +269,7 @@
               resultsList.insertBefore(listElement, resultsList.firstChild);
 
               // If there are no instructions on screen yet, add some.
+              document.querySelector('#instructions').style.display = 'block';
               document.querySelector('#instructions').innerText = 'Tap or click to download your new ePub:';
 
               // We have a real example, so remove the placeholders.
@@ -392,11 +406,20 @@
       </dd>
 
       <dt>
+        I have a fic that doesn’t work.
+        Can you help?
+      </dt>
+      <dd>
+        Send me a copy of the file, or a link to the original fic, and the browser you were using when something broke.
+      </dd>
+
+      <dt>
         Something is broken.
         Can you fix it?
       </dt>
       <dd>
         <a href="https://github.com/alexwlchan/add-cover-to-ao3-files/issues/new?template=Blank+issue">File an issue</a> in the GitHub repository, or <a href="mailto:alex@alexwlchan.net">send me an email</a>.
+        It’s useful if you tell me what fic you were looking at, what didn’t work, and what browser you were using.
       </dd>
     </dl>