Worked on header · kasper.space/lumix@038b435

+6 -6

web/js/global.js

··· 1 - // search 2 - const searchField = $(".search")[0]; 3 - $(".search").keypress((e) => { 4 - if (e.which == 13) { 5 - const searchQuery = searchField.value; 6 - window.location = `/search/${searchQuery}`; 1 + $(document).ready(() => { 2 + 3 + require("./ui"); 4 + if (loggedIn) { 5 + 7 6 } 7 + 8 8 });

+22

web/js/ui.js

··· 1 + // search, press enter 2 + const searchField = $(".search")[0]; 3 + $(".search").keypress((e) => { 4 + if (e.which == 13) { 5 + const searchQuery = searchField.value; 6 + window.location = `/search/${searchQuery}`; 7 + } 8 + }); 9 + 10 + if (loggedIn) { 11 + 12 + // press profile pic to toggle account box 13 + $("img.account-icon").on("click", () => { 14 + $(".account-box").toggleClass("visible"); 15 + }); 16 + $(document).on("click", (e) => { 17 + if (!$(e.target).parents(".account-icon-container").length) { 18 + $(".account-box").removeClass("visible"); 19 + } 20 + }); 21 + 22 + }

+1 -1

web/node/routes.js

··· 72 72 variables.profilePictureURL = req.user.profilePictureURL; 73 73 variables.transactions = req.user.transactions; 74 74 render("logged-in/"+pugFile, (err) => { 75 - logErr(72001, err); 75 + // logErr(72001, err); 76 76 render("logged-out/"+loggedOutPugFile, (err) => { 77 77 logErr(72002, err); 78 78 });

+23 -21

web/pug/template.pug

··· 8 8 link(rel='stylesheet', type='text/css', href='/global.css') 9 9 body 10 10 header.site-header 11 - a(href="/").header-logo Lumix 11 + .left-side-header 12 + a(href="/").header-logo Lumix 12 13 input(placeholder="Search").search 13 - .menu-bar 14 - a(href="/login").menu-bar-item Login 15 - //- if profilePictureURL 16 - //- .account-icon 17 - //- img.account-icon(src=profilePictureURL) 18 - //- .account-box 19 - //- .spacer 20 - //- a.account-box-item.settings(href="/settings") 21 - //- <svg fill="#3F3F3F" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> 22 - //- <path d="M0 0h24v24H0z" fill="none"/> 23 - //- <path d="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"/> 24 - //- </svg> 25 - //- .item-text.settings Settings 26 - //- a.account-box-item.logout(href="/logout") 27 - //- <svg fill="#3F3F3F" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> 28 - //- <path d="M0 0h24v24H0z" fill="none"/> 29 - //- <path d="M10.09 15.59L11.5 17l5-5-5-5-1.41 1.41L12.67 11H3v2h9.67l-2.58 2.59zM19 3H5c-1.11 0-2 .9-2 2v4h2V5h14v14H5v-4H3v4c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/> 30 - //- </svg> 31 - //- .item-text.logout Logout 32 - //- .spacer 14 + .right-side-header 15 + if !loggedIn 16 + a(href="/login").menu-bar-item Login 17 + if loggedIn 18 + .account-icon-container 19 + img.account-icon(src=profilePictureURL) 20 + .account-box 21 + .spacer 22 + a.account-box-item.settings(href="/settings") 23 + <svg fill="#3F3F3F" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> 24 + <path d="M0 0h24v24H0z" fill="none"/> 25 + <path d="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"/> 26 + </svg> 27 + .item-text.settings Settings 28 + a.account-box-item.logout(href="/logout") 29 + <svg fill="#3F3F3F" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> 30 + <path d="M0 0h24v24H0z" fill="none"/> 31 + <path d="M10.09 15.59L11.5 17l5-5-5-5-1.41 1.41L12.67 11H3v2h9.67l-2.58 2.59zM19 3H5c-1.11 0-2 .9-2 2v4h2V5h14v14H5v-4H3v4c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/> 32 + </svg> 33 + .item-text.logout Logout 34 + .spacer 33 35 34 36 main.page-container !{pageHTML} 35 37 script(src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js")

+53 -6

web/sass/template.sass

··· 9 9 header.site-header 10 10 z-index: 5 11 11 height: $header-height 12 - // background-color: #16C19D 13 - // background-color: #5A73E2 14 - // background-color: #2A2A2A 15 12 display: flex 16 13 align-items: center 17 14 justify-content: space-between 18 15 padding: 0px 20px 19 16 color: $black 20 - a.header-logo 21 - font-size: 38px 22 - padding: 8px 17 + .left-side-header, .right-side-header 18 + width: 200px 19 + padding: 0px 8px 20 + .left-side-header 21 + display: flex 22 + align-items: center 23 + a.header-logo 24 + font-size: 38px 25 + padding: 8px 23 26 input.search 24 27 padding: 10px 14px 25 28 border-radius: 5px 26 29 width: 250px 27 30 background-color: $white-dark 31 + .right-side-header 32 + display: flex 33 + align-items: center 34 + justify-content: flex-end 35 + .account-icon-container 36 + max-height: 100% 37 + position: relative 38 + img.account-icon 39 + margin: 10px 0px 40 + cursor: pointer 41 + .account-box 42 + z-index: 10 43 + background-color: #FFFFFF 44 + box-shadow: $shadow-4 45 + position: absolute 46 + right: 0px 47 + top: calc(100% - 8px) 48 + overflow: hidden 49 + 50 + height: 0px 51 + width: 100px 52 + pointer-events: none 53 + transform-origin: right top 54 + transition: $transition-20-out all 55 + &.visible 56 + height: 120px 57 + width: 200px 58 + pointer-events: all 59 + transition: $transition-30-in all 60 + .spacer 61 + height: 10px 62 + a.account-box-item 63 + height: 50px 64 + display: flex 65 + align-items: center 66 + padding: 0px 18px 67 + flex-grow: 1 68 + cursor: pointer 69 + .item-text 70 + margin-left: 4px 71 + font-size: 15px 72 + color: $black 73 + &:hover 74 + background-color: #F2F2F2

+1 -1

web/static/global.css

··· 1 - table{border-collapse:collapse;border-spacing:0}*{color:#3f3f3f;font:inherit;margin:0;padding:0;border:0;font-size:16px;vertical-align:baseline;outline:none}h1{font-size:48px}h2{font-size:38px}h3{font-size:28px}h4{font-size:22px}img{display:block}a:active,a:hover,a:link,a:visited{color:inherit;text-decoration:none}article,aside,details,figcaption,figure,footer,header,hgroup,input,menu,nav,section,textarea{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}html{font-family:Rubik,sans-serif}body{background-color:#fff;display:grid}main.page-container{margin:30px}header.site-header{z-index:5;height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;color:#3f3f3f}header.site-header a.header-logo{font-size:38px;padding:8px}header.site-header input.search{padding:10px 14px;border-radius:5px;width:250px;background-color:#f9f9f9}html .center-container{position:absolute;width:100%;height:100%;min-height:400px;left:0;top:0;display:flex;justify-content:center;align-items:center;flex-direction:column}html .center-container p.center-logo{font-size:128px}html .center-container p.tagline{font-size:16px} 1 + table{border-collapse:collapse;border-spacing:0}*{color:#3f3f3f;font:inherit;margin:0;padding:0;border:0;font-size:16px;vertical-align:baseline;outline:none}h1{font-size:48px}h2{font-size:38px}h3{font-size:28px}h4{font-size:22px}img{display:block}a:active,a:hover,a:link,a:visited{color:inherit;text-decoration:none}article,aside,details,figcaption,figure,footer,header,hgroup,input,menu,nav,section,textarea{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}html{font-family:Rubik,sans-serif}body{background-color:#fff;display:grid}main.page-container{margin:30px}header.site-header{z-index:5;height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;color:#3f3f3f}header.site-header .left-side-header,header.site-header .right-side-header{width:200px;padding:0 8px}header.site-header .left-side-header{display:flex;align-items:center}header.site-header .left-side-header a.header-logo{font-size:38px;padding:8px}header.site-header input.search{padding:10px 14px;border-radius:5px;width:250px;background-color:#f9f9f9}header.site-header .right-side-header{display:flex;align-items:center;justify-content:flex-end}header.site-header .right-side-header .account-icon-container{max-height:100%;position:relative}header.site-header .right-side-header .account-icon-container img.account-icon{margin:10px 0;cursor:pointer}header.site-header .right-side-header .account-icon-container .account-box{z-index:10;background-color:#fff;box-shadow:0 4px 8px 0 rgba(0,0,0,.24);position:absolute;right:0;top:calc(100% - 8px);overflow:hidden;height:0;width:100px;pointer-events:none;transform-origin:right top;transition:all .2s cubic-bezier(.4,0,1,1)}header.site-header .right-side-header .account-icon-container .account-box.visible{height:120px;width:200px;pointer-events:all;transition:all .3s cubic-bezier(0,0,.2,1)}header.site-header .right-side-header .account-icon-container .account-box .spacer{height:10px}header.site-header .right-side-header .account-icon-container .account-box a.account-box-item{height:50px;display:flex;align-items:center;padding:0 18px;flex-grow:1;cursor:pointer}header.site-header .right-side-header .account-icon-container .account-box a.account-box-item .item-text{margin-left:4px;font-size:15px;color:#3f3f3f}header.site-header .right-side-header .account-icon-container .account-box a.account-box-item:hover{background-color:#f2f2f2}html .center-container{position:absolute;width:100%;height:100%;min-height:400px;left:0;top:0;display:flex;justify-content:center;align-items:center;flex-direction:column}html .center-container p.center-logo{font-size:128px}html .center-container p.tagline{font-size:16px}

+27 -1

web/static/global.js

··· 70 70 "use strict"; 71 71 72 72 73 - // search 73 + $(document).ready(function () { 74 + 75 + __webpack_require__(1); 76 + if (loggedIn) {} 77 + }); 78 + 79 + /***/ }), 80 + /* 1 */ 81 + /***/ (function(module, exports, __webpack_require__) { 82 + 83 + "use strict"; 84 + 85 + 86 + // search, press enter 74 87 var searchField = $(".search")[0]; 75 88 $(".search").keypress(function (e) { 76 89 if (e.which == 13) { ··· 78 91 window.location = "/search/" + searchQuery; 79 92 } 80 93 }); 94 + 95 + if (loggedIn) { 96 + 97 + // press profile pic to toggle account box 98 + $("img.account-icon").on("click", function () { 99 + $(".account-box").toggleClass("visible"); 100 + }); 101 + $(document).on("click", function (e) { 102 + if (!$(e.target).parents(".account-icon-container").length) { 103 + $(".account-box").removeClass("visible"); 104 + } 105 + }); 106 + } 81 107 82 108 /***/ }) 83 109 /******/ ]);

Configure Feed

Configure Feed