Skip to content

Commit beea391

Browse files
mlochbaummlochbaum
authored
Merge pull request #20 from MRSallee/master
Minor fixes and improvements
2 parents ad84cdf + ddfb3c3 commit beea391

File tree

2 files changed

+47
-14
lines changed

2 files changed

+47
-14
lines changed

‎graphtool.js

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1523,10 +1523,10 @@ d3.json(typeof PHONE_BOOK !== "undefined" ? PHONE_BOOK
15231523
emb = "embed";
15241524
baseURL = url.split("?").shift();
15251525
if (url.includes(par) && url.includes(emb)) {
1526-
initReq = decodeURI(url.replace(/_/g," ").split(par).pop()).split(",");
1526+
initReq = decodeURIComponent(url.replace(/_/g," ").split(par).pop()).split(",");
15271527
loadFromShare = 2;
15281528
} else if (url.includes(par)) {
1529-
initReq = decodeURI(url.replace(/_/g," ").split(par).pop()).split(",");
1529+
initReq = decodeURIComponent(url.replace(/_/g," ").split(par).pop()).split(",");
15301530
loadFromShare = 1;
15311531
}
15321532
}
@@ -2131,14 +2131,18 @@ if (accessories) { addAccessories(); }
21312131
function addHeader() {
21322132
let graphToolContainer = document.querySelector("div.graphtool"),
21332133
altHeaderElem = document.createElement("header"),
2134+
headerButton = document.createElement("button"),
21342135
headerLogoElem = document.createElement("div"),
21352136
headerLogoLink = document.createElement("a"),
21362137
headerLogoImg = document.createElement("img"),
21372138
linksList = document.createElement("ul");
21382139

2140+
headerButton.className = "header-button";
21392141
headerLogoElem.className = "logo";
21402142
headerLogoLink.setAttribute('href', site_url);
21412143
headerLogoImg.setAttribute("src", headerLogoImgUrl);
2144+
2145+
altHeaderElem.append(headerButton);
21422146
headerLogoLink.append(headerLogoImg);
21432147
headerLogoElem.append(headerLogoLink);
21442148
altHeaderElem.setAttribute("data-links", "");
@@ -2160,7 +2164,7 @@ function addHeader() {
21602164
linksList.append(linkContainerElem);
21612165
})
21622166

2163-
altHeaderElem.addEventListener("click", function() {
2167+
headerButton.addEventListener("click", function() {
21642168
let headerLinksState = altHeaderElem.getAttribute("data-links");
21652169

21662170
if (headerLinksState === "expanded") {

‎style-alt.css

Lines changed: 40 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -185,74 +185,98 @@ div.graphBox[data-animated="true"] g[mask="url(#graphFade)"] path:not(.target) {
185185
Graph labels *****/
186186

187187
/* top-left */
188+
svg#fr-graph[data-labels-position="top-left"] > rect + g.lineLabel + g.lineLabel + g.lineLabel + g.lineLabel + g.lineLabel:nth-last-child(1),
188189
svg#fr-graph[data-labels-position="top-left"] > rect + g.lineLabel + g.lineLabel + g.lineLabel + g.lineLabel:nth-last-child(1),
189190
svg#fr-graph[data-labels-position="top-left"] > rect + g.lineLabel + g.lineLabel + g.lineLabel:nth-last-child(1),
190191
svg#fr-graph[data-labels-position="top-left"] > rect + g.lineLabel + g.lineLabel:nth-last-child(1),
191192
svg#fr-graph[data-labels-position="top-left"] > rect + g.lineLabel:nth-last-child(1) {
192193
transform: translate(40px, 8px);
193194
}
194195

196+
svg#fr-graph[data-labels-position="top-left"] > rect + g.lineLabel + g.lineLabel + g.lineLabel + g.lineLabel:nth-last-child(2),
195197
svg#fr-graph[data-labels-position="top-left"] > rect + g.lineLabel + g.lineLabel + g.lineLabel:nth-last-child(2),
196198
svg#fr-graph[data-labels-position="top-left"] > rect + g.lineLabel + g.lineLabel:nth-last-child(2),
197199
svg#fr-graph[data-labels-position="top-left"] rect + g.lineLabel:nth-last-child(2) {
198200
transform: translate(40px, 30px);
199201
}
200202

203+
svg#fr-graph[data-labels-position="top-left"] rect + g.lineLabel + g.lineLabel + g.lineLabel:nth-last-child(3),
201204
svg#fr-graph[data-labels-position="top-left"] rect + g.lineLabel + g.lineLabel:nth-last-child(3),
202205
svg#fr-graph[data-labels-position="top-left"] rect + g.lineLabel:nth-last-child(3) {
203206
transform: translate(40px, 52px);
204207
}
205208

209+
svg#fr-graph[data-labels-position="top-left"] > rect + g.lineLabel + g.lineLabel:nth-last-child(4),
206210
svg#fr-graph[data-labels-position="top-left"] > rect + g.lineLabel:nth-last-child(4) {
207211
transform: translate(40px, 74px);
208212
}
209213

214+
svg#fr-graph[data-labels-position="top-left"] > rect + g.lineLabel:nth-last-child(5) {
215+
transform: translate(40px, 96px);
216+
}
217+
210218
/* bottom-left */
219+
svg#fr-graph[data-labels-position="bottom-left"] > rect + g.lineLabel + g.lineLabel + g.lineLabel + g.lineLabel + g.lineLabel:nth-last-child(1),
211220
svg#fr-graph[data-labels-position="bottom-left"] > rect + g.lineLabel + g.lineLabel + g.lineLabel + g.lineLabel:nth-last-child(1),
212221
svg#fr-graph[data-labels-position="bottom-left"] > rect + g.lineLabel + g.lineLabel + g.lineLabel:nth-last-child(1),
213222
svg#fr-graph[data-labels-position="bottom-left"] > rect + g.lineLabel + g.lineLabel:nth-last-child(1),
214223
svg#fr-graph[data-labels-position="bottom-left"] > rect + g.lineLabel:nth-last-child(1) {
215224
transform: translate(40px, 296px);
216225
}
217226

227+
svg#fr-graph[data-labels-position="bottom-left"] > rect + g.lineLabel + g.lineLabel + g.lineLabel + g.lineLabel:nth-last-child(2),
218228
svg#fr-graph[data-labels-position="bottom-left"] > rect + g.lineLabel + g.lineLabel + g.lineLabel:nth-last-child(2),
219229
svg#fr-graph[data-labels-position="bottom-left"] > rect + g.lineLabel + g.lineLabel:nth-last-child(2),
220230
svg#fr-graph[data-labels-position="bottom-left"] rect + g.lineLabel:nth-last-child(2) {
221231
transform: translate(40px, 274px);
222232
}
223233

234+
svg#fr-graph[data-labels-position="bottom-left"] rect + g.lineLabel + g.lineLabel + g.lineLabel:nth-last-child(3),
224235
svg#fr-graph[data-labels-position="bottom-left"] rect + g.lineLabel + g.lineLabel:nth-last-child(3),
225236
svg#fr-graph[data-labels-position="bottom-left"] rect + g.lineLabel:nth-last-child(3) {
226237
transform: translate(40px, 252px);
227238
}
228239

240+
svg#fr-graph[data-labels-position="bottom-left"] > rect + g.lineLabel + g.lineLabel:nth-last-child(4),
229241
svg#fr-graph[data-labels-position="bottom-left"] > rect + g.lineLabel:nth-last-child(4) {
230242
transform: translate(40px, 230px);
231243
}
232244

245+
svg#fr-graph[data-labels-position="bottom-left"] > rect + g.lineLabel:nth-last-child(5) {
246+
transform: translate(40px, 208px);
247+
}
248+
233249
/* bottom-right */
250+
svg#fr-graph[data-labels-position="bottom-right"] > rect + g.lineLabel + g.lineLabel + g.lineLabel + g.lineLabel + g.lineLabel:nth-last-child(1),
234251
svg#fr-graph[data-labels-position="bottom-right"] > rect + g.lineLabel + g.lineLabel + g.lineLabel + g.lineLabel:nth-last-child(1),
235252
svg#fr-graph[data-labels-position="bottom-right"] > rect + g.lineLabel + g.lineLabel + g.lineLabel:nth-last-child(1),
236253
svg#fr-graph[data-labels-position="bottom-right"] > rect + g.lineLabel + g.lineLabel:nth-last-child(1),
237254
svg#fr-graph[data-labels-position="bottom-right"] > rect + g.lineLabel:nth-last-child(1) {
238255
transform: translate(500px, 296px);
239256
}
240257

