Merge branch 'dev' into post-export

Author: callumflack

package.json

@@ -11,8 +11,10 @@
     "test:unit": "vue-cli-service test:unit"
   },
   "dependencies": {
+    "@vue/eslint-config-airbnb": "^4.0.1",
     "core-js": "^2.6.5",
-    "portal-vue": "2.1.6",
+    "eslint-config-airbnb-base": "^14.0.0",
+    "portal-vue": "^2.1.6",
     "postcss-import": "12.0.1",
     "prosemirror-example-setup": "1.0.1",
     "prosemirror-model": "1.7.2",
@@ -33,13 +35,12 @@
     "@vue/cli-plugin-eslint": "^3.11.0",
     "@vue/cli-plugin-unit-jest": "^3.11.0",
     "@vue/cli-service": "^3.11.0",
-    "@vue/eslint-config-airbnb": "^4.0.0",
     "@vue/test-utils": "1.0.0-beta.29",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "^10.0.1",
     "babel-jest": "^23.6.0",
-    "eslint": "^5.16.0",
-    "eslint-plugin-vue": "^5.0.0",
+    "eslint": "^6.5.1",
+    "eslint-plugin-vue": "^5.2.3",
     "lint-staged": "^8.1.5",
     "vue-template-compiler": "^2.6.10"
   },

src/App.vue

@@ -1,14 +1,10 @@
 <template>
   <div id="app">
-    <!-- <nav id="nav" class="container max-w-3xl Block-md-t Block-sm-b">
-      <router-link to="/" class="font-title">Corvid Writing</router-link>
-    </nav> -->
     <NavBar></NavBar>
     <vue-page-transition :name="transitionName">
       <router-view />
     </vue-page-transition>
-
-    <portal-target name="modals" multiple />
+    <portal-target name="modals" multiple></portal-target>
   </div>
 </template>
 

src/assets/css/layout/layout-block.css

@@ -5,6 +5,20 @@
 
 */
 
+:root {
+  --block-size-ratio: theme(responsiveScale.blockXs);
+}
+@screen sm {
+  :root {
+    --block-size-ratio: theme(responsiveScale.blockSm);
+  }
+}
+@screen lg {
+  :root {
+    --block-size-ratio: theme(responsiveScale.blockMd);
+  }
+}
+
 /* LG */
 
 .Block {
@@ -52,19 +66,3 @@
   margin-top: calc(theme(spacing.12) * var(--block-size-ratio));
 }
 
-
-/* SCALE */
-
-:root {
-  --block-size-ratio: theme(responsiveScale.blockXs);
-}
-@screen sm {
-  :root {
-    --block-size-ratio: theme(responsiveScale.blockSm);
-  }
-}
-@screen lg {
-  :root {
-    --block-size-ratio: theme(responsiveScale.blockMd);
-  }
-}

src/assets/css/typography/typography-spacing.css

