[ENHANCEMENT]: A cleaner option for the dashboard icon grid #1171

New Issue

Closed

opened 2024-09-11 20:40:13 +00:00 by mtechoh · 2 comments

mtechoh commented

2024-09-11 20:40:13 +00:00

Enhancement Details

The current dashboard grid icon don't size well responsively. Here is a suggested fix:

in default_main.php where the dashboard icons are added, wrap the icon foreach in a new div with class "dashboard-wrapper-grid" and correct the spelling of 'wraper'.

<div class="dashboard-wrapper-grid">
	<?php foreach($this->icons['main'] as $icon): ?>
		<div class="dashboard-wrapper">
			<div class="dashboard-content">
				<a class="icon" href="<?php echo $icon->url; ?>">
					<img alt="<?php echo $icon->alt; ?>" src="components/com_componentbuilder/assets/images/icons/<?php  echo $icon->image; ?>">
					<span class="dashboard-title"><?php echo Text::_($icon->name); ?></span>
				</a>
			 </div>
		</div>
	<?php endforeach; ?>
	</div>

Update in dashboard.css:

.dashboard-wrapper-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1rem;
}
.dashboard-wrapper {
background: none repeat scroll 0 0 hsl(0, 0%, 93%);
border-radius: 5px;
float: left;
margin: 1%;
padding: 3px;
width: 17%;
height: 100%;
width: 100%;
}
.dashboard-wrapper img {
max-width: 100%;
height: auto;
}
.dashboard-content a {
background: linear-gradient(to bottom, hsl(0, 0%, 100%) 0%, hsl(0, 0%, 96%) 47%, hsl(0, 0%, 93%) 100%) repeat scroll 0 0 hsla(0, 0%, 0%, 0);
border: 1px solid hsl(0, 0%, 85%);
border-radius: 4px;
box-shadow: 0 0 3px hsla(0, 0%, 0%, 0.1) inset;
color: hsl(0, 0%, 20%);
display: block;
height: 100%;
padding: 10px;
text-align: center;
text-decoration: none;
}

Which part of the extension will be affected by this enhancement?

Dashboard(admin_view)

Additional Context

No response

### Enhancement Details The current dashboard grid icon don't size well responsively. Here is a suggested fix: 1) in default_main.php where the dashboard icons are added, wrap the icon foreach in a new div with class "dashboard-wrapper-grid" and correct the spelling of 'wraper'. ``` <div class="dashboard-wrapper-grid"> <?php foreach($this->icons['main'] as $icon): ?> <div class="dashboard-wrapper"> <div class="dashboard-content"> <a class="icon" href="<?php echo $icon->url; ?>"> <img alt="<?php echo $icon->alt; ?>" src="components/com_componentbuilder/assets/images/icons/<?php echo $icon->image; ?>"> <span class="dashboard-title"><?php echo Text::_($icon->name); ?></span> </a> </div> </div> <?php endforeach; ?> </div> ``` 2) Update in dashboard.css: **.dashboard-wrapper-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }** .dashboard-**wrapper** { background: none repeat scroll 0 0 hsl(0, 0%, 93%); border-radius: 5px; float: left; margin: 1%; padding: 3px; width: 17%; **height: 100%; width: 100%;** } **.dashboard-wrapper img { max-width: 100%; height: auto; }** .dashboard-content a { background: linear-gradient(to bottom, hsl(0, 0%, 100%) 0%, hsl(0, 0%, 96%) 47%, hsl(0, 0%, 93%) 100%) repeat scroll 0 0 hsla(0, 0%, 0%, 0); border: 1px solid hsl(0, 0%, 85%); border-radius: 4px; box-shadow: 0 0 3px hsla(0, 0%, 0%, 0.1) inset; color: hsl(0, 0%, 20%); display: block; **height: 100%;** padding: 10px; text-align: center; text-decoration: none; } ### Which part of the extension will be affected by this enhancement? Dashboard(admin_view) ### Additional Context _No response_

mtechoh added the

enhancement

label 2024-09-11 20:40:13 +00:00

Llewellyn commented

2024-09-11 21:47:03 +00:00

Owner

Just yesterday, we were reviewing the tangled state of the Model and other parts of the Dashboard... and let me tell you (oh boy, what a mess! :)

So, yes, we definitely need to fix and improve this area of JCB. While it functions, it's far from ideal. There have been numerous efforts to suggest a better approach here. The reality is that most of these suggestions tend to focus solely on improving the HTML output. However, the real issue begins with the Model and how JCB currently constructs this whole Dashboard area.

With that in mind, I'm open to any ideas. It might take a dedicated code sprint to really make significant progress and elevate this to where it should be.

Just yesterday, we were reviewing the tangled state of the Model and other parts of the Dashboard... and let me tell you (oh boy, what a mess! :) So, yes, we definitely need to fix and improve this area of JCB. While it functions, it's far from ideal. There have been numerous efforts to suggest a better approach here. The reality is that most of these suggestions tend to focus solely on improving the HTML output. However, the real issue begins with the Model and how JCB currently constructs this whole Dashboard area. With that in mind, I'm open to any ideas. It might take a dedicated code sprint to really make significant progress and elevate this to where it should be.

mtechoh commented

2024-09-12 00:19:39 +00:00

Author

Yes, it's a large project and easily tangled. I'm just learning it and still working through the videos, but saw that right away as a quick and easy fix for what already exists. I don't know enough about it yet to offer deeper structural ideas.

mtechoh closed this issue

2024-09-12 00:19:40 +00:00