Allow independent scrolling in split-column mode (#433)

src/nginxconfig/scss/_columns.scss

@@ -0,0 +1,32 @@
+/*
+Copyright 2023 DigitalOcean
+
+This code is licensed under the MIT License.
+You may obtain a copy of the License at
+https://github.com/digitalocean/nginxconfig.io/blob/master/LICENSE or https://mit-license.org/
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and / or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions :
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+*/
+
+.columns {
+  .column-scroll-y {
+    overflow-y: auto;
+    height: 100vh;
+  }
+}

src/nginxconfig/scss/style.scss

@@ -1,5 +1,5 @@
 /*
-Copyright 2022 DigitalOcean
+Copyright 2023 DigitalOcean
 
 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@@ -50,4 +50,5 @@ $callout: #f3f5f9;
   @import "code";
   @import "files";
   @import "footer";
+  @import "columns";
 }

src/nginxconfig/templates/app.vue

@@ -1,5 +1,5 @@
 <!--
-Copyright 2022 DigitalOcean
+Copyright 2023 DigitalOcean
 
 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@@ -59,7 +59,7 @@ THE SOFTWARE.
 
         <div class="main container" :style="{ display: ready ? undefined : 'none' }">
             <div class="columns is-multiline">
-                <div :class="`column ${splitColumn ? 'is-half' : 'is-full'} is-full-touch`">
+                <div :class="`column ${splitColumn ? 'is-half column-scroll-y' : 'is-full'} is-full-touch`">
                     <h2>{{ $t('templates.app.perWebsiteConfig') }}</h2>
 
                     <div class="tabs">
@@ -96,7 +96,7 @@ THE SOFTWARE.
                     <Setup :data="{ domains: domains.filter(d => d !== null), global, confFiles }"></Setup>
                 </div>
 
-                <div :class="`column ${splitColumn ? 'is-half' : 'is-full'} is-full-touch`">
+                <div :class="`column ${splitColumn ? 'is-half column-scroll-y' : 'is-full'} is-full-touch`">
                     <h2>{{ $t('templates.app.configFiles') }}</h2>
                     <div ref="files" class="columns is-multiline files">
                         <component

src/nginxconfig/templates/footer.vue

@@ -1,5 +1,5 @@
 <!--
-Copyright 2022 DigitalOcean
+Copyright 2023 DigitalOcean
 
 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@@ -28,7 +28,13 @@ THE SOFTWARE.
     <div class="footer">
         <div class="container">
             <p>
-                <a href="#top" class="button is-primary is-small">{{ $t('templates.footer.backToTop') }}</a>
+                <button
+                    type="button"
+                    class="button is-primary is-small"
+                    @click="handleScrollToTop"
+                >
+                    {{ $t('templates.footer.backToTop') }}
+                </button>
             </p>
             <p>
                 {{ $t('templates.footer.thisToolIs') }}
@@ -68,5 +74,13 @@ THE SOFTWARE.
         components: {
             ExternalLink,
         },
+        methods: {
+            handleScrollToTop: () => {
+                window.scrollTo({top: 0});
+
+                document.querySelectorAll('.column-scroll-y')
+                    .forEach(column => column.scrollTo({ top: 0 }));
+            },
+        },
     };
 </script>