Make website responsive

shoma-mano · Jul 17, 2021 · c7c5e49 · c7c5e49
1 parent 5bfb43c
commit c7c5e49
Show file tree

Hide file tree

Showing 5 changed files with 146 additions and 61 deletions.
diff --git a/client/src/index.html b/client/src/index.html
@@ -4,13 +4,14 @@
 <head>
   <title>LOFI</title>
   <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 </head>
 
 <body>
   <div id="header">LOFI</div>
   <div id="center">
-    <div id="player-panel" class="panel">
-      <div id="now-playing">        
+    <div id="player-panel">
+      <div id="now-playing" class="panel">
         <div id="cover">
           <div id="vinyl" class="paused" style="opacity: 0.5">
             <svg id="vinyl-center" viewBox="0 0 52 52">
@@ -71,7 +72,7 @@
           </div>
         </div>
       </template>
-      <div id="playlist">        
+      <div id="playlist" class="panel">
         <div id="playlist-header" class="header">
           <div id="playlist-header-text" class="header-text">NOW PLAYING</div>
           <button id="export-button" class="plain" title="Share this playlist"></button>
@@ -101,15 +102,14 @@
       </div>
     </div>
   </div>
+  <div id="footer">
+    <span><a href="https://github.com/jacbz/Lofi" target="_blank" id="github">GitHub</a></span>
+  </div>
 
   <!-- Dummy audio for Media Session API -->
   <audio id="audio" src="silence.mp3" loop></audio>
   <!-- Preload icons not immediately visible -->
-  <div id="preload-images"></div>
+  <div id="preload-images" style="position: absolute"></div>
 </body>
 
-<footer>
-  <span><a href="https://github.com/jacbz/Lofi" target="_blank" id="github">GitHub</a></span>
-</footer>
-
 </html>
diff --git a/client/src/index.ts b/client/src/index.ts
@@ -364,6 +364,14 @@ volumeBar.addEventListener('input', () => {
 });
 formatInputRange(volumeBar, '#fff');
 
+// If on mobile, move repeat and shuffle buttons
+if (/Mobi/.test(navigator.userAgent)) {
+  console.log("wo")
+  const buttons = document.getElementById('buttons');
+  buttons.insertBefore(repeatButton, playPreviousButton);
+  buttons.appendChild(shuffleButton);
+}
+
 // Export
 const exportButton = document.getElementById('export-button');
 const exportPanel = document.getElementById('export-panel');

diff --git a/client/src/player.ts b/client/src/player.ts
@@ -369,13 +369,7 @@ class Player {
   getExportUrl() {
     const json = JSON.stringify(this.playlist.map((t) => t.outputParams));
     const compressed = compress(json);
-    return `${window.location.origin}${window.location.pathname}?${compressed}`.replace(
-      'home.in.tum.de/~zhangja/lofi',
-      'lofi.jacobzhang.de'
-    ).replace(
-      'localhost:8080',
-      'lofi.jacobzhang.de'
-    );
+    return `${window.location.origin}${window.location.pathname}?${compressed}`;
   }
 
   /** Set up Media Session API metadata */

diff --git a/client/src/style.scss b/client/src/style.scss
@@ -12,38 +12,41 @@ $height: 426px;
   color: white;
 }
 
+html {
+  height: 100%;
+}
+
 body {
   background: url('background.jpg'), black;
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-position: center center;
   background-size: cover;
   margin: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  height: 100%;
 }
 
 #header {
   font-family: $title-font;
   font-size: 800%;
   user-select: none;
-  position: absolute;
-  width: 100%;
-  text-align: center;
+  margin-bottom: -40px;
 }
 
+$panel-border-radius: 6px;
 .panel {
   background: $ui-background;
-  border-radius: 6px;
+  border-radius: $panel-border-radius;
 }
 
 #center {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -42%);
   display: flex;
   flex-direction: row;
   gap: 12px;
-  margin-top: 22px;
 }
 
 .header {
@@ -144,13 +147,16 @@ body {
   display: flex;
   flex-direction: row;
   width: 650px;
+  background: none;
 
   #now-playing {
     flex: 1;
     display: flex;
     flex-direction: column;
     gap: 2px;
     border-right: 1px solid $ui-background;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
 
     @keyframes rotation {
       from {
@@ -253,26 +259,6 @@ body {
         display: flex;
         gap: 6px;
 
-        #repeat-button {
-          background-image: url('icons/repeat.svg');
-
-          &.repeat-all {
-            background-image: url('icons/repeat-all.svg');
-          }
-
-          &.repeat-one {
-            background-image: url('icons/repeat-one.svg');
-          }
-        }
-
-        #shuffle-button {
-          background-image: url('icons/shuffle.svg');
-
-          &.active {
-            background-image: url('icons/shuffle-active.svg');
-          }
-        }
-
         #volume-panel {
           display: flex;
           align-items: center;
@@ -335,13 +321,35 @@ body {
           }
         }
       }
+    }    
+
+    #repeat-button {
+      background-image: url('icons/repeat.svg');
+
+      &.repeat-all {
+        background-image: url('icons/repeat-all.svg');
+      }
+
+      &.repeat-one {
+        background-image: url('icons/repeat-one.svg');
+      }
+    }
+
+    #shuffle-button {
+      background-image: url('icons/shuffle.svg');
+
+      &.active {
+        background-image: url('icons/shuffle-active.svg');
+      }
     }
   }
 
   #playlist {
     flex: 1.4;
     display: flex;
     flex-direction: column;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
 
     #playlist-header {
       #export-button {