@@ -27,18 +27,18 @@
 */
 
 .s-block-p:not(:last-child) {
-  margin-bottom: calc(theme(spacing.5) * var(--space-ratio));
+  margin-bottom: calc(theme(spacing.3) * var(--space-ratio));
 }
 
 .s-p {
-  margin-bottom: calc(theme(spacing.6) * var(--space-ratio));
+  margin-bottom: calc(theme(spacing.3) * var(--space-ratio));
 }
 .st-p {
-  margin-top: calc(theme(spacing.6) * var(--space-ratio));
+  margin-top: calc(theme(spacing.3) * var(--space-ratio));
 }
 .sy-p {
-  margin-top: calc(theme(spacing.6) * var(--space-ratio));
-  margin-bottom: calc(theme(spacing.6) * var(--space-ratio));
+  margin-top: calc(theme(spacing.3) * var(--space-ratio));
+  margin-bottom: calc(theme(spacing.3) * var(--space-ratio));
 }
 
 /*
@@ -49,14 +49,14 @@
 
 .s-block-h:not(:last-child),
 .s-h {
-  margin-bottom: calc(theme(spacing.4) * var(--space-ratio));
+  margin-bottom: calc(theme(spacing.6) * var(--space-ratio));
 }
 .st-h {
-  margin-top: calc(theme(spacing.4) * var(--space-ratio));
+  margin-top: calc(theme(spacing.6) * var(--space-ratio));
 }
 .sy-h {
-  margin-top: calc(theme(spacing.4) * var(--space-ratio));
-  margin-bottom: calc(theme(spacing.4) * var(--space-ratio));
+  margin-top: calc(theme(spacing.6) * var(--space-ratio));
+  margin-bottom: calc(theme(spacing.6) * var(--space-ratio));
 }
 
 .s-2xh {

src/assets/css/typography/typography-text.css

@@ -43,6 +43,11 @@ body,
   font-size: calc(theme(fontSize.xl) * var(--text-ratio));
 }
 
+ol {
+  list-style-type: decimal;
+  padding-left: calc(theme(spacing.6) * var(--text-ratio));
+}
+
 /*
 
   Color schema

src/assets/fonts/SFMono-Bold.otf

@@ -160,7 +160,7 @@ export default {
 
 <style lang="postcss">
 .Placeholder {
-  @apply font-title text-brand-primary pl-6;
+  @apply font-title text-brand-primary pl-6 mt-1;
   @apply absolute;
   margin-left: 3px;
 }

src/assets/fonts/SFMono-BoldItalic.otf

@@ -0,0 +1,55 @@
+<template>
+  <div class="container max-w-3xl Block">
+    <div class="px-6 pt-2">
+      <h1
+        class="Text-lg font-title font-bold text-brand-primary s-p"
+      >{{ thisTitle }}</h1>
+      <p class="s-p">{{ thisOne }}</p>
+      <!-- <p class="s-p">{{ thisTwo }}</p> -->
+      <p class="s-p">{{ thisThree }}</p>
+      <h1
+        class="Text-lg font-title font-bold text-brand-primary s-p st-2xh"
+      >{{ howTitle }}</h1>
+      <ol>
+        <li class="s-p">{{ howOne }}</li>
+        <li class="s-p">{{ howTwo }}</li>
+        <li class="s-2xh">{{ howThree }}</li>
+      </ol>
+      <p class="Text-xs text-gray-mid">{{ version }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+// import Modal from '@/components/Modal.vue';
+
+export default {
+  components: {},
+  props: [],
+  data() {
+    return {
+      thisTitle: 'What is this?',
+      thisOne:
+          "Corvid Reply helps you reply to your project collaborators by choosing only what's most important in the conversation. It removes the superfluous and helps avoid important info falling through the cracks.",
+      thisTwo:
+          'It removes the superfluous and helps avoid important info falling through the cracks.',
+      thisThree:
+          "We also give you custom formatted responses to paste into for your favourite project mangement apps. So it's clear who said what.",
+      howTitle: 'How does it work?',
+      howOne: 'Click on the line you wish to reply to.',
+      howTwo:
+          'Select multiple sentences by holding `command` while you click.',
+      howThree:
+          'Choose to export to Gmail, Slack or Basecamp.',
+      version: 'Version 0.0.1 2019-10-01',
+    };
+  },
+};
+</script>
+
+<style lang="postcss" scoped>
+  .Block {
+    margin-top: calc(theme(spacing.40) * var(--block-size-ratio));
+    margin-bottom: calc(theme(spacing.24) * var(--block-size-ratio));
+  }
+</style>

src/assets/fonts/SFMono-Heavy.otf

@@ -1,21 +1,17 @@
 <template>
   <transition name="Modal">
-    <div class="Modal-backdrop z-100" v-show="show" @click="dismiss">
-      <div class="Modal" @click="stopPropagation">
-        <slot />
+    <div v-show="show" class="Modal-backdrop">
+      <div class="Modal">
+        <slot></slot>
       </div>
     </div>
   </transition>
 </template>
 
 <script>
-// import IconBase from "@/components/IconBase";
-// import IconUIClose from "@/components/icons/IconUIClose";
-
 /* https://learn.adamwathan.com/advanced-vue/encapsulating-external-behavior-background-scrolling */
 
 export default {
-  components: {},
   props: {
     show: { required: true },
     preventBackgroundScrolling: { default: true },
@@ -28,8 +24,10 @@ export default {
         if (this.preventBackgroundScrolling) {
           if (show) {
             document.body.style.setProperty('overflow', 'hidden');
+            document.body.classList.add('modal-is-active');
           } else {
             document.body.style.removeProperty('overflow');
+            document.body.classList.remove('modal-is-active');
           }
         }
       },
@@ -47,84 +45,49 @@ export default {
     });
   },
   methods: {
-    stopPropagation(event) {
-      event.stopPropagation();
+    closeVideo() {
+      // eslint-disable-next-line
+        const video = document.getElementsByTag("video");
+      this.video.pause();
+      this.video.currentTime = 0;
     },
     dismiss() {
       this.$emit('close');
-      document.body.style.removeProperty('overflow');
     },
   },
 };
 </script>
 
-<style scoped>
-.Modal-backdrop {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  overflow: auto;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: auto;
-}
-
-@keyframes headerIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
+<style lang="postcss" scoped>
+  .Modal-backdrop {
+    @apply fixed inset-0 overflow-auto;
+    background-color: rgba(255, 255, 255, 0.96);
+    z-index: 99; /* below vue-headroom */
   }
-}
 
-.Modal {
-  @apply py-5 px-7;
-  animation: headerIn 750ms cubic-bezier(0.19, 1, 0.22, 1);
-  background-color: #fff;
-
-  @media (max-width: 768px) and (orientation: landscape) {
-    height: auto;
+  .Modal {
+    /* @apply h-full; */
+    /* @apply bg-white; */
   }
-}
-
-.Modal-close {
-  cursor: pointer;
-  padding: calc(1.75 * var(--rs-space));
-  position: absolute;
-  right: 0;
-  top: 0;
-  z-index: 1;
 
-  &:focus,
-  &:active {
-    outline: none;
+  .Modal-close {
+    @apply absolute inset-0 p-4 z-10 cursor-pointer;
   }
 
-  & >>> svg {
-    height: 2.5em;
-    width: 2.5em;
-
-    @media (--sm) {
-      height: 3em;
-      width: 3em;
-    }
+  .Modal-close:focus,
+  .Modal-close:active {
+    @apply outline-none;
   }
-}
-
-/*
- * Transitions auto-applied to elements with
- * transition="modal" when their visibility is toggled by Vue.
- */
 
-.Modal-enter-active, .Modal-leave-active {
-  transition: opacity .2s;
-}
+  /* Transition */
+  .Modal-enter-active,
+  .Modal-leave-active {
+    transition: opacity 500ms cubic-bezier(0.19, 1, 0.22, 1);
+  }
 
-.Modal-enter, .Modal-leave-to /* .Modal-leave-active below version 2.1.8 */ {
-  opacity: 0;
-}
+  .Modal-enter,
+  .Modal-leave-to {
+    @apply opacity-0;
+    /* transform: scale(1.05); */
+  }
 </style>