mirror
/
mysticsymbolic.github.io
kopia lustrzana https://github.com/mysticsymbolic/mysticsymbolic.github.io
1
0
Forkuj 0
Kod Zgłoszenia Projekty Wydania Wiki Aktywność

Split up CSS into multiple files and use CSS imports (#206) 

This splits up our `styles.css` file into multiple CSS files that sit alongside the TSX files that use their classes.  All "generic" CSS that isn't used by any one particular component, such as our `thingy` class, is currently being put into `page.css`.

The CSS files are imported via `import` statements in their associated TSX files. As such, this fixes #164.

This also starts formatting our CSS using Prettier.

It also moves some of our `<head>` tags back into `index.html`, reverting a tiny bit of #205, to ensure that some of the metadata can be recognized by browsers, and start loading asynchronously, independently of the page's JavaScript (I see no reason why any of those elements need to change dynamically based on the app's state, so there don't seem to be any downsides to this).
pull/207/head
Atul Varma 2021-07-11 15:59:37 -04:00 zatwierdzone przez GitHub
rodzic 86a39b56e0
commit ea7673f70e
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 4AEE18F83AFDEB23
16 zmienionych plików z 87 dodań i 70 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

1
.gitignore vendored
Wyświetl plik

@ -5,3 +5,4 @@ lib/_svg-vocabulary.ts
lib/**/*.avsc.ts lib/**/*.avsc.ts
dist/browser-main.js dist/browser-main.js
dist/browser-main.js.map dist/browser-main.js.map
dist/browser-main.css

4
.vscode/settings.json vendored
Wyświetl plik

@ -17,4 +17,8 @@
"editor.formatOnSave": true, "editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode" "editor.defaultFormatter": "esbenp.prettier-vscode"
}, },
"[css]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
} }

1
__mocks__/css-mock.js 100644
Wyświetl plik

@ -0,0 +1 @@
module.exports = {};

3
dist/index.html vendored
Wyświetl plik

@ -1,4 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<meta charset="utf-8" />
<link rel="icon" href="img/mystic-symbolic-icon.png" />
<link rel="stylesheet" href="browser-main.css" />
<noscript> <noscript>
<p>Alas, you need JavaScript to peruse this page.</p> <p>Alas, you need JavaScript to peruse this page.</p>
</noscript> </noscript>

7
lib/color-widget.css 100644
Wyświetl plik

@ -0,0 +1,7 @@
.sidebar .color-widget {
display: flex;
}
.sidebar .color-widget label {
flex-grow: 1;
}

2
lib/color-widget.tsx
Wyświetl plik

