WWDCScholars
diff --git a/‎.github/release_sentry.sh
+13-1 b/‎.github/release_sentry.sh
+13-1
diff --git a/‎CHANGELOG.md
+217 b/‎CHANGELOG.md
+217
diff --git a/‎README.md
+8-11 b/‎README.md
+8-11
diff --git a/‎app/router.scrollBehavior.js
+32 b/‎app/router.scrollBehavior.js
+32
diff --git a/‎assets/images/team-members.jpg
15.4 KB b/‎assets/images/team-members.jpg
15.4 KB
diff --git a/‎assets/images/team-scholars.jpg
20.3 KB b/‎assets/images/team-scholars.jpg
20.3 KB
diff --git a/‎assets/sass/app/_container.sass
+7-6 b/‎assets/sass/app/_container.sass
+7-6
diff --git a/‎assets/sass/app/_nuxt-progress.sass
+3 b/‎assets/sass/app/_nuxt-progress.sass
+3
diff --git a/‎assets/sass/app/_typography.sass
+13-3 b/‎assets/sass/app/_typography.sass
+13-3
diff --git a/‎assets/sass/imports/_vars.sass
+4 b/‎assets/sass/imports/_vars.sass
+4
diff --git a/‎components/BaseButton.vue
+92-4 b/‎components/BaseButton.vue
+92-4
diff --git a/‎components/BaseForm.vue
+9-3 b/‎components/BaseForm.vue
+9-3
@@ -1,5 +1,8 @@
 #!/bin/sh
 
+# Load environment variables
+export $(egrep -v '^#' .env | xargs)
+
 # Add node_modules/.bin to PATH
 PATH=$PATH:node_modules/.bin
 
@@ -13,7 +16,16 @@ URL=https://www.wwdcscholars.com
 # Get version (current tag)
 VERSION=app@`git describe --tags`
 
+if [ "$NODE_ENV" = "production" ]; then
+  BASE_URL="$PROD_BASE_URL"
+elif [ "$NODE_ENV" = "staging" ]; then
+  BASE_URL="$STAGE_BASE_URL"
+else
+  echo "Neither production nor staging environment, skipping sentry release."
+  exit 1
+fi
+
 # Create new version in sentry
 sentry-cli releases -o $ORG -p $PRJ new --finalize $VERSION
 sentry-cli releases -o $ORG -p $PRJ set-commits --auto $VERSION
