forked from VueDominicana/DominicanWhoCodes
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Nominate button does not work VueDominicana#101
- Loading branch information
1 parent
e7eda6d
commit ad72dfb
Showing
3 changed files
with
218 additions
and
54 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,110 @@ | ||
| <template> | ||
| <div class="campos mt-3 pt-4 w-100 text-left" id="nominate"> | ||
| <div class="row flex-wrap"> | ||
| <div class="col-lg-6 col-md-12 my-2"> | ||
| <label class="text-white">User Name *</label> | ||
| <input | ||
| type="text" | ||
| class="form-control" | ||
| placeholder="@example02" | ||
| v-model="form.nameUser" | ||
| /> | ||
| </div> | ||
| <div class="col-lg-6 col-md-12 my-2"> | ||
| <label class="text-white">Url of your Github profile *</label> | ||
| <input | ||
| type="text" | ||
| class="form-control" | ||
| placeholder="https://github.com/example02" | ||
| v-model="form.urlGithub" | ||
| /> | ||
| </div> | ||
| </div> | ||
| <div class="row"> | ||
| <div class="col-lg-6 col-md-12 my-2"> | ||
| <label class="text-white">Url of your Twitter profile</label> | ||
| <input | ||
| type="text" | ||
| class="form-control" | ||
| placeholder="https://twitter.com/example02" | ||
| v-model="form.urlTwitter" | ||
| /> | ||
| </div> | ||
| <div class="col-lg-6 col-md-12 my-2"> | ||
| <label class="text-white">Url of your Linkedin profile </label> | ||
| <input | ||
| type="text" | ||
| class="form-control" | ||
| placeholder="https://www.linkedin.com/in/emxaple02" | ||
| v-model="form.urlLinkedin" | ||
| /> | ||
| </div> | ||
| </div> | ||
| <div class="row mt-2"> | ||
| <div class="col"> | ||
| <label class="text-white">Make a brief description</label> | ||
| </div> | ||
| <div class="col-12"> | ||
| <textarea class="form-control" v-model="form.descripcion"></textarea> | ||
| </div> | ||
| <div class="col-12 text-center mt-3" v-if="errorForm === true"> | ||
| <small class="d-block text-danger"> Fill in all the fields * </small> | ||
| </div> | ||
| <div class="col-12 mt-3"> | ||
| <a | ||
| href="#nominate" | ||
| rel="noreferrer" | ||
| class="btn secundary block" | ||
| @click="sendNominate" | ||
| > | ||
| Send | ||
| </a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </template> | ||
| <script> | ||
| export default { | ||
| name: "NominateForm", | ||
| data() { | ||
| return { | ||
| form: { | ||
| nameUser: "", | ||
| urlGithub: "", | ||
| urlTwitter: "", | ||
| urlLinkedin: "", | ||
| descripcion: "", | ||
| }, | ||
| errorForm: false, | ||
| }; | ||
| }, | ||
| methods: { | ||
| sendNominate() { | ||
| if ( | ||
| this.form.nameUser === "" || | ||
| this.form.urlGithub === "" || | ||
| this.form.urlTwitter === "" || | ||
| this.form.urlLinkedin === "" || | ||
| this.form.descripcion === "" | ||
| ) { | ||
| this.errorForm = true; | ||
| return; | ||
| } | ||
| this.errorForm = false; | ||
| }, | ||
| }, | ||
| }; | ||
| </script> | ||
| <style> | ||
| .campos { | ||
| width: 100%; | ||
| transition: ease-in-out 0.9s; | ||
| font-family: Poppins, Source Sans Pro, sans-serif; | ||
| font-weight: bold; | ||
| } | ||
| .campos input, | ||
| textarea { | ||
| font-weight: normal; | ||
| font-size: 14px; | ||
| } | ||
| </style>> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,59 +1,89 @@ | ||
| <template> | ||
| <div class="nominate"> | ||
| <div class="nominate__section"> | ||
| <div class="nominate__content-wrapper"> | ||
| <h1 class="nominate__title"> | ||
| Nominate a <span class="nominate__highlight">developer</span> | ||
| </h1> | ||
| <p class="nominate__body-text"> | ||
| Help us build the directory of Developers thriving in the field of programming. | ||
| If you know someone who deserves to be on the list, nominate them by clicking the Nominate button and filling the form. | ||
| And hey, it's alright to nominate yourself. 😎 | ||
| </p> | ||
| <a href="#" rel="noreferrer" class="btn primary">Nominate</a> | ||
| </div> | ||
| </div> | ||
| <div class="nominate"> | ||
| <div class="nominate__section"> | ||
| <div class="nominate__content-wrapper"> | ||
| <h1 class="nominate__title"> | ||
| Nominate a <span class="nominate__highlight">developer</span> | ||
| </h1> | ||
| <p class="nominate__body-text"> | ||
| Help us build the directory of Developers thriving in the field of | ||
| programming. If you know someone who deserves to be on the list, | ||
| nominate them by clicking the Nominate button and filling the form. | ||
| And hey, it's alright to nominate yourself. 😎 | ||
| </p> | ||
|
|
||
| <a href="#nominate" rel="noreferrer" class="btn primary" @click="onNominar"> | ||
| Nominate</a> | ||
|
|
||
| <template v-if="openNominar"> | ||
| <NominateForm /> | ||
| </template> | ||
|
|
||
| </div> | ||
| </div> | ||
| </div> | ||
| </template> | ||
| <script> | ||
| <style lang="scss" scoped> | ||
| .nominate { | ||
| margin-top: 33px; | ||
| &__section { | ||
| display: flex; | ||
| flex: 1 1 auto; | ||
| flex-direction: column; | ||
| justify-content: flex-start; | ||
| align-items: center; | ||
| padding: 5rem; | ||
| } | ||
| &__content-wrapper { | ||
| display: flex; | ||
| flex-direction: column; | ||
| max-width: 720px; | ||
| align-items: baseline; | ||
| } | ||
| &__title { | ||
| font-size: 3.0rem; | ||
| margin: 5.0rem 0 2.0rem; | ||
| font-family: Poppins, Source Sans Pro, sans-serif; | ||
| font-weight: bold; | ||
| color: #fff; | ||
| } | ||
| &__body-text { | ||
| font-size: 0.97rem; | ||
| font-family: Poppins, Source Sans Pro, sans-serif; | ||
| text-align: justify; | ||
| margin: 0; | ||
| color: #fff; | ||
| } | ||
| &__highlight { | ||
| color: #909090; | ||
| } | ||
| import NominateForm from '@/components/FormNominate.vue' | ||
| export default { | ||
| name: "Nominate", | ||
| components: { | ||
| NominateForm | ||
| }, | ||
| data() { | ||
| return { | ||
| openNominar: false, | ||
| }; | ||
| }, | ||
| methods: { | ||
| onNominar() { | ||
| this.openNominar = !this.openNominar; | ||
| } | ||
| </style> | ||
| }, | ||
| }; | ||
| </script>> | ||
| <style lang="scss" scoped> | ||
| .nominate { | ||
| margin-top: 33px; | ||
| &__section { | ||
| display: flex; | ||
| flex: 1 1 auto; | ||
| flex-direction: column; | ||
| justify-content: flex-start; | ||
| align-items: center; | ||
| padding: 5rem; | ||
| } | ||
| &__content-wrapper { | ||
| display: flex; | ||
| flex-direction: column; | ||
| max-width: 720px; | ||
| align-items: baseline; | ||
| } | ||
| &__title { | ||
| font-size: 3rem; | ||
| margin: 5rem 0 2rem; | ||
| font-family: Poppins, Source Sans Pro, sans-serif; | ||
| font-weight: bold; | ||
| color: #fff; | ||
| } | ||
| &__body-text { | ||
| font-size: 0.97rem; | ||
| font-family: Poppins, Source Sans Pro, sans-serif; | ||
| text-align: justify; | ||
| margin: 0; | ||
| color: #fff; | ||
| } | ||
| &__highlight { | ||
| color: #909090; | ||
| } | ||
| } | ||
| </style> |