From 9bfba30995543b2a8fc0cc6a05e659765bbf8b02 Mon Sep 17 00:00:00 2001 From: brunosimon Date: Sat, 9 Sep 2017 13:12:12 +0200 Subject: [PATCH] :sparkles: Site > Add info popin --- package.json | 2 +- site/src/components/application/script.js | 4 +- site/src/components/application/template.html | 3 + site/src/components/popin/index.vue | 3 + site/src/components/popin/script.js | 42 +++++++ site/src/components/popin/style.styl | 104 ++++++++++++++++++ site/src/components/popin/template.html | 40 +++++++ 7 files changed, 196 insertions(+), 2 deletions(-) create mode 100644 site/src/components/popin/index.vue create mode 100644 site/src/components/popin/script.js create mode 100644 site/src/components/popin/style.styl create mode 100644 site/src/components/popin/template.html diff --git a/package.json b/package.json index 8d58e30..5358a65 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ }, "main": "bin/index.js", "scripts": { - "demo-folder": "cd test/demo-folder && node ../../bin 'Demo folder' --open false --initial-send true", + "demo-folder": "cd test/demo-folder && node ../../bin 'Demo folder' --open false --test true --initial-send true", "site-dev": "node site/build/dev-server.js", "site-build": "node site/build/build.js", "dev": "npm-run-all --parallel demo-folder site-dev" diff --git a/site/src/components/application/script.js b/site/src/components/application/script.js index 12bfdf4..4d1e153 100644 --- a/site/src/components/application/script.js +++ b/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: diff --git a/site/src/components/application/template.html b/site/src/components/application/template.html index 973cba8..c8eb72e 100644 --- a/site/src/components/application/template.html +++ b/site/src/components/application/template.html @@ -14,6 +14,9 @@ + + + diff --git a/site/src/components/popin/index.vue b/site/src/components/popin/index.vue new file mode 100644 index 0000000..246515d --- /dev/null +++ b/site/src/components/popin/index.vue @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/site/src/components/popin/script.js b/site/src/components/popin/script.js new file mode 100644 index 0000000..ba1432d --- /dev/null +++ b/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 + } + } +} \ No newline at end of file diff --git a/site/src/components/popin/style.styl b/site/src/components/popin/style.styl new file mode 100644 index 0000000..23148bf --- /dev/null +++ b/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 diff --git a/site/src/components/popin/template.html b/site/src/components/popin/template.html new file mode 100644 index 0000000..355e1d4 --- /dev/null +++ b/site/src/components/popin/template.html @@ -0,0 +1,40 @@ +
+ + + i + + +
+
+
+ + + + + + + + +

Keppler {{ version }}

+

Real time code sharing for you lectures and presentations.

+ + +

Development

+ + +

UX / UI

+
    +
  • Tom Bonnike
    • +
  • Thibaud Vaubourg
    • +
  • Aymeric Sans
    • +
  • Axel Chalon
    • +
+
+
+ +
\ No newline at end of file