New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[4087] Revamp the image editing page as far as possible #4868

Closed
wants to merge 4 commits into
base: master
from

Conversation

Projects
None yet
3 participants
@jjanssen
Member

jjanssen commented Oct 28, 2018

Based upon the design from #4087

Some remarks upfront:

  • I did not change the header as it would feel weird having a different mark-up on this page. I think would be better if we would pick this up in header redesign ticket;
  • I did not change the file field or the order difference between title and file, because this has a separate design proposal as defined in #4055 and it would make this change bigger than editing an image alone.

The code changes

  • Added an additional label-uppercase and label-uppercase due to the way field_as_li.html is defined right now throughout the application and not change everything at once.
  • Added additional utilities for global usage. Although I'm not sure whether to continue this in admin or within client.

So what did it turn out to be?
Without the URL generator
image

With the URL generator
image

On tablet (1024px)
image

On mobile (320px)
image
image

@jjanssen

This comment has been minimized.

Member

jjanssen commented Oct 28, 2018

Tested in:

  • Mobile Safari iOS Phone Last 2 BrowserStack was unable to open my local env
  • Mobile Safari iOS Tablet Last 2 BrowserStack was unable to open my local env
  • Chrome Android Last 2
  • IE Desktop 11
  • Chrome Desktop Last 2
  • MS Edge Desktop Last 2
  • Firefox Desktop Latest
  • Firefox ESR Desktop Latest
  • Safari macOS Last 2 latest only

@jjanssen jjanssen changed the title from [WIP] [4087] Revamp the image editing page as far as possible to [4087] Revamp the image editing page as far as possible Oct 28, 2018

@zerolab

This comment has been minimized.

Contributor

zerolab commented Oct 28, 2018

Looking nice!

What happens when you enable the dynamic image serve view (https://docs.wagtail.io/en/v2.3/advanced_topics/images/image_serve_view.html#setup) ?

@jjanssen

This comment has been minimized.

Member

jjanssen commented Oct 28, 2018

It adds the URL generator button which is visible in the 2nd image. Clicking will send you to a different page for configuring dimensions on external usage. Which has no relation to the Edit Image-screen itself.

@zerolab

This comment has been minimized.

Contributor

zerolab commented Oct 28, 2018

Ah, that is true. Missed it!
👍

@jjanssen jjanssen requested a review from nmorduch Oct 30, 2018

@jjanssen

This comment has been minimized.

Member

jjanssen commented Nov 2, 2018

Note to self: update visibility utility classes once #4860 gets merged

@jjanssen jjanssen force-pushed the jjanssen:feature/image-editing branch from 9733c82 to c9d78ea Nov 5, 2018

@nmorduch

This looks good to me!

@nmorduch

This comment has been minimized.

nmorduch commented Nov 9, 2018

Merged in b07b7a6

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment