Dashboard icons are misaligned

mnakao · February 22, 2024, 2:20am

Dear all,

In OOD 3.1.1, application icons displayed on the dashboard are not centered.

Only the Desktop icon (icon: fa://desktop) is aligned to the center, but the other icons (png files) are aligned to the left. Note that the height and width of png files are the same.

When checking in developer mode of my web browser, it seems that the cause is that the margin is set with .app-icon:not(.fa-fw).

I think centering it looks better, but how can I fix it?

Best,

travert · February 22, 2024, 6:40pm

Thanks for pointing this out.

Looking at this more it looks to center correctly when the screen is below a threshold but switches to a left alignment like you are saying when beyond that threshold.

The bug looks to be related to the use of text-center which should have centered those images but obviously is not working passed the first box.

Using an mx-auto on the img tag does fix this. The view which is handling this is here I believe:

github.com

OSC/ondemand/blob/master/apps/dashboard/app/views/widgets/pinned_apps/_app_content.html.erb

<%- tile_data = link.tile -%>
<div class="center-block text-center">
  <%= icon_tag(URI(tile_data.fetch(:icon, link.icon_uri).to_s)) %>
  <%= content_tag(:p, tile_data.fetch(:title, link.title), class: "app-title") %>

  <% if tile_data.blank? %>
    <%= content_tag(:p, content_tag(:span, link.caption), class: "text-muted mt-1") if link.caption %>
  <% else %>
    <div class="mt-2 mb-1">
      <%- tile_data.fetch(:sub_caption, "").each_line do |line| -%>
        <%= content_tag(:p, line, class: "app-description text-muted") %>
      <%- end -%>
    </div>
  <% end %>
</div>

I’ve opened an issue for this here:

travert · February 22, 2024, 7:28pm

I’ve currently put in a simple fix for this here:

This looks to keep those images centered regardless of the screen size and number of apps present.

Topic		Replies	Views
Dashboard Tile Size Options Get Help question	2	47	April 16, 2024
OnDemand Dash Board Layout Get Help ondemand2 , question	3	264	October 24, 2023
Issue with custom logo on dashboard Get Help question	5	119	March 6, 2024
Dashboard customization Get Help	3	640	May 26, 2022
How to organize desktop appearance, add/remove icons? Get Help question	10	223	August 26, 2023

Dashboard icons are misaligned

Related Topics