Skip to content

Commit

Permalink
Merge pull request #11 from max-programming/master
Browse files Browse the repository at this point in the history 
Added Icons to labels
  • Loading branch information
@arturssmirnovs
arturssmirnovs committed Oct 4, 2020
2 parents fa6dde8 + cb11282 commit 2e9a4f8
Show file tree
Hide file tree
Showing 2 changed files with 20 additions and 17 deletions.
28 changes: 14 additions & 14 deletions index.html
View file
Expand Up @@ -35,7 +35,7 @@
<app-nav>
<div class="jumbotron">
<h1 class="display-5 bold">GitHub profile readme generator</h1>
<p class="lead">Super simple GitHub profile readme generator made with vue js, that allows you to create beautiful readme files that you can copy/paste in your profile.</p>
<p class="lead">Super simple GitHub profile readme generator made with Vue.js, that allows you to create beautiful readme files that you can copy/paste in your profile.</p>
<hr class="my-4">
<p>What is GitHub profile readme? Check out repository to learn more.</p>
<p class="lead mb-0">
Expand Down Expand Up @@ -108,43 +108,43 @@ <h3>Social information</h3>

<div class="row">
<div class="col-xs-12 col-md-6">
<custom-input v-model="data.github" title="GitHub" placeholder="Enter username.."></custom-input>
<custom-input v-model="data.github" title="GitHub" placeholder="Enter username.." brand="github"></custom-input>
</div>
<div class="col-xs-12 col-md-6">
<custom-input v-model="data.dev" title="DEV.TO" placeholder="Enter username.."></custom-input>
<custom-input v-model="data.dev" title="DEV.TO" placeholder="Enter username.." brand="dev-dot-to"></custom-input>
</div>
<div class="col-xs-12 col-md-6">
<custom-input v-model="data.linkedin" title="LinkedIn" placeholder="Enter username.."></custom-input>
<custom-input v-model="data.linkedin" title="LinkedIn" placeholder="Enter username.." brand="linkedin"></custom-input>
</div>
<div class="col-xs-12 col-md-6">
<custom-input v-model="data.facebook" title="Facebook" placeholder="Enter username.."></custom-input>
<custom-input v-model="data.facebook" title="Facebook" placeholder="Enter username.." brand="facebook"></custom-input>
</div>
<div class="col-xs-12 col-md-6">
<custom-input v-model="data.instagram" title="Instagram" placeholder="Enter username.."></custom-input>
<custom-input v-model="data.instagram" title="Instagram" placeholder="Enter username.." brand="instagram"></custom-input>
</div>
<div class="col-xs-12 col-md-6">
<custom-input v-model="data.twitter" title="Twitter" placeholder="Enter username.."></custom-input>
<custom-input v-model="data.twitter" title="Twitter" placeholder="Enter username.." brand="twitter"></custom-input>
</div>
<div class="col-xs-12 col-md-6">
<custom-input v-model="data.codepen" title="Codepen" placeholder="Enter username.."></custom-input>
<custom-input v-model="data.codepen" title="Codepen" placeholder="Enter username.." brand="codepen"></custom-input>
</div>
<div class="col-xs-12 col-md-6">
<custom-input v-model="data.codesandbox" title="CodeSandbox" placeholder="Enter username.."></custom-input>
<custom-input v-model="data.codesandbox" title="CodeSandbox" placeholder="Enter username.." brand="codesandbox"></custom-input>
</div>
<div class="col-xs-12 col-md-6">
<custom-input v-model="data.stackoverflow" title="Stack Overflow" placeholder="Enter user ID.."></custom-input>
<custom-input v-model="data.stackoverflow" title="Stack Overflow" placeholder="Enter user ID.." brand="stackoverflow"></custom-input>
</div>
<div class="col-xs-12 col-md-6">
<custom-input v-model="data.youtube" title="YouTube" placeholder="Enter channel ID.."></custom-input>
<custom-input v-model="data.youtube" title="YouTube" placeholder="Enter channel ID.." brand="youtube"></custom-input>
</div>
<div class="col-xs-12 col-md-6">
<custom-input v-model="data.twitch" title="Twitch" placeholder="Enter username.."></custom-input>
<custom-input v-model="data.twitch" title="Twitch" placeholder="Enter username.." brand="twitch"></custom-input>
</div>
<div class="col-xs-12 col-md-6">
<custom-input v-model="data.reddit" title="Reddit" placeholder="Enter username.."></custom-input>
<custom-input v-model="data.reddit" title="Reddit" placeholder="Enter username.." brand="reddit"></custom-input>
</div>
<div class="col-xs-12 col-md-12">
<custom-input v-model="data.website" title="Website" placeholder="Enter URL.."></custom-input>
<custom-input v-model="data.website" title="Website" placeholder="Enter URL.." brand="icloud"></custom-input>
</div>
<div class="col-xs-12 col-md-12">
<h4>Others</h4>
Expand Down
9 changes: 6 additions & 3 deletions js/script.js
View file
@@ -1,11 +1,14 @@
Vue.use(VueMarkdown);

Vue.component('custom-input', {
props: ['value', 'title', 'placeholder'],
props: ['value', 'title', 'placeholder', 'brand'],
template: `
<div class="form-group">
<label for="`+this.title+`">{{title}}</label>
<input type="text" class="form-control" v-bind:value="value" v-on:input="$emit('input', $event.target.value)" aria-describedby="`+this.title+`" v-bind:placeholder="placeholder">
<label :for="title">
<img v-if="brand" :src="'https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/'+brand+'.svg'" :alt="brand" height='30'> &nbsp;
{{ title }}
</label>
<input type="text" class="form-control" :value="value" @input="$emit('input', $event.target.value)" :aria-describedby="title" :placeholder="placeholder" />
</div>
`
})
Expand Down

0 comments on commit 2e9a4f8

Please sign in to comment.