@@ -454,13 +462,16 @@ body {
         }
       }
 
-      .track-actions {
-        visibility: hidden;
-        opacity: 0;
+      .track-actions {        
         transition: visibility 0.2s, opacity 0.2s;
         display: flex;
         gap: 8px;
 
+        @media (hover: hover) {
+          visibility: hidden;
+          opacity: 0;
+        }
+
         .delete-button {
           background-image: url('icons/delete.svg');
         }
@@ -495,14 +506,8 @@ body {
   }
 }
 
-footer {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  margin: auto;
+#footer {
   margin-bottom: 8px;
-  text-align: center;
 
   #github {
     &:before {
@@ -522,6 +527,7 @@ button {
   display: block;
   cursor: pointer;
   background-color: transparent;
+  -webkit-tap-highlight-color: transparent;
 
   &:focus {
     outline: none;
@@ -534,7 +540,13 @@ button.flat {
   transition: background-color 0.25s, color 0.25s;
   padding: 5px;
 
-  &:hover:enabled {
+  @media (hover: hover) {
+    &:hover:enabled {
+      background-color: white;
+      color: black;
+    }
+  }
+  &:active {
     background-color: white;
     color: black;
   }
@@ -549,7 +561,12 @@ button.plain {
   border: 0;
   border-radius: 50%;
 
-  &:hover {
+  @media (hover: hover) {
+    &:hover:enabled {
+      background-color: $ui-hover-background;
+    }
+  }
+  &:active {
     background-color: $ui-hover-background;
   }
 }
@@ -564,7 +581,12 @@ button.circle {
   background-repeat: no-repeat;
   background-size: 20px;
 
-  &:hover {
+  @media (hover: hover) {
+    &:hover:enabled {
+      background-color: $ui-hover-background;
+    }
+  }
+  &:active {
     background-color: $ui-hover-background;
   }
 }
@@ -626,11 +648,14 @@ input[type='range'] {
 
 #volume-bar {
   width: 60px;
-  visibility: hidden;
-  opacity: 0;
   transition: visibility 0.2s, opacity 0.2s;
   height: 4px;
 
+  @media (hover: hover) {
+    visibility: hidden;
+    opacity: 0;
+  }
+
   @mixin slider-track {
     height: 4px;
   }
@@ -717,3 +742,60 @@ input[type='range'] {
   background: url('icons/repeat-all.svg'), url('icons/repeat-one.svg'),
     url('icons/shuffle-active.svg'), url('icons/volume-muted.svg'), url('icons/play.svg');
 }
+
+// responsive
+$responsive-min-width: 315px;
+$responsive-max-width: 400px;
+@media screen and (max-width: 1000px) {
+  body {
+    gap: 48px;
+  }
+
+  #center {
+    flex-direction: column;
+    align-items: center;
+    gap: 36px;
+  }
+
+  #player-panel {
+    flex-direction: column;
+    width: 80vw;
+    min-width: $responsive-min-width;
+    max-width: $responsive-max-width;
+    gap: 12px;
+
+    #volume-bar {
+      width: 120px;
+    }
+
+    #now-playing {
+      border: none !important;
+      border-bottom: 1px solid $ui-background;
+      margin-bottom: 24px;
+
+      border-top-right-radius: $panel-border-radius !important;
+      border-bottom-right-radius: $panel-border-radius !important;
+
+      button.plain {
+        height: 36px;
+        width: 36px;
+        background-size: 18px;
+      }
+    }
+
+    #playlist {  
+      border-top-left-radius: $panel-border-radius !important;
+      border-bottom-left-radius: $panel-border-radius !important;
+    }
+  }
+
+  #slider-panel {
+    width: 80vw;
+    min-width: $responsive-min-width;
+    max-width: $responsive-max-width;
+  }
+
+  #footer {
+    padding-bottom: 12px;
+  }
+}
diff --git a/server/README.md b/server/README.md
@@ -2,6 +2,7 @@
 
 This is a simple [Flask](https://palletsprojects.com/p/flask/) server which offers two API endpoints:
 
-* `/generate`: This endpoint takes no input and delivers a lo-fi track sampled from the latent distribution.
-* `/decode`: This endpoints takes a number array as parameter `input`. The number array must have the same dimension as the latent space. The server delivers a lo-fi track by running the input through the decoder.
+* `/decode`: This endpoints takes a number array as parameter `input`. The number array must have the same dimension as the latent space. The server delivers a lo-fi track by running the input through the Lofi2Lofi decoder.
+* `/predict`: This endpoint takes a string as parameter `input` and delivers a lo-fi track by running the input through Lyrics2Lofi.
 
+You need to save the two checkpoints in `checkpoints/lofi2lofi_decoder.pth` and `checkpoints/lyrics2lofi.pth` respectively.