Skip to content

Increase the top height on the chart of space usage #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
SupianIDz wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Increase the top height on the chart of space usage #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d8a5e64
Added .editorconfig to prevent my IDE from changing the default spacing
SupianIDz Aug 8, 2020
061b1f7
Increase the top height on the chart of space usage
SupianIDz Aug 8, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions .editorconfig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
root = true

[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
indent_style = space
indent_size = 2
trim_trailing_whitespace = true

[*.md]
trim_trailing_whitespace = false
2 changes: 1 addition & 1 deletion src/components/space-usage/SpaceUsage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import Chart from "assets/img/illustration/chart.svg";

const SpaceUsage = () => {
return (
<div className="flex flex-wrap items-end content-end justify-center mt-6 relative h-32">
<div className="flex flex-wrap items-end content-end justify-center mt-6 relative h-40">

@thexdev thexdev Aug 9, 2020

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You don't need to change the height. It will break the UI when the screen resolution is lower than 1920 x 1080.

Suggested change
<div className="flex flex-wrap items-end content-end justify-center mt-6 relative h-40">
<div className="flex flex-wrap items-end content-end justify-center mt-6 relative h-32">

<img src={Chart} alt="Space usage" className="absolute w-full" />

@thexdev thexdev Aug 9, 2020

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just add class h-full after w-full and the image will perfectly fit on every screen.

Suggested change
<img src={Chart} alt="Space usage" className="absolute w-full" />
<img src={Chart} alt="Space usage" className="absolute w-full h-full" />

<h3 className="w-full text-2xl text-center text-gray-800">
10,5 <small className="text-blue-600">GB</small>
Expand Down
15 changes: 9 additions & 6 deletions tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
module.exports = {
purge: ['./src/*.js', './src/components/**/*.js'],
theme: {
extend: {},
},
variants: {},
plugins: [],
purge: ['./src/*.js', './src/components/**/*.js'],
theme: {
extend: {},
height: {

@thexdev thexdev Aug 9, 2020

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And now you no longer need to change the config. Just remove this commit and I'll be ready to merge your commit change :)

40: "10rem"
}
},
variants: {},
plugins: [],
};