3DStreet / 3dstreet

🚲🚶🚌 Web-based 3D visualization of streets using A-Frame
https://3dstreet.app
Other
266 stars 33 forks source link

[epic] CSS Improvement and storybook v1 #578

Open kfarr opened 1 year ago

kfarr commented 1 year ago

Timebox 1 hour: Next step - more detail for first 4 tickets -- time estimation and exactly which files will be modified for first ~4 fickets (330-333) for example. Please update via the tickets created below.

@ViktoriaShurhot


CSS Project goal

Therefore 2 goals:

Proposal:

Example steps:

original source proposal: https://docs.google.com/document/d/1-LuznYMrMYrTMhXIA8uigDAhyzhqaYFfjavWaxaTyRE/edit

rostyslavvnahornyi commented 11 months ago

Hi! @kfarr, as you asked, estimation and plan of implementation for the first 5 tasks + including estimation for new 3DStreet/3dstreet-editor#338 in this epic:

Estimation: 3DStreet/3dstreet-editor#338 – 4 hours

1) 3DStreet/3dstreet-editor#330 – 1 hour 2) 3DStreet/3dstreet-editor#331 – 1 hour 3) 3DStreet/3dstreet-editor#332 – 4 hours 4) 3DStreet/3dstreet-editor#333 – 8 - 12 hours 5) 3DStreet/3dstreet-editor#334 – 4 hours

Plan of implementation:

1) 3DStreet/3dstreet-editor#330 - Add normalize.css to the root of the style directory.

2) 3DStreet/3dstreet-editor#331 - Add reset.css to the root of the styles directory, ensuring it resets all project styles and that the markup works as intended.

3) 3DStreet/3dstreet-editor#332 Install storybook. Add to the root directory .storybook with files preview.js, configuration of storybook (file main.js). Add stories to button component.

4) 3DStreet/3dstreet-editor#333 Refactore files: components.styl -> components.scss entity.styl -> entity.scss index.styl -> index.scss lib.styl -> lib.scss select.styl -> select.scss textureModal.styl -> textureModal.scss viewport.styl -> viewport.scss widgets.styl -> widgets.scss CameraToolbar.styl -> CameraToolbar.scss / CameraToolbar.module.scss Hint.styl -> Hint.module.scss ModalHelp.styles.styl -> ModalHelp.module.scss Shortcuts.styles.styl -> Shortcuts.modules.scss EssentialActions.styles.styl -> EssentialActions.module.scss DocumentationButton.style.styl -> DocumentationButton.module.scss SavingModal.styles.styl -> SavingModal.module.scss Modal.styles.styl -> Modal.module.scss Refactore directory ModalHelpComponent: Refactore directory components: HelpButton.styles.styl -> to HelpButton.module.scss ProfileButton.styles.styl -> to ProfileButton.module.scss ScreenshotButton.styles.styl -> to ScreenshotButton.module.scss Separate imports of global styles. index.styl needs refactoring as all our styles are global due to importing this file globally, which is the reason for markup conflicts.

4) 3DStreet/3dstreet-editor#334 Check out all isolation in .scss files for the full project