obama (#1314)

* Update ru_RU.json

keeping russian lang actual

* ok

* Add gradient to lyric-footer

* *Commit en español Ñ (#1304)

* i hate my life (#1307)

* world is now a better place

* meltdown avoided

* meltdown avoided

* stylize new listen now childs

* full scale artwork, finally

* dynamic width for search categories

* hd all album work

* Update afterPack.js

* force hq quality

* oops

* attempt to fix

* misc cleanup

* why what

* what was i thinking

* fix duplicated text in listen now childs

* Paginate/infinite scroll for  albums, playlists (#1234)

* Infinite scroll, pagination to album, playlists

* move pagination below tracks

* Make page size configurable

* remove renderer

* Mitigate songs / album slow app issue.

* add ratings, library change to web remote (#1285)

* Add compact artist header option (#1308)

* Support compact artist header (optional)

* Add required term

* improve pagination styling

Co-authored-by: h0ckerman <35598335+h0ckerman@users.noreply.github.com>
Co-authored-by: vapormusic <vietanhfat@gmail.com>
Co-authored-by: Monochromish <chillygamer7@gmail.com>
Co-authored-by: Gabriel Davila <56521591+mefsaal@users.noreply.github.com>
Co-authored-by: Core <64542347+coredev-uk@users.noreply.github.com>
Co-authored-by: Maikiwi <stella@mai.kiwi>
Co-authored-by: yazninja <yazlesean@gmail.com>
Co-authored-by: booploops <49113086+booploops@users.noreply.github.com>
Co-authored-by: Kendall Garner <17521368+kgarner7@users.noreply.github.com>
Co-authored-by: Pedro Galhardo <pgalhardo@icloud.com>
Co-authored-by: yazninja <71800112+yazninja@users.noreply.github.com>

src/renderer/less/elements.less

@@ -165,6 +165,7 @@
 .page-btn {
   align-self: center;
   height: 32px;
+  width:max-content;
 }
 
 .page-btn img {
@@ -2390,4 +2391,15 @@ input[type=checkbox][switch]:checked:active::before {
   img {
     border-radius: 50%;
   }
+}
+
+.pagination-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 16px;
+  .md-input-number{
+    min-width: 12em;
+  }
 }

src/renderer/views/components/pagination.ejs

@@ -1,39 +1,39 @@
 <script type="text/x-template" id="pagination">
-    <div class="row" style="margin-bottom: 16px" v-if="!isInfinite">
+    <div class="pagination-container" v-if="!isInfinite">
         <button
-            class="col md-btn page-btn"
+            class="md-btn page-btn"
             :disabled="effectivePage === 1"
             @click="goToPage(1)"
         >
             <img class="md-ico-first"/>
         </button>
         <button
-            class="col md-btn page-btn prev"
+            class="md-btn page-btn prev"
             :disabled="effectivePage === 1"
             @click="goToPrevious()"
         >
             <img class="md-ico-prev"/>
         </button>
         <button
-            :class="`col md-btn page-btn${ isCurrentPage(page) ? ' md-btn-primary': ''}`"
+            :class="`md-btn page-btn${ isCurrentPage(page) ? ' md-btn-primary': ''}`"
             @click="goToPage(page)"
             v-for="page in pagesToShow"
         >{{ page }}</button>
         <button
-            class="col md-btn page-btn next"
+            class="md-btn page-btn next"
             :disabled="effectivePage === numPages"
             @click="goToNext()"
         >
             <img class="md-ico-next"/>
         </button>
         <button
-            class="col md-btn page-btn last"
+            class="md-btn page-btn last"
             :disabled="effectivePage === numPages"
             @click="goToEnd()"
         >
             <img class="md-ico-last"/>
         </button>
-        <div class="col page-btn" style="min-width: 12em;">
+        <div class="page-btn md-input-number">
             <input type="number" min="1" :max="numPages" :value="effectivePage" @change="changePage" />
             <span>/ {{ numPages }}</span>
         </div>