Added minimum window size, equivalent to iTunes. Added responsive elements

resources/cider-ui-tests/index.html

@@ -53,7 +53,7 @@
                     </div>
                 </div>
                 <div class="app-chrome--right">
-                    <div class="app-chrome-item volume">
+                    <div class="app-chrome-item volume display--large">
                         <input type="range" class="">
                     </div>
                     <div class="app-chrome-item generic">
@@ -112,6 +112,7 @@
                         <button class="app-sidebar-item" v-for="i in 32">Playist</button>
                     </div>
                     <div class="app-sidebar-footer">
+                        <input type="range" class="display--small">
                         <button class="app-sidebar-button" style="width:100%">
                             <div class="sidebar-user-icon">
 

resources/cider-ui-tests/style.css

@@ -552,6 +552,19 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     display:flex;
 }
 
+.display--small {
+    display: none!important;
+}
+/* Window is smaller <= 1023px width */
+@media only screen and (max-width: 1023px) {
+    .display--small {
+        display: inherit!important;
+    }
+    .display--large {
+        display: none!important;
+    }
+}
+
 .header-text {
     margin: 0px;
 }

resources/functions/cider-win.js

@@ -7,6 +7,8 @@ const CiderWin = {
         const options = {
             width: 1024,
             height: 600,
+            minWidth: 844,
+            minHeight: 410,
             frame: false,
             vibrancy: 'dark',
             hasShadow: false,