search

samvera / browse-everything

Rails engine providing access to files in cloud storage
Apache License 2.0
114 stars 22 forks source link

Q: width and other styling of the modal #222

Closed jrochkind closed 6 years ago

jrochkind commented 6 years ago

The b-e modal isn't really wide enough to show everything it's being asked to show in my app, and I'd like to make it wider -- there's plenty more space on a laptop.

When I look at the DOM, there are several inline HTML style attributes on the relevant classes, which makes it much harder to customize.

eg

<table id="file-list" role="grid" tabindex="-1" title="Choose files to upload from the table below" aria-live="polite" class="treetable" style="width: 568px;">

Although I can't actually figure out where these are coming from, haven't found them in the code.

Does anyone know what's going on with CSS styling for b-e, what it was trying to do how? And how I might override the modal and the table contents within it to be wider/taller? (And if maybe better CSS would be welcome as a PR, if I can figure it out?)

jrgriffiniii commented 6 years ago

(And if maybe better CSS would be welcome as a PR, if I can figure it out?)

I could attempt at contributing a solution to this well, but I believe that @adamjarling is already progressing with this.

I can also look to raise this as an agenda item for the next UX Interest Group meeting (it should be scheduled for 06/19/18).

jrochkind commented 6 years ago

Ah, the fixed inline width are provided by JS dynamically I think (not sure by what!), so they aren't actually a problem.

The CSS could still use some improvements, but I'm more or less able to do them as local overrides.

I am glad to hear that someone already is working on this! That's great news!

jrochkind commented 6 years ago

trying to get the thing to extend vertically to take up the whole screen is really challenging.

I think it's in part due to the JS being used that's doing calculations based on the current page, but i'm not sure. Can you give me any guidance as to what JS might be adding "style" attributes to HTML?

jrochkind commented 6 years ago

i can share my local CSS overrides to make it somewhat bigger.

Current thing challenging me is that there's a spinner graphic when b-e is loading... but it is showing up in a weird place at the bottom of the screen out of the modal (and was before my customizations).

Any idea where that spinner comes from and what sets it's css? Having trouble finding it, in part cause the spinner only stays on the screen for so long. :)

jrochkind commented 6 years ago

Ah, I think it may be coming from something other than b-e, something else (in sufia?) hooked into jquery ajax events or something. I'm gonna give up on it for now.

Here's my custom CSS overrides to make the b-e modal take up a lot more of the screen, it's not perfect, might tweak it still. Some of it is just unsetting css that the b-e css is trying to set, and letting bootstrap-modal do it's thing.

https://github.com/sciencehistory/chf-sufia/blob/ca4a3593ac91261050ad5bf13c07eac2e14ce759/app/assets/stylesheets/local/_custom_browse_everything.scss

I'll close this ticket for now to not clog up the issues.

adamjarling commented 6 years ago

@jrgriffiniii @jrochkind Hey, just a heads up that I'll start re-working the entire front-end of Browse Everything in the next 2 weeks, and will try to post screenshots mid development to get some feedback on what features help people the most.

jrochkind commented 6 years ago

awesome, i'm excited.

In addition to the dialog being bigger (when the screen can accomodate it), mostly I just want it to do less, keep the styling as simple as possible to make it easier for clients to style how they want without having to fight with existing styling.

hackartisan commented 6 years ago

Is there an issue for the work you're starting on @adamjarling? I've a user observation I would like to add.

adamjarling commented 6 years ago

@hackmastera Yea, @mbklein opened this ticket after our chat about how to move forward. https://github.com/samvera/browse-everything/issues/210

Feel free to add any requests, ideas, whatever makes the UI most usable and I'll see what I can do.

jrochkind commented 6 years ago

Hmm, #210 seems to be mostly about architectural changes, with no reference to UX? It suggests a fairly ambitious rewrite.

I have not myself noticed problems caused by server-side HTML rendering or jquery-treeTable, but I trust others have, justifying the ambitious rewrite. Changing those things is ambitious, and does not neccesarily relate to any actual UX changes though.

mbklein commented 6 years ago

There have been a number of issues with the server-side rendering, but they're inconsistent and hard to reproduce. I don't think the protocol changes are overly ambitious, and one of the main benefits is the ability to let the client decide how to display the changes.

Adam's main brief in this is to improve the UX; the stuff in #210 just comes along for the ride. Because as long as he's rewriting the client-side HTML, we might as well fix the rendering at the same time.

jrochkind commented 6 years ago

May 23:

@jrgriffiniii @jrochkind Hey, just a heads up that I'll start re-working the entire front-end of Browse Everything in the next 2 weeks,

Is this going on? I'd love to look at the progress!

adamjarling commented 6 years ago

@jrochkind Sorry for the delay. We started in on it, then it got moved back in priority for some other project, local, and community stuff which came up. I'll give a heads up when we jump back in.