search

coopercenter / cte-trailblazers

MIT License
0 stars 0 forks source link

Remove band of white space at top of dashboard; restore title to the top #28

Open athena-small opened 2 years ago

athena-small commented 2 years ago

In a previous edit, to fit the logos, we moved the page title, "Virginia Labor Market: Career Cluster Analysis" from the dbHeader into the body of the fluidPage into its own fluidRow:

ui <- fluidPage(titlePanel(dbHeader),
                fluidRow(
                   column(width = 12,
                      HTML(
                  '<h1 style="text-align:left;">Virginia Labor Market: Career Cluster Analysis</h1>
                  <br>'
                      )
                    )
                  ), 
                 [...]

The task: Move the page title back into the dbHeader, to the proper place for the page title.

This move should achieve the objective of removing the blank space at the top of the page.

If it doesn't: research and find some other way to do that.

caneale320 commented 2 years ago

https://github.com/coopercenter/cte-trailblazers/pull/30

Merged and published to dev shinyapp.

athena-small commented 2 years ago

Temporarily revert this change until we get the spacing coordinated with the frame.

athena-small commented 2 years ago

Re-implement this change in coordination with Amy, after she has implemented changes to the HTML, per the steps described below.

Hi Amy,

Caleb has implemented a temporary fix to increase the whitespace in the source dashboard. When you look at the live version now, it will look right. So, you can hold off implementing the change to the live page.

Instead, I would like to implement the fix properly, and also revise our workflows to help prevent glitches in future.

To that end, we have created a parallel version of the dashboard for development, separate from the one for production. At the moment the two versions are identical. We want to create a test web page for the dev version of the dashboard, separate from the live page linked to the production version of the dashboard. In future, our workflow will involve testing changes on the development version before pushing them to production.

To implement this new, better workflow, I'd like to ask you to carry out the following steps at your earliest reasonable convenience:

  • Copy the current dashboard framing web page to recreate the "test" version you made earlier. We will use this page to test code changes before pushing them into production. The test page should be hosted at a stable URL (e.g., https://ctetrailblazers.org/cc-dashboard-test) that is not linked to anything on the main CTE Trailblazers site.
  • Edit the live, production version of the webpage to pull the dashboard content from the production version on our hosting service: in the HTML for the page, replace the current line

<p><iframe loading="lazy" src="https://cleanenergyva.shinyapps.io/cte_trailblazers_dev/" width="100%" height="2500px"></iframe></p>

with a line that points to the production version of the dashboard:

<p><iframe loading="lazy" src="https://cleanenergyva.shinyapps.io/cte_trailblazers_cluster_analysis/" width="100%" height="2500px"></iframe></p>

  • Edit the test version of the web page to change the value of the "margin-top" as Caleb described: replace the current line <div style="margin-top: -120px;"> with the new line <div style="margin-top: 0px;">

Once you've done all the above, let Caleb and me know.

Caleb will then edit the dev version of the dashboard to fix the spacing issue.

Once we're satisfied that the test page + the dev dashboard looks like it should, we will simultaneously push the test page + the dev version of the dashboard into production.

athena-small commented 2 years ago

Amy has changed the live version of the dashboard, effectively increasing the white space. Please re-implement the original change to the dashboard title, to shrink back the white space on the live version.

Please confirm that the live version looks good before finishing and marking this issue closed.

athena-small commented 2 years ago

@EmilyLien : Please take over this issue. Confirm that all changes have been implemented correctly, and that everything looks good. Then please notify Amy to that effect, and close the issue.

EmilyLien commented 2 years ago

I've moved the title back into dbHeader from fluidPage. Can someone confirm that it had the desired result? I'm not quite sure what the end result is supposed to look like, having not seen the dashboard during the previous iterations of this issue

just the dashboard https://cleanenergyva.shinyapps.io/cte_trailblazers_dev/

dashboard in test page https://ctetrailblazers.org/cc-dashboard-test/

caneale320 commented 2 years ago

image Looks like there's "extra" whitespace below the title now. Not sure if this is desired.

athena-small commented 2 years ago

I do not desire it.

From: Caleb Neale @.> Sent: Sunday, October 24, 2021 19:58 To: coopercenter/cte-trailblazers @.> Cc: Small, Arthur A (aas9z) @.>; State change @.> Subject: Re: [coopercenter/cte-trailblazers] Remove band of white space at top of dashboard; restore title to the top (#28)

[image]https://user-images.githubusercontent.com/43382482/138617963-22272d64-a1e1-4403-8a75-70ba2721c11c.png Looks like there's "extra" whitespace below the title now. Not sure if this is desired.

— You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHubhttps://github.com/coopercenter/cte-trailblazers/issues/28#issuecomment-950420296, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AAWINTRXCWHGI2LR7ZYFA4TUISMQRANCNFSM5EO57P7A.

EmilyLien commented 2 years ago

I can revert it back for the time being so that I can push the font size changes to the main pages.