Commit f06677bfcbb3c93ec4bcb79901400aa21bd17197
1 parent
988b5d20ac
Exists in
master
and in
1 other branch
profile screen added
Showing
2 changed files
with
129 additions
and
0 deletions
Show diff stats
src/components/Profile.vue
| File was created | 1 | <template> | |
| 2 | <main class="landing-page"> | ||
| 3 | |||
| 4 | |||
| 5 | |||
| 6 | <div class="container-fluid inner-wrp"> | ||
| 7 | |||
| 8 | |||
| 9 | <nav class="navbar navbar-expand-sm spotLight-nav"> | ||
| 10 | <a class="navbar-brand" href="#"><img src="../assets/images/logo.png" /></a> | ||
| 11 | <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation"> | ||
| 12 | <span class="navbar-toggler-icon"></span> | ||
| 13 | <span class="navbar-toggler-icon"></span> | ||
| 14 | <span class="navbar-toggler-icon"></span> | ||
| 15 | </button> | ||
| 16 | |||
| 17 | <div class="collapse navbar-collapse" id="navbarsExample03"> | ||
| 18 | <ul class="navbar-nav mr-auto"> | ||
| 19 | <li class="nav-item active"> | ||
| 20 | <a class="nav-link" href="#">About</a> | ||
| 21 | </li> | ||
| 22 | <li class="nav-item"> | ||
| 23 | <a class="nav-link" href="#">Masterclass</a> | ||
| 24 | </li> | ||
| 25 | <li class="nav-item"> | ||
| 26 | <a class="nav-link" href="#">Stories</a> | ||
| 27 | </li> | ||
| 28 | <li class="nav-item"> | ||
| 29 | <a class="nav-link" href="#">Library</a> | ||
| 30 | </li> | ||
| 31 | </ul> | ||
| 32 | </div> | ||
| 33 | <div class="user-profile-photo"> | ||
| 34 | <a href="#"><img src="../assets/images/user.png" /></a> | ||
| 35 | </div> | ||
| 36 | </nav><!-- menu wrapper --> | ||
| 37 | <div class="row profile-tab-spc-top"> | ||
| 38 | <div class="col-sm-8 col-md-12 col-lg-8 col-xl-8"> | ||
| 39 | <img src="../assets/images/user.png" class="inner-profile-ps" /> | ||
| 40 | <div class="user-profile"> | ||
| 41 | <h1>Vamsi Krishna <a href="#" class="tags">Maker</a></h1> | ||
| 42 | <ul class="joined-info"> | ||
| 43 | <li><a href="#">Add your work</a> <img src="../assets/images/u-info-icon.png" /> <span></span></li> | ||
| 44 | <li><a href="#">34772 Karma</a> <span></span> </li> | ||
| 45 | <li><a href="#">Joined on july 2020</a></li> | ||
| 46 | </ul> | ||
| 47 | <p>Tell others a little about yourself</p> | ||
| 48 | |||
| 49 | </div> | ||
| 50 | |||
| 51 | </div><!-- user profile --> | ||
| 52 | <div class="col-sm-4 col-md-12 col-lg-4 col-xl-4"> | ||
| 53 | <div class="list-style-group"> | ||
| 54 | <p>Awards</p> | ||
| 55 | <ul class="list-style"> | ||
| 56 | <li><a href="#"><img src="../assets/images/icon-1.png" /></a></li> | ||
| 57 | </ul> | ||
| 58 | </div><!-- list style --> | ||
| 59 | |||
| 60 | </div> | ||
| 61 | </div> | ||
| 62 | <div class="clearfix"></div> | ||
| 63 | <div class="row top-brd profile-tab-spc-top"> | ||
| 64 | <div class="col-sm-8 col-md-8 col-lg-8 col-xl-8"> | ||
| 65 | <ul class="profile-tab"> | ||
| 66 | <li class="active"><a href="#">Case-studies(0)</a></li> | ||
| 67 | <li><a href="#">Comments/Replies(0)</a></li> | ||
| 68 | </ul> | ||
| 69 | |||
| 70 | </div> | ||
| 71 | <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> | ||
| 72 | <ul class="social-connects"> | ||
| 73 | <li><span>Follow</span></li> | ||
| 74 | <li><a href="#" class="active"><img src="../assets/images/plus.png" /></a> <span class="connect-social-channel">Connect your social channels</span></li> | ||
| 75 | </ul> | ||
| 76 | |||
| 77 | </div> | ||
| 78 | </div><!-- tab style --> | ||
| 79 | <div class="profile-data-wrp"> | ||
| 80 | <div class="container-fluid data-wrp"> | ||
| 81 | <div class="row"> | ||
| 82 | <div class="col-lg-12"> | ||
| 83 | <div class="profile-buttons"> | ||
| 84 | <a href="#" class="profile-sm-bt center-and-spc bt-active">Update Profile</a> | ||
| 85 | <a href="#" class="profile-md-bt center-and-spc">Explore Case-studies</a> | ||
| 86 | <a href="#" class="profile-lg-bt">Publish Your Case Study</a> | ||
| 87 | </div> | ||
| 88 | </div> | ||
| 89 | </div> | ||
| 90 | </div> | ||
| 91 | |||
| 92 | </div><!-- data wrp --> | ||
| 93 | <!-- body wrapper --> | ||
| 94 | </div> | ||
| 95 | </main> | ||
| 96 | </template> | ||
| 97 | |||
| 98 | <script> | ||
| 99 | |||
| 100 | import Vue from "vue"; | ||
| 101 | import router from "../router"; | ||
| 102 | import $ from "jquery"; | ||
| 103 | |||
| 104 | export default { | ||
| 105 | name: "Profile", | ||
| 106 | |||
| 107 | data() { | ||
| 108 | return { | ||
| 109 | loggedinFlag: false, | ||
| 110 | }; | ||
| 111 | }, | ||
| 112 | mounted() {}, | ||
| 113 | methods: { | ||
| 114 | login() {}, | ||
| 115 | goToSignUp(){ | ||
| 116 | this.$router.push("/signup"); | ||
| 117 | }, | ||
| 118 | goToReset() { | ||
| 119 | this.$router.push("/reset"); | ||
| 120 | }, | ||
| 121 | }, | ||
| 122 | }; | ||
| 123 | </script> | ||
| 124 |
src/router/index.js
| 1 | import Vue from 'vue' | 1 | import Vue from 'vue' |
| 2 | import Router from 'vue-router' | 2 | import Router from 'vue-router' |
| 3 | import { authGuard } from "../auth/authGuard" | 3 | import { authGuard } from "../auth/authGuard" |
| 4 | import LandingPage from '@/components/LandingPage' | 4 | import LandingPage from '@/components/LandingPage' |
| 5 | import SignUp from '@/components/SignUp' | 5 | import SignUp from '@/components/SignUp' |
| 6 | import Reset from '@/components/Reset' | 6 | import Reset from '@/components/Reset' |
| 7 | import Profile from '@/components/Profile' | ||
| 7 | import welcome from '@/components/welcome' | 8 | import welcome from '@/components/welcome' |
| 8 | 9 | ||
| 9 | import router from '../router' | 10 | import router from '../router' |
| 10 | Vue.use(Router) | 11 | Vue.use(Router) |
| 11 | 12 | ||
| 12 | export default new Router({ | 13 | export default new Router({ |
| 13 | mode: 'history', | 14 | mode: 'history', |
| 14 | routes: [{ | 15 | routes: [{ |
| 15 | path: '/', | 16 | path: '/', |
| 16 | name: 'LandingPage', | 17 | name: 'LandingPage', |
| 17 | component: LandingPage, | 18 | component: LandingPage, |
| 18 | beforeEnter: function(to, from, next) { | 19 | beforeEnter: function(to, from, next) { |
| 19 | var userdata = localStorage.getItem('gigs_usertoken') | 20 | var userdata = localStorage.getItem('gigs_usertoken') |
| 20 | if (userdata) { | 21 | if (userdata) { |
| 21 | router.push({ name: 'Welcome' }) | 22 | router.push({ name: 'Welcome' }) |
| 22 | } | 23 | } |
| 23 | next() | 24 | next() |
| 24 | } | 25 | } |
| 25 | }, | 26 | }, |
| 26 | { | 27 | { |
| 27 | path: '/signup', | 28 | path: '/signup', |
| 28 | name: 'SignUp', | 29 | name: 'SignUp', |
| 29 | component: SignUp, | 30 | component: SignUp, |
| 30 | }, | 31 | }, |
| 31 | { | 32 | { |
| 32 | path: '/reset', | 33 | path: '/reset', |
| 33 | name: 'Reset', | 34 | name: 'Reset', |
| 34 | component: Reset, | 35 | component: Reset, |
| 36 | }, | ||
| 37 | { | ||
| 38 | path: '/profile', | ||
| 39 | name: 'Profile', | ||
| 40 | component: Profile, | ||
| 35 | } | 41 | } |
| 36 | 42 | ||
| 37 | ], | 43 | ], |
| 38 | scrollBehavior(to, from, savedPosition) { | 44 | scrollBehavior(to, from, savedPosition) { |
| 39 | this.seen = false | 45 | this.seen = false |
| 40 | return { x: 0, y: 0 } | 46 | return { x: 0, y: 0 } |
| 41 | } | 47 | } |
| 42 | }) | 48 | }) |