Skip to content
Snippets Groups Projects
Commit 9c1020a2 authored by Avery Jacobsen's avatar Avery Jacobsen :8ball:
Browse files

Formatted html with css (may adjust later)

parent 52f269dd
No related branches found
No related tags found
1 merge request!1Correctly removed counter feature and changed minimal-app to inventory-app,...
This commit is part of merge request !1. Comments created here will be created in the context of that merge request.
Show whitespace changes
Inline Side-by-side
inventory-app/src/__snapshots__/app.test.js.snap
+ 75
− 28
Edit View file @ 9c1020a2
...@@ -4,39 +4,86 @@ exports[`the app has one labeled button that displays the value from the store 1 ...@@ -4,39 +4,86 @@ exports[`the app has one labeled button that displays the value from the store 1
<div> <div>
<main> <main>
<header> <header>
<label> <label
class="title"
>
App Title App Title
</label> </label>
</header> </header>
<table> <div>
<thead> <p
<tr> class="header"
<th >
colspan="2" Menu
> </p>
Menu (Two items) <p
</th> class="menu"
</tr> >
</thead> <p
<tbody> class="menuitems"
<tr> >
<td>
Item 1 Item 1
<button> <br />
Item 1 Button <button
class="menuitems"
>
Add
</button> </button>
</td> <button
<td> class="menuitems"
>
Delete
</button>
</p>
<p
class="menuitems"
>
Item 2 Item 2
<button> <br />
Item 2 Button <button
class="menuitems"
>
Add
</button>
<button
class="menuitems"
>
Delete
</button> </button>
</td> </p>
</tr> <p
</tbody> class="menuitems"
</table> >
Item 3
<br />
<button
class="menuitems"
>
Add
</button>
<button
class="menuitems"
>
Delete
</button>
</p>
</p>
</div>
<hr /> <hr />
<label
class="header"
>
Inventory Inventory
</label>
<div
class="inventorydiv"
>
<label
class="userinventory"
>
(Inventory Here)
</label>
</div>
</main> </main>
</div> </div>
`; `;
inventory-app/src/features/inventory/inventory.js
+ 22
− 15
Edit View file @ 9c1020a2
import styles from './inventory.module.css';
export function Inventory() { export function Inventory() {
return ( return (
<main> <main>
<header> <header>
<label> <label className={styles.title}>
App Title App Title
</label> </label>
</header> </header>
<table> <div>
<thead> <p className={styles.header}> Menu </p>
<tr> <p className={styles.menu}>
<th colspan="2">Menu (Two items)</th> <p className={styles.menuitems}> Item 1 <br></br>
</tr> <button className={styles.menuitems}> Add </button>
</thead> <button className={styles.menuitems} > Delete </button></p>
<tbody> <p className={styles.menuitems}> Item 2 <br></br>
<tr> <button className={styles.menuitems}> Add </button>
<td>Item 1 <button> Item 1 Button </button></td> <button className={styles.menuitems}> Delete </button></p>
<td>Item 2 <button> Item 2 Button </button></td> <p className={styles.menuitems}> Item 3 <br></br>
</tr> <button className={styles.menuitems}> Add </button>
</tbody> <button className={styles.menuitems}> Delete </button></p>
</table> </p>
</div>
<hr></hr> <hr></hr>
Inventory <label className={styles.header}>Inventory</label>
<div className={styles.inventorydiv}>
<label className={styles.userinventory}> (Inventory Here)</label>
</div>
</main> </main>
); );
} }
inventory-app/src/features/inventory/inventory.module.css 0 → 100644
+ 46
− 0
Edit View file @ 9c1020a2
.menu {
display: flex;
flex-direction: row;
font-size: large;
}
.menuitems {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
margin: auto;
font-size: large;
}
.title {
display: flex;
width: 100%;
justify-content: center;
font-weight: bold;
font-size: x-large;
}
.header {
display: flex;
width: 100%;
justify-content: center;
font-weight: bold;
font-size: large;
}
.userinventory {
display: flex;
width: 75%;
justify-content: center;
text-align: center;
font-size: large;
color: rgba(29 95 40 / 100%);
border: solid;
}
.inventorydiv {
display: flex;
width: 100%;
justify-content: center;
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment