openwebwork / webwork2

Course management front end for WeBWorK
http://webwork.maa.org/wiki/Main_Page
Other
143 stars 165 forks source link

reposition footer #2269

Closed Alex-Jordan closed 7 months ago

Alex-Jordan commented 9 months ago

This puts the footer in a bootstrap row, and makes it a col-10 above the large breakpoint.

On large screens, the footer was looking too far to the right, imo. This generally nudges it a bit to the left.

Alex-Jordan commented 9 months ago

The footer is to the left of center relative to the full width content directly above it.

Yeah, I'm noticing that now too on the login screen, which I really don't like since that's a screen everyone sees a lot. I'll rethink this.

Alex-Jordan commented 9 months ago

Is it possible for a template (like the main template for a page) to store a value in some way so the footer template can access it? Then the main templates could store something about their width (e.g. col-10) and the footer template could access that.

drgrice1 commented 9 months ago

Is it possible for a template (like the main template for a page) to store a value in some way so the footer template can access it? Then the main templates could store something about their width (e.g. col-10) and the footer template could access that.

Yes. I added a pull request to this branch that implements the mechanism for this. It is not complete though. I left the work of going through page by page and determining what width is needed to you. I think most pages will not need anything as the default of col-12 will work. You just need to figure out what pages need something different.

drgrice1 commented 9 months ago

I think that in most cases the footerWidthClass should be set in the templates in the same place where the primary layout is determined, and not in the .pm files. I just pointed out that it could be done there in case a situation is encountered where that makes more sense.

Alex-Jordan commented 9 months ago

I set the overall footer class in ContentGenerator.pm to match the conditional page body class from math4/system.html.ep, namely $c->can('info') ? 'col-md-8' : 'col-12'.

Then set the class in several pages where that the overall positioning was different.

In the Set Assigner template, the instruction text at the bottom is now in a bs grid that has the same width as the scrolling record lists above, and then of course the footer is the same.

In the scoring template, I changed to use a bs grid around the tools at the top of the page for selecting sets, and then made the footer match that.

pstaabp commented 9 months ago

I agreed with @drgrice1 about the footer on the scoring tools page, but other than that, this looks good.

Alex-Jordan commented 9 months ago

The last commit here gets a bit off topic, and makes some styling changes to the Scoring template. For now it still has the footer center aligned with the control panel at the top.

Screenshot 2023-12-04 at 4 10 06 PM

I'm happy to take feedback about the styling changes and change them. And if it's the majority opinion to center the footer with the page instead of with the control panel, I'll change that too. I was trying to avoid the status quo that is like:

Screenshot 2023-12-04 at 4 07 55 PM

where the footer feels mis-positioned. But I know it might just be trading one bad thing for another.

drgrice1 commented 9 months ago

I added a pull request to this branch that fixes the things I mentioned in one way.

Alex-Jordan commented 9 months ago

Thanks for that, it's merged now and it looks better.

Still accepting opinions if the footer should go back to being col-12 or stay aligned with the controls.

drgrice1 commented 9 months ago

Still accepting opinions if the footer should go back to being col-12 or stay aligned with the controls.

I am okay either way on that. The issue is that no matter what you choose, the footer will not always be aligned with whatever is directly above it (with the current layout -- see below). If there are no scoring files, then the scoring section below is not shown. If there are scoring files, then the data shown may be wide or narrow depending on the contents of the scoring file, and generally aligning the footer with that is completely impossible since fit-content is used.

One option would be to remove width:fit-content; max-width:100%; style that was added to the scoring file content display, and change to $c->stash->{footerWidthClass} = -f "$scoringDir/$c->{scoringFileName}" ? 'col-12' : 'col-md-12 col-lg-10 col-xl-8'; for the footerWidthClass. Then when the score file contents are not shown, the footer will be centered below the form, and when the scoring file contents are shown the footer will be centered below the full width pre containing the contents.

Alex-Jordan commented 8 months ago

This had conflicts that I just resolved with a rebase and some editing. It was just about the presence of the word "at" in the footer for "Page generated ...".

Alex-Jordan commented 8 months ago

I never saw or used the s...scr.csv or s...ful.csv files before working on this page for this PR. Such files are not created until you check the box "Record scores for each set" and then score the selected sets. I get it that the purpose is to score lots of sets all together, but also created the individual csv files for each set. Those could be used in a mailmerge, for example.

I am not really sure why have two of these. Did only the scr variant exist at first, then ful was added but to not break people's mail templates, they kept both?

Anyway suppose you select sets A, B, C, and check the box "Record scores for each set", and click to score. Next week you come back and you select only set C, and you do not check that box, and you score. The two files sC....csv have not been updated. You are shown the main scoring csv file you just created for set C, and also shown links for the two old files for set C, and it is suggested you can use these in a mailmerge. You are misled to think those have been updated.

I'm not going to mess with any of this, but it seems like it needs attention. Possibly revisiting how many of the features here are useful and/or actually used.

Alex-Jordan commented 8 months ago

One option would be to remove width:fit-content; max-width:100%; style that was added to the scoring file content display, and change to $c->stash->{footerWidthClass} = -f "$scoringDir/$c->{scoringFileName}" ? 'col-12' : 'col-md-12 col-lg-10 col-xl-8'; for the footerWidthClass. Then when the score file contents are not shown, the footer will be centered below the form, and when the scoring file contents are shown the footer will be centered below the full width pre containing the contents.

I tried this. It rarely applies the col-md-12 col-lg-10 col-xl-8 class. It only seems to do so if I clear the scoring/ folder. So it does align the footer well the first time an instructor visits scoring tools, but in practice after that it will always be col-12.

Another thing about this I was trying to do, is when the csv file being shown is not wide, having it artificially extend all the way to the right of the page seems wrong. The illusion of that happening is there now because I gave the pre a background color. The width:fit-content; max-width:100%; constrains the pre so it won't get that wide, and the gray background is more of a tight hull surrounding the csv file. All that said, it's not important to do this. I could do what you suggested and live with the extra gray "padding" of the csv presentation. I'll take anyone's expressed preference about it (and sorry of that's already been given but I missed it.)