-sentry-cli releases -o $ORG -p $PRJ files $VERSION upload-sourcemaps --no-rewrite --url-prefix $URL ./dist
+sentry-cli releases -o $ORG -p $PRJ files $VERSION upload-sourcemaps --no-rewrite --url-prefix "https://$BASE_URL" ./dist
@@ -6,18 +6,20 @@ WWDCScholars is a community of [Apple WWDC Scholarship](https://developer.apple.
 This repository contains the [Vue.js](https://vuejs.org) based website that lists current and previous scholarship winners from all around the world.
 
 ## Getting Started
-WWDCScholars is based on [Apple's BaaS, CloudKit](https://developer.apple.com/icloud/cloudkit/). To use this project you need to obtain credentials for [CloudKit](https://developer.apple.com/library/content/documentation/DataManagement/Conceptual/CloudKitQuickStart/Introduction/Introduction.html#//apple_ref/doc/uid/TP40014987), the [Google Maps API](https://developers.google.com/maps/) and the [Sentry Error Tracking Service](https://sentry.io/).
+WWDCScholars is based on [Apple's BaaS, CloudKit](https://developer.apple.com/icloud/cloudkit/). To use this project you need to obtain credentials for [CloudKit](https://developer.apple.com/library/content/documentation/DataManagement/Conceptual/CloudKitQuickStart/Introduction/Introduction.html#//apple_ref/doc/uid/TP40014987), the [Apple MapKit JS API](https://developer.apple.com/documentation/mapkitjs/) and the [Sentry Error Tracking Service](https://sentry.io/).
 
 #### Create a `.env` file at the root of this project that looks like this:
 ```
-CLOUDKIT_CONTAINER_IDENTIFIER="<CloudKit Container Identifier>"
-CLOUDKIT_API_TOKEN="<CloudKit API Token>"
-CLOUDKIT_ENVIRONMENT="<CloudKit Environment>"
+DEV_CLOUDKIT_CONTAINER_IDENTIFIER="<CloudKit Container Identifier>"
+DEV_CLOUDKIT_API_TOKEN="<CloudKit API Token>"
+DEV_CLOUDKIT_ENVIRONMENT="<CloudKit Environment>"
 
-GOOGLE_MAPS_API_KEY="<Google Maps API Key>"
+DEV_MAPKIT_JWT="<MapKit JS JWT>"
 
 SENTRY_DSN="<Sentry DSN>"
-SENTRY_ENVIRONMENT="<Sentry Environment>"
+DEV_SENTRY_ENVIRONMENT="<Sentry Environment>"
+
+DEV_PLAUSIBLE_DOMAIN="" # no analytics for dev environment
 
 WWDC_YEAR="<The WWDCYear key to use>"
 ```
@@ -33,13 +35,8 @@ $ npm install
   $ npm dev
   ```
 - In production mode for static hosting
-  ```
-  $ npm generate
-  ```
-- In production mode with server-side rendering support
   ```
   $ npm build
-  $ npm start
   ```
 When building for production you can find the results in `dist/`.
 
 
@@ -0,0 +1,32 @@
+export default function(to, from, savedPosition) {
+  // if the returned position is falsy or an empty object,
+  // will retain current scroll position.
+
+  if (savedPosition) {
+    return savedPosition
+  }
+
+  // switching between different submissions
+  if (from.name === 's-id-year' && to.name === 's-id-year') {
+    return null
+  }
+
+  return new Promise((resolve) => {
+    // wait for the out transition to complete (if necessary)
+    this.app.$root.$once('triggerScroll', () => {
+      // if the resolved position is falsy or an empty object,
+      // will retain current scroll position.
+
+      // keep position when going back to scholars list
+      if (from.name === 's-id-year' && to.name === 'index') {
+        if (from.params?.id) {
+          resolve({ selector: `#${from.params.id}` })
+        }
+
+        resolve(null)
+      }
+
+      resolve({ x: 0, y: 0 })
+    })
+  })
+}
@@ -9,25 +9,26 @@
 @mixin container-fixed()
   margin-left: auto
   margin-right: auto
-  padding-left: 15px
-  padding-right: 15px
+  padding-left: 30px
+  padding-right: 30px
   +clearfix
 
   +for-tablet-landscape-up
     padding-left: 50px
     padding-right: 50px
 
+  +for-phone-only
+    padding-left: 0
+    padding-right: 0
+
 .container
   +container-fixed
 
-.container-outer
-
-
 .container-fluid
   +container-fixed
 
   +for-desktop-up
-    max-width: 1150px
+    max-width: $container-max-width
 
   > .section
     margin-top: 40px
 
@@ -1,2 +1,5 @@
 .nuxt-progress
   top: $header-height - 2px !important
+
+  +for-phone-only
+    top: $header-height-mobile - 2px !important
@@ -3,17 +3,30 @@ h2
   text-align: center
   font-weight: 600
 
+  +for-phone-only
+    font-size: 28px
+
 h3
   font-size: 28px
   font-weight: 600
 
+  +for-phone-only
+    font-size: 20px
+
 h4
   font-size: 20px
   font-weight: 400
 
+  +for-phone-only
+    font-size: 12px
+
 h2, h3, h4
   margin: 0
 
+  +for-phone-only
+    padding-left: 15px
+    padding-right: 15px
+
 p
   font-size: 18px
   font-weight: 400
@@ -22,6 +35,3 @@ hr
   background-color: $sch-gray2
   height: 1.5px
   border: 0
-
-  +for-tablet-landscape-up
-    margin: 50px -35px
 
@@ -27,4 +27,8 @@ $border-radius-large: $border-radius * 4 !default
 
 //== Header & Footer
 $header-height: 80px !default
+$header-height-mobile: 58px !default
 $footer-height: 17px !default
+
+//== Container
+$container-max-width: 1150px !default
@@ -1,24 +1,49 @@
 <template lang="pug">
 .btn
   slot(v-if="hasNobtnSlot", name="nobtn")
