diff --git a/dist/css/components/media_library.css b/dist/css/components/media_library.css index 2aa1baa2e7fea407bfd6ca006ba606f8d273b483..29787d7228e573704819e37d8f578534d33250c9 100644 --- a/dist/css/components/media_library.css +++ b/dist/css/components/media_library.css @@ -439,6 +439,16 @@ fieldset.media-library-widget .media-library-edit__link, fieldset.media-library- } } +.js-media-library-widget .fieldset__label { + -webkit-margin-after: 0; + margin-block-end: 0; +} + +.js-media-library-widget .media-library-selection { + -webkit-margin-before: 0; + margin-block-start: 0; +} + @media (min-width: 80em) { .media-library-selection .media-library-item--grid { width: 20%; @@ -487,3 +497,25 @@ fieldset.media-library-widget .media-library-edit__link, fieldset.media-library- color: var(--gin-color-text-light); } +.media-library-new-widget .fieldset__label { + -webkit-margin-after: 0; + margin-block-end: 0; +} + +.media-library-new-widget .label { + font-size: var(--gin-font-size-l); + font-weight: var(--gin-font-weight-bold); + color: var(--gin-color-title); + -webkit-margin-before: 0; + margin-block-start: 0; +} + +.media-library-new-widget .description { + font-size: var(--gin-font-size-s); + color: var(--gin-color-text-light); +} + +.media-library-new-widget .form-type--entity-autocomplete { + margin-block: var(--gin-spacing-s); +} + diff --git a/styles/components/media_library.scss b/styles/components/media_library.scss index 4950e9478bc56d50775bfbdf6e76acafe24ae1a9..7a6bb72db5d49db683790d3e3809a4051c2f4ad3 100644 --- a/styles/components/media_library.scss +++ b/styles/components/media_library.scss @@ -412,6 +412,16 @@ fieldset.media-library-widget { } } +.js-media-library-widget { + .fieldset__label { + margin-block-end: 0; + } + + .media-library-selection { + margin-block-start: 0; + } +} + .media-library-selection .media-library-item--grid { @include mq(wide) { width: 20%; @@ -459,3 +469,25 @@ fieldset.media-library-widget { .media-library-selected-count { color: var(--gin-color-text-light); } + +.media-library-new-widget { + .fieldset__label { + margin-block-end: 0; + } + + .label { + font-size: var(--gin-font-size-l); + font-weight: var(--gin-font-weight-bold); + color: var(--gin-color-title); + margin-block-start: 0; + } + + .description { + font-size: var(--gin-font-size-s); + color: var(--gin-color-text-light); + } + + .form-type--entity-autocomplete { + margin-block: var(--gin-spacing-s); + } +} diff --git a/templates/media/media-reference-help.html.twig b/templates/media/media-reference-help.html.twig new file mode 100644 index 0000000000000000000000000000000000000000..dabdea4a63963f943e0edb5a7677898369a928a3 --- /dev/null +++ b/templates/media/media-reference-help.html.twig @@ -0,0 +1,73 @@ +{# +/** + * @file + * Theme override for media reference fields. + * + * @see template_preprocess_field_multiple_value_form() + */ +#} +{% + set classes = [ + 'media-library-new-widget', + 'js-form-item', + 'form-item', + 'js-form-wrapper', + 'form-wrapper', + 'fieldset', + ] +%} +<fieldset{{ attributes.addClass(classes) }}> + {% + set legend_classes = [ + 'fieldset__legend', + 'fieldset__legend--visible', + ] + %} + {% + set legend_span_classes = [ + 'fieldset__label', + required ? 'js-form-required', + required ? 'form-required', + ] + %} + {# Always wrap fieldset legends in a <span> for CSS positioning. #} + <legend{{ legend_attributes.addClass(legend_classes) }}> + <span{{ legend_span_attributes.addClass(legend_span_classes) }}>{{ original_label }}</span> + </legend> + + <div class="js-form-item fieldset__wrapper"> + {% if media_add_help %} + <h4{{ header_attributes.addClass('label') }}> + {% trans %} + Create new media + {% endtrans %} + </h4> + <div class="description"> + {{ media_add_help }} + </div> + {% endif %} + + {% if multiple %} + {{ table }} + {% else %} + {% for element in elements %} + {{ element }} + {% endfor %} + {% endif %} + + <div{{ description.attributes.addClass('description') }}> + {% if multiple and description.content %} + <ul> + <li>{{ media_list_help }} {{ media_list_link }} {{ allowed_types_help }}</li> + <li>{{ description.content }}</li> + </ul> + {% else %} + {{ media_list_help }} {{ media_list_link }} {{ allowed_types_help }} + {% endif %} + {% if multiple and button %} + <div class="clearfix">{{ button }}</div> + {% endif %} + </div> + + </div> +</fieldset>