integrate with new ui

app/templates/expireInfo/index.js

@@ -1,12 +1,13 @@
 const html = require('choo/html');
 const raw = require('choo/html/raw');
 const selectbox = require('../selectbox');
+const timeLimitText = require('../timeLimitText');
 
 module.exports = function(state) {
   const el = html`<div> ${raw(
     state.translate('frontPageExpireInfo', {
       downloadCount: '<select id=dlCount></select>',
-      timespan: state.translate('timespanHours', { num: 24 }) //'<select id=timespan></select>'
+      timespan: '<select id=timespan></select>'
     })
   )}
   </div>`;
@@ -24,13 +25,18 @@ module.exports = function(state) {
     dlCountSelect
   );
 
-  /*
   const timeSelect = el.querySelector('#timespan');
   el.replaceChild(
-    selectbox(1, [1, 2, 3, 4, 5], num => num, () => {}),
+    selectbox(
+      state.timeLimit || 86400,
+      [300, 3600, 86400, 604800, 1209600],
+      num => timeLimitText(state.translate, num),
+      value => {
+        state.timeLimit = value;
+      }
+    ),
     timeSelect
   );
-  */
 
   return el;
 };

app/templates/file/index.js

@@ -51,6 +51,14 @@ module.exports = function(file, state) {
 function timeLeft(milliseconds, state) {
   const minutes = Math.floor(milliseconds / 1000 / 60);
   const hours = Math.floor(minutes / 60);
+  const days = Math.floor(hours / 24);
+  if (days >= 1) {
+    return state.translate('expiresDaysHoursMinutes', {
+      days,
+      hours: hours % 24,
+      minutes: minutes % 60
+    });
+  }
   if (hours >= 1) {
     return state.translate('expiresHoursMinutes', {
       hours,

app/templates/fileIcon/fileIcon.css

@@ -8,6 +8,7 @@
   width: 22px;
   height: 32px;
   overflow: hidden;
+  user-select: none;
 }
 
 .fileIcon__lock {

app/templates/signupPromo/signupPromo.css

@@ -56,7 +56,7 @@
   text-decoration: underline;
 }
 
-@media (max-device-width: 750px), (max-width: 750px) {
+@media (max-device-width: 700px), (max-width: 700px) {
   .signupPromo {
     flex-direction: row;
     align-items: center;

app/templates/timeLimitText/index.js

@@ -0,0 +1,14 @@
+module.exports = function(translate, seconds) {
+  const displayText = {
+    300: translate('timespanMinutes', { num: 5 }),
+    3600: translate('timespanHours', { num: 1 }),
+    86400: translate('timespanHours', { num: 24 }),
+    604800: translate('timespanWeeks', { num: 1 }),
+    1209600: translate('timespanWeeks', { num: 2 })
+  };
+
+  if (displayText[seconds]) {
+    return displayText[seconds];
+  }
+  return seconds;
+};

app/templates/uploadedFileList/uploadedFileList.css

@@ -7,4 +7,5 @@
   align-content: center;
   flex: 1;
   overflow-y: scroll;
+  overflow-x: hidden;
 }