From bc8a2c4b769b5dd8b866a16d48a2d4f5b7afd2b9 Mon Sep 17 00:00:00 2001 From: evajacobs Date: Tue, 25 Jul 2017 13:29:41 +0200 Subject: [PATCH 1/7] css + html + js improvements --- index.html | 5 - src/App.vue | 28 +- src/assets/svg/arrow-grey.svg | 1 + src/assets/svg/arrow.svg | 1 + src/assets/svg/background.svg | 1 + src/assets/svg/logo.svg | 26 + src/components/app-badge.vue | 2 +- src/components/app-form.vue | 129 ++--- src/components/app-nav.vue | 51 ++ src/css/app-badge.css | 26 +- src/css/app-form.css | 210 ++++---- src/css/app-nav.css | 77 +++ src/css/app.css | 88 +++- src/js/app-form.js | 918 +++++++++++++++++----------------- src/js/app-nav.js | 0 src/js/app.js | 19 +- src/js/store.js | 20 + 17 files changed, 900 insertions(+), 702 deletions(-) create mode 100644 src/assets/svg/arrow-grey.svg create mode 100644 src/assets/svg/arrow.svg create mode 100644 src/assets/svg/background.svg create mode 100644 src/assets/svg/logo.svg create mode 100644 src/components/app-nav.vue create mode 100644 src/css/app-nav.css create mode 100644 src/js/app-nav.js create mode 100644 src/js/store.js diff --git a/index.html b/index.html index 517f5fc..f19ab4b 100644 --- a/index.html +++ b/index.html @@ -3,11 +3,6 @@ skillid -
diff --git a/src/App.vue b/src/App.vue index 812b6d0..7ae07ee 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,10 +1,26 @@ + + diff --git a/src/assets/svg/arrow-grey.svg b/src/assets/svg/arrow-grey.svg new file mode 100644 index 0000000..82fb150 --- /dev/null +++ b/src/assets/svg/arrow-grey.svg @@ -0,0 +1 @@ +arrow-grey \ No newline at end of file diff --git a/src/assets/svg/arrow.svg b/src/assets/svg/arrow.svg new file mode 100644 index 0000000..925bb8e --- /dev/null +++ b/src/assets/svg/arrow.svg @@ -0,0 +1 @@ +arrow \ No newline at end of file diff --git a/src/assets/svg/background.svg b/src/assets/svg/background.svg new file mode 100644 index 0000000..76738ea --- /dev/null +++ b/src/assets/svg/background.svg @@ -0,0 +1 @@ +Artboard 52 \ No newline at end of file diff --git a/src/assets/svg/logo.svg b/src/assets/svg/logo.svg new file mode 100644 index 0000000..bc4481f --- /dev/null +++ b/src/assets/svg/logo.svg @@ -0,0 +1,26 @@ + + + Created with Sketch. + + + diff --git a/src/components/app-badge.vue b/src/components/app-badge.vue index 0f0eec3..1dfdcdd 100644 --- a/src/components/app-badge.vue +++ b/src/components/app-badge.vue @@ -50,7 +50,7 @@ diff --git a/src/components/app-nav.vue b/src/components/app-nav.vue new file mode 100644 index 0000000..0e46765 --- /dev/null +++ b/src/components/app-nav.vue @@ -0,0 +1,51 @@ + + + + diff --git a/src/css/app-badge.css b/src/css/app-badge.css index 24dd8f1..53c5af3 100644 --- a/src/css/app-badge.css +++ b/src/css/app-badge.css @@ -1,15 +1,25 @@ #app-badge-container { - font-family: 'Avenir', Helvetica, Arial, sans-serif; + font-family: 'Open Sans', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - text-align: center; - color: #2c3e50; - margin-top: 60px; - width: 40%; + text-align: right; + width: 30%; + background-color: rgba(143, 190, 100, .3); +} + +#app-badge-container h1 { + color: #6FA53D; + padding-right: 1rem; + font-weight: normal; } #svgFile { - width: 33rem; - height: 33rem; - margin-top: 10rem; + width: 46rem; + height: 46rem; + -ms-transform: rotate(-7deg); /* IE 9 */ + -webkit-transform: rotate(-7deg); /* Chrome, Safari, Opera */ + transform: rotate(-7deg); + margin-left: -5rem; + margin-top: 4rem; + margin-bottom: 4rem; } diff --git a/src/css/app-form.css b/src/css/app-form.css index dc9dfc9..27bd9f0 100644 --- a/src/css/app-form.css +++ b/src/css/app-form.css @@ -1,164 +1,134 @@ -#form { - font-family: 'Aller', Helvetica, Arial, sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - text-align: center; - color: #2c3e50; - margin-top: 60px; - width: 55%; +#app-form { + width: 70%; + font-family: 'Open Sans', Helvetica, Arial, sans-serif; + font-size: 12px; } -#app-form { - display: flex; - flex-direction: column; - margin-left:auto; - margin-right: auto; - text-align: left; +#app-form h2 { + color: #838DA5; + font-size: 18px; } -#app-form label { - margin-bottom: 1rem; - color: #0059de; - font-weight: bold; +#app-form .buttons { + text-align: right; + margin-top: 1rem; } -#app-form input, #app-form textarea { - margin-bottom: 3rem; - height: 5rem; - width: 50rem; - box-shadow: 2px 2px 5px rgba(195, 207, 223, 0.85); +#app-form .buttons .save-to-library { + background-color: transparent; border-style: none; - border-radius: 2px; - border: 1px solid white; + color: #838DA5; } -#app-form .description { - height: 17rem; +#app-form .buttons .save-and-award { + background-color: #41b7fe; + border-style: none; + padding: 1.5rem; + color: white; + border: 1px solid #41b7fe; + border-radius: 10px; + font-size: 14px; } -.meta-data-form-particle { - border-bottom: .2rem solid #f7f9fa; - display: flex; - margin-bottom: 4rem; - justify-content: space-between; - margin-right: 2rem; -} -.meta-data-form-particle h2 { - font-size: 1.6rem; - color: #c4c5c5; - text-transform: uppercase; - font-weight: bold; - align-self: center; +/* SEARCH CSS*/ + +#search { + margin-left: auto; + margin-right: auto; + width: 620px; + margin-top: 4rem; } -.meta-data-form-particle-input { - display: flex; - flex-direction: column; +#search .search-input { + height: 6rem; + width: 48rem; + border: 2px solid #dbdee4; + border-radius: 10px; + padding-left: 1.5rem; } -#app-form button { - margin-top: 1.5rem; - margin-bottom: 1.5rem; - box-shadow: 2px 2px 5px rgba(195, 207, 223, 0.85); - background-color: #0059de; - color: white; +#search .search-button { + background-color: #41b7fe; + color: #ffffff; + text-transform: uppercase; border-style: none; - height: 5rem; - width: 15rem; - font-size: 1.4rem; font-weight: bold; - text-transform: uppercase; - border-radius: 2px; - border: 1px solid #0059de; + width: 13.5rem; + height: 6rem; + border: 1px solid #41b7fe; + border-radius: 10px; } -.form-title { - padding-bottom: 5rem; +#search .seach-results { + padding-top: 4rem; } -#navigation { - margin-bottom: 10rem; - border-bottom: .2rem solid #f7f9fa; - font-weight: bold; -} - - -.nav-list { - display: flex; - justify-content: space-around; - list-style: none; +#search .seach-results .search-result { + padding: .3rem 0; + font-size: 1.2rem; } -.active { - border-bottom: .2rem solid #0059de; - padding-bottom: 3rem; - padding-right: 3rem; - padding-left: 3rem; +#search .seach-results .search-result a { + text-decoration: none; + text-transform: capitalize; + color: #a7aebf; } -.meta-data-content { - display: flex; - flex-direction: column; +#search .seach-results .search-result a:hover { + color: #41b7fe; } -.search-content { - display: flex; - flex-direction: column; -} -.personalize-content-labels { - display: flex; - justify-content: space-around; -} +/* COMPANY INPUT + RECEIVER INPUT*/ -.personalize-content-labels label { - width: 23%; - display: block; - box-shadow: 2px 2px 5px rgba(195, 207, 223, 0.85); - border-style: none; - border-radius: 2px; - border: 1px solid white; - text-align: center; - padding: 3rem 0 3rem; +#details-sender, #details-receiver { + margin-left: auto; + margin-right: auto; + width: 50%; + margin-top: 20%; } -#app-form .hiddenInput { - display: none; +#details-sender input, #details-receiver input { + height: 6rem; + border: 1px solid #dbdee4; + border-radius: 10px; + margin-bottom: 1rem; + padding-left: 1.5rem; } -.input-field { - display: flex; - flex-direction: column; - margin-top: 3rem; +#details-receiver textarea { + border: 1px solid #dbdee4; + border-radius: 10px; + margin-bottom: 1rem; + padding-left: 1.5rem; + padding-top: 1rem; } -.buttons { - display: flex; - justify-content: space-between; - padding-right: 3rem; +#details-sender label, #details-receiver label { + color: #454B5A; + padding-bottom: 2rem; + padding-top: 2rem; } -#app-form .back-button { - color: #c4c5c5; - background-color: transparent; - text-align: left; - border-style: none; - box-shadow: none; - cursor: pointer; -} +/* CUSTOMIZATION */ -.label-icon { - width: 50px; - height: 50px; - margin-top: 2rem; +#personalize { + margin-left: auto; + margin-right: auto; + width: 50%; + margin-top: 20%; } -.list a { - text-decoration: none; - color: black; +#personalize label { + color: #454B5A; + padding-bottom: 2rem; + padding-top: 2rem; } -.list .actifLink { - color: #0059de; +#personalize .logo-input { + height: 165px; + background-color: #F8FCFF; + border: 1.5px solid #ABB3C4; + border-radius: 10px; } diff --git a/src/css/app-nav.css b/src/css/app-nav.css new file mode 100644 index 0000000..edef927 --- /dev/null +++ b/src/css/app-nav.css @@ -0,0 +1,77 @@ +/* NAVIGATION */ + +.line { + height:60px; + width:100%; + margin:auto; + border:1px solid #c3c3c3; + position:relative; + justify-content: space-between; +} + +.btn { + justify-content: space-between; + height:100%; + width: 20%; + cursor:pointer; + position:relative; + background-color: #F5F6F6; +} + +.text { + display:inline-block; + height:100%; + padding:0 5px; + box-sizing:border-box; + line-height:21px; +} + +.arrow { + display:inline-block; + height:100%; + width:25px; + vertical-align:top; + overflow:hidden; + position:relative; +} + +.arrow:before, .arrow:after { + content:''; + position:absolute; + top:50%;right:0; + width:200%; + height:100%; + box-sizing:border-box; + border-right:1px solid #c3c3c3; + -ms-transform-origin:top right; + -ms-transform:rotate(35deg); + -webkit-transform-origin:top right; + -webkit-transform:rotateZ(35deg); + transform-origin:top right; + transform:rotateZ(35deg); +} + +.arrow:after { + top:auto;bottom:50%; + -ms-transform-origin:bottom right; + -ms-transform:rotate(325deg); + -webkit-transform-origin:bottom right; + -webkit-transform:rotateZ(325deg); + transform-origin:bottom right; + transform:rotateZ(325deg); +} + +#navigation .active-step .step, #navigation .active-step .step-number { + color: #5aa0ed; +} + +#navigation .nav-item .step-number { + text-transform: uppercase; + color: #D8D8D8; +} + +#navigation .nav-item .step { + color: #98a0a1; + font-weight: 600; + font-size: 16px; +} diff --git a/src/css/app.css b/src/css/app.css index a77e54a..be97a76 100644 --- a/src/css/app.css +++ b/src/css/app.css @@ -1,20 +1,78 @@ -#app { - font-family: 'Aller', Helvetica, Arial, sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - text-align: center; - color: #2c3e50; - margin-top: 60px; - font-size: 1.5rem; +/*GENREAL CSS*/ +@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800'); +body{ + width: 100%; + background: url(../assets/svg/background.svg); + background-size: 100%; + font-family: 'Open Sans', 'sans-serif'; } -h1, h2 { - font-size: 5rem; - font-family: 'Aller'; - font-weight: lighter; +.hide { + display:none; } -.content-container { - display: flex; - width: 100%; +.row{ + display: flex; +} +.column{ + display: flex; + flex-direction: column; +} + +.space-between { + justify-content: space-between; +} + +/* GENERAL TEXT CSS*/ + +h1{ + font-size: 30px; + color: #fff; + font-weight: 200; + padding-top: 7px; +} + + +/* GENERAL APP CSS*/ +#container{ + width: 80%; + margin-right: auto; + margin-left: auto; +} + +/* APP HEADER CSS*/ + +#container header{ + justify-content: center; + margin-top: 30px; +} + +#container header .logo{ + margin-right: auto; + margin-left: auto; +} + +#container header .up-left-info{ + margin-left: 30px; +} + +#container header .up-left-info a{ + color: #fff; + text-decoration: none; + font-weight: 600; + letter-spacing: 0.05rem; + font-size: 12px; +} + +#container header .up-left-info .fa-chevron-left{ + padding-right: 6px; +} + +/* APP MAIN CSS*/ + +#container main .content-container{ + margin: 12px auto; + position:absolute; + width: 80%; + background-color: #F9F9F9; } diff --git a/src/js/app-form.js b/src/js/app-form.js index e18f205..04c161d 100644 --- a/src/js/app-form.js +++ b/src/js/app-form.js @@ -1,506 +1,482 @@ - export default { name: 'app-form', - data() { + data() { return { formControlElements: { searchActive: true, - metaDataActive: false, - personalizeActive: false, - imageInputActive: true, - companyNameInput: true, - urlInput: true, - colorInput: true, - formHasErrors: false + issuerDetailsActive: false, + customizeActive: false, + receiverDetailsActive: false, + overviewActive: false, + imageInputActive: true, + companyNameInput: true, + urlInput: true, + colorInput: true, + formHasErrors: false + }, + formContentValues: { + websiteValue: "", + issuerNameValue: "", + receiverNameValue: "", + emailValue: "", + searchValue: "", + pickedSkill: "", + descriptionValue: "", + errors: "" }, - formContentElements:{ - titles : ["Search", "Metadata", "Personalize"], - currentTitle: "Search", - buttonText: ["next", "next", "generate"], - currentButtonText: "Next" - }, - formContentValues: { - websiteValue: "", - issuerNameValue: "", - receiverNameValue: "", - emailValue: "", - searchValue: "", - pickedSkill: "", - descriptionValue: "", - errors: "" - }, clicks: 0, searchResults: [], badge: {}, nameBadge: "round_language", firstHref: "", - count: 0, + count: 0, locale: "en" } }, + methods: { - isValidEmail: function(email) { - //https://stackoverflow.com/questions/46155/how-to-validate-email-address-in-javascript - let re = new RegExp("[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?"); - return re.test(email); - }, - isValidWebsite: function(website){ - //https://stackoverflow.com/questions/34488170/regular-expression-in-javascript-for-valid-domain-name - let re = new RegExp("^[a-zA-Z0-9][a-zA-Z0-9-]{0,61}[a-zA-Z0-9](?:\.[a-zA-Z]{2,})+$"); - console.log(website); - return re.test(website); - }, - validateEmail: function(el){ - if (!this.isValidEmail(this.formContentValues.emailValue)) { - el.srcElement.focus(); - this.setError(true, "This is not a valid e-mailaddress"); - } else { - this.setError(false, ""); - } + isValidEmail: function(email) { + //https://stackoverflow.com/questions/46155/how-to-validate-email-address-in-javascript + let re = new RegExp("[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?"); + return re.test(email); + }, + isValidWebsite: function(website){ + //https://stackoverflow.com/questions/34488170/regular-expression-in-javascript-for-valid-domain-name + let re = new RegExp("^[a-zA-Z0-9][a-zA-Z0-9-]{0,61}[a-zA-Z0-9](?:\.[a-zA-Z]{2,})+$"); + console.log(website); + return re.test(website); + }, + validateEmail: function(el){ + if (!this.isValidEmail(this.formContentValues.emailValue)) { + el.srcElement.focus(); + this.setError(true, "This is not a valid e-mailaddress"); + } else { + this.setError(false, ""); + } + }, + validateWebsite: function(el){ + if (!this.isValidWebsite(this.formContentValues.websiteValue)) { + this.setError(true, "This is not a valid website url"); + el.srcElement.focus(); + } else { + this.setError(false, ""); + } + }, + hasContent: function(el){ + if (! el.srcElement.value.trim() ){ + el.srcElement.focus(); + this.setError(true, "This field is mandatory"); + } else { + this.setError(false, ""); + } + }, + setError: function(hasError, errortext){ + this.formControlElements.formHasErrors = hasError; + this.formContentValues.errors = errortext; + }, + /** + * todo change isValidForm into a valid function + * @returns {boolean} + */ + isValidForm: function(){ + return true; }, - validateWebsite: function(el){ - if (!this.isValidWebsite(this.formContentValues.websiteValue)) { - this.setError(true, "This is not a valid website url"); - el.srcElement.focus(); - } else { - this.setError(false, ""); - } - }, - hasContent: function(el){ - if (! el.srcElement.value.trim() ){ - el.srcElement.focus(); - this.setError(true, "This field is mandatory"); - } else { - this.setError(false, ""); - } - }, - setError: function(hasError, errortext){ - this.formControlElements.formHasErrors = hasError; - this.formContentValues.errors = errortext; - }, - /** - * todo change isValidForm into a valid function - * @returns {boolean} - */ - isValidForm: function(){ - return true; - }, getCorrectTag: function(href, nameChange){ - function broadestConcept(href, changeName){ - fetch(href, { - method: "get" - }) - .then(r => r.json()) - .then(result => { - if(result){ - let res=result.title; - console.log(res); - if(res==="social interaction"){ - changeName("decagon_social"); - } - else if(res==="language"){ - changeName("decagon_language"); - } - else if(res==="thinking"){ - changeName("decagon_thinking"); - } - else if(res==="attitudes and values"){ - changeName("decagon_attitudes"); - } - else if(res==="application of knowledge"){ - changeName("decagon_applications"); - } - else if (result._links.broaderSkillGroup){ - broadestConcept(result._links.broaderSkillGroup[0].href, changeName); - } - else if (result._links.broaderSkill){ - broadestConcept(result._links.broaderSkill[0].href, changeName); - } - else if (result._links.broaderConcept){ - broadestConcept(result._links.broaderConcept[0].href, changeName); - } - else { - console.log(result._links.self.href); - changeName("round_language"); - } - } - }) - } - broadestConcept(href, nameChange); - }, + function broadestConcept(href, changeName){ + fetch(href, { + method: "get" + }) + .then(r => r.json()) + .then(result => { + if(result){ + let res=result.title; + console.log(res); + if(res==="social interaction"){ + changeName("decagon_social"); + } + else if(res==="language"){ + changeName("decagon_language"); + } + else if(res==="thinking"){ + changeName("decagon_thinking"); + } + else if(res==="attitudes and values"){ + changeName("decagon_attitudes"); + } + else if(res==="application of knowledge"){ + changeName("decagon_applications"); + } + else if (result._links.broaderSkillGroup){ + broadestConcept(result._links.broaderSkillGroup[0].href, changeName); + } + else if (result._links.broaderSkill){ + broadestConcept(result._links.broaderSkill[0].href, changeName); + } + else if (result._links.broaderConcept){ + broadestConcept(result._links.broaderConcept[0].href, changeName); + } + else { + console.log(result._links.self.href); + changeName("round_language"); + } + } + }) + } + broadestConcept(href, nameChange); + }, + + submitSearch: function (events) { + this.toggleSearchActive(); + this.toggleIssuerDetailsActive(); + }, + submit: function (events) { - if(this.clicks < 3) { - this.clicks += 1; - this.formContentElements.currentTitle = this.formContentElements.titles[this.clicks]; - this.formContentElements.currentButtonText = this.formContentElements.buttonText[this.clicks]; - switch (this.clicks){ - case 1: - if (this.formContentValues.searchValue.length>3){ - this.toggleSearchActive(); - this.toggleMetaDataActive(); + if(this.clicks < 3) { + this.clicks += 1; + switch (this.clicks){ + case 1: + if (this.formContentValues.searchValue.length>3){ + this.toggleSearchActive(); + this.toggleMetaDataActive(); - let href=this.firstHref; - this.getCorrectTag(href, function (x){ - this.nameBadge=x; + let href=this.firstHref; + this.getCorrectTag(href, function (x){ + this.nameBadge=x; + + document.getElementById("svgFile").style.visibility="visible"; + document.getElementById(this.nameBadge).style.visibility="visible"; + }.bind(this) + ); + // todo let startpoint have focus + // this.$refs.startpoint.focus(); + } + else{ + this.clicks-=1; + } + break; + case 2: + if(this.isValidForm()){ + this.toggleMetaDataActive(); + this.togglePersonalizeActive(); + } else { + this.clicks-=1; + } + break; + default: + this.clicks-=1; + console.log("generation call"); + this.generation().bind(this); + break; + } + } else { + console.log("error in next"); + } + + document.getElementById("text1").textContent = string1; + let resultStr= this.formContentValues.pickedSkill.split(" "); + let offset = resultStr.length % 3; + let string1 = ""; + let string2 = ""; + let string3 = ""; + if (offset===1){ + for (let i=0; i<(resultStr.length-offset)/3; i++){ + string1+=resultStr[i]+" "; + } + for (let i=0; i<((resultStr.length-offset)/3)+1; i++){ + string2+=resultStr[i+((resultStr.length-offset)/3)]+" "; + } + for (let i=0; i<(resultStr.length-offset)/3; i++){ + if (resultStr.length>3){ + string3+=resultStr[i+1+(2*(resultStr.length-offset)/3)]+" "; + } + } + } + else if(offset===2){ + for (let i=0; i<(1+((resultStr.length-offset)/3)); i++){ + string1+=resultStr[i]+" "; + } + for (let i=0; i<(1+((resultStr.length-offset)/3)); i++){ + string2+=resultStr[i+1+((resultStr.length-offset)/3)]+" "; + } + for (let i=0; i<((resultStr.length-offset)/3); i++){ + if (resultStr.length>3){ + string3+=resultStr[i+2+(2*(resultStr.length-offset)/3)]+" "; + } + } + } + else { + for (let i=0; i<(resultStr.length-offset)/3; i++){ + string1+=resultStr[i]+" "; + } + for (let i=0; i<((resultStr.length-offset)/3); i++){ + string2+=resultStr[i+((resultStr.length-offset)/3)]+" "; + } + for (let i=0; i<(resultStr.length-offset)/3; i++){ + string3+=resultStr[i+(2*(resultStr.length-offset)/3)]+" "; + } + } + document.getElementById("text2").textContent = string2; + document.getElementById("text3").textContent = string3; + }, + toggleSearchActive: function(){ + this.formControlElements.searchActive = !this.formControlElements.searchActive; + }, + toggleIssuerDetailsActive: function () { + this.formControlElements.issuerDetailsActive = !this.formControlElements.issuerDetailsActive; + }, + toggleCustomizeActive: function() { + this.formControlElements.customizeActive = !this.formControlElements.customizeActive; + }, - document.getElementById("svgFile").style.visibility="visible"; - document.getElementById(this.nameBadge).style.visibility="visible"; - }.bind(this) - ); - // todo let startpoint have focus - // this.$refs.startpoint.focus(); - } - else{ - this.clicks-=1; - } - break; - case 2: - if(this.isValidForm()){ - this.toggleMetaDataActive(); - this.togglePersonalizeActive(); - } else { - this.clicks-=1; - } - break; - default: - this.clicks-=1; - console.log("generation call"); - this.generation().bind(this); - break; - } - } else { - console.log("error in next"); - } + toggleReceiverDetailsActive: function() { + this.formControlElements.receiverDetailsActive = !this.formControlElements.receiverDetailsActive; + }, - document.getElementById("text1").textContent = string1; - let resultStr= this.formContentValues.pickedSkill.split(" "); - let offset = resultStr.length % 3; - let string1 = ""; - let string2 = ""; - let string3 = ""; - if (offset===1){ - for (let i=0; i<(resultStr.length-offset)/3; i++){ - string1+=resultStr[i]+" "; - } - for (let i=0; i<((resultStr.length-offset)/3)+1; i++){ - string2+=resultStr[i+((resultStr.length-offset)/3)]+" "; - } - for (let i=0; i<(resultStr.length-offset)/3; i++){ - if (resultStr.length>3){ - string3+=resultStr[i+1+(2*(resultStr.length-offset)/3)]+" "; - } - } - } - else if(offset===2){ - for (let i=0; i<(1+((resultStr.length-offset)/3)); i++){ - string1+=resultStr[i]+" "; - } - for (let i=0; i<(1+((resultStr.length-offset)/3)); i++){ - string2+=resultStr[i+1+((resultStr.length-offset)/3)]+" "; - } - for (let i=0; i<((resultStr.length-offset)/3); i++){ - if (resultStr.length>3){ - string3+=resultStr[i+2+(2*(resultStr.length-offset)/3)]+" "; - } - } - } - else { - for (let i=0; i<(resultStr.length-offset)/3; i++){ - string1+=resultStr[i]+" "; - } - for (let i=0; i<((resultStr.length-offset)/3); i++){ - string2+=resultStr[i+((resultStr.length-offset)/3)]+" "; - } - for (let i=0; i<(resultStr.length-offset)/3; i++){ - string3+=resultStr[i+(2*(resultStr.length-offset)/3)]+" "; - } - } - document.getElementById("text2").textContent = string2; - document.getElementById("text3").textContent = string3; - }, - back: function () { - if(this.clicks < 3 && this.clicks > 0) { - this.clicks -= 1; - this.formContentElements.currentTitle = this.formContentElements.titles[this.clicks]; - this.formContentElements.currentButtonText = this.formContentElements.buttonText[this.clicks]; - this.toggleMetaDataActive(); - switch (this.clicks){ - case 0: - this.toggleSearchActive(); - break; - case 1: - case 2: - this.togglePersonalizeActive(); - break - } - } - }, - toggleSearchActive: function(){ - this.formControlElements.searchActive = !this.formControlElements.searchActive; - }, - toggleMetaDataActive: function () { - this.formControlElements.metaDataActive = !this.formControlElements.metaDataActive; - }, - togglePersonalizeActive: function() { - this.formControlElements.personalizeActive = !this.formControlElements.personalizeActive; - }, - toggleImageInputActive: function () { - this.formControlElements.imageInputActif = !this.formControlElements.imageInputActif - }, - toggleCompanyNameInput: function () { - this.formControlElements.companyNameInput = !this.formControlElements.companyNameInput - }, - toggleUrlInput: function () { - this.formControlElements.urlInput = !this.formControlElements.urlInput - }, - toggleColorInput: function () { - this.formControlElements.colorInput = !this.formControlElements.colorInput; - }, + toggleOverviewActive: function() { + this.formControlElements.overviewActive = !this.formControlElements.overviewActive; + }, + toggleImageInputActive: function () { + this.formControlElements.imageInputActif = !this.formControlElements.imageInputActif + }, + toggleCompanyNameInput: function () { + this.formControlElements.companyNameInput = !this.formControlElements.companyNameInput + }, + toggleUrlInput: function () { + this.formControlElements.urlInput = !this.formControlElements.urlInput + }, + toggleColorInput: function () { + this.formControlElements.colorInput = !this.formControlElements.colorInput; + }, - changeStateInputField: function (input) { - switch (input){ - case 'imageInputActive': - this.toggleImageInputActive(); - break; - case 'companyNameInput': - this.toggleCompanyNameInput(); - break; - case 'urlInput': - this.toggleUrlInput(); - break; - default: - this.toggleColorInput(); - } - }, - generation: function (event){ - console.log("generation"); - function signingComplete(){ - let encoder = new TextEncoder('utf-8'); - function keyGeneration(resolve, reject){ - let algorithmKeyGen = { - name: "RSASSA-PKCS1-v1_5", - // RsaHashedKeyGenParams - modulusLength: 2048, - publicExponent: new Uint8Array([0x01, 0x00, 0x01]), // Equivalent to 65537 - hash: { - name: "SHA-256" - } - }; - window.crypto.subtle.generateKey(algorithmKeyGen, false, ["sign"]).then(function(newKey){ - console.log("created new key"); - resolve(newKey); - }) - } - let algorithmSign = { - name: "RSASSA-PKCS1-v1_5" - }; - function signing(dataToEncode){ - if(this.key== undefined){ - let promise = new Promise (keyGeneration); - promise.then( - function (key){ - let dataPart1 = encoder.encode(dataToEncode); - this.key=key; - return window.crypto.subtle.sign(algorithmSign, this.key.privateKey, dataPart1) - }.bind(this), - console.error.bind(console, "Unable to generate a key") - ); - } else { - let dataPart1 = encoder.encode(dataToEncode); - return window.crypto.subtle.sign(algorithmSign, this.key.privateKey, dataPart1); - } - } - console.log.bind(signing.call(this, "data")); - } - function uuidv4() { - //https://stackoverflow.com/questions/105034/create-guid-uuid-in-javascript - return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c => - (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)) - } + generation: function (event){ + console.log("generation"); + function signingComplete(){ + let encoder = new TextEncoder('utf-8'); + function keyGeneration(resolve, reject){ + let algorithmKeyGen = { + name: "RSASSA-PKCS1-v1_5", + // RsaHashedKeyGenParams + modulusLength: 2048, + publicExponent: new Uint8Array([0x01, 0x00, 0x01]), // Equivalent to 65537 + hash: { + name: "SHA-256" + } + }; + window.crypto.subtle.generateKey(algorithmKeyGen, false, ["sign"]).then(function(newKey){ + console.log("created new key"); + resolve(newKey); + }) + } + let algorithmSign = { + name: "RSASSA-PKCS1-v1_5" + }; + function signing(dataToEncode){ + if(this.key== undefined){ + let promise = new Promise (keyGeneration); + promise.then( + function (key){ + let dataPart1 = encoder.encode(dataToEncode); + this.key=key; + return window.crypto.subtle.sign(algorithmSign, this.key.privateKey, dataPart1) + }.bind(this), + console.error.bind(console, "Unable to generate a key") + ); + } else { + let dataPart1 = encoder.encode(dataToEncode); + return window.crypto.subtle.sign(algorithmSign, this.key.privateKey, dataPart1); + } + } + console.log.bind(signing.call(this, "data")); + } + function uuidv4() { + //https://stackoverflow.com/questions/105034/create-guid-uuid-in-javascript + return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c => + (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)) + } - //signingComplete.call(this); - let href= "http://esp-api-dev-0.10.0.cogni.zone/resource/skill?uri=http://data.europa.eu/esco/skill/3233330f-bb93-47ea-93b4-ed903d05d9f1&language=fr"; - let assertionVar = uuidv4(); - let d = new Date(); - let date = d.toISOString(); - let s = new XMLSerializer().serializeToString(document.getElementById("svgFile")) - let encodedData = window.btoa(unescape(encodeURIComponent(s))); - let imageURI = "data:image/svg+xml;base64,"+encodedData; + //signingComplete.call(this); + let href= "http://esp-api-dev-0.10.0.cogni.zone/resource/skill?uri=http://data.europa.eu/esco/skill/3233330f-bb93-47ea-93b4-ed903d05d9f1&language=fr"; + let assertionVar = uuidv4(); + let d = new Date(); + let date = d.toISOString(); + let s = new XMLSerializer().serializeToString(document.getElementById("svgFile")) + let encodedData = window.btoa(unescape(encodeURIComponent(s))); + let imageURI = "data:image/svg+xml;base64,"+encodedData; - function ab2str(buf) { - return String.fromCharCode.apply(null, new Uint16Array(buf)); - } + function ab2str(buf) { + return String.fromCharCode.apply(null, new Uint16Array(buf)); + } - function str2ab(str) { - //https://stackoverflow.com/questions/6965107/converting-between-strings-and-arraybuffers - let buf = new ArrayBuffer(str.length*2); // 2 bytes for each char - let bufView = new Uint16Array(buf); - for (let i=0, strLen=str.length; i r.json()) - .then(result => { - if(result){ - let referenceURI = (''+href.match("uri=.*?&")); - let descriptionSkill = result.description.en.literal; - let title = result.title; - this.badge = {id : assertionVar, - type : "Assertion", - recipient : { - type : "email", - identity : resHash - }, - issuedOn : date, - verification : { - type : "signed" - }, - badge: { - id : this.formContentValues.websiteValue + " " + title, - type : "BadgeClass", - name : title, - description : descriptionSkill+" ESCO database URI : "+referenceURI.substring(4, referenceURI.length-1), - image : imageURI, - criteria : { - narrative : this.formContentValues.descriptionValue - }, - issuer : { - id : this.formContentValues.websiteValue, - type : "Issuer", - name : this.formContentValues.websiteValue, - url : this.formContentValues.websiteValue, - email : this.formContentValues.websiteValue - } - } - }; - let fileSave = require('./FilaSaver.js'); - let data = "data:json;charset=utf-8,"; - let blob = new Blob([JSON.stringify(this.badge)], {type: data}); - fileSave.saveAs(blob, "badge.json"); - } - } - ); - }.bind(this)) - }, - setPickedValue: function (event) { - this.formContentValues.pickedSkill = event.currentTarget.innerHTML; - event.currentTarget.classList.toggle("actifLink"); - }, - onChangeSearch: function () { - document.getElementById("svgFile").style.visibility="hidden"; - document.getElementById(this.nameBadge).style.visibility="hidden"; - let list = document.querySelector('.list'); - while (list.firstChild) { - list.removeChild(list.firstChild); - } + let buf =str2ab(this.formContentValues.emailValue); + crypto.subtle.digest("SHA-256", buf).then(function(resultHash){ + let resHash=ab2str(resultHash); + fetch(href, { + method: "get" + }) + .then(r => r.json()) + .then(result => { + if(result){ + let referenceURI = (''+href.match("uri=.*?&")); + let descriptionSkill = result.description.en.literal; + let title = result.title; + this.badge = {id : assertionVar, + type : "Assertion", + recipient : { + type : "email", + identity : resHash + }, + issuedOn : date, + verification : { + type : "signed" + }, + badge: { + id : this.formContentValues.websiteValue + " " + title, + type : "BadgeClass", + name : title, + description : descriptionSkill+" ESCO database URI : "+referenceURI.substring(4, referenceURI.length-1), + image : imageURI, + criteria : { + narrative : this.formContentValues.descriptionValue + }, + issuer : { + id : this.formContentValues.websiteValue, + type : "Issuer", + name : this.formContentValues.websiteValue, + url : this.formContentValues.websiteValue, + email : this.formContentValues.websiteValue + } + } + }; + let fileSave = require('./FilaSaver.js'); + let data = "data:json;charset=utf-8,"; + let blob = new Blob([JSON.stringify(this.badge)], {type: data}); + fileSave.saveAs(blob, "badge.json"); + } + } + ); + }.bind(this)) + }, + setPickedValue: function (event) { + this.formContentValues.pickedSkill = event.currentTarget.innerHTML; + event.currentTarget.classList.toggle("actifLink"); + }, + onChangeSearch: function () { + document.getElementById("svgFile").style.visibility="hidden"; + document.getElementById(this.nameBadge).style.visibility="hidden"; + let list = document.querySelector('.list'); + while (list.firstChild) { + list.removeChild(list.firstChild); + } - let fetched = fetch(`http://esp-api-dev-0.10.0.cogni.zone/search?text=${this.formContentValues.searchValue}&language=`+this.locale+`&type=skill&facet=type&facet=isInScheme`, { - method: 'get' - }); + let fetched = fetch(`http://esp-api-dev-0.10.0.cogni.zone/search?text=${this.formContentValues.searchValue}&language=`+this.locale+`&type=skill&facet=type&facet=isInScheme`, { + method: 'get' + }); - let promis = fetched.then(r => r.json()); + let promis = fetched.then(r => r.json()); - let resultsObject = promis.then(result => { - if(result){ - this.count=0; - result._embedded.results.forEach(r => this.addNewElement(r)); - } - }); - }, - addNewElement: function (r) { - if (this.count===0){ - this.firstHref=r._links.self.href; - this.count++; - } - this.searchResults.push(r.title); - }, - handleImage: function () { - function getAverageColourAsRGB (img) { - //https://gist.github.com/olvado/1048628 - //some modification to be up to date and make the color less agressives. - let canvas = document.createElement('canvas'), - context = canvas.getContext("2d"), - rgb = {r:102,g:102,b:102}, // Set a base colour as a fallback for non-compliant browsers - pixelInterval = 5, // Rather than inspect every single pixel in the image inspect every 5th pixel - count = 0, - i = -4, - data, length; - // return the base colour for non-compliant browsers - if (!context) { return rgb; } - // set the height and width of the canvas element to that of the image - let height = canvas.height = img.naturalHeight || img.offsetHeight || img.height, - width = canvas.width = img.naturalWidth || img.offsetWidth || img.width; - context.drawImage(img, 0, 0); + let resultsObject = promis.then(result => { + if(result){ + this.count=0; + result._embedded.results.forEach(r => this.addNewElement(r)); + } + }); + }, + addNewElement: function (r) { + if (this.count===0){ + this.firstHref=r._links.self.href; + this.count++; + } + this.searchResults.push(r.title); + }, + handleImage: function () { + function getAverageColourAsRGB (img) { + //https://gist.github.com/olvado/1048628 + //some modification to be up to date and make the color less agressives. + let canvas = document.createElement('canvas'), + context = canvas.getContext("2d"), + rgb = {r:102,g:102,b:102}, // Set a base colour as a fallback for non-compliant browsers + pixelInterval = 5, // Rather than inspect every single pixel in the image inspect every 5th pixel + count = 0, + i = -4, + data, length; + // return the base colour for non-compliant browsers + if (!context) { return rgb; } + // set the height and width of the canvas element to that of the image + let height = canvas.height = img.naturalHeight || img.offsetHeight || img.height, + width = canvas.width = img.naturalWidth || img.offsetWidth || img.width; + context.drawImage(img, 0, 0); - try { - data = context.getImageData(0, 0, width, height); - } catch(e) { - // catch errors - usually due to cross domain security issues - alert(e); - return rgb; - } + try { + data = context.getImageData(0, 0, width, height); + } catch(e) { + // catch errors - usually due to cross domain security issues + alert(e); + return rgb; + } - data = data.data; - length = data.length; - while ((i += pixelInterval * 4) < length) { - count++; - rgb.r += data[i]; - rgb.g += data[i+1]; - rgb.b += data[i+2]; - } + data = data.data; + length = data.length; + while ((i += pixelInterval * 4) < length) { + count++; + rgb.r += data[i]; + rgb.g += data[i+1]; + rgb.b += data[i+2]; + } - // floor the average values to give correct rgb values (ie: round number values) - rgb.r = rgb.r/count; - rgb.g = rgb.g/count; - rgb.b = rgb.b/count; - let res = (rgb.r+rgb.g+rgb.b - 127*3)/6; - rgb.r=Math.floor(rgb.r-res); - rgb.b=Math.floor(rgb.b-res); - rgb.g=Math.floor(rgb.g-res); - return rgb; - } - let input = document.getElementById('image-input'); - let file = input.files[0]; - let img = new Image(); + // floor the average values to give correct rgb values (ie: round number values) + rgb.r = rgb.r/count; + rgb.g = rgb.g/count; + rgb.b = rgb.b/count; + let res = (rgb.r+rgb.g+rgb.b - 127*3)/6; + rgb.r=Math.floor(rgb.r-res); + rgb.b=Math.floor(rgb.b-res); + rgb.g=Math.floor(rgb.g-res); + return rgb; + } + let input = document.getElementById('image-input'); + let file = input.files[0]; + let img = new Image(); - img.src = URL.createObjectURL(file); + img.src = URL.createObjectURL(file); - img.onload = () => { - let sizes = { - width:img.width, - height: img.height - }; - if(sizes.width < 480 && sizes.height < 150){ - let confirmBox = confirm("Are you sure you want to continue?") - if(confirmBox !== true) { - console.log("todo"); - } - } - img.height=150; - let stuff=document.getElementById("logo"); - let reader = new FileReader(); - reader.onload = (function(aImg) { - return function(e) { - document.getElementById("logo").setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', e.target.result); - document.getElementById("logo").style.visibility="visible"; - let rgb=getAverageColourAsRGB(img); - let rgbString="rgb("+rgb.r+", "+rgb.g+", "+rgb.b+")"; - let x= document.getElementsByClassName("st0"); - for(let i=0; i { + let sizes = { + width:img.width, + height: img.height + }; + if(sizes.width < 480 && sizes.height < 150){ + let confirmBox = confirm("Are you sure you want to continue?") + if(confirmBox !== true) { + console.log("todo"); + } + } + img.height=150; + let stuff=document.getElementById("logo"); + let reader = new FileReader(); + reader.onload = (function(aImg) { + return function(e) { + document.getElementById("logo").setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', e.target.result); + document.getElementById("logo").style.visibility="visible"; + let rgb=getAverageColourAsRGB(img); + let rgbString="rgb("+rgb.r+", "+rgb.g+", "+rgb.b+")"; + let x= document.getElementsByClassName("st0"); + for(let i=0; i Date: Wed, 26 Jul 2017 10:32:05 +0200 Subject: [PATCH 2/7] nav fixed --- src/App.vue | 4 ++-- src/components/app-form.vue | 45 ++++++++++++++++++++++++++++--------- src/components/app-nav.vue | 1 + src/css/app-form.css | 15 ++++++++++--- src/css/app-nav.css | 2 +- src/js/app-form.js | 41 ++++++++------------------------- src/js/app-nav.js | 4 ++++ src/js/app.js | 40 ++++++++++++++++++++++++++++----- 8 files changed, 98 insertions(+), 54 deletions(-) diff --git a/src/App.vue b/src/App.vue index 7ae07ee..be10ffd 100644 --- a/src/App.vue +++ b/src/App.vue @@ -13,10 +13,10 @@
- +
- +
diff --git a/src/components/app-form.vue b/src/components/app-form.vue index dded686..0bb0071 100644 --- a/src/components/app-form.vue +++ b/src/components/app-form.vue @@ -8,31 +8,30 @@ -
+

