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

566 scss aliasing

.gitignore

@@ -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

README.md

@@ -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

client/scss/all.scss

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

client/scss/containers/_site-description.scss

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

client/scss/font/_font.scss

@@ -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;
 }

client/scss/select/_select.scss

@@ -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

client_custom/scss/body/_body.scss

@@ -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;
+}

utils/createModuleAliases.js

@@ -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] = resolve(`${CUSTOM_ROOT}/${name}/${folderName}/index.js`);
-    aliasObject[aliasName] = aliasPath;
+  }
+  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
+  // create specific aliases for locally defined components in the following folders
-  moduleAliases = addAlliasesForFolder('containers', moduleAliases);
+  moduleAliases = addAliasesForCustomComponentFolder('containers', moduleAliases);
-  moduleAliases = addAlliasesForFolder('components', moduleAliases);
+  moduleAliases = addAliasesForCustomComponentFolder('components', moduleAliases);
-  moduleAliases = addAlliasesForFolder('pages', 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;
 };