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
| ... | ... | @@ -0,0 +1,123 @@ |
| 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> | ... | ... |
src/router/index.js
| ... | ... | @@ -4,6 +4,7 @@ import { authGuard } from "../auth/authGuard" |
| 4 | 4 | import LandingPage from '@/components/LandingPage' |
| 5 | 5 | import SignUp from '@/components/SignUp' |
| 6 | 6 | import Reset from '@/components/Reset' |
| 7 | +import Profile from '@/components/Profile' | |
| 7 | 8 | import welcome from '@/components/welcome' |
| 8 | 9 | |
| 9 | 10 | import router from '../router' |
| ... | ... | @@ -32,6 +33,11 @@ export default new Router({ |
| 32 | 33 | path: '/reset', |
| 33 | 34 | name: 'Reset', |
| 34 | 35 | component: Reset, |
| 36 | + }, | |
| 37 | + { | |
| 38 | + path: '/profile', | |
| 39 | + name: 'Profile', | |
| 40 | + component: Profile, | |
| 35 | 41 | } |
| 36 | 42 | |
| 37 | 43 | ], | ... | ... |