@ -1,6 +1,8 @@
import React from "react"; import React from "react";
import { slugify } from "./util"; import { slugify } from "./util";
import "./color-widget.css";
type ColorWidgetProps = { type ColorWidgetProps = {
label: string; label: string;
value: string; value: string;

13
lib/export-svg.css 100644
Wyświetl plik

@ -0,0 +1,13 @@
.overlay-wrapper {
position: fixed;
display: flex;
background-color: rgba(0, 0, 0, 0.9);
flex-direction: column;
align-items: center;
justify-content: center;
color: white;
top: 0;
left: 0;
bottom: 0;
right: 0;
}

2
lib/export-svg.tsx
Wyświetl plik

@ -3,6 +3,8 @@ import { renderToStaticMarkup } from "react-dom/server";
import { createGIF } from "./animated-gif"; import { createGIF } from "./animated-gif";
import { getSvgMetadata, SvgWithBackground } from "./auto-sizing-svg"; import { getSvgMetadata, SvgWithBackground } from "./auto-sizing-svg";
import "./export-svg.css";
function getSvgDocument(svgMarkup: string): string { function getSvgDocument(svgMarkup: string): string {
return [ return [
`<?xml version="1.0" encoding="utf-8"?>`, `<?xml version="1.0" encoding="utf-8"?>`,

8
lib/hover-debug-helper.css 100644
Wyświetl plik

@ -0,0 +1,8 @@
.hover-debug-helper {
font-family: "Consolas", "Monaco", monospace;
color: white;
background: rgba(0, 0, 0, 0.75);
padding: 4px;
margin-top: 4px;
margin-left: 4px;
}

2
lib/hover-debug-helper.tsx
Wyświetl plik

@ -1,5 +1,7 @@
import React, { useState } from "react"; import React, { useState } from "react";
import "./hover-debug-helper.css";
function getTargetPathInfo(target: SVGElement): string[] { function getTargetPathInfo(target: SVGElement): string[] {
const path: string[] = []; const path: string[] = [];
let node = target; let node = target;

23
lib/numeric-slider.css 100644
Wyświetl plik

@ -0,0 +1,23 @@
.sidebar .numeric-slider {
display: flex;
flex-direction: column;
}
.sidebar .numeric-slider .slider {
display: flex;
}
.sidebar .numeric-slider .slider input {
flex-basis: 90%;
}
.sidebar .numeric-slider .slider .slider-value {
/**
* We want to keep a minimum width for the value or else
* there will be a "jitter" effect where the slider will
* contract as a result of the label getting smaller,
* which will then change the value of the slider, which
* will then change the width of the label, ad infinitum.
*/
min-width: 2em;
}

71
dist/css/style.css → lib/page.css
Wyświetl plik

@ -1,4 +1,5 @@
html, body { html,
body {
margin: 0; margin: 0;
padding: 0; padding: 0;
font-family: "Calibri", "Arial", "Helvetica Neue", sans-serif; font-family: "Calibri", "Arial", "Helvetica Neue", sans-serif;
@ -31,8 +32,8 @@ header h1 {
} }
.MSlogo { .MSlogo {
height:50px; height: 50px;
vertical-align:middle; vertical-align: middle;
margin-bottom: 3px; margin-bottom: 3px;
} }
@ -45,25 +46,11 @@ footer {
grid-area: footer; grid-area: footer;
} }
select, input[type="text"] { select,
input[type="text"] {
padding: 8px; padding: 8px;
} }
.checkerboard-bg {
/* https://codepen.io/pascalvgaal/pen/jPXPNP/ */
background: #eee url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" fill-opacity=".1" ><rect x="200" width="200" height="200" /><rect y="200" width="200" height="200" /></svg>');
background-size: 20px 20px;
}
.hover-debug-helper {
font-family: "Consolas", "Monaco", monospace;
color: white;
background: rgba(0, 0, 0, 0.75);
padding: 4px;
margin-top: 4px;
margin-left: 4px;
}
/** Stupid class we're using instead of <p> to avoid ValidateDOMNesting warnings. */ /** Stupid class we're using instead of <p> to avoid ValidateDOMNesting warnings. */
.thingy { .thingy {
margin-top: 10px; margin-top: 10px;
@ -125,49 +112,3 @@ ul.navbar li:last-child {
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px; margin-bottom: 10px;
} }
.sidebar .color-widget {
display: flex;
}
.sidebar .color-widget label {
flex-grow: 1;
}
.sidebar .numeric-slider {
display: flex;
flex-direction: column;
}
.sidebar .numeric-slider .slider {
display: flex;
}
.sidebar .numeric-slider .slider input {
flex-basis: 90%;
}
.sidebar .numeric-slider .slider .slider-value {
/**
* We want to keep a minimum width for the value or else
* there will be a "jitter" effect where the slider will
* contract as a result of the label getting smaller,
* which will then change the value of the slider, which
* will then change the width of the label, ad infinitum.
*/
min-width: 2em;
}
.overlay-wrapper {
position: fixed;
display: flex;
background-color: rgba(0, 0, 0, 0.9);
flex-direction: column;
align-items: center;
justify-content: center;
color: white;
top: 0;
left: 0;
bottom: 0;
right: 0;
}

5
lib/page.tsx
Wyświetl plik

@ -2,6 +2,8 @@ import React, { MouseEvent, useContext } from "react";
import { Helmet } from "react-helmet"; import { Helmet } from "react-helmet";
import type { PageName } from "./pages"; import type { PageName } from "./pages";
import "./page.css";
export type PageContext = { export type PageContext = {
currPage: PageName; currPage: PageName;
allPages: PageName[]; allPages: PageName[];
@ -68,10 +70,7 @@ export const Page: React.FC<PageProps> = ({ title, children }) => {
return ( return (
<div className="page"> <div className="page">
<Helmet> <Helmet>
<meta charSet="utf-8" />
<title>{fullTitle}</title> <title>{fullTitle}</title>
<link rel="icon" href="img/mystic-symbolic-icon.png" />
<link rel="stylesheet" href="css/style.css" />
</Helmet> </Helmet>
<header> <header>
<h1> <h1>

6
lib/pages/vocabulary-page.css 100644
Wyświetl plik

@ -0,0 +1,6 @@
.checkerboard-bg {
/* https://codepen.io/pascalvgaal/pen/jPXPNP/ */
background: #eee
url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" fill-opacity=".1" ><rect x="200" width="200" height="200" /><rect y="200" width="200" height="200" /></svg>');
background-size: 20px 20px;
}

2
lib/pages/vocabulary-page.tsx
Wyświetl plik

@ -11,6 +11,8 @@ import { SymbolContextWidget } from "../symbol-context-widget";
import { HoverDebugHelper } from "../hover-debug-helper"; import { HoverDebugHelper } from "../hover-debug-helper";
import { Page } from "../page"; import { Page } from "../page";
import "./vocabulary-page.css";
type SvgSymbolProps = { type SvgSymbolProps = {
data: SvgSymbolData; data: SvgSymbolData;
scale?: number; scale?: number;

7
package.json
Wyświetl plik

@ -5,8 +5,8 @@
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {
"deploy": "npm run build && gh-pages -d dist", "deploy": "npm run build && gh-pages -d dist",
"prettier:check": "prettier --check lib/**/*.ts lib/**/*.tsx", "prettier:check": "prettier --check lib/**/*.ts lib/**/*.tsx lib/**/*.css",
"prettier:fix": "prettier --write lib/**/*.ts lib/**/*.tsx", "prettier:fix": "prettier --write lib/**/*.ts lib/**/*.tsx lib/**/*.css",
"typecheck": "tsc --noemit", "typecheck": "tsc --noemit",
"eslint": "eslint lib --ext .ts,.tsx --max-warnings 1", "eslint": "eslint lib --ext .ts,.tsx --max-warnings 1",
"lint": "npm run prettier:check && npm run typecheck && npm run eslint", "lint": "npm run prettier:check && npm run typecheck && npm run eslint",
@ -22,6 +22,9 @@
"author": "", "author": "",
"license": "ISC", "license": "ISC",
"jest": { "jest": {
"moduleNameMapper": {
"\\.(css)$": "<rootDir>/__mocks__/css-mock.js"
},
"testPathIgnorePatterns": [ "testPathIgnorePatterns": [
"dist", "dist",
".cache" ".cache"