The goal of this challenge was to create a new page to list users and also a form to add them (without logic). About this:
I see you have decided to create the table using a div:
|
<div style="display: flex; flex-direction: column; row-gap: 10px; padding: 30px;"> |
While it gets the job done, I think it can be a little bit more semantic. Browsers come with a built-in table component you can use right away. However, I don't blame you have used divs instead 😂 because one of the things is that despite the table component works as it should, sometimes it can be hard to style (because of how the positioning of its inner elements work). A solution that I like a lot (and in fact the thing I used in the bim-grid component) is to use a div just as you did, but each child (row) is another div with a display: grid CSS property. Now, talking about semantics, a good approach would be to create a class and assign it to the div like this:
.row {
display: grid;
grid-template-columns: repeat(6, 1fr) /* this would mean the row has 6 columns, and this should remain consistent in all others */
}<div class="table">
<div class="row"> <!-- this can have another class like "header" to further style it -->
<p>Header 1</p>
<p>Header 2</p>
<p>Header 3</p>
<p>Header 4</p>
<p>Header 5</p>
<p>Header 6</p>
</div>
</div>This approach has some benefits, and among them is you don't have to set a fixed width in your values to keep them aligned in the column
|
<span style="width: 80px;">Admins</span> |
Now, I wouldn't discard for this type of UI you have gone for to include the list of users as a child of the row. Like an "expand more" feature to show more information about each user in the roles. PD: It is not part of the challenge, just me thinking on improvements!
Finally, talking about the form it gets the job done! Simple yet effective, nothing else needed actually.
Nice job Mathieu! Keep going with the master 💪
The goal of this challenge was to create a new page to list users and also a form to add them (without logic). About this:
I see you have decided to create the table using a div:
that-open-master/index.html
Line 224 in 4121698
While it gets the job done, I think it can be a little bit more semantic. Browsers come with a built-in table component you can use right away. However, I don't blame you have used divs instead 😂 because one of the things is that despite the table component works as it should, sometimes it can be hard to style (because of how the positioning of its inner elements work). A solution that I like a lot (and in fact the thing I used in the bim-grid component) is to use a div just as you did, but each child (row) is another div with a display: grid CSS property. Now, talking about semantics, a good approach would be to create a class and assign it to the div like this:
This approach has some benefits, and among them is you don't have to set a fixed width in your values to keep them aligned in the column
that-open-master/index.html
Line 228 in 4121698
Now, I wouldn't discard for this type of UI you have gone for to include the list of users as a child of the row. Like an "expand more" feature to show more information about each user in the roles. PD: It is not part of the challenge, just me thinking on improvements!
Finally, talking about the form it gets the job done! Simple yet effective, nothing else needed actually.
Nice job Mathieu! Keep going with the master 💪