Wilma Responsive redesign #3972

milospp · 2024-04-09T13:14:55Z

GitHub issue 3910
GitHub PR Vitro 460

What does this pull request do?

Added bootstrap (only grid style) CSS and modified Wilma theme to leverage its responsive design feature and enhance the overall layout.

What's new?

Mobile optimized design
Avoided horizontal scroll

How should this be tested?

Open every page and test by resizing up to around 400px in width (Mobile device toolbar can be used in google chrome to simulate phone display)

Additional Notes:

Here is the video example

The Left window is VIVO with an old Wilma theme
The middle window is a new, updated Wilma theme
The right window is Tenderfoot theme (just for comparison)

https://youtu.be/9B0_cevrEeE

Added Bootstrap and updated CSS for Wilma theme to make it responsive (vivo-project#3909) * Added bootstrap and updated CSS for Wilma theme to make it responsive * Fixed View All position * Fixed footer * Added responsiveness to Page managment table * Fixed CapabilityMap responsive * modified Photo Cropping page and minor fixes * Removed unused libraries * Fixed horizonal scroll in the site admin pages * Minor fix in Capability map page * fix: Fixed serach bar button moving out of place * fix: Co-author Network graph size on mobile phone * Fixed tenderfoot bootstrap in search page * Updated bootstrap location and refactored propert group tabs * Reimplemented tab state persistence after refresh feature

…roperty control panel buttons (vivo-project#3932)

gneissone · 2024-05-17T01:59:25Z

@milospp took this for a test spin and works great overall. Note for future reviewers, it is necessary to do a hard refresh to clear your cache of the old wilma.css! I was fooled for a few minutes.

balmas

The responsiveness looks good to me. Tested in Chrome, FF and Safari.

However, although I cannot see any reason for this in the code, so it could be something caused by environment, I cannot load any of the temporal graph google charts when I build from the PR code. I get a cross-site scripting failure from the googlecharts API and jquery query error for the chart height. (see attached for example)

I cannot understand why this is only the case in the newer code, but it is consistently reproducible for me. Apologies if this is something I'm doing wrong.

balmas · 2024-05-22T13:56:05Z

webapp/src/main/webapp/js/individual/propertyGroupControls.js


                    if ( groupName == "viewAll" ) {
-                        processViewAllTab();
-                    }
+                        console.log("View all")


suggest removing console debugging statement

Removed, thanks for the suggestion.

balmas · 2024-05-22T13:57:13Z

webapp/src/main/webapp/themes/wilma/templates/page-home.ftl

+
+                        <fieldset>
+                            <legend>${i18n().search_form}</legend>
+                            <form id="search-homepage" action="${urls.search}" name="search-home" role="search" method="post" >


although I don't see any problem with this, just noting the switch from GET to post for the form submission. it doesn't seem related to the bootstrap theming

It's been a while since I added this code, I can't remember why I switched to the POST method... Also, I see that every other theme is using GET.
I reverted it to GET.

gneissone · 2024-05-22T15:34:07Z

@balmas the google chart issues are resolved via #3974, so hopefully @milospp can fix that by merging the main branches into the PRs to catch up without too many merge conflicts.

balmas

Given that the chart issue is already fixed in main, and should be handled by the merge, I think this change looks good.

litvinovg · 2024-05-24T13:34:18Z

webapp/src/main/webapp/themes/nemo/templates/head.ftl

@@ -20,6 +20,8 @@
    </#if>	
 </#if>	

+<script src="${urls.base}/bootstrap-5.3.2/js/bootstrap.min.js"></script> 


It seems bootstrap5 and bootstrap3 would be loaded at the same time according to head.ftl and headScripts.ftl of Nemo theme.

Thank you for the suggestion. It looks like I mistakenly added Bootstrap 5. I removed it from the Nemo theme and tested the themes. It's working fine now. If you catch anything strange, please report it.

gneissone · 2024-07-15T21:03:28Z

Tried out the changes and looks good. @milospp, I did notice some odd behavior if the geo focus map was enabled in runtime.properties (homePage.geoFocusMaps=enabled). See screenshot:

milospp · 2024-08-04T18:59:40Z

Tried out the changes and looks good. @milospp, I did notice some odd behavior if the geo focus map was enabled in runtime.properties (homePage.geoFocusMaps=enabled). See screenshot:

@gneissone, I fixed the map responsiveness. Can you please validate it.

gneissone

Looks good after the update, thank you!

balmas · 2024-08-08T18:50:28Z

Just confirming that I agree this still looks good after the change to use the bootstrap webjar.

litvinovg

This set of PRs not only modifies Wilma theme to have responsive design, but also introduces global dependency for shared components on specific version of Bootstrap which can't safely be done retrospectively.
So it breaks backward compatibility for customized themes
https://wiki.lyrasis.org/display/VIVODOC115x/Creating+a+custom+theme
I think we should find a better way to do that.

chenejac · 2024-09-18T11:14:42Z

@milospp we concluded at a committers meeting the following:

This should be a new theme called willow
Changes of shared files in this PR (e.g. webapp/src/main/webapp/css/*) should be moved under the theme directory if it is possible

Can you please align this PR in accordance with those conclusions? Thanks

gneissone · 2024-09-24T15:44:14Z

@chenejac is it also reasonable to change the default theme to 'willow' as part of the PR?

chenejac · 2024-09-25T15:44:56Z

@chenejac is it also reasonable to change the default theme to 'willow' as part of the PR?

General idea is that willow will be the default VIVO theme. The team will make the final decision when this PR is close to be merged.

hauschke · 2024-09-26T13:12:38Z

Just a quick note regarding the name: AFAIK, Wilma and Tenderfoot were named after... "Wilma Tenderfoot". In that tradition it could make sense to call it "Pickle", "Bludsten", or "Theodore". But that just as a sidenote, I have no strong feelings here.

brianjlowe · 2024-09-26T13:45:48Z

Wilma was named after the first granddaughter of Jon Corson-Rikert, the IT director at Mann Library and original creator of VIVO.

hauschke · 2024-09-26T14:13:53Z

Wilma was named after the first granddaughter of Jon Corson-Rikert, the IT director at Mann Library and original creator of VIVO.

Ah, that's cute and new to me. Okay, so (Wilma) Tenderfoot has nothing to to with the original Wilma. Thanks for the correction! But I am sure that Tenderfoot was named after Wilma Tenderfoot.

brianjlowe · 2024-09-26T14:26:04Z

I had no idea where Tenderfoot came from, but that certainly makes sense if someone reinterpreted Wilma in a new context.

gneissone · 2024-11-27T22:25:48Z

re:#3972 (review)

I am still seeing the issue with the temporal graphs after merging in the main branch, unfortunately. The sparkline graph works fine. @milospp any ideas what could be going wrong? I tried manually setting a width for the div holding the graph but there was no change. FWIW if I change the theme the temporal graphs work fine.

gneissone

Temporal graph issue needs resolved.

gneissone · 2024-11-27T22:44:08Z

webapp/src/main/webapp/themes/wilma/css/wilma.css

+    }
+}
+
+#graphContainer {


I suspect this is the problem. If this #graphContainer css is removed then the temporal graph works again.

milospp added 2 commits April 9, 2024 10:51

fix: css for login width, inline form labels, site admin menu, data p…

bd9de0e

…roperty control panel buttons (vivo-project#3932)

milospp mentioned this pull request Apr 9, 2024

Wilma Responsive redesign vivo-project/Vitro#460

Open

milospp added 2 commits April 9, 2024 17:16

Avoided !important tags

24521d1

Fixed capability map animation

ca4438b

chenejac requested a review from litvinovg April 10, 2024 06:22

milospp mentioned this pull request Apr 11, 2024

Fixes Google Image Line Chart #3974

Merged

chenejac requested a review from balmas May 21, 2024 09:16

balmas reviewed May 22, 2024

View reviewed changes

balmas approved these changes May 22, 2024

View reviewed changes

litvinovg reviewed May 24, 2024

View reviewed changes

milospp added 4 commits May 27, 2024 16:42

Removed debug prints

091fbe3

Reverted search form to GET method

c704233

Removed mistakenly added Bootstrap 5 from Nemo theme.

3cdfb65

Reverted bootstrap location refactor

28f87eb

Fixed geo focus map responsiveness

b91bc6c

gneissone self-requested a review August 5, 2024 23:07

gneissone approved these changes Aug 5, 2024

View reviewed changes

litvinovg requested changes Aug 13, 2024

View reviewed changes

gneissone self-requested a review November 27, 2024 22:26

gneissone requested changes Nov 27, 2024

View reviewed changes

gneissone reviewed Nov 27, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Wilma Responsive redesign #3972

Wilma Responsive redesign #3972

milospp commented Apr 9, 2024 •

edited

Loading

gneissone commented May 17, 2024

balmas left a comment

balmas May 22, 2024

milospp May 27, 2024

balmas May 22, 2024

milospp May 27, 2024

gneissone commented May 22, 2024

balmas left a comment

litvinovg May 24, 2024

milospp May 27, 2024

gneissone commented Jul 15, 2024

milospp commented Aug 4, 2024

gneissone left a comment

balmas commented Aug 8, 2024

litvinovg left a comment

chenejac commented Sep 18, 2024

gneissone commented Sep 24, 2024

chenejac commented Sep 25, 2024

hauschke commented Sep 26, 2024

brianjlowe commented Sep 26, 2024

hauschke commented Sep 26, 2024

brianjlowe commented Sep 26, 2024

gneissone commented Nov 27, 2024 •

edited

Loading

gneissone left a comment •

edited

Loading

gneissone Nov 27, 2024

Wilma Responsive redesign #3972

Are you sure you want to change the base?

Wilma Responsive redesign #3972

Conversation

milospp commented Apr 9, 2024 • edited Loading

What does this pull request do?

What's new?

How should this be tested?

Additional Notes:

gneissone commented May 17, 2024

balmas left a comment

Choose a reason for hiding this comment

balmas May 22, 2024

Choose a reason for hiding this comment

milospp May 27, 2024

Choose a reason for hiding this comment

balmas May 22, 2024

Choose a reason for hiding this comment

milospp May 27, 2024

Choose a reason for hiding this comment

gneissone commented May 22, 2024

balmas left a comment

Choose a reason for hiding this comment

litvinovg May 24, 2024

Choose a reason for hiding this comment

milospp May 27, 2024

Choose a reason for hiding this comment

gneissone commented Jul 15, 2024

milospp commented Aug 4, 2024

gneissone left a comment

Choose a reason for hiding this comment

balmas commented Aug 8, 2024

litvinovg left a comment

Choose a reason for hiding this comment

chenejac commented Sep 18, 2024

gneissone commented Sep 24, 2024

chenejac commented Sep 25, 2024

hauschke commented Sep 26, 2024

brianjlowe commented Sep 26, 2024

hauschke commented Sep 26, 2024

brianjlowe commented Sep 26, 2024

gneissone commented Nov 27, 2024 • edited Loading

gneissone left a comment • edited Loading

Choose a reason for hiding this comment

gneissone Nov 27, 2024

Choose a reason for hiding this comment

milospp commented Apr 9, 2024 •

edited

Loading

gneissone commented Nov 27, 2024 •

edited

Loading

gneissone left a comment •

edited

Loading