258+
svg#fr-graph[data-labels-position="bottom-right"] > rect + g.lineLabel + g.lineLabel + g.lineLabel + g.lineLabel:nth-last-child(2),
241259
svg#fr-graph[data-labels-position="bottom-right"] > rect + g.lineLabel + g.lineLabel + g.lineLabel:nth-last-child(2),
242260
svg#fr-graph[data-labels-position="bottom-right"] > rect + g.lineLabel + g.lineLabel:nth-last-child(2),
243261
svg#fr-graph[data-labels-position="bottom-right"] rect + g.lineLabel:nth-last-child(2) {
244262
transform: translate(500px, 274px);
245263
}
246264

265+
svg#fr-graph[data-labels-position="bottom-right"] rect + g.lineLabel + g.lineLabel + g.lineLabel:nth-last-child(3),
247266
svg#fr-graph[data-labels-position="bottom-right"] rect + g.lineLabel + g.lineLabel:nth-last-child(3),
248267
svg#fr-graph[data-labels-position="bottom-right"] rect + g.lineLabel:nth-last-child(3) {
249268
transform: translate(500px, 252px);
250269
}
251270

271+
svg#fr-graph[data-labels-position="bottom-right"] > rect + g.lineLabel + g.lineLabel:nth-last-child(4),
252272
svg#fr-graph[data-labels-position="bottom-right"] > rect + g.lineLabel:nth-last-child(4) {
253273
transform: translate(500px, 230px);
254274
}
255275

276+
svg#fr-graph[data-labels-position="bottom-right"] > rect + g.lineLabel:nth-last-child(5) {
277+
transform: translate(500px, 208px);
278+
}
279+
256280

257281

258282
/*****
@@ -310,6 +334,10 @@ header.header {
310334
background-color: var(--font-color-primary);
311335
}
312336

337+
button.header-button {
338+
display: none;
339+
}
340+
313341
div.logo {
314342
display: flex;
315343
justify-content: center;
@@ -346,7 +374,7 @@ ul.header-links {
346374
align-items: flex-start;
347375

348376
box-sizing: border-box;
349-
flex: auto 0 1;
377+
flex: 100% 0 1;
350378
height: 100%;
351379
margin: auto;
352380
padding: 0 16px;
@@ -369,6 +397,7 @@ ul.header-links li {
369397
margin: 0;
370398

371399
list-style: none;
400+
white-space: nowrap;
372401
}
373402

374403
ul.header-links li + li {
@@ -2976,17 +3005,13 @@ Responsive styles *****/
29763005
display: none;
29773006
}
29783007

2979-
header.header:after {
2980-
position: absolute;
2981-
2982-
top: 6px;
2983-
left: 6px;
2984-
3008+
button.header-button {
29853009
content: '';
29863010
box-sizing: border-box;
29873011
display: block;
29883012
width: 36px;
29893013
height: 36px;
3014+
margin: 0 0 0 6px;
29903015

29913016
background-color: var(--background-color-contrast-more);
29923017
mask: var(--icon-hamburger);
@@ -3002,8 +3027,12 @@ Responsive styles *****/
30023027
}
30033028

30043029
div.logo {
3005-
flex: calc(100% - 116px) 0 0;
3006-
margin: auto;
3030+
flex: auto;
3031+
margin: 0 42px 0 0;
3032+
}
3033+
3034+
div.logo a {
3035+
width: 80%;
30073036
}
30083037

30093038
ul.header-links {
@@ -3012,15 +3041,15 @@ Responsive styles *****/
30123041
left: 0;
30133042
z-index: 2;
30143043

3044+
width: 100%;
30153045
flex-direction: column;
30163046
justify-content: flex-start;
30173047
align-items: center;
30183048

30193049
box-sizing: border-box;
3020-
width: 100vw;
30213050
height: calc(100vh - 49px);
30223051
max-height: -webkit-fill-available;
3023-
padding: 16px;
3052+
padding: 0 16px 16px 16px;
30243053

30253054
background-color: var(--background-color);
30263055

0 commit comments

Comments
 (0)