ugent-library / biblio-backoffice

Apache License 2.0
7 stars 0 forks source link

Display all relevant information in overview list cards #705

Closed mietcls closed 2 years ago

mietcls commented 2 years ago

Story

As a librarian and as a researcher, I can see the relevant information in the overview list cards.

Note; if this is too big, we can split it up.

Related:

Success criteria

For full overview, see table below screenshots ⬇️.

Adaptions

Additions

Out of scope

Screenshots

Publications

Librarians

Schermafbeelding 2022-10-20 om 13 35 51

Researchers

Schermafbeelding 2022-10-14 om 16 08 14

Datasets

Librarians & Researchers: same information, only the title is clickable for researchers and the departments are gone.

Schermafbeelding 2022-10-21 om 13 46 59

Open versus View icon

When the record is locked, show an if-eye icon instead of a if-edit icon

Schermafbeelding 2022-10-17 om 18 18 29 Schermafbeelding 2022-10-17 om 18 19 37

Success criteria

✅ = done 🟪 = todo

In the cards, I can see...

Information Publications Datasets Visible to librarians Visible to researchers Info
Identification
Title TBC Short title
Record type not applicable
Classification not applicable
Biblio ID
Pipeline information
Biblio status
Locked
Creation date 🟪 🟪 🟪 🟪 will move to show more later
Created by 🟪 🟪 🟪 🟪 will move to show more later
Message from - to librarians
Essential completion information
Full text missing not applicable
Access level missing 🕰 🕰 🕰 🕰 later
Access level current
Access level after embargo only when applicable
Authors subset with UGent / ORCID information when applicable + link to all not applicable
Creators subset with UGent / ORCID information when applicable + link to all not applicable
Departments 🟪 🟪 🟪 not relevant will move to show more later
Departments "info on hover" 🟪 🟪 🟪 not relevant TBD if executed now will move to show more later
Departments "2 more" 🟪 🟪 🟪 not relevant TBD if executed now will move to show more later
Publication year
Publisher name 🟪
Journal or publication short title / book title not applicable
Issue number, volume, pages 🟪
Reviewing info for librarians and researchers
Number of related datasets not applicable
Number of related publications not applicable
Visible on ORCID
VABB 🟪 not applicable 🟪 not applicable
Legacy record 🟪 not applicable 🟪 not applicable Can only be adapted by librarians
Show more
Show more button 🕰 🕰 🕰 🕰 later
Updated date 🕰 🕰 🕰 🕰 later in show more
Updated date 🕰 🕰 🕰 🕰 later in show more
Actions top right
Edit / view record icon 🟪 🟪 🟪 🟪 show if-eye icon when it is locked
Go to all documents icon not applicable not relevant
More actions icon See #715

Implementation suggestion

Publication for librarians

