From 55501ea1d085647e65ed9160bf1ee2d8612a3ded Mon Sep 17 00:00:00 2001
From: Patrick Zimmermann <68734204+DriftingSands@users.noreply.github.com>
Date: Tue, 19 Sep 2023 11:49:32 +0200
Subject: [PATCH 1/2] Query initialization fixes (#252)
---
scripts/scripts.js | 13 +++++++------
1 file changed, 7 insertions(+), 6 deletions(-)
diff --git a/scripts/scripts.js b/scripts/scripts.js
index 6decfef..14bbc72 100644
--- a/scripts/scripts.js
+++ b/scripts/scripts.js
@@ -612,11 +612,13 @@ window.store = new (class {
.find((className) => className.endsWith(spreadsheet));
if (queryClassName) {
- const query = queryClassName.replace(`-${spreadsheet}`, '');
- if (!this._queryMap[query]) {
- this._queryMap[query] = {
+ const sheetName = queryClassName.replace(`-${spreadsheet}`, '');
+ if (!this._queryMap[queryClassName]) {
+ this._queryMap[queryClassName] = {
spreadsheet,
+ sheetName,
limit: 0,
+ query: queryClassName,
};
}
}
@@ -627,8 +629,7 @@ window.store = new (class {
const queryNames = Object.keys(this._queryMap);
this.blockNames.forEach((blockName) => {
queryNames.forEach((queryName) => {
- const { spreadsheet } = this._queryMap[queryName];
- document.querySelectorAll(`main .${blockName}.${queryName}-${spreadsheet}.block`).forEach((blockEl) => {
+ document.querySelectorAll(`main .${queryName}.block[data-block-name="${blockName}"]`).forEach((blockEl) => {
this._queryMap[queryName].limit += this._blockQueryLimit[blockName](blockEl);
});
});
@@ -691,7 +692,7 @@ Make sure to set a limit for \x1b[31m"${block.dataset.blockName}"\x1b[0m in \x1b
url = queryDetails.mock;
} else {
// Build query sheet url
- url = `/${this._spreadsheets[queryDetails.spreadsheet]}.json?sheet=${query}`;
+ url = `/${this._spreadsheets[queryDetails.spreadsheet]}.json?sheet=${queryDetails.sheetName}`;
}
const dispatchData = (dispatchId) => {
From 808bafe7b1f71826aaa2eab48b562352a2730646 Mon Sep 17 00:00:00 2001
From: Patrick Zimmermann <68734204+DriftingSands@users.noreply.github.com>
Date: Tue, 19 Sep 2023 11:55:37 +0200
Subject: [PATCH 2/2] Header css fixes (#253)
---
blocks/header/header.css | 56 +++++++++++++++++++++++++++++---
blocks/header/header.js | 69 ++++++----------------------------------
styles/styles.css | 12 +++----
3 files changed, 67 insertions(+), 70 deletions(-)
diff --git a/blocks/header/header.css b/blocks/header/header.css
index 3511d3d..f648247 100644
--- a/blocks/header/header.css
+++ b/blocks/header/header.css
@@ -208,6 +208,10 @@
height: 70px;
}
+body:not(.landing-page) .header .header-bottom-bar {
+ display: none;
+}
+
@media (max-width: 1024px) {
.header .header-bottom-bar {
height: 65px;
@@ -302,8 +306,15 @@
border: none;
}
+@keyframes backdrop-opacity {
+ from {opacity: 1;}
+ to {opacity: 0.9;}
+}
+
.login-dialog::backdrop {
- background-color: rgb(0 0 0 / 70%)
+ background: #121214;
+ opacity: 0.9;
+ animation: backdrop-opacity .5s ;
}
.login-dialog .login-dialog-content {
@@ -332,8 +343,12 @@
position: absolute;
right: 15px;
top: 15px;
+ width: 30px;
+ height: 30px;
font-size: 20px;
cursor: pointer;
+ background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMjkiIHZpZXdCb3g9IjAgMCAzMCAyOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGxpbmUgeDE9IjIxLjgzNTkiIHkxPSIyMC43NDEyIiB4Mj0iOC40MDA4MyIgeTI9IjcuMzA2MTgiIHN0cm9rZT0iIzE1MUMyQyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxsaW5lIHgxPSI4LjQwMDYzIiB5MT0iMjAuOTc4IiB4Mj0iMjEuODM1NyIgeTI9IjcuNTQyOTIiIHN0cm9rZT0iIzE1MUMyQyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=");
+ background-size: 100% 100%;
}
.login-dialog .login-dialog-logo {
@@ -581,13 +596,16 @@
}
.header .search-form {
- background-color: #fff;
+ /* background-color: #fff; */
overflow: hidden;
width: 0;
transition: transform 0.3s, opacity 0.3s, width 0.3s;
opacity: 0;
pointer-events: none;
- transform: translateX(50px);
+
+ /* GD site uses 50px, but this causes a X axis scroll
+ that would need to be handled with javascript. */
+ transform: translateX(14px);
visibility: hidden;
}
@@ -633,6 +651,21 @@
outline: none;
}
+.home-page .header:not(.is-scrolling) .search-form-input {
+ background-color: rgba(21 21 23 / 20%);
+ border: none;
+ color: #fff;
+}
+
+.home-page .header:not(.is-scrolling) .search-form-input::placeholder {
+ color: #fff;
+ opacity: 0.8;
+}
+
+.home-page .header:not(.is-scrolling) .header-cancel-search-button > svg line {
+ stroke: #fff;
+}
+
.header .header-overlay {
position: fixed;
background: rgba(0 0 0 / 50%);
@@ -1138,6 +1171,10 @@
color: #fff;
}
+.home-page .header:not(.is-scrolling) .profile-info-button-login:hover {
+ color: var(--link-hover-color);
+}
+
.header .nav-menu-bottom .profile-info-button-wrapper .profile-info-button-login:hover {
background-color: #151517;
border-color: #151517;
@@ -1184,6 +1221,16 @@
.header .profile-info {
display: flex;
align-items: center;
+ overflow: hidden;
+ width: 65px;
+ text-wrap: nowrap;
+ transition: opacity .3s, width .3s, margin .3s;
+}
+
+.header.has-open-search .profile-info {
+ opacity: 0;
+ width: 0;
+ margin: 0;
}
@media (min-width: 1025px) {
@@ -1204,7 +1251,7 @@
background-color: #f6f6f6;
border-top: 1px solid #e6e6e6;
border-bottom: 1px solid #e6e6e6;
- width: 100vw;
+ width: 100%;
position: absolute;
top: 0;
z-index: 2;
@@ -1231,7 +1278,6 @@
background-color: #fff;
padding: 5px 10px;
border: 1px solid #e6e6e6;
- border-bottom: 0;
}
.leaderboard .o-leaderboard-players-player-score p {
diff --git a/blocks/header/header.js b/blocks/header/header.js
index c4906bc..f58069f 100644
--- a/blocks/header/header.js
+++ b/blocks/header/header.js
@@ -5,6 +5,9 @@ const DEFAULT_NAV = '/golf-nav';
const isHomePage = document.body.classList.contains('home-page');
+const searchIcon = '';
+const searchForm = '';
+
const config = {
setNavTop: true,
searchExposed: false,
@@ -138,7 +141,7 @@ function getNavTemplate() {
@@ -321,7 +298,7 @@ function getHeaderTemplate() {
- X
+
LOG IN