kasper.space / lumix
[READ-ONLY] Mirror of https://github.com/probablykasper/lumix. Art website (unfinished)
art website
0
Fork 0

Configure Feed

Select the types of activity you want to include in your feed.

Tabs on profile pages (non functional)

Kasper Henningsen (Mar 19, 2018, 7:55 PM +0100) f2209378 c091f531

+95 -13
+1 -1
web/node/routes.js
··· 322 322 if (user) { 323 323 user.formattedDate = formatDate(user.dateCreated, "MMMM Dth, YYYY"); 324 324 callback({ 325 - user: user, 325 + userPage: user, 326 326 }); 327 327 } else { 328 328 callback({
+12 -6
web/pug/logged-out/user.pug
··· 1 1 header.profile-header 2 - img.profile-image(src= user.profilePictureURL) 2 + img.profile-image(src= userPage.profilePictureURL) 3 3 .profile-container 4 - //- p.displayname=user.displayname 5 - p.displayname= user.displayname 4 + p.displayname= userPage.displayname 6 5 .row 7 - p.followers <span>!{user.followers}</span> followers 8 - p.date= "Joined "+user.formattedDate 9 - p.bio= user.bio 6 + p.followers <span>!{userPage.followers}</span> followers 7 + p.date= "Joined "+userPage.formattedDate 8 + p.bio= userPage.bio 9 + .tab-menu.user-page 10 + button.button.tab.images-tab <span>x</span> Images 11 + button.button.tab.liked-tab <span>x</span> Liked 12 + button.button.tab.collections-tab <span>x</span> Collections 13 + button.button.tab.following-tab <span>x</span> Following 14 + button.button.tab.followers-tab <span>x</span> Followers 15 + button.right-side.highlighted-button.follow Follow 10 16 .images-container 11 17 //- each image in images 12 18 //- .image
+24
web/sass/buttons.sass
··· 19 19 height: 2px 20 20 width: 0% 21 21 border-radius: 5px 22 + .highlighted-button 23 + padding: 12px 20px 24 + background-color: $blacker 25 + border-radius: 5px 26 + color: $white-darker 27 + 28 + position: relative 29 + display: block 30 + &:hover::before 31 + width: 50% 32 + &:focus::before 33 + width: 80% 34 + transform: translate(-50%, -2px) 35 + &::before 36 + content: "" 37 + position: absolute 38 + transition: $transition-20 all 39 + background-color: $gray-line-light 40 + bottom: 0px 41 + transform: translate(-50%, 0px) 42 + left: 50% 43 + height: 2px 44 + width: 0% 45 + border-radius: 5px
+2
web/sass/global.sass
··· 8 8 9 9 @import "home.sass" 10 10 @import "user.sass" 11 + 11 12 @import "buttons.sass" 12 13 @import "forms.sass" 13 14 @import "images.sass" 15 + @import "tab-menu.sass" 14 16 // @import "buttons.sass" 15 17 // @import "cards.sass"
+11
web/sass/tab-menu.sass
··· 1 + .tab-menu 2 + display: flex 3 + margin-right: auto 4 + margin-left: auto 5 + margin-bottom: 15px 6 + .button.tab 7 + margin-right: 10px 8 + .right-side 9 + margin-left: auto 10 + .tab-menu.user-page 11 + width: 800px
+4 -2
web/sass/variables.sass
··· 1 1 $header-height: 70px 2 2 $white: #FFFFFF 3 - $white-dark: rgba(#000000, 0.05) 4 - $white-darker: rgba(#000000, 0.10) 3 + $white-dark: #F2F2F2 4 + $white-darker: #E5E5E5 5 5 $gray-line: #717171 6 + $gray-line-light: #CBCBCB 6 7 $black: #3F3F3F 8 + $blacker: #2F2F2F 7 9 $tooltip-bg: #3c4554 8 10 9 11 // shadow elevation
web/static/default-pp.png

This is a binary file and will not be displayed.

+41 -4
web/static/global.css
··· 95 95 padding: 10px 14px; 96 96 border-radius: 5px; 97 97 width: 250px; 98 - background-color: rgba(0, 0, 0, 0.05); } 98 + background-color: #F2F2F2; } 99 99 header.site-header .right-side-header { 100 100 display: flex; 101 101 align-items: center; ··· 160 160 font-size: 15px; 161 161 color: #3F3F3F; } 162 162 header.site-header .right-side-header .account-icon-container .account-box a.account-box-item:hover { 163 - background-color: rgba(0, 0, 0, 0.05); } 163 + background-color: #F2F2F2; } 164 164 165 165 html .center-container { 166 166 display: flex; ··· 222 222 width: 0%; 223 223 border-radius: 5px; } 224 224 225 + html .highlighted-button { 226 + padding: 12px 20px; 227 + background-color: #2F2F2F; 228 + border-radius: 5px; 229 + color: #E5E5E5; 230 + position: relative; 231 + display: block; } 232 + html .highlighted-button:hover::before { 233 + width: 50%; } 234 + html .highlighted-button:focus::before { 235 + width: 80%; 236 + transform: translate(-50%, -2px); } 237 + html .highlighted-button::before { 238 + content: ""; 239 + position: absolute; 240 + transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1) all; 241 + background-color: #CBCBCB; 242 + bottom: 0px; 243 + transform: translate(-50%, 0px); 244 + left: 50%; 245 + height: 2px; 246 + width: 0%; 247 + border-radius: 5px; } 248 + 225 249 html .form-container { 226 250 position: absolute; 227 251 height: calc(100% - 70px); ··· 251 275 margin-bottom: 15px; 252 276 border-radius: 5px; 253 277 width: 250px; 254 - background-color: rgba(0, 0, 0, 0.05); } 278 + background-color: #F2F2F2; } 255 279 html .form-container .form input#files { 256 280 display: none; } 257 281 ··· 311 335 width: 600px; } 312 336 313 337 html .form-container.upload-form .tags-box { 314 - background-color: rgba(0, 0, 0, 0.05); 338 + background-color: #F2F2F2; 315 339 display: flex; 316 340 flex-wrap: wrap; 317 341 padding-bottom: calc(10px - 6px); ··· 488 512 background-image: linear-gradient(180deg, transparent 0, transparent 60%, rgba(0, 0, 0, 0.3)); } 489 513 html .images-container .sample-image { 490 514 display: none; } 515 + 516 + html .tab-menu { 517 + display: flex; 518 + margin-right: auto; 519 + margin-left: auto; 520 + margin-bottom: 15px; } 521 + html .tab-menu .button.tab { 522 + margin-right: 10px; } 523 + html .tab-menu .right-side { 524 + margin-left: auto; } 525 + 526 + html .tab-menu.user-page { 527 + width: 800px; }