Skip to content
Snippets Groups Projects
Select Git revision
  • d8e7981003da2232dad3054cc28b2d73caf47dfb
  • dev default
  • 61-feature-add-optional-backwards-mapping-for-consistency-with-older-version
  • 61-feature-add-optional-backwards-mapping-for-consistency-with-older-version-2
  • main protected
  • 11-test-fix-tests-to-handle-licensed-data-resources-from-trud-snd-omop
  • general
  • pypi
  • old-main
  • v0.0.3
10 results

phen.py

Blame
  • Start.vue 1.65 KiB
    <template>
      <header class="header">
        <h1 class="long">nodenogg<span class="highlight">.in</span></h1>
        <h2>a messy mapping tool for multiplayer thinking</h2>
      </header>
      <nav class="nav">
        <a role="button" class="letsplay" href="#" @click="letsPlay"
          >let's play !</a
        >
        <a role="button" class="tellmemore" href="#" @click="tellMore"
          >tell me more</a
        >
      </nav>
    
      <main v-if="isStart" ref="start">
        <JoinMicrocosm />
      </main>
    
      <aside v-if="isStart == false" ref="moreinfo">
        <TellmeMore />
      </aside>
    </template>
    
    <script>
    // @ is an alias to /src
    import JoinMicrocosm from '@/components/JoinMicrocosm.vue'
    import TellmeMore from '@/components/TellmeMore.vue'
    
    export default {
      name: 'Start',
      components: {
        JoinMicrocosm,
        TellmeMore,
      },
      data() {
        return {
          isStart: null,
        }
      },
    
      methods: {
        letsPlay() {
          this.isStart = true
          setTimeout(() => {
            const el = this.$refs.start
            if (el) {
              el.scrollIntoView({ behavior: 'smooth' })
            }
          }, 100)
        },
        tellMore() {
          this.isStart = false
          setTimeout(() => {
            const el = this.$refs.moreinfo
            if (el) {
              el.scrollIntoView({ behavior: 'smooth' })
            }
          }, 100)
        },
      },
    }
    </script>
    
    <style scoped>
    aside {
      max-width: 800px;
    }
    a {
      display: block;
      font-size: 1em;
      color: black;
      text-decoration-line: none;
      margin: 1em 0.8em;
      padding: 1em 1.2em;
    }
    
    .tellmemore {
      background-color: rgba(196, 47, 152, 0.4);
    }
    
    .letsplay {
      background-color: rgba(37, 194, 194, 0.4);
    }
    
    @media only screen and (min-width: 330px) {
      a {
        display: inline-block;
      }
    }
    </style>