Improved text, and added a retry in Splash.vue

ebkr · May 17, 2020 · d63508e · d63508e
1 parent 3a09a75
commit d63508e
Showing 1 changed file with 34 additions and 18 deletions.
diff --git a/src/pages/Splash.vue b/src/pages/Splash.vue
@@ -4,17 +4,10 @@
     <div class='notification is-warning'>
         <p>Risk of Rain 2 updates may break mods. If a new update has been released, please be patient.</p>
     </div>
-    <progress-bar 
-        :max='requests.length * 100' 
-        :value='reduceRequests().getProgress() > 0 ? reduceRequests().getProgress() : undefined'
-        :className='[reduceRequests().getProgress() > 0 ? "is-info" : ""]' />
-    <br/>
-    <nav class='level' v-if="isOffline">
-        <div class='level-item'>
-            <a class='button is-info' @click="continueOffline()">Continue in offline mode</a>
-        </div>
-    </nav>
-    <br/>
+    <progress-bar
+            :max='requests.length * 100'
+            :value='reduceRequests().getProgress() > 0 ? reduceRequests().getProgress() : undefined'
+            :className='[reduceRequests().getProgress() > 0 ? "is-info" : ""]' />
     <div class='columns'>
       <div class='column is-one-quarter'>
         <aside class='menu'>
@@ -31,6 +24,16 @@
         </aside>
       </div>
       <div class='column is-three-quarters'>
+        <div class='container'>
+          <br/>
+          <nav class='level' v-if="isOffline">
+            <div class='level-item'>
+              <a class='button is-info' @click="continueOffline()">Continue offline</a>&nbsp;
+              <a class='button is-dark' @click="retryConnection()">Try to reconnect</a>
+            </div>
+            <br/><br/>
+          </nav>
+        </div>
         <div>
           <article class='media'>
             <div class='media-content'>
@@ -48,18 +51,27 @@
                     &nbsp;
                     <strong>Did you know?</strong>
                   </p>
-                  <p>
-                    You can use the "Install with Mod Manager" button on <link-component
-                          :url="'https://thunderstore.io'" :target="'external'">Thunderstore</link-component>
-                    with r2modman.
-                  </p>
-                  <br/>
+                  <ul class='margin-right'>
+                    <li>
+                      <p>
+                        You can use the "Install with Mod Manager" button on <link-component
+                              :url="'https://thunderstore.io'" :target="'external'">Thunderstore</link-component>
+                        with r2modman.
+                      </p>
+                    </li>
+                    <li>
+                      <p>
+                        You can export the selected profile from the settings screen as either a file, or a code.
+                        This makes it easy to share your mod list with friends!
+                      </p>
+                    </li>
+                  </ul>
                   <p>
                     <span class='icon'>
                       <i class='fas fa-question-circle'/>
                     </span>
                     &nbsp;
-                    <strong>Got any problems?</strong>
+                    <strong>Having trouble?</strong>
                   </p>
                   <p>
                     Send a screenshot of the error in the Thunderstore modding discord server. Feel free to ping me
@@ -225,6 +237,10 @@ export default class Splash extends Vue {
         })
     }
 
+  retryConnection() {
+    this.$router.go(0);
+  }
+
     continueOffline() {
         ThunderstorePackages.PACKAGES = [];
         this.$router.push({path: '/profiles'});