Details of the sender

- +
- - +
-
+

Customization

@@ -49,12 +48,13 @@
-
- +
+ +
-
+

Details of the receiver

@@ -70,8 +70,31 @@
- - + +
+
+ +
+

Overview

+
+

sender

+

{{formContentValues.issuerNameValue}}

+

{{formContentValues.websiteValue}}

+
+ +
+

Receiver

+

{{formContentValues.receiverNameValue}}

+

{{formContentValues.emailValue}}

+
+ +
+

Description

+

{{formContentValues.descriptionValue}}

+
+ +
+
diff --git a/src/components/app-nav.vue b/src/components/app-nav.vue index 0e46765..330ad72 100644 --- a/src/components/app-nav.vue +++ b/src/components/app-nav.vue @@ -48,4 +48,5 @@ + diff --git a/src/css/app-form.css b/src/css/app-form.css index 27bd9f0..55e708a 100644 --- a/src/css/app-form.css +++ b/src/css/app-form.css @@ -18,9 +18,14 @@ background-color: transparent; border-style: none; color: #838DA5; + background-color: #F3F6F8; + padding: 1.5rem; + border: 1.5px solid #838DA5; + border-radius: 10px; + font-size: 12px; } -#app-form .buttons .save-and-award { +#app-form .buttons .save-and-award, #app-form .buttons .next-button{ background-color: #41b7fe; border-style: none; padding: 1.5rem; @@ -86,7 +91,7 @@ margin-left: auto; margin-right: auto; width: 50%; - margin-top: 20%; + margin-top: 5%; } #details-sender input, #details-receiver input { @@ -117,7 +122,7 @@ margin-left: auto; margin-right: auto; width: 50%; - margin-top: 20%; + margin-top: 5%; } #personalize label { @@ -132,3 +137,7 @@ border: 1.5px solid #ABB3C4; border-radius: 10px; } + +#personalize .logo-input #image-input { + padding: 1rem; +} diff --git a/src/css/app-nav.css b/src/css/app-nav.css index edef927..c0234c8 100644 --- a/src/css/app-nav.css +++ b/src/css/app-nav.css @@ -61,7 +61,7 @@ transform:rotateZ(325deg); } -#navigation .active-step .step, #navigation .active-step .step-number { +#navigation .active-step .nav-item .step, #navigation .active-step .nav-item .step-number { color: #5aa0ed; } diff --git a/src/js/app-form.js b/src/js/app-form.js index 04c161d..541e497 100644 --- a/src/js/app-form.js +++ b/src/js/app-form.js @@ -1,19 +1,8 @@ export default { name: 'app-form', + props: ['formControlElements'], data() { return { - formControlElements: { - searchActive: true, - issuerDetailsActive: false, - customizeActive: false, - receiverDetailsActive: false, - overviewActive: false, - imageInputActive: true, - companyNameInput: true, - urlInput: true, - colorInput: true, - formHasErrors: false - }, formContentValues: { websiteValue: "", issuerNameValue: "", @@ -35,6 +24,9 @@ export default { }, methods: { + submitSearch: function () { + this.$emit('next-step'); + }, isValidEmail: function(email) { //https://stackoverflow.com/questions/46155/how-to-validate-email-address-in-javascript let re = new RegExp("[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?"); @@ -125,12 +117,13 @@ export default { broadestConcept(href, nameChange); }, - submitSearch: function (events) { - this.toggleSearchActive(); - this.toggleIssuerDetailsActive(); - }, + // submitSearch: function (events) { + // this.toggleSearchActive(); + // this.toggleIssuerDetailsActive(); + // }, submit: function (events) { + console.log("in submit"); if(this.clicks < 3) { this.clicks += 1; switch (this.clicks){ @@ -218,23 +211,7 @@ export default { document.getElementById("text2").textContent = string2; document.getElementById("text3").textContent = string3; }, - toggleSearchActive: function(){ - this.formControlElements.searchActive = !this.formControlElements.searchActive; - }, - toggleIssuerDetailsActive: function () { - this.formControlElements.issuerDetailsActive = !this.formControlElements.issuerDetailsActive; - }, - toggleCustomizeActive: function() { - this.formControlElements.customizeActive = !this.formControlElements.customizeActive; - }, - - toggleReceiverDetailsActive: function() { - this.formControlElements.receiverDetailsActive = !this.formControlElements.receiverDetailsActive; - }, - toggleOverviewActive: function() { - this.formControlElements.overviewActive = !this.formControlElements.overviewActive; - }, toggleImageInputActive: function () { this.formControlElements.imageInputActif = !this.formControlElements.imageInputActif }, diff --git a/src/js/app-nav.js b/src/js/app-nav.js index e69de29..826ba76 100644 --- a/src/js/app-nav.js +++ b/src/js/app-nav.js @@ -0,0 +1,4 @@ +export default { + name: 'app-nav', + props: ['formControlElements'] +} diff --git a/src/js/app.js b/src/js/app.js index 4f2ba7f..07a00e4 100644 --- a/src/js/app.js +++ b/src/js/app.js @@ -11,7 +11,11 @@ export default { customizeActive: false, receiverDetailsActive: false, overviewActive: false, - imageInputActive: true + imageInputActive: true, + companyNameInput: true, + urlInput: true, + colorInput: true, + formHasErrors: false } } }, @@ -22,9 +26,35 @@ export default { }, methods: { - submitSearch: function (events) { - this.toggleSearchActive(); - this.toggleIssuerDetailsActive(); - } + nextStep: function (events) { + if(this.formControlElements.searchActive == true){ + this.toggleSearchActive(); + this.toggleIssuerDetailsActive(); + }else if(this.formControlElements.issuerDetailsActive == true) { + this.toggleIssuerDetailsActive(); + this.toggleCustomizeActive(); + }else if(this.formControlElements.customizeActive == true) { + this.toggleCustomizeActive(); + this.toggleReceiverDetailsActive(); + }else if (this.formControlElements.receiverDetailsActive == true) { + this.toggleReceiverDetailsActive(); + this.toggleOverviewActive(); + } + }, + toggleSearchActive: function(){ + this.formControlElements.searchActive = !this.formControlElements.searchActive; + }, + toggleIssuerDetailsActive: function () { + this.formControlElements.issuerDetailsActive = !this.formControlElements.issuerDetailsActive; + }, + toggleCustomizeActive: function() { + this.formControlElements.customizeActive = !this.formControlElements.customizeActive; + }, + toggleReceiverDetailsActive: function() { + this.formControlElements.receiverDetailsActive = !this.formControlElements.receiverDetailsActive; + }, + toggleOverviewActive: function() { + this.formControlElements.overviewActive = !this.formControlElements.overviewActive; + } } } From 84c983b373331c52fb59b8d2d30a1a83d7a485bc Mon Sep 17 00:00:00 2001 From: evajacobs Date: Wed, 26 Jul 2017 12:51:13 +0200 Subject: [PATCH 3/7] bugs fixed --- src/components/app-form.vue | 10 +-- src/css/app-form.css | 2 +- src/js/app-form.js | 149 +++++++++++++----------------------- 3 files changed, 58 insertions(+), 103 deletions(-) diff --git a/src/components/app-form.vue b/src/components/app-form.vue index 0bb0071..8f3cba5 100644 --- a/src/components/app-form.vue +++ b/src/components/app-form.vue @@ -8,7 +8,7 @@
@@ -26,7 +26,7 @@
- +
@@ -50,7 +50,7 @@
- +
@@ -70,7 +70,7 @@
- +
@@ -94,7 +94,7 @@
- +
diff --git a/src/css/app-form.css b/src/css/app-form.css index 55e708a..ad55fec 100644 --- a/src/css/app-form.css +++ b/src/css/app-form.css @@ -87,7 +87,7 @@ /* COMPANY INPUT + RECEIVER INPUT*/ -#details-sender, #details-receiver { +#details-sender, #details-receiver, #overview { margin-left: auto; margin-right: auto; width: 50%; diff --git a/src/js/app-form.js b/src/js/app-form.js index 541e497..cdc189d 100644 --- a/src/js/app-form.js +++ b/src/js/app-form.js @@ -116,105 +116,64 @@ export default { } broadestConcept(href, nameChange); }, - - // submitSearch: function (events) { - // this.toggleSearchActive(); - // this.toggleIssuerDetailsActive(); - // }, - submit: function (events) { - console.log("in submit"); - if(this.clicks < 3) { - this.clicks += 1; - switch (this.clicks){ - case 1: - if (this.formContentValues.searchValue.length>3){ - this.toggleSearchActive(); - this.toggleMetaDataActive(); - - let href=this.firstHref; - this.getCorrectTag(href, function (x){ - this.nameBadge=x; - - document.getElementById("svgFile").style.visibility="visible"; - document.getElementById(this.nameBadge).style.visibility="visible"; - }.bind(this) - ); + let href=this.firstHref; + this.getCorrectTag(href, function (x){ + this.nameBadge=x; + document.getElementById("svgFile").style.visibility="visible"; + document.getElementById(this.nameBadge).style.visibility="visible"; // todo let startpoint have focus // this.$refs.startpoint.focus(); - } - else{ - this.clicks-=1; - } - break; - case 2: - if(this.isValidForm()){ - this.toggleMetaDataActive(); - this.togglePersonalizeActive(); - } else { - this.clicks-=1; - } - break; - default: - this.clicks-=1; - console.log("generation call"); this.generation().bind(this); - break; - } - } else { - console.log("error in next"); - } - - document.getElementById("text1").textContent = string1; - let resultStr= this.formContentValues.pickedSkill.split(" "); - let offset = resultStr.length % 3; - let string1 = ""; - let string2 = ""; - let string3 = ""; - if (offset===1){ - for (let i=0; i<(resultStr.length-offset)/3; i++){ - string1+=resultStr[i]+" "; - } - for (let i=0; i<((resultStr.length-offset)/3)+1; i++){ - string2+=resultStr[i+((resultStr.length-offset)/3)]+" "; - } - for (let i=0; i<(resultStr.length-offset)/3; i++){ - if (resultStr.length>3){ - string3+=resultStr[i+1+(2*(resultStr.length-offset)/3)]+" "; - } - } - } - else if(offset===2){ - for (let i=0; i<(1+((resultStr.length-offset)/3)); i++){ - string1+=resultStr[i]+" "; - } - for (let i=0; i<(1+((resultStr.length-offset)/3)); i++){ - string2+=resultStr[i+1+((resultStr.length-offset)/3)]+" "; - } - for (let i=0; i<((resultStr.length-offset)/3); i++){ - if (resultStr.length>3){ - string3+=resultStr[i+2+(2*(resultStr.length-offset)/3)]+" "; + document.getElementById("text1").textContent = string1; + let resultStr= this.formContentValues.pickedSkill.split(" "); + let offset = resultStr.length % 3; + let string1 = ""; + let string2 = ""; + let string3 = ""; + if (offset===1){ + for (let i=0; i<(resultStr.length-offset)/3; i++){ + string1+=resultStr[i]+" "; + } + for (let i=0; i<((resultStr.length-offset)/3)+1; i++){ + string2+=resultStr[i+((resultStr.length-offset)/3)]+" "; + } + for (let i=0; i<(resultStr.length-offset)/3; i++){ + if (resultStr.length>3){ + string3+=resultStr[i+1+(2*(resultStr.length-offset)/3)]+" "; + } + } + }else if(offset===2){ + for (let i=0; i<(1+((resultStr.length-offset)/3)); i++){ + string1+=resultStr[i]+" "; + } + for (let i=0; i<(1+((resultStr.length-offset)/3)); i++){ + string2+=resultStr[i+1+((resultStr.length-offset)/3)]+" "; + } + for (let i=0; i<((resultStr.length-offset)/3); i++){ + if (resultStr.length>3){ + string3+=resultStr[i+2+(2*(resultStr.length-offset)/3)]+" "; + } + } + }else { + for (let i=0; i<(resultStr.length-offset)/3; i++){ + string1+=resultStr[i]+" "; + } + for (let i=0; i<((resultStr.length-offset)/3); i++){ + string2+=resultStr[i+((resultStr.length-offset)/3)]+" "; + } + for (let i=0; i<(resultStr.length-offset)/3; i++){ + string3+=resultStr[i+(2*(resultStr.length-offset)/3)]+" "; + } } - } - } - else { - for (let i=0; i<(resultStr.length-offset)/3; i++){ - string1+=resultStr[i]+" "; - } - for (let i=0; i<((resultStr.length-offset)/3); i++){ - string2+=resultStr[i+((resultStr.length-offset)/3)]+" "; - } - for (let i=0; i<(resultStr.length-offset)/3; i++){ - string3+=resultStr[i+(2*(resultStr.length-offset)/3)]+" "; - } - } - document.getElementById("text2").textContent = string2; - document.getElementById("text3").textContent = string3; - }, + document.getElementById("text2").textContent = string2; + document.getElementById("text3").textContent = string3; + }.bind(this)); + }, - toggleImageInputActive: function () { - this.formControlElements.imageInputActif = !this.formControlElements.imageInputActif - }, + toggleImageInputActive: function () { + this.formControlElements.imageInputActif = !this.formControlElements.imageInputActif + }, toggleCompanyNameInput: function () { this.formControlElements.companyNameInput = !this.formControlElements.companyNameInput }, @@ -343,10 +302,6 @@ export default { ); }.bind(this)) }, - setPickedValue: function (event) { - this.formContentValues.pickedSkill = event.currentTarget.innerHTML; - event.currentTarget.classList.toggle("actifLink"); - }, onChangeSearch: function () { document.getElementById("svgFile").style.visibility="hidden"; document.getElementById(this.nameBadge).style.visibility="hidden"; From 025ff68611d7badad081bdeb5f28ec0b952fad7d Mon Sep 17 00:00:00 2001 From: evajacobs Date: Wed, 26 Jul 2017 13:56:48 +0200 Subject: [PATCH 4/7] overview page --- src/components/app-form.vue | 37 ++++++++++++++--------------- src/css/app-form.css | 46 ++++++++++++++++++++++++++++++++++++- src/css/app.css | 2 +- src/js/store.js | 20 ---------------- 4 files changed, 65 insertions(+), 40 deletions(-) delete mode 100644 src/js/store.js diff --git a/src/components/app-form.vue b/src/components/app-form.vue index 8f3cba5..d21b7c3 100644 --- a/src/components/app-form.vue +++ b/src/components/app-form.vue @@ -64,7 +64,7 @@ - + @@ -74,27 +74,28 @@ -
+

