ui/settings: Make save button sticky on top

sogebot · Aug 2, 2018 · 447b10f · 447b10f
1 parent 61e9a07
commit 447b10f
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 18 deletions.
diff --git a/public/pages/games.html b/public/pages/games.html
@@ -72,20 +72,21 @@ <h6>{{ category }}</h6>
             </div>
           </div>
         </template>
-
-        <div class="text-right mb-2">
-          <div v-if="isDataChanged" class="btn alert-danger" style="cursor: initial">{{commons.translate('dialog.changesPending')}}</div>
-          <button class="btn btn btn-primary" v-on:click="saveSettings" v-if="state.settings === 0">{{ commons.translate('dialog.buttons.saveChanges.idle') }}</button>
-          <button disabled="disabled" class="btn btn btn-primary" v-on:click="saveSettings" v-if="state.settings === 1">
-            <i class="fas fa-circle-notch fa-spin"></i> {{ commons.translate('dialog.buttons.saveChanges.progress') }}</button>
-          <button disabled="disabled" class="btn btn btn-success" v-on:click="saveSettings" v-if="state.settings === 2">
-            <i class="fas fa-check"></i> {{ commons.translate('dialog.buttons.saveChanges.done') }}</button>
-        </div>
       </div>
 
       <div class="col-lg-3 col-md-4 col-sm-6">
         <div class="sticky-top" style="top: 80px">
           <div class="widget pt-1 mt-3 border-0 bg-light" style="height: auto">
+
+          <div class="pl-2 pr-2 pb-4">
+              <div v-if="isDataChanged" class="btn alert-danger" style="cursor: initial">{{commons.translate('dialog.changesPending')}}</div>
+              <button class="btn btn-block btn-primary" v-on:click="saveSettings" v-if="state.settings === 0">{{ commons.translate('dialog.buttons.saveChanges.idle') }}</button>
+              <button disabled="disabled" class="btn btn-block btn-primary" v-on:click="saveSettings" v-if="state.settings === 1">
+                <i class="fas fa-circle-notch fa-spin"></i> {{ commons.translate('dialog.buttons.saveChanges.progress') }}</button>
+              <button disabled="disabled" class="btn btn-block btn-success" v-on:click="saveSettings" v-if="state.settings === 2">
+                <i class="fas fa-check"></i> {{ commons.translate('dialog.buttons.saveChanges.done') }}</button>
+            </div>
+
             <div class="pl-2 pr-2" v-for="system of listOfGames">
               <button
                 class="btn btn-block text-left btn-outline-dark"

diff --git a/public/pages/systems.html b/public/pages/systems.html
@@ -54,20 +54,21 @@ <h6>{{ category }}</h6>
             </div>
           </div>
         </template>
-
-        <div class="text-right mb-2">
-          <div v-if="isDataChanged" class="btn alert-danger" style="cursor: initial">{{commons.translate('dialog.changesPending')}}</div>
-          <button class="btn btn btn-primary" v-on:click="saveSettings" v-if="state.settings === 0">{{ commons.translate('dialog.buttons.saveChanges.idle') }}</button>
-          <button disabled="disabled" class="btn btn btn-primary" v-on:click="saveSettings" v-if="state.settings === 1">
-            <i class="fas fa-circle-notch fa-spin"></i> {{ commons.translate('dialog.buttons.saveChanges.progress') }}</button>
-          <button disabled="disabled" class="btn btn btn-success" v-on:click="saveSettings" v-if="state.settings === 2">
-            <i class="fas fa-check"></i> {{ commons.translate('dialog.buttons.saveChanges.done') }}</button>
-        </div>
       </div>
 
       <div class="col-lg-3 col-md-4 col-sm-6">
         <div class="sticky-top" style="top: 80px">
           <div class="widget pt-1 mt-3 border-0 bg-light" style="height: auto">
+
+            <div class="pl-2 pr-2 pb-4">
+              <div v-if="isDataChanged" class="btn alert-danger" style="cursor: initial">{{commons.translate('dialog.changesPending')}}</div>
+              <button class="btn btn-block btn-primary" v-on:click="saveSettings" v-if="state.settings === 0">{{ commons.translate('dialog.buttons.saveChanges.idle') }}</button>
+              <button disabled="disabled" class="btn btn-block btn-primary" v-on:click="saveSettings" v-if="state.settings === 1">
+                <i class="fas fa-circle-notch fa-spin"></i> {{ commons.translate('dialog.buttons.saveChanges.progress') }}</button>
+              <button disabled="disabled" class="btn btn-block btn-success" v-on:click="saveSettings" v-if="state.settings === 2">
+                <i class="fas fa-check"></i> {{ commons.translate('dialog.buttons.saveChanges.done') }}</button>
+            </div>
+
             <div class="pl-2 pr-2" v-for="system of listOfSystems">
               <button
                 class="btn btn-block text-left btn-outline-dark"