Merge pull request #573 from lbryio/566-css-alias

566 scss aliasing
This commit is contained in:
Bill Bittner 2018-08-14 08:09:33 -07:00 committed by GitHub
commit c037c934b0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
47 changed files with 89 additions and 58 deletions

4
.gitignore vendored
View file

@ -7,6 +7,10 @@ node_modules
client/build
client_custom/build
client_custom/scss
client_custom/src/components
client_custom/src/containers
client_custom/src/pages
devConfig/sequelizeCliConfig.js
devConfig/testingConfig.js

View file

@ -60,7 +60,10 @@ check out the [customization guide](https://github.com/lbryio/spee.ch/blob/readm
* This is not necessary, but highly reccomended. It will decode the blocks of the `LBRY` blockchain and add the claims information to your database's tables
## API
#### /api/claim/publish (post)
#### /api/claim/publish
method: `POST`
example:
```
curl -F 'name=MyPictureName' -F 'file=@/path/to/myPicture.jpeg' https://spee.ch/api/claim/publish
@ -100,7 +103,9 @@ response:
}
```
#### /api/claim/availability/:name (get)
#### /api/claim/availability/:name
method: `GET`
example:
```
curl https://spee.ch/api/claim/availability/doitlive

View file

@ -1,47 +1,47 @@
@import '_variables';
@import '_reset';
@import '_font';
@import '_html';
@import '_body';
@import '_react-app';
@import '_text';
@import '~variables/_variables';
@import '~reset/_reset';
@import '~font/_font';
@import '~html/_html';
@import '~body/_body';
@import '~react-app/_react-app';
@import '~text/_text';
@import '_link';
@import '_input';
@import '_select';
@import '_textarea';
@import '_video';
@import '~link/_link';
@import '~input/_input';
@import '~select/_select';
@import '~textarea/_textarea';
@import '~video/_video';
@import 'components/_asset-display';
@import 'components/_asset-preview';
@import 'components/_button';
@import 'components/_button-primary';
@import 'components/_button-secondary';
@import 'components/_button-tertiary';
@import 'components/_click-to-copy';
@import 'components/_column';
@import 'components/_form-feedback';
@import 'components/_horizontal-quad-split';
@import 'components/_horizontal-split';
@import 'components/_label';
@import 'components/_nav-bar';
@import 'components/_page-layout';
@import 'components/_page-layout-show-lite';
@import 'components/_page-content';
@import 'components/_progress-bar';
@import 'components/_publish-preview';
@import 'components/_space-between';
@import 'components/_space-around';
@import 'components/_row';
@import 'components/_vertical-split';
@import 'components/_tooltip';
@import '~asset-display/_asset-display';
@import '~asset-preview/_asset-preview';
@import '~button/_button';
@import '~button-primary/_button-primary';
@import '~button-secondary/_button-secondary';
@import '~button-tertiary/_button-tertiary';
@import '~click-to-copy/_click-to-copy';
@import '~column/_column';
@import '~form-feedback/_form-feedback';
@import '~horizontal-quad-split/_horizontal-quad-split';
@import '~horizontal-split/_horizontal-split';
@import '~label/_label';
@import '~nav-bar/_nav-bar';
@import '~page-layout/_page-layout';
@import '~page-layout-show-lite/_page-layout-show-lite';
@import '~page-content/_page-content';
@import '~progress-bar/_progress-bar';
@import '~publish-preview/_publish-preview';
@import '~space-between/_space-between';
@import '~space-around/_space-around';
@import '~row/_row';
@import '~vertical-split/_vertical-split';
@import '~tooltip/_tooltip';
@import 'containers/_channel-claims-display';
@import 'containers/_dropzone';
@import 'containers/_publish-url-input';
@import 'containers/_publish-status';
@import 'containers/_publish-disabled-message';
@import '~channel-claims-display/_channel-claims-display';
@import '~dropzone/_dropzone';
@import '~publish-url-input/_publish-url-input';
@import '~publish-status/_publish-status';
@import '~publish-disabled-message/_publish-disabled-message';
@import '_media-queries';
@import '~media-queries/_media-queries';

View file

@ -1,3 +0,0 @@
.site-description {
font-size: small;
}

View file

@ -1,18 +1,18 @@
@font-face {
font-family: 'Lekton';
src: url('font/Lekton/Lekton-Regular.ttf');
src: url('./font/Lekton/Lekton-Regular.ttf');
}
@font-face {
font-family: 'Lekton';
src: url('font/Lekton/Lekton-Bold.ttf');
src: url('./font/Lekton/Lekton-Bold.ttf');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'Lekton';
src: url('font/Lekton/Lekton-Italic.ttf');
src: url('./font/Lekton/Lekton-Italic.ttf');
font-weight: normal;
font-style: italic;
}

View file

@ -10,7 +10,7 @@ select {
.select--arrow {
-moz-appearance:none;
-webkit-appearance: none;
background: url('icon/downArrow.svg') no-repeat right;
background: url('./icon/downArrow.svg') no-repeat right;
cursor: pointer;
padding-right: 1.5em;
padding-left: $input-padding

View file

@ -0,0 +1,10 @@
body {
margin: 0;
padding: 0;
height: 100%;
word-wrap: break-word;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
}

View file

@ -2,6 +2,7 @@ const { statSync, existsSync, readdirSync } = require('fs');
const { join, resolve } = require('path');
const DEFAULT_ROOT = 'client/build';
const CUSTOM_ROOT = 'client_custom/build';
const CUSTOM_SCSS_ROOT = 'client_custom/scss';
const getFolders = path => {
if (existsSync(path)) {
@ -10,14 +11,25 @@ const getFolders = path => {
return [];
};
const addAlliasesForFolder = (name, aliasObject) => { // components
const addAliasesForCustomComponentFolder = (name, aliasObject) => {
// creates an alias for each component in the folder that is passed to this function
const folderPath = resolve(`${CUSTOM_ROOT}/${name}`);
const components = getFolders(folderPath);
for (let i = 0; i < components.length; i++) {
let folderName = components[i];
let aliasName = `@${name}/${folderName}`;
let aliasPath = resolve(`${CUSTOM_ROOT}/${name}/${folderName}/index.js`);
aliasObject[aliasName] = aliasPath;
aliasObject[aliasName] = resolve(`${CUSTOM_ROOT}/${name}/${folderName}/index.js`);
}
return aliasObject;
};
const addAlliasesForSCSS = (aliasObject) => { // scss
// creates an alias for every folder found in the custom scss folder
const customScssRoot = resolve(`${CUSTOM_SCSS_ROOT}`);
const customFolders = getFolders(customScssRoot);
for (let i = 0; i < customFolders.length; i++) {
let folderName = customFolders[i];
aliasObject[folderName] = resolve(`${CUSTOM_SCSS_ROOT}/${folderName}`);
}
return aliasObject;
};
@ -28,12 +40,12 @@ module.exports = () => {
moduleAliases['@config'] = resolve(`config`);
moduleAliases['@devConfig'] = resolve(`devConfig`);
// create specific aliases for locally defined components
moduleAliases = addAlliasesForFolder('containers', moduleAliases);
moduleAliases = addAlliasesForFolder('components', moduleAliases);
moduleAliases = addAlliasesForFolder('pages', moduleAliases);
// create specific aliases for locally defined components in the following folders
moduleAliases = addAliasesForCustomComponentFolder('containers', moduleAliases);
moduleAliases = addAliasesForCustomComponentFolder('components', moduleAliases);
moduleAliases = addAliasesForCustomComponentFolder('pages', moduleAliases);
// default aliases
// default component aliases
moduleAliases['@containers'] = resolve(`${DEFAULT_ROOT}/containers`);
moduleAliases['@components'] = resolve(`${DEFAULT_ROOT}/components`);
moduleAliases['@pages'] = resolve(`${DEFAULT_ROOT}/pages`);
@ -42,6 +54,9 @@ module.exports = () => {
moduleAliases['@sagas'] = resolve(`${DEFAULT_ROOT}/sagas`);
moduleAliases['@app'] = resolve(`${DEFAULT_ROOT}/app.js`);
// scss aliases
moduleAliases = addAlliasesForSCSS(moduleAliases);
// return finished aliases
return moduleAliases;
};