Overview

-
-

sender

-

{{formContentValues.issuerNameValue}}

-

{{formContentValues.websiteValue}}

-
-
-

Receiver

-

{{formContentValues.receiverNameValue}}

-

{{formContentValues.emailValue}}

-
+
+
+
+

sender

+

{{formContentValues.issuerNameValue}}

+

{{formContentValues.websiteValue}}

+
-
-

Description

-

{{formContentValues.descriptionValue}}

-
+
+

Receiver

+

{{formContentValues.receiverNameValue}}

+

{{formContentValues.emailValue}}

+
+
-
- +
+

Description

+

{{formContentValues.descriptionValue}}

+
diff --git a/src/css/app-form.css b/src/css/app-form.css index ad55fec..665509c 100644 --- a/src/css/app-form.css +++ b/src/css/app-form.css @@ -87,7 +87,7 @@ /* COMPANY INPUT + RECEIVER INPUT*/ -#details-sender, #details-receiver, #overview { +#details-sender, #details-receiver { margin-left: auto; margin-right: auto; width: 50%; @@ -141,3 +141,47 @@ #personalize .logo-input #image-input { padding: 1rem; } + +/* OVERVIEW */ + +#overview { + width: 70%; + margin-left: auto; + margin-right: auto; + margin-top: 5%; + color: #838DA5; + font-size: 1.4rem; + line-height: 1.8rem; +} + +#overview .sender-info, #overview .receiver-info { + width: 50%; + border-bottom: 1px solid #ABB3C4; + padding-bottom: 1rem; +} + +#overview .sender-info { + border-right: 1px solid #ABB3C4; +} + +#overview .receiver-info { + padding-left: 1rem; +} + +#overview .overview-inner { + background-color: #ffffff; + padding: 2rem; + border: 1px solid #ABB3C4; + border-radius: 10px; + margin-top: 2rem; +} + +#overview .description { + padding-top: 2rem; +} + +#overview h3 { + text-transform: uppercase; + color: #42B5FE; + padding-bottom: 1rem; +} diff --git a/src/css/app.css b/src/css/app.css index be97a76..07ec17c 100644 --- a/src/css/app.css +++ b/src/css/app.css @@ -44,7 +44,7 @@ h1{ #container header{ justify-content: center; - margin-top: 30px; + margin-top: 20px; } #container header .logo{ diff --git a/src/js/store.js b/src/js/store.js deleted file mode 100644 index 8be7eea..0000000 --- a/src/js/store.js +++ /dev/null @@ -1,20 +0,0 @@ -export default { - state: { - formControlElements: { - searchActive: true, - issuerDetailsActive: false, - customizeActive: false, - receiverDetailsActive: false, - overviewActive: false, - imageInputActive: true - } - }, - setMessageAction (newValue) { - this.debug && console.log('setMessageAction triggered with', newValue) - this.state.message = newValue - }, - clearMessageAction () { - this.debug && console.log('clearMessageAction triggered') - this.state.message = 'action B triggered' - } -} From 2c26927562d517ed3af9aff00b85e54c67e8a0d5 Mon Sep 17 00:00:00 2001 From: evajacobs Date: Wed, 26 Jul 2017 14:06:41 +0200 Subject: [PATCH 5/7] safari bugs fixed --- src/js/app-form.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/js/app-form.js b/src/js/app-form.js index cdc189d..3329b6d 100644 --- a/src/js/app-form.js +++ b/src/js/app-form.js @@ -1,3 +1,4 @@ +import fetch from 'isomorphic-fetch'; export default { name: 'app-form', props: ['formControlElements'], From 1c37f82b9deda749dc4bbc4f1b499757e80c66f4 Mon Sep 17 00:00:00 2001 From: evajacobs Date: Wed, 26 Jul 2017 15:26:08 +0200 Subject: [PATCH 6/7] language --- index.html | 2 +- src/App.vue | 17 +++++++++++++---- src/components/app-badge.vue | 2 +- src/components/app-form.vue | 4 ++-- src/css/app-badge.css | 6 +++--- src/css/app-form.css | 14 ++++++++++++-- src/css/app.css | 26 ++++++++++++++++++++++++++ src/js/app-badge.js | 1 + src/js/app-form.js | 4 ++-- src/js/app.js | 5 ++++- 10 files changed, 65 insertions(+), 16 deletions(-) diff --git a/index.html b/index.html index f19ab4b..610c2ae 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,7 @@ - skillid + ESCO badge builder
diff --git a/src/App.vue b/src/App.vue index be10ffd..744d99d 100644 --- a/src/App.vue +++ b/src/App.vue @@ -4,11 +4,20 @@
+
+
+ Return to library +

Create a Badge

+
-
- Return to library -

Create a Badge

+
+ +
+
@@ -17,7 +26,7 @@
- +
diff --git a/src/components/app-badge.vue b/src/components/app-badge.vue index 1dfdcdd..8ff043d 100644 --- a/src/components/app-badge.vue +++ b/src/components/app-badge.vue @@ -49,7 +49,7 @@