Main Page Begins #21

haejinjo · 2018-03-02T06:46:51Z

Note to peers

❗Please please point out anything that doesn't make sense, won't be scalable, doesn't take advantage of the frameworks at my disposal, or is just ugly in your opinion. #roastme because I want to know what I'm doing.

Types of changes

Bugfix (change which fixes an issue)
New feature (change which adds functionality)
Refactor (change which changes the codebase without affecting its external behavior)
Non-breaking change (fix or feature that would causes existing functionality to work as expected)
Breaking change (fix or feature that would cause existing functionality to not work as expected)

Purpose

Create the main page for panel following login screen.

Learning

Still trying to understand components and props in React. Used egghead.io videos.
Considered using flexbox react addon, but discussed with Nathan about using css grid instead. Thanks to Wes Bos and MDN for engaging CSS Grid tut

Screenshot(s)

Checklist

My branch follows the branch naming scheme of UCLA Radio, and can merge into master without error.
My code follows the code style of this project, and I have linted it to confirm this.
I have added tests that prove my fix is effective or that my feature works.
My change requires a change to the documentation and I have updated the documentation accordingly.
All new and existing tests passed.

nathanmsmith · 2018-03-09T01:57:00Z

src/Home/Home.tsx

+  padding: 3,
+});
+
+const RectangleThing = glamorous.div({


Let's move this component into a separate file. I think maybe a more descriptive name than RectangleThing might also be a good idea--perhaps PageLink, since that's what each rectangle will contain?

nathanmsmith · 2018-03-09T01:57:25Z

src/index.js

@@ -0,0 +1,9 @@
+import React from 'react';


We don't need this file, you can delete it!

nathanmsmith · 2018-03-09T02:00:31Z

src/Home/Home.tsx

+        <Div
+          className="link-grid"
+          display="grid"
+          grid-template-columns="repeat(3,400px)"


Let's make CSS grid responsive! Check this out for details: https://medium.com/samsung-internet-dev/common-responsive-layouts-with-css-grid-and-some-without-245a862f48df

Do you think inline styles like this are ok? I know we're using glamorous, but I've thinking of starting a css file for Home because I felt that was cleaner. What do you think?

or is that defeating the purpose of using glamorous

nathanmsmith · 2018-03-09T02:02:03Z

src/Home/Home.tsx

+  backgroundColor: 'rgba(255, 255, 255, 0.8)',
+});
+
+// const LinkGrid = glamorous.div({


Remove comments if we aren't using them!

nathanmsmith · 2018-03-09T02:03:13Z

src/Home/Home.tsx

+  }
+}
+
+ReactDOM.render(<Home />, document.getElementById('root'));


We shouldn't be rendering DOM elements here, that's what the index file is for. Instead make sure this component included in the component!

Oh I see. So index renders App which renders all the page components like Home, Profile, Shows, etc?

I'd recommend checking out App.tsx and index.tsx to see how this works! index.tsx is the file that is compiled behind the scenes.

codecov · 2018-03-09T16:22:24Z

Codecov Report

Merging #21 into master will increase coverage by 5.11%.
The diff coverage is 93.1%.

@@            Coverage Diff             @@
##           master      #21      +/-   ##
==========================================
+ Coverage    62.2%   67.32%   +5.11%     
==========================================
  Files          12       14       +2     
  Lines         127      153      +26     
  Branches       15       18       +3     
==========================================
+ Hits           79      103      +24     
- Misses         48       50       +2

Impacted Files	Coverage Δ
src/Home/CircleButton.tsx	`100% <100%> (ø)`
src/Home/PageCard.tsx	`100% <100%> (ø)`
src/Home/Home.tsx	`90.9% <90.47%> (-9.1%)`	⬇️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update d3ae1d0...7ee77ca. Read the comment docs.

nathanmsmith · 2018-03-10T01:11:40Z

public/index.html

-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta name="theme-color" content="#000000">
-    <!--
+<html lang="en" style="max-width:100%; overflow-x:hidden;">


Why are adding these attributes to the html and body tags?

It's a fix I found online to prevent horizontal scrolling!

nathanmsmith · 2018-03-10T01:12:06Z

src/Home/Home.tsx

+  }
+}
+
+// ReactDOM.render(<Home />, document.getElementById('root'));


Remove comment

nathanmsmith · 2018-03-10T01:12:47Z

src/Home/Home.tsx

+          grid-column-gap="30px"
+          padding="50px"
+        >
+          {/* {


Let's remove this comment for now, we'll come back to dynamically populating the page soon.

nathanmsmith · 2018-03-10T01:17:33Z

src/Home/Home.tsx

+  render() {
+    return (
+      <Div margin="5px auto" padding="20px" width="100%">
+        <Div id="nav" display="flex">


You can use the semantic nav element here instead of a div!

nathanmsmith · 2018-03-10T01:19:39Z

src/Home/Home.tsx

+          <Div
+            className="buttonGroup"
+            display="grid"
+            grid-template-columns="5vw 5vw 5vw"


I'm not sure vw is the best unit to use here. Isn't fr usually used for grids?

nathanmsmith and others added 7 commits February 8, 2018 18:47

Add main page

c730594

Buttons prototype

b200400

git town sync

56d145c

update

2041887

three basic buttons (right) and an input bar (centered)

7636958

all Div'd up with nowhere to go

b4baad3

First steps with css grid

a41c444

haejinjo requested review from binerys and nathanmsmith as code owners March 2, 2018 06:46

nathanmsmith suggested changes Mar 9, 2018

View reviewed changes

Mostly minor fixes /refactoring according to Nathan's code review

26f7787

accesslint bot approved these changes Mar 9, 2018

View reviewed changes

nathanmsmith suggested changes Mar 10, 2018

View reviewed changes

prohaejin added 4 commits March 16, 2018 16:50

comments removed, semantic nav used

5d303cc

Merge branch 'master' into main-page

ef55b3b

Fixed based on some code review suggestions

1755976

material-ui now, still getting error with no exported member from Module

7ee77ca

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Main Page Begins #21

Main Page Begins #21

haejinjo commented Mar 2, 2018 •

edited

Loading

nathanmsmith Mar 9, 2018

nathanmsmith Mar 9, 2018

nathanmsmith Mar 9, 2018

haejinjo Mar 9, 2018

haejinjo Mar 9, 2018

nathanmsmith Mar 9, 2018

nathanmsmith Mar 9, 2018

haejinjo Mar 9, 2018

nathanmsmith Mar 9, 2018

nathanmsmith Mar 9, 2018

codecov bot commented Mar 9, 2018 •

edited

Loading

nathanmsmith Mar 10, 2018

haejinjo Mar 16, 2018

nathanmsmith Mar 10, 2018

nathanmsmith Mar 10, 2018

nathanmsmith Mar 10, 2018

nathanmsmith Mar 10, 2018

Main Page Begins #21

Are you sure you want to change the base?

Main Page Begins #21

Conversation

haejinjo commented Mar 2, 2018 • edited Loading

Note to peers

Types of changes

Purpose

Learning

Screenshot(s)

Checklist

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

codecov bot commented Mar 9, 2018 • edited Loading

Codecov Report

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

haejinjo commented Mar 2, 2018 •

edited

Loading

codecov bot commented Mar 9, 2018 •

edited

Loading