<li class="list-group-item overflow-hidden">
  <div class="list-group-item-inner">
    <div class="list-group-item-main u-min-w-0">
      <div class="c-thumbnail-and-text align-items-start d-block d-lg-flex">
        <a href="/biblio-backend/publication/999953?redirect-url=%2Fbiblio-backend%2Fpublication">
          <div class="c-thumbnail c-thumbnail-5-4 c-thumbnail-small c-thumbnail-xl-large mb-6 mb-xl-0 flex-shrink-0">
            <div class="c-thumbnail-inner">
              <i class="if if-article"></i>
            </div>
          </div>
        </a>
        <div class="c-thumbnail-text u-min-w-0">
          <div class="bc-toolbar bc-toolbar--auto">
            <div class="bc-toolbar-left flex-wrap">
              <span class="c-subline text-nowrap pr-3">
                <span class="badge badge-pill badge-success">
                  <span class="badge-text">Biblio Public</span>
                </span>
              </span>
              <span class="c-subline text-nowrap mr-3 pr-3 my-2 border-right" data-toggle="tooltip" data-placement="bottom" data-original-title="Locked for editing">
                <i class="if if-lock if--small if--muted"></i>
                <span class="text-muted c-body-small ml-2">Locked</span>
              </span>
              <span class="c-subline text-nowrap mr-3 pr-3 my-2 border-right">Journal Article: A1</span>
              <div class="c-subline text-nowrap mr-3 pr-3 my-2 border-right">
                <i class="if if-ghent-university if--small if--primary"></i>
                <span class="c-subline text-truncate pl-2">UGent Access</span>
              </div>
              <div class="c-subline text-nowrap mr-3 pr-3 my-2 border-right d-none">
                <i class="if if-error-circle if--error"></i>
                <span class="pl-2 text-muted">Full text missing</span>
              </div>
              <div class="c-subline text-nowrap mr-3 pr-3 my-2 border-right d-none">
                <i class="if if-error-circle if--error"></i>
                <span class="pl-2 text-muted">Access level missing</span>
              </div>
              <div class="c-subline text-nowrap mr-3 pr-3 my-2">
                <i class="if if-calendar if--small if--muted"></i>
                <span class="c-subline text-truncate pl-2">Open Access from 23-05-2022</span>
              </div>
            </div>
            <div class="bc-toolbar-right">
              <div class="bc-toolbar-item ml-auto ml-lg-0">
                <div class="c-button-toolbar">
                  <button class="btn btn-link btn-link-p-0 btn-icon-only" type="button">
                    <i class="if if-edit">
                    </i>
                    <div class="sr-only">Edit</div>
                  </button>
                  <button class="btn btn-link btn-link-p-0 btn-icon-only" type="button">
                    <i class="if if-file">
                    </i>
                    <div class="sr-only">Download files</div>
                  </button>
                  <div class="dropdown">
                    <button class="btn btn-link btn-link-p-0 btn-icon-only" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      <i class="if if-more">
                      </i>
                      <div class="sr-only">More options</div>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <h4 class="list-group-item-title">
          Neuropsychiatric aspects of COVID-19 pandemic: A selective review</h4>
          <div class="c-meta-list c-meta-list-horizontal">
            <span class="c-meta-item">2020</span>
            <span class="c-meta-item">Publisher name</span>
            <span class="c-meta-item">Journal or publication short title / book title</span>
            <span class="c-meta-item">24 (1), p. 20-36</span>
          </div>
          <div class="c-meta-list c-meta-list-horizontal">
            <div class="c-meta-item">
              <i class="if if-ghent-university" data-toggle="tooltip" title="" data-placement="bottom" data-original-title="UGent author"></i>
              <span>Jane Cooper</span>
            </div>
            <div class="c-meta-item">
              <i class="if if-ghent-university" data-toggle="tooltip" title="" data-placement="bottom" data-original-title="UGent author"></i>
              <span>Brooklyn Simmons</span>
            </div>
            <div class="c-meta-item">
              <i class="if if-ghent-university" data-toggle="tooltip" title="" data-placement="bottom" data-original-title="UGent author"></i>
              <i class="if if-orcid" data-toggle="tooltip" title="" data-placement="bottom" data-original-title="Author with ORCID"></i>
              <span class="muted">Esther Howard</span>
            </div>
            <div class="c-meta-item">
              <a class="c-link c-link-muted" href="/biblio-backend/publication/999720?redirect-url=%2Fbiblio-backend%2Fpublication&amp;show=contributors">2 more authors</a>
            </div>
          </div>

          <div class="c-meta-list c-meta-list-horizontal">
            <div class="c-meta-item"> <a href="#" class="c-link c-link-muted" data-toggle="tooltip" title="" data-placement="bottom" data-original-title="Department of Large Animal Surgery, Anaesthesia and Orthopaedics (DI10)">DI10</a></div>
            <div class="c-meta-item"> <a href="#" class="c-link c-link-muted" data-toggle="tooltip" title="" data-placement="bottom" data-original-title="Department of Large Animal Surgery, Anaesthesia and Orthopaedics (DI10)">DI10</a></div>
            <div class="c-meta-item"> <a href="#" class="c-link c-link-muted" data-toggle="tooltip" title="" data-placement="bottom" data-original-title="Department of Pathology, bacteriology and poultry diseases (ceased 1-1-2022) (DI05*)">DI05*</a></div>
            <div class="c-meta-item">
              <a class="c-link c-link-muted" href="/biblio-backend/publication/999720?redirect-url=%2Fbiblio-backend%2Fpublication&amp;show=contributors">2 more departments</a>
            </div>
          </div>
          <div class="c-meta-list c-meta-list-horizontal d-none">
            <span class="c-meta-item">Long project name New uses for X-ray Tomography in natural building stones: characterization, pathologies, and restoration of historical and recent roofing slates</span>
          </div>
          <div class="bc-toolbar bc-toolbar-responsive">
            <div class="bc-toolbar-left flex-wrap">
              <div class="text-muted c-body-small text-truncate my-3">
              Biblio ID:
                <code class="c-code ml-3">
                  <button class="btn btn-muted btn-sm text-muted" href="#">
                    <span class="btn-text">01G3TZB614X7XXR52JYYGAND25</span>
                    <i class="if if-copy ml-2 border-left"></i>
                  </button>
                </code>
              </div>
            </div>
            <div class="bc-toolbar-right flex-wrap">
              <div class="bc-toolbar-item">
                <span class="c-body-small text-muted text-truncate my-2">Created 2 months ago by Marthe Michael Leonard&nbsp;</span>
              </div>
              <div class="bc-toolbar-item">
                <ul class="c-meta-list c-meta-list-horizontal flex-nowrap">
                  <li class="c-meta-item" data-toggle="tooltip" title="" data-placement="bottom" data-original-title="c:vabb:419551 (VABB-1, not approved, 2017)">
                    <i class="if if-bar-chart if--muted if--small mr-2"></i>
                    <span class="text-muted c-body-small">VABB</span>
                  </li>
                  <li class="c-meta-item" data-toggle="tooltip" title="" data-placement="bottom" data-original-title="Legacy record">
                    <i class="if if-forbid if--muted if--small mr-2"></i>
                    <span class="text-muted c-body-small">Legacy</span>
                  </li>
                  <li class="c-meta-item" data-toggle="tooltip" title="" data-placement="bottom" data-original-title="2 related datasets">
                    <i class="if if-database if--muted if--small mr-2"></i>
                    <span class="text-muted c-body-small">2</span>
                  </li>
                  <li class="c-meta-item d-none" data-toggle="tooltip" data-placement="bottom" data-original-title="Locked for editing">
                    <i class="if if-file if--small if--muted"></i>
                    <span class="text-muted c-body-small">2</span>
                  </li>
                  <li class="c-meta-item" data-toggle="tooltip" title="" data-placement="bottom" data-original-title="Sent to Orcid">
                    <i class="if if-orcid if--muted if--small"></i>
                    <i class="if if-check text-success if--small"></i>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="c-comment mt-4">
            <div class="bc-avatar-and-text align-items-start">
              <div class="bc-avatar bc-avatar-icon">
                <i class="if if-message"></i>
              </div>
              <div class="bc-avatar-text flex-fill">
                <div class="bc-toolbar bc-toolbar--auto w-100">
                  <div class="bc-toolbar-left">
                    <h4 class="c-comment-title">Message</h4>
                  </div>
                  <div class="bc-toolbar-right">
                  </div>
                </div>
                <p class="mt-2">IN PRESS (This book will be published on November 7, 2022, https://www.degruyter.com/document/isbn/9783110743043/html) - graag biblio@ugent.be contacteren en pdf van de cover, het voorwerk en de inhoudstafel mailen bij publicatie.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</li>

Publication for researchers

<li class="list-group-item overflow-hidden">
  <div class="list-group-item-inner">
    <div class="list-group-item-main u-min-w-0">
      <div class="c-thumbnail-and-text align-items-start d-block d-lg-flex">
        <a href="#">
          <div class="c-thumbnail c-thumbnail-5-4 c-thumbnail-small c-thumbnail-xl-large mb-6 mb-xl-0 flex-shrink-0">
            <div class="c-thumbnail-inner">
              <i class="if if-article"></i>
            </div>
          </div>
        </a>
        <div class="c-thumbnail-text u-min-w-0">
          <div class="bc-toolbar bc-toolbar--auto">
            <div class="bc-toolbar-left flex-wrap">
              <span class="c-subline text-nowrap pr-3">
                <span class="badge badge-pill badge-success">
                  <span class="badge-text">Biblio Public</span>
                </span>
              </span>
              <span class="c-subline text-nowrap mr-3 pr-3 my-2 border-right" data-toggle="tooltip" data-placement="bottom" data-original-title="Locked for editing">
                <i class="if if-lock if--small if--muted"></i>
                <span class="text-muted c-body-small ml-2">Locked</span>
              </span>
              <span class="c-subline text-nowrap mr-3 pr-3 my-2 border-right">Journal Article: A1</span>
              <div class="c-subline text-nowrap mr-3 pr-3 my-2 border-right">
                <i class="if if-ghent-university if--small if--primary"></i>
                <span class="c-subline text-truncate pl-2">UGent Access</span>
              </div>
              <div class="c-subline text-nowrap mr-3 pr-3 my-2 border-right d-none">
                <i class="if if-error-circle if--error"></i>
                <span class="pl-2 text-muted">Full text missing</span>
              </div>
              <div class="c-subline text-nowrap mr-3 pr-3 my-2 border-right d-none">
                <i class="if if-error-circle if--error"></i>
                <span class="pl-2 text-muted">Access level missing</span>
              </div>
              <div class="c-subline text-nowrap mr-3 pr-3 my-2">
                <i class="if if-calendar if--small if--muted"></i>
                <span class="c-subline text-truncate pl-2">Open Access from 23-05-2022</span>
              </div>
            </div>
            <div class="bc-toolbar-right">
              <div class="bc-toolbar-item ml-auto ml-lg-0">
                <div class="c-button-toolbar">
                  <button class="btn btn-link btn-link-p-0 btn-icon-only" type="button">
                    <i class="if if-edit"></i>
                    <div class="sr-only">Edit</div>
                  </button>
                  <div class="dropdown">
                    <button class="btn btn-link btn-link-p-0 btn-icon-only" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      <i class="if if-more"></i>
                      <div class="sr-only">More options</div>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <h4 class="list-group-item-title">
            <a href="#">Neuropsychiatric aspects of COVID-19 pandemic: A selective review</a>
          </h4>
          <div class="c-meta-list c-meta-list-horizontal">
            <span class="c-meta-item">2020</span>
            <span class="c-meta-item">Publisher name</span>
            <span class="c-meta-item">Journal or publication short title / book title</span>
            <span class="c-meta-item">24 (1), p. 20-36</span>
          </div>
          <div class="c-meta-list c-meta-list-horizontal">
            <div class="c-meta-item">
              <i class="if if-ghent-university" data-toggle="tooltip" title="" data-placement="bottom" data-original-title="UGent author"></i>
              <span>Jane Cooper</span>

            </div>
            <div class="c-meta-item">
              <i class="if if-ghent-university" data-toggle="tooltip" title="" data-placement="bottom" data-original-title="UGent author"></i>
              <span>Brooklyn Simmons</span>

            </div>
            <div class="c-meta-item">
              <i class="if if-ghent-university" data-toggle="tooltip" title="" data-placement="bottom" data-original-title="UGent author"></i><i class="if if-orcid" data-toggle="tooltip" title="" data-placement="bottom" data-original-title="Author with ORCID"></i>
              <span class="muted">Esther Howard</span>
            </div>
            <div class="c-meta-item">
              <a class="c-link c-link-muted" href="#">
                2 more authors
              </a>
            </div>
          </div>
          <div class="bc-toolbar bc-toolbar-responsive">
            <div class="bc-toolbar-left flex-wrap">
              <div class="text-muted c-body-small text-truncate my-3">Biblio ID:
                <code class="c-code ml-3">01G3TZB614X7XXR52JYYGAND25</code>
              </div>
            </div>
            <div class="bc-toolbar-right flex-wrap">
              <div class="bc-toolbar-item">
                <span class="c-body-small text-muted text-truncate my-2">Created 3 months ago&nbsp;by Marthe Michael Leonard&nbsp;</span>
              </div>
              <div class="bc-toolbar-item">
                <ul class="c-meta-list c-meta-list-horizontal flex-nowrap">
                  <li class="c-meta-item" data-toggle="tooltip" title="" data-placement="bottom" data-original-title="2 related datasets">
                    <i class="if if-database if--muted if--small mr-2"></i>
                    <span class="text-muted c-body-small">2</span>
                  </li>
                  <li class="c-meta-item" data-toggle="tooltip" title="" data-placement="bottom" data-original-title="Sent to Orcid">
                    <i class="if if-orcid if--muted if--small"></i>
                    <i class="if if-check text-success if--small"></i>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="c-comment mt-4">
            <div>
              <h4 class="c-comment-title">Message</h4>
              <p class="mt-2">OAts (mits gratis registratie)</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</li>

Dataset for librarians

<li class="list-group-item overflow-hidden">
  <div class="list-group-item-inner">
    <div class="list-group-item-main u-min-w-0">
      <div class="c-thumbnail-and-text align-items-start d-block d-lg-flex">
        <a href="/biblio-backend/publication/999953?redirect-url=%2Fbiblio-backend%2Fpublication">
          <div class="c-thumbnail c-thumbnail-5-4 c-thumbnail-small c-thumbnail-xl-large mb-6 mb-xl-0 flex-shrink-0">
            <div class="c-thumbnail-inner">
              <i class="if if-article"></i>
            </div>
          </div>
        </a>
        <div class="c-thumbnail-text u-min-w-0">
          <div class="bc-toolbar bc-toolbar--auto">
            <div class="bc-toolbar-left flex-wrap">
              <span class="c-subline text-nowrap pr-3">
                <span class="badge badge-pill badge-success">
                  <span class="badge-text">Biblio Public</span>
                </span>
              </span>
              <span class="c-subline text-nowrap mr-3 pr-3 my-2 border-right" data-toggle="tooltip" data-placement="bottom" data-original-title="Locked for editing">
                <i class="if if-lock if--small if--muted"></i>
                <span class="text-muted c-body-small ml-2">Locked</span>
              </span>
              <span class="c-subline text-nowrap mr-3 pr-3 my-2 border-right">
                <i class="if if-ghent-university if--small if--primary"></i>
                <span class="c-subline text-truncate pl-2">UGent Access</span>
              </span>
              <span class="c-subline text-nowrap mr-3 pr-3 my-2 border-right d-none">
                <i class="if if-error-circle if--error"></i>
                <span class="pl-2 text-muted">Full text missing</span>
              </span>
              <span class="c-subline text-nowrap mr-3 pr-3 my-2 border-right d-none">
                <i class="if if-error-circle if--error"></i>
                <span class="pl-2 text-muted">Access level missing</span>
              </span>
              <span class="c-subline text-nowrap mr-3 pr-3 my-2">
                <i class="if if-calendar if--small if--muted"></i>
                <span class="c-subline text-truncate pl-2">Open Access from 23-05-2022</span>
              </span>
            </div>
            <div class="bc-toolbar-right">
              <div class="bc-toolbar-item ml-auto ml-lg-0">
                <div class="c-button-toolbar">
                  <button class="btn btn-link btn-link-p-0 btn-icon-only" type="button">
                    <i class="if if-edit"></i>
                    <div class="sr-only">Edit</div>
                  </button>
                  <div class="dropdown">
                    <button class="btn btn-link btn-link-p-0 btn-icon-only" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      <i class="if if-more"></i>
                      <div class="sr-only">More options</div>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <h4 class="list-group-item-title">Data from: Predicting bushmeat biomass from species composition captured by camera traps: implications for locally-based wildlife monitoring</h4>
          <div class="c-meta-list c-meta-list-horizontal">
            <span class="c-meta-item">2021</span>
            <span class="c-meta-item">Publisher name</span>
            <span class="c-meta-item">
              <span class="c-body-small text-muted">
                <a class="c-link c-link-muted" target="_blank" href="#">
                  <span class="text-decoration-underline"> View in external repository</span>
                  <i class="if if--small if-external-link"></i>
                </a>
              </span>
            </span>
          </div>
          <div class="c-meta-list c-meta-list-horizontal">
            <div class="c-meta-item">
              <i class="if if-ghent-university" data-toggle="tooltip" title="" data-placement="bottom" data-original-title="UGent author"></i>
              <span>Jane Cooper</span>
            </div>
            <div class="c-meta-item">
              <i class="if if-ghent-university" data-toggle="tooltip" title="" data-placement="bottom" data-original-title="UGent author"></i>
              <span>Brooklyn Simmons</span>
            </div>
            <div class="c-meta-item">
              <i class="if if-ghent-university" data-toggle="tooltip" title="" data-placement="bottom" data-original-title="UGent author"></i><i class="if if-orcid" data-toggle="tooltip" title="" data-placement="bottom" data-original-title="Author with ORCID"></i>
              <span class="muted">Esther Howard</span>
            </div>
            <div class="c-meta-item">
              <a class="c-link c-link-muted" href="/biblio-backend/publication/999720?redirect-url=%2Fbiblio-backend%2Fpublication&amp;show=contributors">2 more authors</a>
            </div>
          </div>
          <div class="c-meta-list c-meta-list-horizontal">
            <div class="c-meta-item"> <a href="#" class="c-link c-link-muted" data-toggle="tooltip" title="" data-placement="bottom" data-original-title="Department of Large Animal Surgery, Anaesthesia and Orthopaedics (DI10)">DI10</a></div>
            <div class="c-meta-item"> <a href="#" class="c-link c-link-muted" data-toggle="tooltip" title="" data-placement="bottom" data-original-title="Department of Large Animal Surgery, Anaesthesia and Orthopaedics (DI10)">DI10</a></div>
            <div class="c-meta-item"> <a href="#" class="c-link c-link-muted" data-toggle="tooltip" title="" data-placement="bottom" data-original-title="Department of Pathology, bacteriology and poultry diseases (ceased 1-1-2022) (DI05*)">DI05*</a></div>
            <div class="c-meta-item">
              <a class="c-link c-link-muted" href="#">2 more departments</a>
            </div>
          </div>
          <div class="bc-toolbar bc-toolbar-responsive">
            <div class="bc-toolbar-left flex-wrap">
              <div class="text-muted c-body-small text-truncate my-3">Biblio ID:
                <code class="c-code ml-3">01G3TZB614X7XXR52JYYGAND25</code>
              </div>
            </div>
            <div class="bc-toolbar-right flex-wrap">
              <div class="bc-toolbar-item">
                <span class="c-body-small text-muted text-truncate my-2">Created 3 months ago&nbsp;by Marthe Michael Leonard&nbsp;</span>
              </div>
              <div class="bc-toolbar-item">
                <ul class="c-meta-list c-meta-list-horizontal flex-nowrap">
                  <li class="c-meta-item" data-toggle="tooltip" title="" data-placement="bottom" data-original-title="2 related datasets">
                    <i class="if if-article if--muted if--small mr-2"></i>
                    <span class="text-muted c-body-small">2</span>
                  </li>
                  <li class="c-meta-item" data-toggle="tooltip" title="" data-placement="bottom" data-original-title="Sent to Orcid">
                    <i class="if if-orcid if--muted if--small"></i>
                    <i class="if if-check text-success if--small"></i>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="c-comment mt-4">
            <div class="bc-avatar-and-text align-items-start">
              <div class="bc-avatar bc-avatar-icon">
                <i class="if if-message"></i>
              </div>
              <div class="bc-avatar-text flex-fill">
                <div class="bc-toolbar bc-toolbar--auto w-100">
                  <div class="bc-toolbar-left">
                    <h4 class="c-comment-title">Message</h4>
                  </div>
                  <div class="bc-toolbar-right">
                  </div>
                </div>
                <p class="mt-2">A message</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</li>

Datasets for researchers

<li class="list-group-item overflow-hidden">
  <div class="list-group-item-inner">
    <div class="list-group-item-main u-min-w-0">
      <div class="c-thumbnail-and-text align-items-start d-block d-lg-flex">
        <a href="/biblio-backend/publication/999953?redirect-url=%2Fbiblio-backend%2Fpublication">
          <div class="c-thumbnail c-thumbnail-5-4 c-thumbnail-small c-thumbnail-xl-large mb-6 mb-xl-0 flex-shrink-0">
            <div class="c-thumbnail-inner">
              <i class="if if-article"></i>
            </div>
          </div>
        </a>
        <div class="c-thumbnail-text u-min-w-0">
          <div class="bc-toolbar bc-toolbar--auto">
            <div class="bc-toolbar-left flex-wrap">
              <span class="c-subline text-nowrap pr-3">
                <span class="badge badge-pill badge-success">
                  <span class="badge-text">Biblio Public</span>
                </span>
              </span>
              <span class="c-subline text-nowrap mr-3 pr-3 my-2 border-right" data-toggle="tooltip" data-placement="bottom" data-original-title="Locked for editing">
                <i class="if if-lock if--small if--muted"></i>
                <span class="text-muted c-body-small ml-2">Locked</span>
              </span>
              <span class="c-subline text-nowrap mr-3 pr-3 my-2 border-right">
                <i class="if if-ghent-university if--small if--primary"></i>
                <span class="c-subline text-truncate pl-2">UGent Access</span>
              </span>
              <span class="c-subline text-nowrap mr-3 pr-3 my-2 border-right d-none">
                <i class="if if-error-circle if--error"></i>
                <span class="pl-2 text-muted">Full text missing</span>
              </span>
              <span class="c-subline text-nowrap mr-3 pr-3 my-2 border-right d-none">
                <i class="if if-error-circle if--error"></i>
                <span class="pl-2 text-muted">Access level missing</span>
              </span>
              <span class="c-subline text-nowrap mr-3 pr-3 my-2">
                <i class="if if-calendar if--small if--muted"></i>
                <span class="c-subline text-truncate pl-2">Open Access from 23-05-2022</span>
              </span>
            </div>
            <div class="bc-toolbar-right">
              <div class="bc-toolbar-item ml-auto ml-lg-0">
                <div class="c-button-toolbar">
                  <button class="btn btn-link btn-link-p-0 btn-icon-only" type="button">
                    <i class="if if-edit"></i>
                    <div class="sr-only">Edit</div>
                  </button>
                  <div class="dropdown">
                    <button class="btn btn-link btn-link-p-0 btn-icon-only" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      <i class="if if-more"></i>
                      <div class="sr-only">More options</div>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <h4 class="list-group-item-title">
            <a href="#">Data from: Predicting bushmeat biomass from species composition captured by camera traps: implications for locally-based wildlife monitoring</a>
          </h4>
          <div class="c-meta-list c-meta-list-horizontal">
            <span class="c-meta-item">2021</span>
            <span class="c-meta-item">Publisher name</span>
            <span class="c-meta-item">
              <span class="c-body-small text-muted">
                <a class="c-link c-link-muted" target="_blank" href="#">
                  <span class="text-decoration-underline"> View in external repository</span>
                  <i class="if if--small if-external-link"></i>
                </a>
              </span>
            </span>
          </div>
          <div class="c-meta-list c-meta-list-horizontal">
            <div class="c-meta-item">
              <i class="if if-ghent-university" data-toggle="tooltip" title="" data-placement="bottom" data-original-title="UGent author"></i>
              <span>Jane Cooper</span>
            </div>
            <div class="c-meta-item">
              <i class="if if-ghent-university" data-toggle="tooltip" title="" data-placement="bottom" data-original-title="UGent author"></i>
              <span>Brooklyn Simmons</span>
            </div>
            <div class="c-meta-item">
              <i class="if if-ghent-university" data-toggle="tooltip" title="" data-placement="bottom" data-original-title="UGent author"></i><i class="if if-orcid" data-toggle="tooltip" title="" data-placement="bottom" data-original-title="Author with ORCID"></i>
              <span class="muted">Esther Howard</span>
            </div>
            <div class="c-meta-item">
              <a class="c-link c-link-muted" href="/biblio-backend/publication/999720?redirect-url=%2Fbiblio-backend%2Fpublication&amp;show=contributors">2 more authors</a>
            </div>
          </div>
          <div class="bc-toolbar bc-toolbar-responsive">
            <div class="bc-toolbar-left flex-wrap">
              <div class="text-muted c-body-small text-truncate my-3">Biblio ID:
                <code class="c-code ml-3">01G3TZB614X7XXR52JYYGAND25</code>
              </div>
            </div>
            <div class="bc-toolbar-right flex-wrap">
              <div class="bc-toolbar-item">
                <span class="c-body-small text-muted text-truncate my-2">Created 3 months ago&nbsp;by Marthe Michael Leonard&nbsp;</span>
              </div>
              <div class="bc-toolbar-item">
                <ul class="c-meta-list c-meta-list-horizontal flex-nowrap">
                  <li class="c-meta-item" data-toggle="tooltip" title="" data-placement="bottom" data-original-title="2 related datasets">
                    <i class="if if-article if--muted if--small mr-2"></i>
                    <span class="text-muted c-body-small">2</span>
                  </li>
                  <li class="c-meta-item" data-toggle="tooltip" title="" data-placement="bottom" data-original-title="Sent to Orcid">
                    <i class="if if-orcid if--muted if--small"></i>
                    <i class="if if-check text-success if--small"></i>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="c-comment mt-4">
            <div class="bc-avatar-and-text align-items-start">
              <div class="bc-avatar bc-avatar-icon">
                <i class="if if-message"></i>
              </div>
              <div class="bc-avatar-text flex-fill">
                <div class="bc-toolbar bc-toolbar--auto w-100">
                  <div class="bc-toolbar-left">
                    <h4 class="c-comment-title">Message</h4>
                  </div>
                  <div class="bc-toolbar-right">
                  </div>
                </div>
                <p class="mt-2">A message</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</li>
mietcls commented 2 years ago

Sketch for Biblio ID copy button with interaction:

non-clicked

Schermafbeelding 2022-10-17 om 16 22 04

clicked, show checkmark for 2 seconds (replace if-copy with if-check-circle and add text-success to colour green)

Schermafbeelding 2022-10-17 om 16 26 23
<div class="text-muted c-body-small text-truncate my-3">
Biblio ID:
  <code class="c-code ml-3">
    <button class="btn btn-muted btn-sm text-muted" href="#">
      <span class="btn-text">01G3TZB614X7XXR52JYYGAND25</span>
      <i class="if if-copy ml-2 border-left"></I>
    </button>
  </code>
</div>
mietcls commented 2 years ago

Add icon for legacy, preferably old man.

Edit: lack of old man. We can use the "if-forbid" icon

mietcls commented 2 years ago

Noticed a small visual bug for smaller screens when showing it to @netsensei, which can be easily fixed. Will add this to the description.

Only thing that would change, is that inside the bc-toolbar where the biblio status is located, the child bc-toolbar-left will get a flex-wrap class added so it breaks on smaller screens.

Behaviour without the flex-wrap

Schermafbeelding 2022-10-20 om 13 31 18

Behaviour with the flex wrap

Schermafbeelding 2022-10-20 om 13 28 54
mietcls commented 2 years ago

@netsensei Reworked the above comments:

The code, table and images have been adapted.

mietcls commented 2 years ago

Keep "updated by" instead of "created by" in the main overview list cards, to postpone discussions about profiles.

No drama if there is no name attached to it as they can see it in the detail page, however it is handy.

netsensei commented 2 years ago

@mietcls I've rebuild the summaries for datasets & publications based on the code snippets and the feedback. So, this needs to be tested to make sure I haven't missed anything.

I've also fixed the summary display of datasets & publications in the "Related Publications / Datasets" modals.

mietcls commented 2 years ago

View files is removed for librarians, but we can fix that later if this comes up.