viithiisys / spotlight-frontend

Download as
Browse Code ยป

Commit 1c575dae090b56d434e8a6a6a240db9070fcb9d9

Authored by Digvijay Singh
1 parent f2328546d0
Exists in master

new changes ui

Showing 11 changed files with 69 additions and 26 deletions   Show diff stats
src/assets/css/custom.css
Diff comments   View file @1c575da
... ... @@ -144,7 +144,7 @@ h1{font-family: 'Bebas Neue', cursive;font-style: normal; font-weight: 600; font
144 144 border-radius: 100px;
145 145 padding: 1px;}
146 146 .user-profile-photo a, img{ width: 100%;}
147   -.inner-profile-ps{ width: 148px; height: 148px; float: left; display: block;}
  147 +.inner-profile-ps{ width: 120px; height: 120px; float: left; display: block;}
148 148 .inner-wrp h1{ font-weight: 400; font-size:32px; line-height: 40px; color:#000; font-family: 'Montserrat', sans-serif;}
149 149 .tags{background: #BDDBFF; font-weight: 600; font-size:10px; color: #fff; padding: 2px 8px; border-radius:3px;}
150 150 .user-profile{ display: block;
... ... @@ -175,17 +175,22 @@ h1{font-family: 'Bebas Neue', cursive;font-style: normal; font-weight: 600; font
175 175  
176 176 /* social connects */
177 177 .social-connects{ display: block; list-style-type: none; margin: 0px; padding: 0px;}
178   -.social-connects li{ float: left; margin-right:0px ;}
  178 +.social-connects li{ float: left; margin-right:0px ; margin-left: 6px;}
179 179 .social-connects li a{ display: block; float: left; padding: 11px;}
180 180 .social-connects li a img.twitter{ margin-top:3px;}
181   -.social-connects li a.active{background: #f9fafc; width: 40px; height: 40px; border-radius: 5px;}
  181 +.social-connects li a{background: #f9fafc; width: 40px; height: 40px; border-radius: 5px;}
  182 +.social-connects li a:hover{background: #EF484F;}
  183 +.social-connects li a:hover img{
  184 + -webkit-filter: brightness(15);
  185 + filter:brightness(15);
  186 +}
182 187 .social-connects li a img{ width: 19px; display: block; float: left;}
183 188 .social-connects li span{color:#000; opacity: 0.5; letter-spacing: 2px;margin-bottom: 7px;font-size: 14px; text-transform: uppercase; font-weight: 600; margin: 11px 30px 0 0;
184 189 float: left;}
185 190 .connect-social-channel{ margin-left: 10px !important; margin-top:8px !important; font-weight: 500 !important; font-style: normal !important; font-size: 14px !important; line-height: 22px !important; text-transform: unset !important; letter-spacing: 0px !important;}
186 191  
187 192 /* profile tab */
188   - .profile-tab-spc-top{margin-top:45px ; padding-top: 15px;}
  193 + .profile-tab-spc-top{margin-top:25px ; padding-top: 15px;}
189 194 .top-brd{border-top: 1px solid #DFE7EF;}
190 195 .profile-tab{ list-style-type: none; display: block; float: left; margin:0px ; padding: 0px;}
191 196 .profile-tab li{ float: left; padding-bottom: 10px; margin-right:76px ;}
... ... @@ -195,7 +200,7 @@ h1{font-family: 'Bebas Neue', cursive;font-style: normal; font-weight: 600; font
195 200 /* profile data wrp */
196 201 .profile-data-wrp{ background:#dfe7ef; position: absolute; width: 100%; left: 0px;}
197 202 .data-wrp{padding-left: 88px; padding-right: 37px; padding-bottom:50px; padding-top: 50px;}
198   -.card-warpper{ width: 340px; padding-bottom: 35px !important; position: relative; background: #fff; margin-bottom: 100px; border-radius: 4px; padding:23px; background-image: url('../images/card-bg.png'); background-repeat: repeat-y; background-position: top 0 right 20px; float: left; margin-right: 68px;}
  203 +.card-warpper{ width: 340px; padding-bottom: 35px !important; position: relative; background: #fff; margin-bottom: 100px; border-radius: 4px; padding:23px; background-image: url('../images/card-bg-1.png'); background-repeat: no-repeat; background-position: top 0 right 20px; float: left; margin-right: 68px;}
199 204 .company-detail{ width: 100%;
200 205 display: block;
201 206 float: left;
... ... @@ -213,7 +218,7 @@ h1{font-family: 'Bebas Neue', cursive;font-style: normal; font-weight: 600; font
213 218 .card-warpper p{ float: left; padding: 12px 0 12px 0; width: 260px; border-bottom:1px solid #a5a5a5; font-family: 'Montserrat', sans-serif; font-style: normal; font-weight: 400; font-size: 14px;line-height: 18px; letter-spacing: 0.15px; color: #000000; }
214 219 .card-warpper .tags-list{ width: 198px; float: left; display: block; list-style-type: none; margin:0px; padding:0px; opacity: 0.5;}
215 220 .card-warpper .tags-list li{ float: left; margin-right:9px ; margin-bottom: 9px;}
216   -.card-warpper .tags-list li a{text-transform: uppercase; padding:5px 13px; border-radius: 10px; color: #fff;font-family: 'Montserrat', sans-serif; font-style: normal; font-weight: 600; font-size: 12px;line-height: 16px; letter-spacing: 0.15px;}
  221 +.card-warpper .tags-list li a{text-transform: uppercase; padding:5px 13px; border-radius: 100px; color: #fff;font-family: 'Montserrat', sans-serif; font-style: normal; font-weight: 600; font-size: 12px;line-height: 16px; letter-spacing: 0.15px;}
217 222 /* colors */
218 223 .cape-honey{ background: #fde2a3;}
219 224 .rose-bud{ background: #fba29a;}
... ... @@ -634,7 +639,7 @@ color: #514DA7;opacity:1;
634 639 .switch-btn {
635 640 position: relative;
636 641 display: inline-block;
637   - width: 60px;
  642 + width: 44px;
638 643 height: 24px;
639 644 }
640 645 .switch-btn input {
... ... @@ -659,7 +664,7 @@ color: #514DA7;opacity:1;
659 664 content: "";
660 665 height: 14px;
661 666 width: 13px;
662   - left: 10px;
  667 + left: 6px;
663 668 bottom: 5px;
664 669 background-color: #514DA7;
665 670 -webkit-transition: .4s;
... ... @@ -675,11 +680,11 @@ color: #514DA7;opacity:1;
675 680 box-shadow: 0 0 1px #2196F3;
676 681 }
677 682 .toggle-btn:checked + .rounded-toggle:before {
678   - -webkit-transform: translateX(26px);
679   - -ms-transform: translateX(26px);
680   - transform: translateX(26px);
  683 + -webkit-transform: translateX(19px);
  684 + -ms-transform: translateX(19px);
  685 + transform: translateX(19px);
681 686 }
682   -.switch-bt-wrp{margin-top: 15px; width: 111px;
  687 +.switch-bt-wrp{margin-top: 15px; width: 100px;
683 688 float: right;
684 689 text-align: right; }
685 690 .switch-btn{float: left ;}
... ... @@ -769,10 +774,10 @@ color: #514DA7;opacity:1;
769 774 width: 49%;
770 775 background: #fff;}
771 776 .intro-startup .footer-top{ position: relative; width: 100%; display: block; float: left; padding: 0 50px; height: 75px;}
772   -.intro-startup .footer-top .top-intro-bt{ width: 215px; display: block; list-style-type: none; margin: 0px; padding:0px; float: left;margin-top: 25px; position: absolute; }
  777 +.intro-startup .footer-top .top-intro-bt{ width: 240px; display: block; list-style-type: none; margin: 0px; padding:0px; float: left;margin-top: 25px; position: absolute; }
773 778 .intro-startup .footer-top .top-intro-bt li{display: block; float: left;}
774 779 .intro-startup .footer-top .top-intro-bt li:first-child{ margin-right: 15px;}
775   -.intro-startup .footer-top .top-intro-bt li a{ height: 39px; border: 1px solid #514DA7;box-sizing: border-box; border-radius: 5px; color: #514DA7; font-weight: 400; font-size: 13px; font-style: normal; line-height: 26px; padding: 6px 10px; display: block; float: left;}
  780 +.intro-startup .footer-top .top-intro-bt li a{ height: 39px; border: 1px solid #514DA7;box-sizing: border-box; border-radius: 5px; color: #514DA7; font-weight: 400; font-size: 13px; font-style: normal; line-height: 26px; padding: 6px 12px; display: block; float: left;}
776 781 .intro-startup .footer-top .top-intro-bt li a img{ width: 10px; display: block;float: left;margin-top: 8px; margin-right: 6px;}
777 782 .intro-startup .footer-top .top-intro-bt li a:hover{ background-color: #fff; text-decoration: none; border: 1px solid #fff;}
778 783 .smasung-g-10wrp{ width: 404px; display: block; height: 721px; position: absolute; border: 1px solid #000000; border-radius: 45px 45px 0 0; left: 0;
... ... @@ -1400,4 +1405,4 @@ input:focus{ outline: none;}
1400 1405 .s-l-left-section{ width: 600px; display: block; float: left; margin-top: 57px;}
1401 1406 .s-l-right-section{ width: 300px; display: block; float: left;}
1402 1407 .sign-login-wrp{ display: block;width: 900px; margin: 0 auto; margin-top: 10%;}
1403   -.reset-pass{margin-top: 118px;}
1404 1408 \ No newline at end of file
  1409 +.reset-pass{margin-top: 118px;}
... ...
src/assets/css/media.css
Diff comments   View file @1c575da
... ... @@ -24,7 +24,17 @@ and (max-device-width: 1280px)
24 24 and (min-device-width: 768px)
25 25 and (max-device-width: 1366px)
26 26 and (-webkit-min-device-pixel-ratio: 1) {
  27 + .ft-comments-group{padding-top: 12px;}
  28 + .comment-frm{margin-top: 12px;}
  29 + .intro-startup .footer-top .top-intro-bt{margin-top: 12px;}
  30 + .intro-startup .footer-top{ height: 61px;}
  31 + .intro-startup .footer-nav{ height: 66px;}
27 32 .intro-startup .footer-top .top-intro-bt{width: 212px; margin-left: -21px;}
  33 + .intro-startup .footer-top .top-intro-bt {
  34 + width: 237px;
  35 + margin-left: -57px;
  36 +}
  37 + .comment-frm.no-c-frm #open_ct_box{ width: 200px !important;}
28 38 .bottom-startup{-ms-transform: scale(0.9); /* IE 9 */
29 39 transform: scale(0.9); /* Standard syntax */ left: -10px;}
30 40 .epi-bg{bottom: -159px; left: 8.5% !important;}
... ... @@ -37,7 +47,7 @@ and (-webkit-min-device-pixel-ratio: 1) {
37 47 transform: scale(0.8); /* Standard syntax */ margin-top: 5%; }
38 48 .wc-spc-lf-tp{ padding-top: 90px; padding-left: 0px; }
39 49 .form-layout.signup-frm-spc { margin-top: 41px;}
40   - .user-profile{padding-right: 90px;width: 570px;}
  50 + .user-profile{padding-right: 90px;width: 570px !important;}
41 51 .spot-light-top{ top: -68px; -ms-transform: scale(0.8); /* IE 9 */
42 52 transform: scale(0.8); /* Standard syntax */}
43 53 .ft-comments-group{ width: 100%; }
... ... @@ -128,6 +138,13 @@ and (-webkit-min-device-pixel-ratio: 1) {
128 138 and (min-device-width: 900px)
129 139 and (max-device-width: 1440px)
130 140 and (-webkit-min-device-pixel-ratio: 1) {
  141 + .comment-frm.no-c-frm #open_ct_box{ width: 244px;}
  142 + .comment-frm .add-comment{margin-right: 50px;}
  143 + .intro-startup .footer-top .top-intro-bt {
  144 + width: 243px;
  145 + margin-left: -40px;
  146 +}
  147 +.intro-startup .footer-top .top-intro-bt li a{ padding: 6px 12px;}
131 148 .wc-spc-lf-tp{ padding-top: 162px; padding-left: 0px; }
132 149 .form-layout.signup-frm-spc { margin-top: 114px; float:right;}
133 150 .user-profile{padding-right: 90px; width: 675px;}
... ... @@ -142,7 +159,7 @@ and (-webkit-min-device-pixel-ratio: 1) {
142 159  
143 160  
144 161  
145   -.intro-startup .footer-top .top-intro-bt li a{ padding: 6px 6px;}
  162 +.intro-startup .footer-top .top-intro-bt li a{ padding: 6px 12px;}
146 163 /* no comments */
147 164  
148 165 .c-with-photos{ margin-left: -70px;}
... ... @@ -166,7 +183,7 @@ and (-webkit-min-device-pixel-ratio: 1) {
166 183 left: 7%;
167 184 }
168 185 .ft-comments-group{ margin-left:0px; width: 100%;}
169   -.intro-startup .footer-top .top-intro-bt li a{ padding: 6px 6px;}
  186 +
170 187 .comment-frm .frm-wdth{ padding-right: 20px;}
171 188  
172 189  
... ... @@ -267,7 +284,7 @@ and (-webkit-min-device-pixel-ratio: 1) {
267 284 and (min-device-width: 1024px)
268 285 and (max-device-width: 1366px)
269 286 and (-webkit-min-device-pixel-ratio: 2) {
270   - .main-wrp{background-position: bottom 100px left -100px !important;}
  287 + .main-wrp{background-position: bottom -10px left -100px !important;}
271 288 .replies-wrp{ width: 760px;}
272 289 .insights-spc {
273 290 padding: 0 30px;
... ...
src/assets/images/calendar-1.svg
Diff comments   View file @1c575da
... ... @@ -0,0 +1,8 @@
  1 +<svg xmlns="http://www.w3.org/2000/svg" width="12.7" height="14" viewBox="0 0 12.7 14">
  2 + <g id="calendar" transform="translate(-0.5 -0.5)">
  3 + <path id="Path_3" data-name="Path 3" d="M11.4,2.3H2.3A1.3,1.3,0,0,0,1,3.6v9.1A1.3,1.3,0,0,0,2.3,14h9.1a1.3,1.3,0,0,0,1.3-1.3V3.6A1.3,1.3,0,0,0,11.4,2.3Z" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
  4 + <path id="Path_4" data-name="Path 4" d="M9.45,1V3.6" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
  5 + <path id="Path_5" data-name="Path 5" d="M4.25,1V3.6" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
  6 + <path id="Path_6" data-name="Path 6" d="M1,6.2H12.7" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
  7 + </g>
  8 +</svg>
... ...
src/assets/images/calendar.png
Diff comments   View file @1c575da

264 Bytes
src/assets/images/card-bg-1.png
Diff comments   View file @1c575da

477 Bytes
src/assets/images/eye-1.svg
Diff comments   View file @1c575da
... ... @@ -0,0 +1,6 @@
  1 +<svg xmlns="http://www.w3.org/2000/svg" width="16.009" height="11.915" viewBox="0 0 16.009 11.915">
  2 + <g id="eye" transform="translate(-0.403 -0.642)">
  3 + <path id="Path_1" data-name="Path 1" d="M.9,6.6s2.729-5.458,7.5-5.458,7.5,5.458,7.5,5.458-2.729,5.458-7.5,5.458S.9,6.6.9,6.6Z" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
  4 + <path id="Path_2" data-name="Path 2" d="M8.407,8.646A2.047,2.047,0,1,0,6.36,6.6,2.047,2.047,0,0,0,8.407,8.646Z" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
  5 + </g>
  6 +</svg>
... ...
src/assets/images/eye.png
Diff comments   View file @1c575da

385 Bytes
src/assets/images/star-1.svg
Diff comments   View file @1c575da
... ... @@ -0,0 +1,3 @@
  1 +<svg xmlns="http://www.w3.org/2000/svg" width="14" height="13.363" viewBox="0 0 14 13.363">
  2 + <path id="star" d="M7.5,1,9.509,5.069,14,5.726,10.75,8.891l.767,4.472L7.5,11.25,3.483,13.363,4.25,8.891,1,5.726l4.491-.657Z" transform="translate(-0.5 -0.5)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
  3 +</svg>
... ...
src/assets/images/star.png
Diff comments   View file @1c575da

337 Bytes
src/assets/images/upload-cloud.svg
Diff comments   View file @1c575da
... ... @@ -0,0 +1,6 @@
  1 +<svg width="24" height="20" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
  2 +<path d="M16.0054 13.9971L12.0054 9.99707L8.00537 13.9971" stroke="#514DA7" stroke-linecap="round" stroke-linejoin="round"/>
  3 +<path d="M12.0054 9.99707V18.9971" stroke="#514DA7" stroke-linecap="round" stroke-linejoin="round"/>
  4 +<path d="M20.3953 16.3875C21.3707 15.8558 22.1412 15.0144 22.5852 13.9962C23.0292 12.9779 23.1215 11.8408 22.8475 10.7642C22.5735 9.68769 21.9488 8.73305 21.072 8.05099C20.1952 7.36892 19.1162 6.99828 18.0053 6.99754H16.7453C16.4426 5.82678 15.8785 4.73988 15.0953 3.81854C14.3121 2.89719 13.3302 2.16539 12.2234 1.67815C11.1167 1.19091 9.91388 0.960901 8.70545 1.00542C7.49701 1.04995 6.3144 1.36784 5.24651 1.93521C4.17862 2.50257 3.25324 3.30465 2.53995 4.28112C1.82666 5.2576 1.34402 6.38308 1.12831 7.57294C0.912601 8.76279 0.969437 9.98607 1.29454 11.1508C1.61965 12.3155 2.20457 13.3914 3.00533 14.2975" stroke="#514DA7" stroke-linecap="round" stroke-linejoin="round"/>
  5 +<path d="M16.0054 13.9971L12.0054 9.99707L8.00537 13.9971" stroke="#514DA7" stroke-linecap="round" stroke-linejoin="round"/>
  6 +</svg>
... ...
src/components/Profile.vue
Diff comments   View file @1c575da
... ... @@ -13,10 +13,8 @@
13 13 <ul>
14 14 <li>
15 15 <a href="javasript:void(0);"
16   - ><img src="../assets/images/replace.svg" /><span
17   - >Replace Avatar</span
18   - ></a
19   - >
  16 + ><img src="../assets/images/upload-cloud.svg" /><span
  17 + >Upload Avatar</span></a>
20 18 </li>
21 19 <li>
22 20 <a href="javasript:void(0);" @click="getRandomAvatar()"
... ... @@ -560,9 +558,9 @@
560 558 <h1>{{ study.intro.name }}</h1>
561 559 <div class="user-views">
562 560 <ul>
563   - <li><img src="../assets/images/eye.svg" class="spctp" /> {{ study.views }} Views</li>
564   - <li><img src="../assets/images/star.svg" /> {{ study.avgRating }} <span v-if="!study.avgRating">0</span> Rating</li>
565   - <li><img src="../assets/images/calendar.svg" /> {{ moment(study.createdAt).format("DD MMM YYYY") }}</li>
  561 + <li><img src="../assets/images/eye-1.svg" class="spctp" /> {{ study.views }} Views</li>
  562 + <li><img src="../assets/images/star-1.svg" /> {{ study.avgRating }} <span v-if="!study.avgRating">0</span> Rating</li>
  563 + <li><img src="../assets/images/calendar-1.svg" /> {{ moment(study.createdAt).format("DD MMM YYYY") }}</li>
566 564 </ul>
567 565  
568 566 </div><!-- user views -->
... ...