Redesign folder-view category/item cards to eportfolio layout with dropdown actions

[Copilot]

This updates view_items.php folder-mode card rendering to match the new eportfolio card structure, moving actions into a Bootstrap 5 3-dot menu and relocating metadata to card footers. Flat-mode rendering is explicitly preserved and routed through the existing template path to avoid behavior drift.

• Folder-mode rendering split (no flat-mode regression)

  • Added $foldermode to block_exaport_artefact_list_item() and block_exaport_artefact_template_bootstrap_card().
  • block_exaport_artefact_list_item(..., $layout == 'folder') now gates the redesigned markup to folder mode only.
  • Existing flat-mode Bootstrap card output remains unchanged.

• Category card redesign (block_exaport_category_template_bootstrap_card)

  • Replaced header/image/title layout with:
    • card-top (dropdown area),
    • card-body position-relative + h5.card-title + a.stretched-link,
    • footer placeholder.
  • Parent (“back”) tile keeps pinned-first semantics (data-pinned="true"), has no edit/delete controls, and retains navigation behavior.
  • Preserved drag/drop and selector-critical classes (excomdos_tile, excomdos_tile_category, id-N) and filter attrs.

• Artefact card redesign in folder mode

  • Top row now contains title+type icon (left) and 3-dot dropdown (right).
  • Body now renders intro preview text.
  • Footer now shows date (left) and competency/comment metadata (right).
  • Preserved required classes/attrs (excomdos_tile, excomdos_tile_item, id-N, data-item-name, data-category-ids, data-item-date).

• Action menu consolidation

  • Added reusable block_exaport_render_card_dropdown($viewurl, $editurl, $deleteurl).
  • Menu labels use core strings: get_string('view'), get_string('edit'), get_string('delete').
  • Ownership/type rules enforced:
    • own items/categories: View/Edit/Delete,
    • shared/sharedstudent categories: View-only,
    • parent tile: no dropdown actions.

• Styling

  • Appended eportfolio card styles to css/view_items.css:
    • .card-eportfolio, .card-top, .card-title, .card-body, .card-footer
    • .eportfolio-card-more dropdown toggle styling
    • .eportfolio-date, .eportfolio-comment-count, .col-card-folder .card-eportfolio
  • No new inline layout styles introduced for the redesign.

// Folder mode is now explicit and only this path gets the new card markup.
foreach ($items as $item) {
    echo block_exaport_artefact_list_item(
        $item,
        $courseid,
        $type,
        $categoryid,
        $currentcategory,
        $layout == 'folder'
    );
}

Original prompt

Redesign: Category and item cards to match new eportfolio card design

Goal

Redesign the Bootstrap card templates for categories (folders) and items (artefacts) in view_items.php to match the new card design. The reference HTML structure is provided below.

---

Reference HTML for the TARGET design (eportfolio_cards.php)

Folder card:

<div class="col col-card-folder">
  <div class="card card-eportfolio h-100">
    <div class="card-top d-flex justify-content-end">
      <span class="eportfolio-card-more">
        <a class="dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
          <i class="fa-regular fa-ellipsis-vertical fa-fw" aria-hidden="true"></i>
        </a>
        <ul class="dropdown-menu dropdown-menu-end">
          <li><a class="dropdown-item" href="#"><i class="fa-regular fa-eye fa-fw" aria-hidden="true"></i> Anzeigen</a></li>
          <li><a class="dropdown-item" href="#"><i class="fa-regular fa-pen-to-square fa-fw" aria-hidden="true"></i> bearbeiten</a></li>
          <li><a class="dropdown-item" href="#"><i class="fa-regular fa-trash-can fa-fw" aria-hidden="true"></i> Löschen</a></li>
        </ul>
      </span>
    </div>
    <div class="card-body position-relative">
      <h5 class="card-title">
        <a href="..." class="stretched-link">
          <i class="icon fa fa-folder fa-fw me-1"></i>
          Category Name
        </a>
      </h5>
    </div>
    <div class="card-footer d-flex justify-content-end align-items-center">
      <!-- sharing: skip for now, leave footer empty or omit -->
    </div>
  </div>
</div>

Item (artefact) card:

<div class="col">
  <div class="card card-eportfolio h-100">
    <div class="card-top d-flex justify-content-between">
      <h5 class="card-title">
        <a href="...">
          <i class="icon fa fa-file fa-fw me-1"></i>
          Item Title
        </a>
      </h5>
      <span class="eportfolio-card-more">
        <a class="dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
          <i class="fa-regular fa-ellipsis-vertical fa-fw" aria-hidden="true"></i>
        </a>
        <ul class="dropdown-menu dropdown-menu-end">
          <li><a class="dropdown-item" href="..."><i class="fa-regular fa-eye fa-fw" aria-hidden="true"></i> Anzeigen</a></li>
          <li><a class="dropdown-item" href="..."><i class="fa-regular fa-pen-to-square fa-fw" aria-hidden="true"></i> bearbeiten</a></li>
          <li><a class="dropdown-item" href="..."><i class="fa-regular fa-trash-can fa-fw" aria-hidden="true"></i> Löschen</a></li>
        </ul>
      </span>
    </div>
    <div class="card-body">
      <p class="card-text">intro text...</p>
    </div>
    <div class="card-footer d-flex justify-content-between align-items-center">
      <span class="eportfolio-date">03.03.2026</span>
      <div>
        <!-- competencies icon with tooltip -->
        <!-- comment count -->
        <!-- sharing: skip for now -->
      </div>
    </div>
  </div>
</div>

---

Current state HTML (for reference)

The current rendered HTML for existing tiles (exaport_view_items.php) uses:

• col mb-4 > card h-100 excomdos_tile excomdos_tile_category id-N for folders
• col mb-4 exaport-flat-item > card h-100 excomdos_tile excomdos_tile_item id-N for items
• Edit/delete links are in card-header inside excomdos_tileedit span
• Thumbnail image in card-body
• Title in card-extitle exomdos_tiletitle
• Date in card-footer

---

Specific changes required

1. Edit and delete → move into 3-dot dropdown menu

• Remove the existing excomdos_tileedit span from the card header
• Add a Bootstrap dropdown eportfolio-card-more with fa-ellipsis-vertical toggle
• Menu items: View (link to item/category page), Edit (existing edit URL), Delete (existing delete URL)
• Only show Edit/Delete for own items ($item->userid == $USER->id / $type == 'mine')
• For shared/sharedstudent categories: only show View
• Use data-bs-toggle="dropdown" (Bootstrap 5 syntax, already present in Moodle 4+)

2. Card structure changes — categories (folders)

• Replace the current card-header + card-body (big icon) + card-extitle layout
• New structure:
  • card-top d-flex justify-content-end → contains the 3-dot dropdown (only if editable)
  • card-body position-relative → contains h5.card-title > a.stretched-link with small folder icon + category name
  • card-footer → empty for now (sharing not implemented yet); can be omitted if empty
• Keep excomdos_tile, excomdos_tile_category, id-N, drag-drop classes on the inner card div
• Keep data-pinned, data-item-name on the outer col wrapper

3. Card structure changes — items (artefacts)

• Replace the current card-header (type icon + edit icons) + card-body (thumbnail) + card-extitle (title) + card-footer (date) layout
• New structure:
  • `card-top d-flex justify-conten...

This pull request was created from Copilot chat.