✨ Site > Add info popin

site/src/components/application/script.js

@@ -2,6 +2,7 @@ import Connexion from '@/components/connexion'
 import ProjectsHub from '@/components/projects-hub'
 import Project from '@/components/project'
 import Favicon from '@/components/favicon'
+import Popin from '@/components/popin'
 
 export default
 {
@@ -12,7 +13,8 @@ export default
         Connexion,
         ProjectsHub,
         Project,
-        Favicon
+        Favicon,
+        Popin
     },
 
     computed:

site/src/components/application/template.html

@@ -14,6 +14,9 @@
         <img class="element title" src="../../../static/svg/keppler-title.svg" alt="">
     </a>
 
+    <!-- Popin -->
+    <popin></popin>
+
     <!-- Projects -->
     <projects-hub></projects-hub>
 

site/src/components/popin/index.vue

@@ -0,0 +1,3 @@
+<template src="./template.html"></template>
+<script src="./script.js"></script>
+<style src="./style.styl" lang="stylus" scoped></style>

site/src/components/popin/script.js

@@ -0,0 +1,42 @@
+const packageJson = require('../../../../package.json')
+
+export default
+{
+    name: 'popin',
+
+    data()
+    {
+        return {
+            active: false,
+            version: packageJson.version
+        }
+    },
+
+    methods:
+    {
+        onTriggerClick()
+        {
+            this.open()
+        },
+
+        onMaskClick()
+        {
+            this.close()
+        },
+
+        onCloseClick()
+        {
+            this.close()
+        },
+
+        open()
+        {
+            this.active = true
+        },
+
+        close()
+        {
+            this.active = false
+        }
+    }
+}

site/src/components/popin/style.styl

@@ -0,0 +1,104 @@
+.trigger
+    position absolute
+    top 17px
+    left 253px
+    width 18px
+    height 18px
+    font-size 14px
+    border 1px solid rgba(255, 255, 255, 0.5)
+    font-family 'DINNextRoundedLTPro'
+    text-align center
+    line-height 20px
+    color #fff
+    border-radius 10px
+
+    &:hover
+        border-color #4bd1c5
+
+.content
+    display flex
+    align-items center
+    justify-content center
+    flex-direction column
+    position absolute
+    top 0
+    right 0
+    bottom 0
+    left 0
+    z-index 3
+    pointer-events none
+    opacity 0
+    transition opacity 0.3s
+    will-change opacity
+
+    .mask
+        position absolute
+        top 0
+        right 0
+        bottom 0
+        left 0
+        opacity 0.85
+        background #000
+
+    .inner
+        position relative
+        width 400px
+        padding-top 0px
+        padding-right 30px
+        padding-bottom 26px
+        padding-left 30px
+        font-size 14px
+        line-height 1.2em
+        background #2d2d49
+        color #fff
+
+        .close
+            position absolute
+            top 10px
+            right 10px
+            width 40px
+            height 40px
+            padding-top 14px
+            padding-left 13px
+
+            .icon
+                &.default
+                    display block
+
+                &.hover
+                    display none
+
+            &:hover
+                .icon
+                    &.default
+                        display none
+
+                    &.hover
+                        display block
+
+        p
+            margin-bottom 1em
+
+            &.title
+                font-weight bold
+                margin-top 2em
+
+                .version
+                    font-weight normal
+                    opacity 0.6
+
+        a
+            text-decoration underline
+
+            &:hover
+                color #4bd1c5
+
+        ul
+            padding-left 22px
+
+            li
+                list-style-type disc
+
+    &.active
+        pointer-events initial
+        opacity 1

site/src/components/popin/template.html

@@ -0,0 +1,40 @@
+<div class="popin">
+
+    <!-- Trigger -->
+    <a href="#" class="trigger" @click.prevent="onTriggerClick">i</a>
+
+    <!-- Content -->
+    <div class="content" :class="[active ? 'active' : '']">
+        <div class="mask" @click.prevent="onMaskClick"></div>
+        <div class="inner">
+
+            <!-- Close -->
+            <a href="#" class="close" @click.prevent="onCloseClick">
+                <img class="icon default" src="../../../static/svg/cross.svg" alt="">
+                <img class="icon hover" src="../../../static/svg/cross-hover.svg" alt="">
+            </a>
+
+            <!-- Texts -->
+            <p class="title">Keppler <span class="version">{{ version }}</span></p>
+            <p>Real time code sharing for you lectures and presentations.</p>
+            <ul>
+                <li><a href="https://github.com/brunosimon/keppler" target="_blank">GitHub</a></li>
+                <li><a href="https://www.npmjs.com/package/keppler" target="_blank">NPM</a></li>
+            </ul>
+
+            <p class="title">Development</p>
+            <ul>
+                <li>Bruno Simon (<a href="https://github.com/brunosimon" target="_blank">GitHub</a>, <a href="https://twitter.com/bruno_simon/" target="_blank">Twitter</a>, <a href="https://bruno-simon.com" target="_blank">Site</a>)</li>
+            </ul>
+
+            <p class="title">UX / UI</p>
+            <ul>
+                <li>Tom Bonnike</li>
+                <li>Thibaud Vaubourg</li>
+                <li>Aymeric Sans</li>
+                <li>Axel Chalon</li>
+            </ul>
+        </div>
+    </div>
+
+</div>