secretin · agix · Jan 15, 2020 · Dec 20, 2019 · Dec 20, 2019 · Jan 15, 2020
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,4 @@
+{
+  "trailingComma": "es5",
+  "singleQuote": true
+}
diff --git a/package.json b/package.json
@@ -14,7 +14,7 @@
     "eslint-plugin-import": "^2.7.0",
     "eslint-plugin-prettier": "^2.1.2",
     "gh-pages": "^1.0.0",
-    "node-sass": "^4.5.3",
+    "node-sass": "^4.13.0",
     "prettier": "^1.5.3",
     "raw-loader": "^0.5.1",
     "react-scripts": "1.0.10"
@@ -45,8 +45,8 @@
     "deploy": "scripts/deploy.sh",
     "start": "yarn run build-css && yarn run watch-css & NODE_PATH=./src react-scripts start",
     "build": "yarn run build-css && NODE_PATH=./src node_modules/.bin/react-scripts build",
-    "build-css": "node-sass src/stylesheets/application.sass src/index.css",
-    "watch-css": "node-sass src/stylesheets/application.sass src/index.css -w",
+    "build-css": "node_modules/.bin/node-sass src/stylesheets/application.sass src/index.css",
+    "watch-css": "node_modules/.bin/node-sass src/stylesheets/application.sass src/index.css -w",
     "electron": "yarn run build && node_modules/.bin/electron-packager ./ --platform=all --arch=x64 --asar --overwrite --ignore=scripts --ignore=.gitignore --ignore=yarn.lock --ignore=.travis.yml --ignore=.*.zip --ignore=public --ignore=.nvmrc --ignore=.eslintrc.js --ignore=node_modules --ignore=src",
     "dev-electron": "yarn run build && electron .",
     "lint": "node_modules/.bin/eslint src/",

diff --git a/public/index.html b/public/index.html
@@ -1,11 +1,14 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8">
-    <meta name="theme-color" content="#3498db">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta charset="utf-8" />
+    <meta name="theme-color" content="#3498db" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, user-scalable=no"
+    />
     <!-- <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <title>Secret-in</title>
   </head>
   <body style="background-color: #fafafa">

diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js
@@ -70,6 +70,7 @@ function Sidebar() {
             {currentUser.username}
           </SidebarMenuLink>
           <div className="sidebar-separator" />
+
           <SidebarMenuLink to="/secrets/all/">
             <Icon id="apps" size="base" />
             All

diff --git a/src/components/import/ImportContainer.js b/src/components/import/ImportContainer.js
@@ -104,9 +104,7 @@ class ImportContainer extends Component {
                 <Spinner />
                 {this.props.importTotal !== 0 && (
                   <div className="import-progress-title">
-                    {`Importing... ${this.props.importStatus} / ${
-                      this.props.importTotal
-                    }`}
+                    {`Importing... ${this.props.importStatus} / ${this.props.importTotal}`}
                   </div>
                 )}
               </div>

diff --git a/src/components/options/QRCodeShow.js b/src/components/options/QRCodeShow.js
@@ -84,9 +84,7 @@ class QRCodeShow extends Component {
             <div className="totp-form-qrcode">
               <QRCode
                 className="totp-form-qrcode"
-                value={`otpauth://totp/Secret-in.me?secret=${
-                  this.state.seed.b32
-                }`}
+                value={`otpauth://totp/Secret-in.me?secret=${this.state.seed.b32}`}
                 size={256}
               />
             </div>

diff --git a/src/components/secrets/SecretField.js b/src/components/secrets/SecretField.js
@@ -87,17 +87,16 @@ class SecretField extends Component {
           actions={new Immutable.List(actions)}
         />
         <div className="secret-field-action">
-          {this.props.field.type === 'password' &&
-            this.props.canUpdate && (
-              <Button
-                title="Generate password"
-                buttonStyle="icon"
-                onClick={this.onGenerate}
-                tabIndex="-1"
-              >
-                <Icon id="generate" size="small" />
-              </Button>
-            )}
+          {this.props.field.type === 'password' && this.props.canUpdate && (
+            <Button
+              title="Generate password"
+              buttonStyle="icon"
+              onClick={this.onGenerate}
+              tabIndex="-1"
+            >
+              <Icon id="generate" size="small" />
+            </Button>
+          )}
         </div>
       </div>
     );

diff --git a/src/stores/ShowSecretUIStore.js b/src/stores/ShowSecretUIStore.js
@@ -109,16 +109,14 @@ class ShowSecretUIStore {
     this.waitFor(MetadataStore);
     this.setState(
       this.state
-        .update(
-          'secret',
-          secret =>
-            secret
-              ? secret.merge(
-                  MetadataStore.getById(this.state.secret.id)
-                    .toMap()
-                    .remove('data')
-                )
-              : null
+        .update('secret', secret =>
+          secret
+            ? secret.merge(
+                MetadataStore.getById(this.state.secret.id)
+                  .toMap()
+                  .remove('data')
+              )
+            : null
         )
         .set('isUpdating', false)
         .set('errors', new Immutable.Map())

diff --git a/src/stylesheets/_common.sass b/src/stylesheets/_common.sass
@@ -1,3 +1,6 @@
+ /* Under this width, we start removing bits of the UI*/
+$width-small: 500px
+
 *
   -webkit-font-smoothing: antialiased
   box-sizing: border-box
@@ -24,6 +27,8 @@ body,
   padding: 20px
   flex-direction: column
   align-items: stretch
+  @media screen and (max-width: $width-small)
+    padding: 5px
 
 h1, h2, h3, h4, h5, h6
   margin: 0

diff --git a/src/stylesheets/components/Layout.sass b/src/stylesheets/components/Layout.sass
@@ -1,5 +1,6 @@
+
 .layout
-  min-width: 800px
+  min-width: 300px
   flex: 1 1 100%
   display: flex
   flex-direction: row

diff --git a/src/stylesheets/components/Sidebar.sass b/src/stylesheets/components/Sidebar.sass
@@ -1,7 +1,7 @@
 .sidebar
   position: relative
-  flex: 0 0 240px
-  width: 240px
+  flex: 0 0 30vw
+  min-width: 90px
   &:after
     content: ''
     position: absolute
@@ -19,29 +19,43 @@
   height: 50px
   color: rgba($color-brand, .4)
   border-bottom: 1px solid rgba($color-brand, .05)
-  a
-    color: inherit
-    text-decoration: inherit
+  @media screen and (max-width: $width-small)
+    font-size: 12px
+    margin: 0 5px
+    height: 30px
+
+a
+  color: inherit
+  text-decoration: inherit
 
 .sidebar-menu
   list-style: none
   margin: 20px
   padding: 0
+  @media screen and (max-width: $width-small)
+    margin: 5px
 
 .sidebar-menu-item
   margin: 0
   padding: 0
 
+.sidebar-menu-item--home
+  @media screen and (max-width: $width-small)
+    display: none
+
 .sidebar-menu-link
   display: flex
   flex-direction: row
   align-items: center
-  height: 44px
+  min-height: 44px
   font-size: 15px
   color: inherit
   padding: 0 12px 0 8px
   margin: 0 0 2px
   border-radius: 3px
+  @media screen and (max-width: $width-small)
+    font-size: 12px
+    padding: 0 4px 0 2px
 
 .sidebar-menu-link:hover
   background-color: rgba($color-brand, .1)

diff --git a/src/stylesheets/components/secrets/SecretListItem.sass b/src/stylesheets/components/secrets/SecretListItem.sass
@@ -1,5 +1,6 @@
+
 .secret-list-item
-  height: 50px
+  min-height: 50px
   background-color: transparent
 
 .secret-list-item:hover
@@ -10,6 +11,8 @@
     padding: 0 0 0 10px
     border-bottom: 1px solid rgba($color-brand, .05)
     vertical-align: middle
+    @media screen and (max-width: $width-small)
+      padding: 0 0 0 2px
 
 .secret-list-content-table--is-dragging
   .secret-list-item
@@ -50,9 +53,13 @@
 
 .secret-list-item-column--last-modified
   width: 200px
+  @media screen and (max-width: $width-small)
+    display: none
 
 .secret-list-item-column--shared-with
   width: 80px
+  @media screen and (max-width: $width-small)
+    display: none
 
 .secret-list-item-column--actions
   width: 36px

diff --git a/src/stylesheets/components/utilities/Breadcrumb.sass b/src/stylesheets/components/utilities/Breadcrumb.sass
@@ -5,6 +5,8 @@
   align-items: center
   height: 24px
   font-size: 18px
+  @media screen and (max-width: $width-small)
+    font-size: 1rem
 
 .breadcrumb-item-separator
   display: block

diff --git a/src/stylesheets/components/utilities/Button.sass b/src/stylesheets/components/utilities/Button.sass
@@ -20,6 +20,9 @@
   font-size: 11px
   padding: 0 16px 1px
   border-radius: 3px
+  @media screen and (max-width: $width-small)
+    height: 44px
+    padding: 5px 16px
 
 .dropdown button,
 .button--size-base

diff --git a/src/stylesheets/components/utilities/Input.sass b/src/stylesheets/components/utilities/Input.sass
@@ -30,7 +30,7 @@
 
   &.input--size-small input,
   &.input--size-small select
-    height: 28px
+    height: 25px
     font-size: 12px
     padding: 0 8px
     border-radius: 2px

diff --git a/src/stylesheets/components/utilities/Modal.sass b/src/stylesheets/components/utilities/Modal.sass
@@ -23,7 +23,8 @@
 .modal-dialog
   position: relative
   background-color: #FFF
-  width: 480px
+  max-width: 480px
+  width: 100%
   border-radius: 3px
 
 .modal-dialog:focus

diff --git a/src/stylesheets/components/utilities/Page.sass b/src/stylesheets/components/utilities/Page.sass
@@ -13,6 +13,10 @@
   margin: 0 20px 0px
   height: 50px
   border-bottom: 1px solid rgba($color-brand, .05)
+  @media screen and (max-width: $width-small)
+    flex: 0 0 30px
+    height: 30px
+    margin: 0 5px 0px
 
   .secret-list-refresh
     margin-right: 10px
@@ -28,6 +32,9 @@
   overflow: auto
   margin-top: 20px
   padding: 0 0px 20px 20px
+  @media screen and (max-width: $width-small)
+    padding: 0 5px
+    margin-top: 5px
 
 .page-content-actions
   display: inherit