search

origamitower / folktale

[not actively maintained!] A standard library for functional programming in JavaScript
https://folktale.origamitower.com/
MIT License
2.05k stars 102 forks source link

Documentation section titles partially hidden on smaller screens #102

Closed stephenlacy closed 4 years ago

stephenlacy commented 7 years ago

Documentation section titles are aligned negative left margin, causing them to be partially hidden on smaller screens.

Resize a screen to less than 1015px selection_2017032414 54 4101

I can send a PR to remove the negative margin, or add padding to the parent element. https://github.com/origamitower/folktale/blob/master/docs/style.css#L382

robotlolita commented 7 years ago

Oh hello. The documentation styles hadn't been done with small screens in mind, but I hadn't noticed that it could get this bad :x

The documentation CSS is generated from a Stylus file in static-docs (https://github.com/origamitower/folktale/blob/master/tools/static-docs/resources/html/default-theme.styl). The content has a fixed size of 960px, and both the section heading (https://github.com/origamitower/folktale/blob/master/tools/static-docs/resources/html/default-theme.styl#L78) and the deprecation notice (https://github.com/origamitower/folktale/blob/master/tools/static-docs/resources/html/default-theme.styl#L115) have an em-based negative margin.

The best solution'd be adding a media query to remove these margins for smaller screens. PRs are welcome :)

stephenlacy commented 7 years ago

I should get to this tomorrow

stephenlacy commented 7 years ago

I am having some issues getting the command make documentation to work.

I had to install the other babel plugins to get it to start compiling:

$ git submodule init
$ git submodule update
$ npm i
$ npm i babel-plugin-transform-assertion-comments
$ npm i babel-plugin-transform-metamagical-comments
$ make documentation
<...snip...>
src/helpers/warn-deprecation.js -> helpers/warn-deprecation.js
src/index.js -> index.js
/home/sl/Projects/Node/folktale/node_modules/.bin/babel src --source-map inline --out-dir annotated
TypeError: src/core/adt/data.js: Type of property not supported: null
    at valueToLiteral (/home/sl/Projects/Node/folktale/node_modules/babel-plugin-transform-metamagical-comments/lib/index.js:492:269)
    at pairToProperty (/home/sl/Projects/Node/folktale/node_modules/babel-plugin-transform-metamagical-comments/lib/index.js:463:51)
    at Array.map (native)
    at objectToExpression (/home/sl/Projects/Node/folktale/node_modules/babel-plugin-transform-metamagical-comments/lib/index.js:455:45)
    at mergeMeta (/home/sl/Projects/Node/folktale/node_modules/babel-plugin-transform-metamagical-comments/lib/index.js:517:12)
    at metaForProperty (/home/sl/Projects/Node/folktale/node_modules/babel-plugin-transform-metamagical-comments/lib/index.js:558:15)
    at /home/sl/Projects/Node/folktale/node_modules/babel-plugin-transform-metamagical-comments/lib/index.js:657:18
    at Array.map (native)
    at PluginPass.ObjectExpression (/home/sl/Projects/Node/folktale/node_modules/babel-plugin-transform-metamagical-comments/lib/index.js:656:36)
    at newFn (/home/sl/Projects/Node/folktale/node_modules/babel-traverse/lib/visitors.js:276:21)
Makefile:50: recipe for target 'compile-annotated' failed

Any ideas?

robotlolita commented 7 years ago

Ah, sorry, these plugins aren't included in the package.json because they're compiled from the source. You have to run make tools to build them. So:

make tools
make documentation

Should work. The build scripts and process could be a lot better here :x