Mobile-first UI implementation with Semantic UI

[aelishRollo]

Check it out. It is not yet data driven, but it's a simple layout that I think adheres fairly well to the layout you drew. It's mobile-first but looks decent on desktop as well. Would love to hear your thoughts.

https://deploy-preview-20--section-view.netlify.app

Fixes #18

Screenshots

Light mode

Dark mode

[netlify]

✅ Deploy Preview for section-view ready!

Name	Link
🔨 Latest commit	f9636c6
🔍 Latest deploy log	https://app.netlify.com/sites/section-view/deploys/668c61633324990008cf9251
😎 Deploy Preview	https://deploy-preview-20--section-view.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[mickmister]

The project was failing to build based on an unused import. I fixed CI in commit 559a12f to make it so linting is skipped during build (because building has no business worrying about that). I also fixed the linting job to check linting correctly.

Here is the one linting issue that needs to be addressed:

[eslint] 
src/Foo.tsx
  Line 2:74:  'Input' is defined but never used  @typescript-eslint/no-unused-vars

[mickmister]

Amazing work bro! In general LGTM 🚀

I have just a few comments around reorganizing the code and the favoring of editing & hooking into existing code rather than deleting if it's meant to still be used. I imagine the changes related to that were more for ease of development, but it's good to be conservative before removing existing code. No worries because Git allows us to track that easily. And since this isn't merged yet, it's totally fine to do what you did here.

Overall this is amazing!!! Nice work dude 🤫

[mickmister]

When building on top of existing code, it's important to iterate on the code that's already there. Deleting code like this (especially code written by someone else in the project) should be done carefully.

In this case, instead of deleting existing code here, I think we just need to change the pageContent variable from this:

section-view/src/App.tsx

Lines 53 to 58 in bc5af78

	const pageContent = (
	<SectionPage
	projectId={projectId}
	sectionId={sectionId}
	/>
	);

to this:

const pageContent = <Foo/>;

This is because with the changes in this PR, we are essentially swapping out the code that was SectionPage with Foo, so we want to do "only that" in the pull request's changes

[mickmister]

You can borrow code from https://github.com/jamtools/section-view/blob/main/src/SectionPage.tsx to fill calls to existing hooks to get this data. Should be super straightforward

[mickmister]

Other code will obviously be relocated into existing component files like Files.tsx and Comments.tsx etc.

[mickmister]

This index.tsx file doesn't need to change for the purpose of this PR, besides adding the semantic-ui-css/semantic.min.css, which should probably be done in App.tsx anyway

[mickmister]

Also for PRs focused on UI work, it's always good to include screenshots in the PR description. Ideally before & after pictures, but just the "after" pictures is fine too

[mickmister]

FYI I think we should keep tests around, and maintain them to adapt to new code changes like this PR