info/BezierInfo-2
1
0
Fork 0
mirror of https://github.com/Pomax/BezierInfo-2.git synced 2025-08-12 19:54:31 +02:00
Code Issues Releases Wiki Activity

nicer page when JS is disabled/still loading

Browse Source
This commit is contained in:
Pomax
2016-01-03 16:07:56 -08:00
parent f7aa963f56
commit 5870f33fe5
6 changed files with 924 additions and 858 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1723
article.js
View File

File diff suppressed because it is too large Load Diff

2
components/Article.jsx
View File

@@ -1,5 +1,6 @@
var React = require("react"); var React = require("react");
var ReactDOM = require("react-dom"); var ReactDOM = require("react-dom");
var Ribbon = require("./Ribbon.jsx");
var Article = React.createClass({ var Article = React.createClass({
@@ -39,6 +40,7 @@ var Article = React.createClass({
render: function() { render: function() {
var sections = this.sectionMap(this.generateSection); var sections = this.sectionMap(this.generateSection);
return (<div> return (<div>
<Ribbon />
<div ref="navigation"> <div ref="navigation">
<navigation> <navigation>
<ul className="navigation"> <ul className="navigation">

20
components/Ribbon.jsx Normal file
View File

@@ -0,0 +1,20 @@
var React = require('react');
var Ribbon = React.createClass({
getInitialState() {
return {
href: "http://github.com/pomax/BezierInfo-2"
};
},
render: function() {
return (<div className="ribbon">
<img src="images/ribbon.png" alt="This page on GitHub" border={0} useMap={"#githubmap"} />
<map name="githubmap">
<area shape="poly" coords="30,0, 200,0, 200,114" href={this.state.href} alt="This page on GitHub"/>
</map>
</div>);
}
});
module.exports = Ribbon;

18
index.html
View File

@@ -15,14 +15,15 @@
<meta property="og:author" content="Mike 'Pomax' Kamermans"> <meta property="og:author" content="Mike 'Pomax' Kamermans">
<meta property="og:section" content="Bézier Curves"> <meta property="og:section" content="Bézier Curves">
<meta property="og:tag" content="Bézier Curves"> <meta property="og:tag" content="Bézier Curves">
<style>
body { width: 800px; margin: auto; }
h1, h2 { text-align: center; }
h1 { font-size: 300%; margin: 0.2em; }
p { margin: 2em; text-align: justify; }
</style>
</head> </head>
<body> <body>
<!-- This page lives on github -->
<img id="ribbonimg" src="images/ribbon.png" alt="This page on GitHub" border=0 usemap="#githubmap">
<map name="githubmap">
<area shape="poly" coords="30,0, 200,0, 200,114" href="http://github.com/pomax/BezierInfo-2" alt="This page on GitHub">
</map>
<article> <article>
<header> <header>
<h1>A Primer on Bézier Curves</h1> <h1>A Primer on Bézier Curves</h1>
@@ -30,7 +31,10 @@
</header> </header>
<!-- React does its magic here --> <!-- React does its magic here -->
<div id="article"></div> <div id="article">
<p>Loading book content...</p>
<p>If you have JavaScript disabled, you'll have to enable it, as this book heavily relies on JS rendering, both for the base content (it's been written as a React application) and all the interactive graphics, which rely on JS not just for the user interaction but also for the live-drawing (none of the graphics in this book are flat images, they're all live-rendered).</p>
</div>
</article> </article>
<script src="article.js"></script> <script src="article.js"></script>

10
stylesheets/ribbon.less Normal file
View File

@@ -0,0 +1,10 @@
.ribbon {
position: fixed;
top: 0;
right: 0;
img {
position: relative;
z-index: 999;
}
}

9
stylesheets/style.less
View File

@@ -1,5 +1,6 @@
html, body { html, body {
font-family: Verdana; font-family: Verdana;
width: 100%;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
@@ -44,19 +45,13 @@ article {
a, a:visited { color: rgb(0,0,200); text-decoration: none; } a, a:visited { color: rgb(0,0,200); text-decoration: none; }
#ribbonimg {
position: fixed;
top: 0;
right: 0;
z-index: 999;
}
footer { footer {
font-style: italic; font-style: italic;
margin: 2em 0 1em 0; margin: 2em 0 1em 0;
background: inherit; background: inherit;
} }
@import "ribbon.less";
@import "navigation.less"; @import "navigation.less";
@import "section.less"; @import "section.less";
@import "howtocode.less"; @import "howtocode.less";