3daddict / stl-estimator-nodejs Goto Github PK

Vote below for the CSS Framework of your choice to be implemented in this project.

To vote click the 👍 and the one with the most thumbs up over the next couple days will get the win!

Last chance to get your votes in before October 1st!

Hi! Thanks for contributing! Please make sure that you have:

• Added the correct info
• Stared the repo 😉
• Looked over the Code of Conduct and this content is inline with it

Put an X between the brackets([]) when you are done.
--- Add your Issue Info Below be as descriptive as possible... ---

The link in the README for CONTRIBUTING.md is currently leading to a "Not Found" page.

Once a CSS framework is decided here: #6 setup a 2 column layout.
templates/views/index.hbs
Left Side 1/3rd:

• Will have the upload button to upload an STL file
• Will have the stats text divs for the output of the analysis (Model Volume and Overall Size)

Right Side 2/3rds:

• This will be the display area for the 3D Model Preview

Desktop: Columns Side by Side
Mobile: Left Side on Top, Right Side on Bottom. (display: block)

Style the contributers.hbs file to look good.
templates/views/contributors.hbs

• Add github user photos to name.
• Come up with a nice responsive layout 2 Column or 3 Column etc...

Update the style guide with Materialize CSS.
templates/views/style-guide.hbs

• Pick out an awesome color theme (http://colormind.io/ is a good one to use)
• Headings
• P Tags
• Anchor links
• Add button styles
• Any other helpful elements.
  Get your inner designer on and pick the color theme for this project. Create a nice looks and feel that we'll all use for the page elements and UX.
  https://materializecss.com/

Configure Webpack 4 to handle and compile the libraries we are using in this project.
This is probably a big ask so here is the thought behind it.

• Compile CSS and JS components into single chunks (we'll need to restructure the files into components)
• Hot module replacement
• BabelJS
• Update package scripts

Let me know if this is possible and a good choice?

Style the footer template
templates/partials/footer.hbs
public/css/styles.scss

• Make a sticky footer at the bottom
• Center text, add margins, mobile friendly
• Create dynamic copywrite year with JS

Create a JS module to load, analyze and preview STL Files (ASCII and BINARY).
This can be created using NPM Packages or ThreeJS or Other.
The most simple method is preferred so others can understand how the module works. If possible to build from scratch that would be amazing!

Functions

1. Read STL file from User Upload (store in users localStorage if possible) see test STL file in public/stl/3DBenchy.stl
2. Parse STL file and display data on Left Side of Viewer

• Extract total model volume mm3
• Extract overall dimensions L x W x H in mm

3. Preview STL file in Viewer (Right Side)

Style the header template
templates/partials/header.hbs
public/css/styles.scss

• add logo found in images folder
• style links add proper styling that looks good on Desktop, Tablet and Mobile