-  button(v-else)
+  button(
+    v-else,
+    :disabled="disabled",
+    @click="onClick"
+  )
     slot
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'nuxt-property-decorator'
+import { Component, Prop, Vue } from 'nuxt-property-decorator'
 
 @Component
 export default class BaseButton extends Vue {
+  @Prop({ type: Boolean, default: false })
+  disabled!: boolean
+
+  @Prop({ type: String, default: undefined })
+  confirm?: string
+
   get hasNobtnSlot(): boolean {
     return !!this.$slots.nobtn
   }
+
+  onClick() {
+    if (!this.confirm) {
+      this.$emit('click')
+      return
+    }
+
+    if (confirm(this.confirm)) {
+      this.$emit('click')
+    } else {
+      // not confirmed, do nothing
+    }
+  }
 }
 </script>
 
 <style lang="sass" scoped>
 .btn
-  > button, a
+  position: relative
+
+  button, a
     display: block
     padding: 12px 15px
     min-width: 160px
@@ -32,6 +57,9 @@ export default class BaseButton extends Vue {
     text-decoration: none
     transition: background-color 100ms linear, border-color 100ms linear, color 100ms linear
 
+    +for-phone-only
+      min-width: 100px
+
     &:hover
       background-color: darken($background-gray, 6%)
 
@@ -44,12 +72,68 @@ export default class BaseButton extends Vue {
       background-color: $background-gray
       color: $white
 
+  .btn-confirm
+    position: absolute
+    max-width: 360px
+    bottom: calc(100% + 4px)
+    padding: 8px
+    background-color: $white
+    border: 1px solid $sch-gray3
+    border-radius: $border-radius
+    opacity: 1
+    transition: opacity 100ms linear
+    +shadow
+
+    &.hidden
+      opacity: 0
+
+    .text
+      font-size: 0.8em
+      overflow-wrap: break-word
+      white-space: pre-line
+
+    .btn-confirm-actions
+      display: flex
+      justify-content: flex-end
+      margin-top: 8px
+
+      button
+        margin-left: 8px
+        font-size: 0.8em
+        padding: 3px 8px
+        min-width: auto
+
+        &.btn-cancel
+          background-color: $sch-gray0
+          border-color: lighten($sch-gray0, 5%)
+
+    .triangle
+      position: absolute
+      bottom: -20px
+      left: 70px
+      width: 20px
+      height: 20px
+      overflow: hidden
+
+      &:after
+        content: ''
+        position: absolute
+        display: block
+        width: 10px
+        height: 12px
+        background-color: $white
+        transform: rotate(45deg)
+        top: -6px
+        left: 5px
+        border-bottom-right-radius: 2px
+        +shadow
+
 +form-colors
   $bg: dyn-temp('bg')
   $fg: dyn-temp('fg')
 
   .btn
-    > button, a
+    button, a
       background-color: $bg
       border-color: $bg
       color: $fg
@@ -58,6 +142,10 @@ export default class BaseButton extends Vue {
         background-color: darken($bg, 10%)
         border-color: darken($bg, 10%)
 
+      &:disabled
+        background-color: $sch-gray2
+        border-color: $sch-gray1
+
     &.btn-round > button, a
       background-color: $fg
       color: $bg
 
@@ -14,7 +14,7 @@ export default class BaseForm extends Vue {}
 .form
   width: 100%
   display: grid
-  gird-template-columns: 1fr 1fr
+  grid-template-columns: 1fr 1fr
   grid-gap: 0 15px
 
   .group
@@ -28,6 +28,9 @@ export default class BaseForm extends Vue {}
     &.group-width-50
       grid-column: span 1
 
+      +for-phone-only
+        grid-column: span 2
+
     h3, .field, p
       grid-column: span 2
 
@@ -40,14 +43,17 @@ export default class BaseForm extends Vue {}
       font-size: 1em
       font-weight: 400
 
+      +for-phone-only
+        padding-left: 0
+        padding-right: 0
+
     .field
       &.field-width-50
         grid-column: span 1
 
   /deep/ .btn-cta
-    grid-column: 2
+    grid-column: span 2
     justify-self: end
-    white-space: nowrap
     width: auto
 </style>