Problem/Motivation

When on a smartphone and trying to add media via the Media library. The modal dialog is almost useless because the Media type tabs take almost half of the width of the modal.

Modal

Solution

It would be nice to be able to change this to horizontal or create a dropdown just like the tabs of the node.

Tab solution

CommentFileSizeAuthor
#9 node-add-page-media-field-example.png51.76 KBrob c
Schermafbeelding 2021-06-08 om 14.27.19.png26.11 KBzebda
Schermafbeelding 2021-06-08 om 14.27.29.png150.48 KBzebda

Comments

zebda created an issue. See original summary.

zebda’s picture

zebda commented
Title: Media Library on mobile, change tabs to horizontal » Media Library on mobile, change vertical tabs to horizontal/dropdown
phenaproxima’s picture

phenaproxima
he/him
Primary language English
Location Massachusetts
commented
Status: Active » Closed (duplicate)

#3102011: Media Library's embed modal is almost unusable with less than 600px browser viewport width covers similar territory, but has more activity. Making the media library responsive is a tricky problem to solve, but I'd rather keep the discussion in one issue (or, if it comes to it, a single well-organized meta-issue). Therefore, closing this one as a duplicate.

phenaproxima’s picture

phenaproxima
he/him
Primary language English
Location Massachusetts
commented
Related issues: +#3102011: Media Library's embed modal is almost unusable with less than 600px browser viewport width
dieterholvoet’s picture

dieterholvoet commented
Status: Closed (duplicate) » Active

#3102011: Media Library's embed modal is almost unusable with less than 600px browser viewport width is about a specific issue with the embed modal, triggered through the CKEditor button. This issue is about the modal opened by the media library field widget. These are separate issues, so re-opening.

Version: 9.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.

strykaizer’s picture

strykaizer
Primary language Dutch
Location Belgium
commented

Below is the css as quickfix for gin, tested in frontend (gin_lb) & backend.

#media-library-wrapper {
  display: block;
}

#media-library-wrapper > ul {
  display: flex;
  margin: 0 !important;
  width: 100%;
  margin-block: 0;
  padding-inline: 0;
  padding: 12px;
  list-style: none;
  background: var(--gin-bg-layer2);
}

#media-library-wrapper ul li.glb-media-library-menu__item,
#media-library-wrapper ul li.media-library-menu__item {
  overflow: visible;
  margin: 0;
  padding: 0;
}

#media-library-wrapper ul li.glb-media-library-menu__item::before,
#media-library-wrapper ul li.media-library-menu__item::before {
  border-top: 0 !important;
}
#media-library-wrapper ul li a.glb-media-library-menu__link.active::before,
#media-library-wrapper ul li a.media-library-menu__link.active::before {
  border-left: 0 !important;
  display: inherit;
}
#media-library-wrapper ul a {
  color: rgb(34, 35, 48);
  border: 0;
  border-radius: 2rem;
  margin-right: 12px;
  padding: 6px 12px;
  font-weight: var(--gin-font-weight-semibold);
  font-size: var(--gin-font-size);
  line-height: 25px;
}
#media-library-wrapper ul a:hover, #media-library-wrapper ul a.active {
  color: var(--gin-color-primary-active);
  background: var(--gin-color-primary-light);
}
rob c’s picture

rob c commented
StatusFileSize
new node-add-page-media-field-example.png51.76 KB

@ strykaizer #8 that already looks a lot better, but can't we add some icons instead of text? (and something for all themes?)
edit: and make it work only on mobile (breakpoints)

result of #8

And more (possible) TODO's exist, maybe split this up in multiple tasks, there is obviously more to improve. Does a meta issue or something exist for mobile improvements to the media library?