From c039fc29bdd4fcdce4dbc8dd3c48bec68bd02b28 Mon Sep 17 00:00:00 2001 From: leo fishman Date: Thu, 19 Nov 2020 16:37:23 -0300 Subject: [PATCH 1/3] 62 views-view template --- templates/views/views-view.html.twig | 95 ++++++++++++++++++++++++++++ 1 file changed, 95 insertions(+) create mode 100644 templates/views/views-view.html.twig diff --git a/templates/views/views-view.html.twig b/templates/views/views-view.html.twig new file mode 100644 index 0000000..769a868 --- /dev/null +++ b/templates/views/views-view.html.twig @@ -0,0 +1,95 @@ +{# +/** + * @file + * Theme override for a main view template. + * + * Available variables: + * - attributes: Remaining HTML attributes for the element. + * - css_name: A CSS-safe version of the view name. + * - css_class: The user-specified classes names, if any. + * - header: The optional header. + * - footer: The optional footer. + * - rows: The results of the view query, if any. + * - empty: The content to display if there are no rows. + * - pager: The optional pager next/prev links to display. + * - exposed: Exposed widget form/info to display. + * - feed_icons: Optional feed icons to display. + * - more: An optional link to the next page of results. + * - title: Title of the view, only used when displaying in the admin preview. + * - title_prefix: Additional output populated by modules, intended to be + * displayed in front of the view title. + * - title_suffix: Additional output populated by modules, intended to be + * displayed after the view title. + * - attachment_before: An optional attachment view to be displayed before the + * view content. + * - attachment_after: An optional attachment view to be displayed after the + * view content. + * - dom_id: Unique id for every view being printed to give unique class for + * Javascript. + * + * @see template_preprocess_views_view() + */ +#} +{% + set classes = [ + 'view', + 'view-' ~ id|clean_class, + 'view-id-' ~ id, + 'view-display-id-' ~ display_id, + dom_id ? 'js-view-dom-id-' ~ dom_id, + ] +%} + + {{ title_prefix }} + {% if title %} + {{ title }} + {% endif %} + {{ title_suffix }} + {% if header %} +
+ {{ header }} +
+ {% endif %} + {% if exposed %} +
+ {{ exposed }} +
+ {% endif %} + {% if attachment_before %} +
+ {{ attachment_before }} +
+ {% endif %} + + {% if rows %} +
+ {{ rows }} +
+ {% elseif empty %} +
+ {{ empty }} +
+ {% endif %} + + {% if pager %} + {{ pager }} + {% endif %} + {% if attachment_after %} +
+ {{ attachment_after }} +
+ {% endif %} + {% if more %} + {{ more }} + {% endif %} + {% if footer %} +
+ {{ footer }} +
+ {% endif %} + {% if feed_icons %} +
+ {{ feed_icons }} +
+ {% endif %} + From 5a1c2df48261c10930ed3469ea67861c22f1667b Mon Sep 17 00:00:00 2001 From: leo fishman Date: Wed, 25 Nov 2020 11:58:47 -0300 Subject: [PATCH 2/3] Added views templates media-library and _media-library.scss --- lark.theme | 15 + scss/components/_media-library.scss | 1055 +++++++++++++++++ scss/main.scss | 1 + templates/field/field--comment.html.twig | 57 + .../field/field--node--created.html.twig | 34 + templates/field/field--node--title.html.twig | 34 + templates/field/field--node--uid.html.twig | 34 + templates/field/field--text-long.html.twig | 1 + .../field/field--text-with-summary.html.twig | 1 + templates/field/field--text.html.twig | 28 + templates/field/field.html.twig | 81 ++ templates/field/file-audio.html.twig | 23 + templates/field/file-video.html.twig | 23 + templates/field/image.html.twig | 18 + .../link-formatter-link-separate.html.twig | 22 + templates/field/time.html.twig | 22 + ...container--media-library-content.html.twig | 28 + ...--media-library-widget-selection.html.twig | 28 + .../fieldset--media-library-widget.html.twig | 64 + ...edia-library-add-form-media-list.html.twig | 33 + .../links--media-library-menu.html.twig | 36 + .../media--media-library.html.twig | 55 + .../media-library-item--small.html.twig | 31 + .../media-library-item.html.twig | 28 + .../media-library-wrapper.html.twig | 21 + .../views/views-view--media_library.html.twig | 97 ++ ...-view-unformatted--media-library.html.twig | 34 + 27 files changed, 1904 insertions(+) create mode 100644 scss/components/_media-library.scss create mode 100644 templates/field/field--comment.html.twig create mode 100644 templates/field/field--node--created.html.twig create mode 100644 templates/field/field--node--title.html.twig create mode 100644 templates/field/field--node--uid.html.twig create mode 100644 templates/field/field--text-long.html.twig create mode 100644 templates/field/field--text-with-summary.html.twig create mode 100644 templates/field/field--text.html.twig create mode 100644 templates/field/field.html.twig create mode 100644 templates/field/file-audio.html.twig create mode 100644 templates/field/file-video.html.twig create mode 100644 templates/field/image.html.twig create mode 100644 templates/field/link-formatter-link-separate.html.twig create mode 100644 templates/field/time.html.twig create mode 100644 templates/media-library/container--media-library-content.html.twig create mode 100644 templates/media-library/container--media-library-widget-selection.html.twig create mode 100644 templates/media-library/fieldset--media-library-widget.html.twig create mode 100644 templates/media-library/item-list--media-library-add-form-media-list.html.twig create mode 100644 templates/media-library/links--media-library-menu.html.twig create mode 100644 templates/media-library/media--media-library.html.twig create mode 100644 templates/media-library/media-library-item--small.html.twig create mode 100644 templates/media-library/media-library-item.html.twig create mode 100644 templates/media-library/media-library-wrapper.html.twig create mode 100644 templates/views/views-view--media_library.html.twig create mode 100644 templates/views/views-view-unformatted--media-library.html.twig diff --git a/lark.theme b/lark.theme index c54d978..432e2ba 100644 --- a/lark.theme +++ b/lark.theme @@ -245,3 +245,18 @@ function lark_forms_attach_views_display_id(&$form, $views_display_id) { lark_forms_attach_views_display_id($form[$child], $views_display_id); } } + +/** + * Views media_library preprocess hook. + * + * @param $variables + */ +function lark_preprocess_views_view__media_library(&$variables) { + // Make header classes BEM compatible by adding a new class 'views-display-link-widget__table'. + if (isset($variables['header']['display_link_table']['#options']['attributes']['class'])) { + $table_classes = $variables['header']['display_link_table']['#options']['attributes']['class']; + if (in_array('views-display-link-widget_table', $table_classes)) { + $variables['header']['display_link_table']['#options']['attributes']['class'] = array_merge($table_classes, array_diff(['views-display-link-widget__table'], $table_classes)); + } + } +} diff --git a/scss/components/_media-library.scss b/scss/components/_media-library.scss new file mode 100644 index 0000000..22870b5 --- /dev/null +++ b/scss/components/_media-library.scss @@ -0,0 +1,1055 @@ +/** + * @file media-library.css + + * Styling for Media Library. + */ + +.media-library-wrapper { + display: flex; + margin: -1em; + + .view-header { + text-align: left; + } + + .views-display-link { + padding-right: 22px; + padding-left: 0; + } + + .views-display-link-widget { + background-position: right 0; + } + + .views-display-link-widget__table { + background-position: right 0; + } + + + .media-library-view { + display: flex; + position: relative; + flex-wrap: wrap; + justify-content: space-between; + + .view-content { + flex: 0 0 100%; + } + + } + + .view-header { + align-self: flex-end; + margin: 1em 0; + text-align: right; + } + + .views-display-link { + margin: 0; + padding-left: 22px; + line-height: 16px; + color: #333333; + font-size: 15px; + } + + .views-display-link { + + .is-active { + font-weight: bold; + } + + } + + .views-display-link-widget { + margin-right: 15px; + background: url('/core/misc/icons/333333/grid.svg') left 0 no-repeat; + } + + .views-display-link-widget__table { + background: url('/core/misc/icons/333333/table.svg') left 0 no-repeat; + } + +} + +/** + * @todo Reuse or build on vertical tabs styling for the media library menu. + * https://www.drupal.org/project/drupal/issues/3023767 + */ +.media-library-menu { + display: block; + margin: 0; + border-bottom: 1px solid #cccccc; + background-color: #e6e5e1; + padding: 0; + width: 600px; + max-width: 20%; + line-height: 1; + + li { + display: block; + padding: 0; + list-style: none; + } +} + +/* Generic media library view styles. */ +.media-library-menu__link { + display: block; + position: relative; + border-bottom: 1px solid #b3b2ad; + background-color: #f2f2f0; + padding: 15px; + text-decoration: none; + text-shadow: 0 1px hsla(0, 0%, 100%, 0.6); + box-sizing: border-box; + + &:active { + outline: none; + background: #fcfcfa; + text-shadow: none; + } + + &:hover { + background: #fcfcfa; + text-shadow: none; + } + + &:focus { + outline: none; + background: #fcfcfa; + text-shadow: none; + } + + .active { + z-index: 1; + margin-right: -1px; + border-right: 1px solid #fcfcfa; + border-bottom: 1px solid #b3b2ad; + box-shadow: 0 5px 5px -5px hsla(0, 0%, 0%, 0.3); + background-color: #ffffff; + color: #000000; + } + +} + +[dir='rtl'] { + + .media-library-menu { + margin: 0; + } + + .media-library-menu__link { + + .active { + margin-right: 0; + margin-left: -1px; + border-right: 0; + border-left: 1px solid #fcfcfa; + } + + } + + .media-library-content { + border-right: 1px solid #b3b2ad; + border-left: 0; + } + + .media-library-select-all { + + input { + margin-left: 10px; + } + + } + + .media-library-item__status { + right: 5px; + left: auto; + } + + .media-library-item__click-to-select-checkbox { + right: 16px; + left: auto; + } + +} + +.media-library-content { + outline: none; + border-left: 1px solid #b3b2ad; + padding: 1em; + width: 100%; +} + +.media-library-add-form--without-input { + + .form-item { + margin: 0 0 1em; + } + +} + +/** + * Remove outline from added media list. + * + * The added media list receives focus after adding new media, but since it is + * not an interactive element, it does not need an outline. + */ +.media-library-add-form__added-media { + margin: 0; + outline: none; + padding: 0; +} + +.media-library-add-form__input-wrapper { + border: 1px solid #bfbfbf; + border-radius: 2px; + background: #fcfcfa; + padding: 16px; +} + +.media-library-add-form--upload { + + .media-library-add-form--without-input { + .form-item-upload { + margin-bottom: 0; + } + } + +} + +.media-library-add-form { + + .file-upload-help { + margin: 8px 0 0; + } + +} + +.media-library-add-form--oembed { + + .media-library-add-form__input-wrapper { + display: flex; + } + + .media-library-add-form--without-input { + + .form-item-url { + margin-bottom: 0; + } + } +} + +.media-library-add-form-oembed-url { + width: 100%; +} + +.button { + + .media-library-add-form-oembed-submit { + align-self: center; + } + + .media-library-open-button { + margin-bottom: 1em; + margin-left: 0; + } + +} + +.media-library-add-form__selected-media { + margin-top: 1em; + + .details-wrapper { + display: flex; + flex-wrap: wrap; + padding: 0 10px 1em; + } + + .media-library-item { + + .field--name-thumbnail { + + img { + height: 100px; + } + + } + + } + + .media-library-item--small { + width: 33.3%; + } + +} + +.media-library-select-all { + flex-basis: 100%; + margin: 10px 8px; + width: 100%; + + input { + margin-right: 10px; + } + +} + +.media-library-views-form { + display: flex; + flex-wrap: wrap; + + >.form-actions { + flex-basis: 100%; + } + +} + +.media-library-selection { + display: flex; + flex-wrap: wrap; +} + +.media-library-view { + + .form--inline { + display: flex; + flex-wrap: wrap; + } + +} + +.media-library-views-form__rows { + display: flex; + flex-basis: 100%; + margin: 0 -8px; + + .form-item { + margin-right: 8px; + } + +} + +@media screen and (max-width: 37.5em) { + + .media-library-add-form--oembed { + + .media-library-add-form__input-wrapper { + display: block; + } + + } + +} + +.media-library-views-form__rows { + display: flex; + flex-basis: 100%; + flex-wrap: wrap; + margin: 0 -8px; +} + +.media-library-views-form__header { + + .form-item { + margin-right: 8px; + } + +} + + +.media-library-view { + + .form-actions { + align-self: flex-end; + margin: 0.75em 0; + } + +} + +@media screen and (max-width: 600px) { + + .media-library-view { + + .form-actions { + flex-basis: 100%; + } + + } + +} + +.media-library-view { + + .media-library-view--form-actions { + align-self: flex-end; + clear: left; + margin: 0.75em 0; + } + +} + +/** + * Override the table display of the visually hidden labels. + * + * The width, height and overflow properties in the styles for the + * .visually-hidden class do not work correctly if the element has a table + * display. + */ +/* Media library widget view styles. */ +/** + * Style the media library grid items. + */ +/** +* The media library item container receives screen reader focus when items are +* removed. Since it is not an interactive element, it does not need an +* outline. +*/ +/* Media library widget weight field styles. */ +/* The selected items in the add form should be shown a bit smaller. */ +/** + * By default, the dialog is too narrow to be usable. + * @see Drupal.ckeditor.openDialog() + */ +/* Change the width for the modal and widget since there is less space. */ +/* The selected items in the add form should be shown a bit smaller. */ +/* Change the width for the modal and widget since there is less space. */ +/* The selected items in the add form should be shown a bit smaller. */ +.media-library-item { + + label { + display: inline-block; + } + + position: relative; +} + + +.media-library-item--grid { + justify-content: center; + outline: none; + background: #ffffff; + padding: 8px; + width: 50%; + vertical-align: top; + box-sizing: border-box; + + &:before { + position: absolute; + top: 7px; + left: 7px; + transition: border-color 0.2s, color 0.2s, background 0.2s; + border: 1px solid #dbdbdb; + width: calc(100% - 16px); + height: calc(100% - 16px); + content: ''; + pointer-events: none; + } + + .is-hover { + + &:before { + top: 5px; + left: 5px; + border-width: 3px; + border-radius: 3px; + border-color: #40b6ff; + } + + } + + .checked { + &:before { + top: 5px; + left: 5px; + border-width: 3px; + border-radius: 3px; + border-color: #40b6ff; + } + } + + .is-focus { + &:before { + top: 5px; + left: 5px; + border-width: 3px; + border-radius: 3px; + border-color: #40b6ff; + } + + .media-library-item__name { + white-space: normal; + } + + } + + .form-item { + margin: 0.75em; + } + + .field--name-thumbnail { + overflow: hidden; + text-align: center; + + img { + height: 180px; + object-fit: contain; + object-position: center center; + } + + } + + .media-library-item__name { + white-space: normal; + } + +} + +.media-library-widget-modal { + + .ui-dialog-buttonpane { + display: flex; + align-items: center; + + .form-actions { + flex: 1; + } + + } + +} + +.ui-dialog--narrow { + + .media-library-widget-modal { + max-width: 75%; + } + +} + +@media screen and (min-width: 45em) { + + .media-library-item--grid { + width: 33.3%; + } + + .media-library-widget-modal { + + .media-library-item--grid { + width: 50%; + } + + } + + .media-library-selection { + + .media-library-item--grid { + width: 50%; + } + + } + + .media-library-add-form__selected-media { + + .media-library-item--small { + width: 25%; + } + + } + +} + +@media screen and (min-width: 60em) { + + .media-library-item--grid { + width: 25%; + } + + .media-library-widget-modal { + + .media-library-item--grid { + width: 33.3%; + } + + } + + .media-library-selection { + + .media-library-item--grid { + width: 33.3%; + } + + } + + .media-library-add-form__selected-media { + + .media-library-item--small { + width: 16.6%; + } + + } + +} + +@media screen and (min-width: 77em) { + + .media-library-item--grid { + width: 16.6%; + } + + .media-library-widget-modal { + + .media-library-item--grid { + width: 25%; + } + + } + + .media-library-selection { + + .media-library-item--grid { + width: 25%; + } + + } + + .media-library-add-form__selected-media { + + .media-library-item--small { + width: 16.6%; + } + + } + +} + +.media-library-item__click-to-select-checkbox { + display: block; + position: absolute; + top: 16px; + left: 16px; + z-index: 1; + + input { + width: 20px; + height: 20px; + } + + .form-item { + margin: 0; + } + +} + +.media-library-item__click-to-select-trigger { + cursor: pointer; + height: 100%; + overflow: hidden; +} + +/* Media library item table styles. */ +/* Media library entity view display styles. */ +.media-library-item--table { + img { + max-width: 100px; + height: auto; + } +} + +.media-library-item__preview { + padding-bottom: 34px; +} + +.field--widget-media-library-widget { + + .media-library-item__preview { + cursor: move; + } + + .js-media-library-item { + &:only-child { + + .media-library-item__preview { + cursor: inherit; + } + + } + } +} + +.media-library-item__status { + position: absolute; + top: 40px; + left: 5px; + background: #666666; + padding: 5px 10px; + color: #e4e4e4; + font-size: 12px; + font-style: italic; + pointer-events: none; +} + +.media-library-item__name { + display: block; + position: absolute; + bottom: 0; + z-index: 1; + margin: 2px; + background-color: rgba(0, 0, 0, 0.8); + padding: 5px 10px; + width: 100%; + overflow: hidden; + text-align: left; + text-overflow: ellipsis; + white-space: nowrap; + color: #ffffff; + font-size: 14px; + box-sizing: border-box; +} + + +@media screen and (min-width: 77em) { + .media-library-item--grid { + width: 16.6%; + } + + /* Change the width for the modal and widget since there is less space. */ + .media-library-widget-modal { + + .media-library-item--grid, + .media-library-selection { + + .media-library-item--grid { + width: 25%; + } + + } + + } + + /* The selected items in the add form should be shown a bit smaller. */ + .media-library-add-form__selected-media { + + .media-library-item--small { + width: 16.6%; + } + + } +} + +.media-library-item__click-to-select-checkbox { + display: block; + position: absolute; + top: 16px; + left: 16px; + z-index: 1; + + input { + width: 20px; + height: 20px; + } + + .form-item { + margin: 0; + } + +} + +.media-library-item--table { + + img { + max-width: 100px; + height: auto; + } + +} + +.media-library-item__preview { + padding-bottom: 34px; +} + +.field--widget-media-library-widget { + + .media-library-item__preview { + cursor: move; + } + + .js-media-library-item { + + &:only-child { + + .media-library-item__preview { + cursor: inherit; + } + + } + + } + +} + +.media-library-item__status { + position: absolute; + top: 40px; + left: 5px; + background: #666666; + padding: 5px 10px; + color: #e4e4e4; + font-size: 12px; + font-style: italic; + pointer-events: none; +} + +.media-library-item__attributes { + display: block; + bottom: 0; + background: #ffffff; + padding: 5px; + max-width: calc(100% - 10px); + max-height: calc(100% - 50px); + overflow: hidden; + + &:hover { + + .media-library-item__name { + white-space: normal; + } + + } + +} + +.media-library-item__name { + display: block; + margin: 2px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-size: 14px; +} + +.media-library-item__type { + color: #696969; + font-size: 12px; +} + +.media-library-item--disabled { + opacity: 0.5; + pointer-events: none; +} + +.media-library-widget { + position: relative; +} + +.media-library-widget__toggle-weight { + position: absolute; + top: 5px; + right: 5px; +} + +.media-library-selection { + margin: 1em -8px; +} + +.media-library-item__edit { + position: absolute; + top: 10px; + right: 40px; + transition: 0.2s border-color; + z-index: 1; + margin: 5px; + border: 2px solid #cccccc; + border-radius: 20px; + background: url('/core/misc/icons/787878/pencil.svg') #ffffff center no-repeat; + background-size: 13px; + padding: 0; + width: 21px; + height: 21px; + overflow: hidden; + text-shadow: none; + color: transparent; + font-size: 0; + + &:hover { + border: 2px solid #40b6ff; + } + + &:focus { + border: 2px solid #40b6ff; + } + +} + + +.media-library-item__remove { + position: absolute; + top: 10px; + right: 10px; + transition: 0.2s border-color; + z-index: 1; + margin: 5px; + border: 2px solid #cccccc; + border-radius: 20px; + background: url('/core/misc/icons/787878/ex.svg') #ffffff center no-repeat; + background-size: 13px; + padding: 0; + width: 21px; + height: 21px; + overflow: hidden; + text-shadow: none; + color: transparent; + font-size: 0; + + &:hover { + border: 2px solid #40b6ff; + } + + &:focus { + border: 2px solid #40b6ff; + } + +} + +.media-library-item__remove { + + .button { + position: absolute; + top: 10px; + transition: 0.2s border-color; + z-index: 1; + margin: 5px; + border: 2px solid #cccccc; + border-radius: 20px; + background: url('/core/misc/icons/787878/ex.svg') #ffffff center no-repeat; + background-size: 13px; + padding: 0; + width: 21px; + height: 21px; + overflow: hidden; + text-shadow: none; + color: transparent; + font-size: 0; + + &:active { + border: 2px solid #40b6ff; + } + + &:hover { + border: 2px solid #40b6ff; + } + + &:focus { + border: 2px solid #40b6ff; + } + + } + +} + +.media-library-add-form__media { + display: flex; + position: relative; + outline: none; + border-bottom: 1px solid #c0c0c0; + padding: 1em 0; + + &:first-child { + padding-top: 0; + + .media-library-add-form__remove-button { + + &[type='submit'] { + top: 5px; + } + + } + + } + + &:last-child { + border-bottom: 0; + padding-bottom: 0; + } + +} + +.media-library-add-form__preview { + display: flex; + align-items: center; + justify-content: center; + margin-right: 20px; + background: #ebebeb; + width: 220px; +} + +.media-library-add-form__remove-button { + + &[type='submit'] { + position: absolute; + top: 25px; + right: 6px; /* LTR */ + margin: 0; + border: 0; + border-radius: 0; + background: transparent url('/core/misc/icons/787878/ex.svg') right 2px no-repeat; /* LTR */ + padding: 2px 20px 2px 2px; /* LTR */ + width: auto; + text-transform: lowercase; + line-height: 16px; + color: transparent; + font-weight: normal; + } + + &:focus { + border: 0; + background: transparent url('/core/misc/icons/787878/ex.svg') right 2px no-repeat; + color: #787878; + } + + &:hover { + border: 0; + box-shadow: none; + background: transparent url('/core/misc/icons/ee0000/ex.svg') right 2px no-repeat; + color: #ee0000; + } + +} + +.media-library-add-form__remove-button { + + .button { + border: 0; + background: transparent url('/core/misc/icons/787878/ex.svg') right 2px no-repeat; + color: #787878; + + &:hover { + box-shadow: none; + background: transparent url('/core/misc/icons/ee0000/ex.svg') right 2px no-repeat; + color: #ee0000; + } + + } + +} + +.views-live-preview { + + .media-library-view { + + .views-row { + + + { + + .views-row { + margin-top: 0; + } + + } + + } + + } + +} + diff --git a/scss/main.scss b/scss/main.scss index 2e4cc52..f36f112 100644 --- a/scss/main.scss +++ b/scss/main.scss @@ -27,6 +27,7 @@ @import './components/drupal-tabs'; @import './components/entity_browser'; @import './components/exposed-form'; +@import './components/media-library'; @import './components/message'; @import './components/shortcuts'; @import './components/sidebar-menu'; diff --git a/templates/field/field--comment.html.twig b/templates/field/field--comment.html.twig new file mode 100644 index 0000000..1ec3ee6 --- /dev/null +++ b/templates/field/field--comment.html.twig @@ -0,0 +1,57 @@ +{# +/** + * @file + * Theme override for comment fields. + * + * Available variables: + * - attributes: HTML attributes for the containing element. + * - label_hidden: Whether to show the field label or not. + * - title_attributes: HTML attributes for the title. + * - label: The label for the field. + * - title_prefix: Additional output populated by modules, intended to be + * displayed in front of the main title tag that appears in the template. + * - title_suffix: Additional title output populated by modules, intended to + * be displayed after the main title tag that appears in the template. + * - comments: List of comments rendered through comment.html.twig. + * - comment_form: The 'Add new comment' form. + * - comment_display_mode: Is the comments are threaded. + * - comment_type: The comment type bundle ID for the comment field. + * - entity_type: The entity type to which the field belongs. + * - field_name: The name of the field. + * - field_type: The type of the field. + * - label_display: The display settings for the label. + * + * @see template_preprocess_field() + * @see comment_preprocess_field() + */ +#} +{% + set classes = [ + 'field', + 'field--name-' ~ field_name|clean_class, + 'field--type-' ~ field_type|clean_class, + 'field--label-' ~ label_display, + 'comment-wrapper', + ] +%} +{% + set title_classes = [ + 'title', + label_display == 'visually_hidden' ? 'visually-hidden', + ] +%} + + {% if comments and not label_hidden %} + {{ title_prefix }} + {{ label }} + {{ title_suffix }} + {% endif %} + + {{ comments }} + + {% if comment_form %} +

{{ 'Add new comment'|t }}

+ {{ comment_form }} + {% endif %} + + diff --git a/templates/field/field--node--created.html.twig b/templates/field/field--node--created.html.twig new file mode 100644 index 0000000..72d5d67 --- /dev/null +++ b/templates/field/field--node--created.html.twig @@ -0,0 +1,34 @@ +{# +/** + * @file + * Theme override for the node created field. + * + * This is an override of field.html.twig for the node created field. See that + * template for documentation about its details and overrides. + * + * Available variables: + * - attributes: HTML attributes for the containing span element. + * - items: List of all the field items. Each item contains: + * - attributes: List of HTML attributes for each item. + * - content: The field item content. + * - entity_type: The entity type to which the field belongs. + * - field_name: The name of the field. + * - field_type: The type of the field. + * - label_display: The display settings for the label. + * + * @see field.html.twig + */ +#} +{% + set classes = [ + 'field', + 'field--name-' ~ field_name|clean_class, + 'field--type-' ~ field_type|clean_class, + 'field--label-' ~ label_display, + ] +%} + + {%- for item in items -%} + {{ item.content }} + {%- endfor -%} + diff --git a/templates/field/field--node--title.html.twig b/templates/field/field--node--title.html.twig new file mode 100644 index 0000000..33b105f --- /dev/null +++ b/templates/field/field--node--title.html.twig @@ -0,0 +1,34 @@ +{# +/** + * @file + * Theme override for the node title field. + * + * This is an override of field.html.twig for the node title field. See that + * template for documentation about its details and overrides. + * + * Available variables: + * - attributes: HTML attributes for the containing span element. + * - items: List of all the field items. Each item contains: + * - attributes: List of HTML attributes for each item. + * - content: The field item content. + * - entity_type: The entity type to which the field belongs. + * - field_name: The name of the field. + * - field_type: The type of the field. + * - label_display: The display settings for the label. + * + * @see field.html.twig + */ +#} +{% + set classes = [ + 'field', + 'field--name-' ~ field_name|clean_class, + 'field--type-' ~ field_type|clean_class, + 'field--label-' ~ label_display, + ] +%} + + {%- for item in items -%} + {{ item.content }} + {%- endfor -%} + diff --git a/templates/field/field--node--uid.html.twig b/templates/field/field--node--uid.html.twig new file mode 100644 index 0000000..9afc591 --- /dev/null +++ b/templates/field/field--node--uid.html.twig @@ -0,0 +1,34 @@ +{# +/** + * @file + * Theme override for the node user field. + * + * This is an override of field.html.twig for the node user field. See that + * template for documentation about its details and overrides. + * + * Available variables: + * - attributes: HTML attributes for the containing span element. + * - items: List of all the field items. Each item contains: + * - attributes: List of HTML attributes for each item. + * - content: The field item content. + * - entity_type: The entity type to which the field belongs. + * - field_name: The name of the field. + * - field_type: The type of the field. + * - label_display: The display settings for the label. + * + * @see field.html.twig + */ +#} +{% + set classes = [ + 'field', + 'field--name-' ~ field_name|clean_class, + 'field--type-' ~ field_type|clean_class, + 'field--label-' ~ label_display, + ] +%} + + {%- for item in items -%} + {{ item.content }} + {%- endfor -%} + diff --git a/templates/field/field--text-long.html.twig b/templates/field/field--text-long.html.twig new file mode 100644 index 0000000..07ce721 --- /dev/null +++ b/templates/field/field--text-long.html.twig @@ -0,0 +1 @@ +{% extends "field--text.html.twig" %} diff --git a/templates/field/field--text-with-summary.html.twig b/templates/field/field--text-with-summary.html.twig new file mode 100644 index 0000000..07ce721 --- /dev/null +++ b/templates/field/field--text-with-summary.html.twig @@ -0,0 +1 @@ +{% extends "field--text.html.twig" %} diff --git a/templates/field/field--text.html.twig b/templates/field/field--text.html.twig new file mode 100644 index 0000000..5d1690c --- /dev/null +++ b/templates/field/field--text.html.twig @@ -0,0 +1,28 @@ +{% extends "field.html.twig" %} +{# +/** + * @file + * Default theme implementation for a text field. + * + * A 'clearfix' class is added, because 'text' fields have a 'format' property + * that allows a Text Format to be associated with the entered text, which then + * applies filtering on output. A common use case is to align images to the left + * or right, and without this 'clearfix' class, such aligned images may be + * rendered outside of the 'text' field formatter's boundaries, and hence + * overlap with other fields. By setting the 'clearfix' class on all 'text' + * fields, we prevent that. + * + * @see https://www.drupal.org/node/2358529 + * + * A 'text-formatted' class is added to assist with default styling of base + * elements such as paragraphs and lists that may not have classes assigned to + * them. This allows user entered content to have default styling without + * interfering with the styles of other UI components such as system generated + * lists or other dynamic content. + * + * @see https://www.drupal.org/node/2539860 + * + * @ingroup themeable + */ +#} +{% set attributes = attributes.addClass('clearfix', 'text-formatted') %} diff --git a/templates/field/field.html.twig b/templates/field/field.html.twig new file mode 100644 index 0000000..1cfbd65 --- /dev/null +++ b/templates/field/field.html.twig @@ -0,0 +1,81 @@ +{# +/** + * @file + * Theme override for a field. + * + * To override output, copy the "field.html.twig" from the templates directory + * to your theme's directory and customize it, just like customizing other + * Drupal templates such as page.html.twig or node.html.twig. + * + * Instead of overriding the theming for all fields, you can also just override + * theming for a subset of fields using + * @link themeable Theme hook suggestions. @endlink For example, + * here are some theme hook suggestions that can be used for a field_foo field + * on an article node type: + * - field--node--field-foo--article.html.twig + * - field--node--field-foo.html.twig + * - field--node--article.html.twig + * - field--field-foo.html.twig + * - field--text-with-summary.html.twig + * - field.html.twig + * + * Available variables: + * - attributes: HTML attributes for the containing element. + * - label_hidden: Whether to show the field label or not. + * - title_attributes: HTML attributes for the title. + * - label: The label for the field. + * - multiple: TRUE if a field can contain multiple items. + * - items: List of all the field items. Each item contains: + * - attributes: List of HTML attributes for each item. + * - content: The field item's content. + * - entity_type: The entity type to which the field belongs. + * - field_name: The name of the field. + * - field_type: The type of the field. + * - label_display: The display settings for the label. + * + * + * @see template_preprocess_field() + */ +#} +{% + set classes = [ + 'field', + 'field--name-' ~ field_name|clean_class, + 'field--type-' ~ field_type|clean_class, + 'field--label-' ~ label_display, + label_display == 'inline' ? 'clearfix', + ] +%} +{% + set title_classes = [ + 'field__label', + label_display == 'visually_hidden' ? 'visually-hidden', + ] +%} + +{% if label_hidden %} + {% if multiple %} + + {% for item in items %} + {{ item.content }} + {% endfor %} + + {% else %} + {% for item in items %} + {{ item.content }} + {% endfor %} + {% endif %} +{% else %} + + {{ label }} + {% if multiple %} +
+ {% endif %} + {% for item in items %} + {{ item.content }}
+ {% endfor %} + {% if multiple %} + + {% endif %} + +{% endif %} diff --git a/templates/field/file-audio.html.twig b/templates/field/file-audio.html.twig new file mode 100644 index 0000000..60ac095 --- /dev/null +++ b/templates/field/file-audio.html.twig @@ -0,0 +1,23 @@ +{# +/** +* @file +* Default theme implementation to display the file entity as an audio tag. +* +* Available variables: +* - attributes: An array of HTML attributes, intended to be added to the +* audio tag. +* - files: And array of files to be added as sources for the audio tag. Each +* element is an array with the following elements: +* - file: The full file object. +* - source_attributes: An array of HTML attributes for to be added to the +* source tag. +* +* @ingroup themeable +*/ +#} +{{ attach_library('seven/classy.file') }} + diff --git a/templates/field/file-video.html.twig b/templates/field/file-video.html.twig new file mode 100644 index 0000000..4ed6794 --- /dev/null +++ b/templates/field/file-video.html.twig @@ -0,0 +1,23 @@ +{# +/** +* @file +* Default theme implementation to display the file entity as a video tag. +* +* Available variables: +* - attributes: An array of HTML attributes, intended to be added to the +* video tag. +* - files: And array of files to be added as sources for the video tag. Each +* element is an array with the following elements: +* - file: The full file object. +* - source_attributes: An array of HTML attributes for to be added to the +* source tag. +* +* @ingroup themeable +*/ +#} +{{ attach_library('seven/classy.file') }} + diff --git a/templates/field/image.html.twig b/templates/field/image.html.twig new file mode 100644 index 0000000..31f782b --- /dev/null +++ b/templates/field/image.html.twig @@ -0,0 +1,18 @@ +{# +/** + * @file + * Theme override of an image. + * + * Available variables: + * - attributes: HTML attributes for the img tag. + * - style_name: (optional) The name of the image style applied. + * + * @see template_preprocess_image() + */ +#} +{% +set classes = [ + style_name ? 'image-style-' ~ style_name|clean_class, +] +%} + diff --git a/templates/field/link-formatter-link-separate.html.twig b/templates/field/link-formatter-link-separate.html.twig new file mode 100644 index 0000000..52c8d29 --- /dev/null +++ b/templates/field/link-formatter-link-separate.html.twig @@ -0,0 +1,22 @@ +{# +/** + * @file + * Theme override of a link with separate title and URL elements. + * + * Available variables: + * - link: The link that has already been formatted by l(). + * - title: (optional) A descriptive or alternate title for the link, which may + * be different than the actual link text. + * + * @see template_preprocess() + * @see template_preprocess_link_formatter_link_separate() + */ +#} +{% apply spaceless %} +
+ {% if title %} +
{{ title }}
+ {% endif %} +
{{ link }}
+
+{% endapply %} diff --git a/templates/field/time.html.twig b/templates/field/time.html.twig new file mode 100644 index 0000000..f2912b7 --- /dev/null +++ b/templates/field/time.html.twig @@ -0,0 +1,22 @@ +{# +/** + * @file + * Theme override for a date / time element. + * + * Available variables + * - timestamp: (optional) A UNIX timestamp for the datetime attribute. If the + * datetime cannot be represented as a UNIX timestamp, use a valid datetime + * attribute value in attributes.datetime. + * - text: (optional) The content to display within the