Merge branch 'w2p-120594_fix-bootstrap5-feedback' into w2p-118627_rea…

…lign-standard-dspace-themes-after-bootstrap-5-upgrade-9.0
atmire · Dec 10, 2024 · 90474f9 · 90474f9
2 parents d315929 + c848cce
commit 90474f9
Show file tree

Hide file tree

Showing 19 changed files with 33 additions and 32 deletions.
diff --git a/...hboard/admin-notify-logs/admin-notify-logs-result/admin-notify-logs-result.component.html b/...hboard/admin-notify-logs/admin-notify-logs-result/admin-notify-logs-result.component.html
@@ -3,7 +3,7 @@
     <div class="col-12 col-md-3 text-left h4">{{((isInbound$ | async) ? 'admin.notify.dashboard.inbound'  : 'admin.notify.dashboard.outbound') | translate}}</div>
     <div class="col-md-9">
       <div class="h4">
-        <button (click)="resetDefaultConfiguration()" *ngIf="(selectedSearchConfig$ | async) !== defaultConfiguration" class="badge badge-primary me-1 mb-1">
+        <button (click)="resetDefaultConfiguration()" *ngIf="(selectedSearchConfig$ | async) !== defaultConfiguration" class="badge bg-primary me-1 mb-1">
           {{ 'admin-notify-logs.' + (selectedSearchConfig$ | async) | translate}}
           <span> ×</span>
         </button>

diff --git a/src/app/community-list-page/community-list/community-list.component.html b/src/app/community-list-page/community-list/community-list.component.html
@@ -24,7 +24,7 @@
   <cdk-tree-node *cdkTreeNodeDef="let node; when: hasChild" cdkTreeNodePadding
                  class="example-tree-node expandable-node">
     <div class="btn-group">
-      <button *ngIf="hasChild(null, node) | async" type="button" class="btn btn-default" cdkTreeNodeToggle
+      <button *ngIf="hasChild(null, node) | async" type="button" class="btn btn-default btn-transparent" cdkTreeNodeToggle
               [attr.aria-label]="(node.isExpanded ? 'communityList.collapse' : 'communityList.expand') | translate:{ name: dsoNameService.getName(node.payload) }"
               (click)="toggleExpanded(node)"
               data-test="expand-button">
@@ -40,7 +40,7 @@
         <span class="d-flex align-middle my-auto">
           <a [routerLink]="node.route" class="lead">{{ dsoNameService.getName(node.payload) }}</a>
           <span class="pe-2">&nbsp;</span>
-          <span *ngIf="node.payload.archivedItemsCount >= 0" class="badge rounded-pill bg-secondary align-top archived-items-lead my-auto">{{node.payload.archivedItemsCount}}</span>
+          <span *ngIf="node.payload.archivedItemsCount >= 0" class="badge rounded-pill bg-secondary align-top archived-items-lead my-auto ps-2 pe-2">{{node.payload.archivedItemsCount}}</span>
         </span>
       </div>
     </div>

diff --git a/...o-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.html b/...o-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.html
@@ -18,7 +18,7 @@
                       (change)="onChangeAuthorityField($event)">
     </ds-dynamic-onebox>
     <div *ngIf="!isVirtual && !mdValue.editing && mdValue.newValue.authority && mdValue.newValue.confidence !== ConfidenceTypeEnum.CF_UNSET && mdValue.newValue.confidence !== ConfidenceTypeEnum.CF_NOVALUE">
-      <span class="badge badge-light border" >
+      <span class="badge bg-light border" >
         <i dsAuthorityConfidenceState
            class="fas fa-fw p-0"
            aria-hidden="true"

diff --git a/...o-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.scss b/...o-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.scss
@@ -14,6 +14,6 @@
 .cdk-drag-placeholder {
   opacity: 0;
 }
-.badge.badge-light {
+.badge.bg-light {
   color: var(--bs-gray-900);
 }
diff --git a/src/app/item-page/simple/field-components/file-section/file-section.component.html b/src/app/item-page/simple/field-components/file-section/file-section.component.html
@@ -3,7 +3,7 @@
     <div class="file-section">
       <ds-file-download-link *ngFor="let file of bitstreams; let last=last;" [bitstream]="file" [item]="item">
         <span>
-          <span *ngIf="primaryBitsreamId === file.id" class="badge badge-primary">{{ 'item.page.bitstreams.primary' | translate }}</span> 
+          <span *ngIf="primaryBitsreamId === file.id" class="badge bg-primary">{{ 'item.page.bitstreams.primary' | translate }}</span>
           {{ dsoNameService.getName(file) }}
         </span>
         <span> ({{(file?.sizeBytes) | dsFileSize }})</span>

diff --git a/...rsions/item-versions-row-element-version/item-versions-row-element-version.component.html b/...rsions/item-versions-row-element-version/item-versions-row-element-version.component.html
@@ -8,11 +8,11 @@
       </ng-template>
       <span *ngIf="version?.id === itemVersion?.id">*</span>
 
-      <span *ngIf="workspaceId$ | async" class="text-light badge badge-primary ms-3">
+      <span *ngIf="workspaceId$ | async" class="text-light badge bg-primary ms-3">
                       {{ "item.version.history.table.workspaceItem" | translate }}
                     </span>
 
-      <span *ngIf="workflowId$ | async" class="text-light badge badge-info ms-3">
+      <span *ngIf="workflowId$ | async" class="text-light badge bg-info ms-3">
                       {{ "item.version.history.table.workflowItem" | translate }}
                     </span>
 

diff --git a/src/app/notifications/qa/events/quality-assurance-events.component.html b/src/app/notifications/qa/events/quality-assurance-events.component.html
@@ -76,17 +76,17 @@ <h2 class="border-bottom pb-2">
                     </div>
                   </td>
                   <td *ngIf="showTopic.indexOf('/PID') !== -1">
-                    <p><span class="small">{{'quality-assurance.event.table.pidtype' | translate}}</span>&nbsp;<span class="badge badge-info">{{eventElement.event.message.type}}</span></p>
+                    <p><span class="small">{{'quality-assurance.event.table.pidtype' | translate}}</span>&nbsp;<span class="badge bg-info">{{eventElement.event.message.type}}</span></p>
                     <p><span class="small">{{'quality-assurance.event.table.pidvalue' | translate}}</span><br>
                       <a *ngIf="hasPIDHref(eventElement.event.message); else noPID" href="{{getPIDHref(eventElement.event.message)}}" rel="noopener noreferrer" target="_blank">
                         {{eventElement.event.message.value}}
                       </a>
-                      <ng-template #noPID><span class="badge badge-info">{{eventElement.event.message.value}}</span></ng-template>
+                      <ng-template #noPID><span class="badge bg-info">{{eventElement.event.message.value}}</span></ng-template>
                     </p>
                   </td>
                   <td *ngIf="showTopic.indexOf('/SUBJECT') !== -1">
                     <p><span class="small">{{'quality-assurance.event.table.subjectValue' | translate}}
-                       </span><br><span class="badge badge-info">{{eventElement.event.message.value}}</span></p>
+                       </span><br><span class="badge bg-info">{{eventElement.event.message.value}}</span></p>
                   </td>
                   <td *ngIf="showTopic.indexOf('/ABSTRACT') !== -1">
                     <p class="abstract-container" [class.show]="showMore">
@@ -125,11 +125,11 @@ <h2 class="border-bottom pb-2">
                       <a href="{{sourceUrlForProjectSearch}}{{ eventElement.event.message.sourceId}}" rel="noopener noreferrer" target="_blank">{{eventElement.event.message.title}}</a>
                     </p>
                     <p>
-                      <span *ngIf="eventElement.event.message.acronym"><span class="small">{{'quality-assurance.event.table.acronym' | translate}}</span>&nbsp;<span class="badge badge-info">{{eventElement.event.message.acronym}}</span><br></span>
-                      <span *ngIf="eventElement.event.message.code"><span class="small">{{'quality-assurance.event.table.code' | translate}}</span>&nbsp;<span class="badge badge-info">{{eventElement.event.message.code}}</span><br></span>
-                      <span *ngIf="eventElement.event.message.funder"><span class="small">{{'quality-assurance.event.table.funder' | translate}}</span>&nbsp;<span class="badge badge-info">{{eventElement.event.message.funder}}</span><br></span>
-                      <span *ngIf="eventElement.event.message.fundingProgram"><span class="small">{{'quality-assurance.event.table.fundingProgram' | translate}}</span>&nbsp;<span class="badge badge-info">{{eventElement.event.message.fundingProgram}}</span><br></span>
-                      <span *ngIf="eventElement.event.message.jurisdiction"><span class="small">{{'quality-assurance.event.table.jurisdiction' | translate}}</span>&nbsp;<span class="badge badge-info">{{eventElement.event.message.jurisdiction}}</span></span>
+                      <span *ngIf="eventElement.event.message.acronym"><span class="small">{{'quality-assurance.event.table.acronym' | translate}}</span>&nbsp;<span class="badge bg-info">{{eventElement.event.message.acronym}}</span><br></span>
+                      <span *ngIf="eventElement.event.message.code"><span class="small">{{'quality-assurance.event.table.code' | translate}}</span>&nbsp;<span class="badge bg-info">{{eventElement.event.message.code}}</span><br></span>
+                      <span *ngIf="eventElement.event.message.funder"><span class="small">{{'quality-assurance.event.table.funder' | translate}}</span>&nbsp;<span class="badge bg-info">{{eventElement.event.message.funder}}</span><br></span>
+                      <span *ngIf="eventElement.event.message.fundingProgram"><span class="small">{{'quality-assurance.event.table.fundingProgram' | translate}}</span>&nbsp;<span class="badge bg-info">{{eventElement.event.message.fundingProgram}}</span><br></span>
+                      <span *ngIf="eventElement.event.message.jurisdiction"><span class="small">{{'quality-assurance.event.table.jurisdiction' | translate}}</span>&nbsp;<span class="badge bg-info">{{eventElement.event.message.jurisdiction}}</span></span>
                     </p>
                     <hr>
                     <div>

diff --git a/src/app/notifications/qa/source/quality-assurance-source.component.html b/src/app/notifications/qa/source/quality-assurance-source.component.html
@@ -41,7 +41,7 @@ <h2 class="h4 border-bottom pb-2">{{'quality-assurance.source'| translate}}</h2>
                                 class="btn btn-outline-primary btn-sm"
                                 title="{{'quality-assurance.source-list.button.detail' | translate : { param: sourceElement.id } }}"
                                 [routerLink]="[sourceElement.id]">
-                          <span class="badge badge-info">{{sourceElement.totalEvents}}</span>
+                          <span class="badge bg-info">{{sourceElement.totalEvents}}</span>
                           <i class="fas fa-info fa-fw"></i>
                         </button>
                       </div>

diff --git a/src/app/notifications/qa/topics/quality-assurance-topics.component.html b/src/app/notifications/qa/topics/quality-assurance-topics.component.html
@@ -45,7 +45,7 @@ <h2 class="border-bottom pb-2">{{'quality-assurance.topics'| translate}}</h2>
                               class="btn btn-outline-primary btn-sm"
                               title="{{'quality-assurance.topics-list.button.detail' | translate : { param: topicElement.name } }}"
                               [routerLink]="[getQualityAssuranceRoute(), sourceId, topicElement.id]">
-                        <span class="badge badge-info">{{topicElement.totalEvents}}</span>
+                        <span class="badge bg-info">{{topicElement.totalEvents}}</span>
                         <i class="fas fa-info fa-fw"></i>
                       </button>
                     </div>

diff --git a/src/app/process-page/overview/table/process-overview-table.component.html b/src/app/process-page/overview/table/process-overview-table.component.html
@@ -2,7 +2,7 @@
   <div class="d-flex" (click)="collapse.toggle()" [attr.aria-expanded]="!collapse.collapsed" role="button">
     <h2 class="flex-grow-1">
       {{'process.overview.table.' + processStatus.toLowerCase() + '.title' | translate}}
-      <span class="badge badge-pill badge-primary badge-nb-processes"
+      <span class="badge rounded-pill bg-primary badge-nb-processes ps-2 pe-2"
             *ngIf="(processesRD$ | async) as processesRD">
         {{processesRD?.payload?.totalElements}}
       </span>

diff --git a/src/app/shared/host-window.service.ts b/src/app/shared/host-window.service.ts
@@ -43,10 +43,10 @@ export class HostWindowService {
     /* See _exposed_variables.scss */
     variableService.getAllVariables()
       .subscribe((variables) => {
-        this.breakPoints.XL_MIN = parseInt(variables['--bs-xl-min'], 10);
-        this.breakPoints.LG_MIN = parseInt(variables['--bs-lg-min'], 10);
-        this.breakPoints.MD_MIN = parseInt(variables['--bs-md-min'], 10);
-        this.breakPoints.SM_MIN = parseInt(variables['--bs-sm-min'], 10);
+        this.breakPoints.XL_MIN = parseInt(variables['--bs-xl'], 10);
+        this.breakPoints.LG_MIN = parseInt(variables['--bs-lg'], 10);
+        this.breakPoints.MD_MIN = parseInt(variables['--bs-md'], 10);
+        this.breakPoints.SM_MIN = parseInt(variables['--bs-sm'], 10);
       });
   }
 

diff --git a/...app/shared/object-list/browse-entry-list-element/browse-entry-list-element.component.html b/...app/shared/object-list/browse-entry-list-element/browse-entry-list-element.component.html
@@ -6,5 +6,5 @@
         {{object.value}}
     </span>
     <span class="pe-2">&nbsp;</span>
-    <span class="badge rounded-pill bg-secondary align-self-center">{{object.count}}</span>
+    <span class="badge rounded-pill bg-secondary align-self-center ps-2 pe-2">{{object.count}}</span>
 </div>
diff --git a/src/app/shared/object-list/collection-list-element/collection-list-element.component.html b/src/app/shared/object-list/collection-list-element/collection-list-element.component.html
@@ -6,7 +6,7 @@
     {{ dsoNameService.getName(object) }}
   </span>
   <span class="pe-2">&nbsp;</span>
-  <span *ngIf="object.archivedItemsCount >= 0" class="badge rounded-pill bg-secondary align-self-center archived-items-lead">{{object.archivedItemsCount}}</span>
+  <span *ngIf="object.archivedItemsCount >= 0" class="badge rounded-pill bg-secondary align-self-center archived-items-lead ps-2 pe-2">{{object.archivedItemsCount}}</span>
 </div>
 <div *ngIf="object.shortDescription" class="text-muted abstract-text">
     {{object.shortDescription}}

diff --git a/src/app/shared/object-list/community-list-element/community-list-element.component.html b/src/app/shared/object-list/community-list-element/community-list-element.component.html
@@ -6,7 +6,7 @@
     {{ dsoNameService.getName(object) }}
   </span>
   <span class="pe-2">&nbsp;</span>
-  <span *ngIf="object.archivedItemsCount >= 0" class="badge rounded-pill bg-secondary align-self-center archived-items-lead">{{object.archivedItemsCount}}</span>
+  <span *ngIf="object.archivedItemsCount >= 0" class="badge rounded-pill bg-secondary align-self-center archived-items-lead ps-2 pe-2">{{object.archivedItemsCount}}</span>
 </div>
 <div *ngIf="object.shortDescription" class="text-muted abstract-text">
     {{object.shortDescription}}

diff --git a/src/app/shared/search/search-labels/search-label-range/search-label-range.component.html b/src/app/shared/search/search-labels/search-label-range/search-label-range.component.html
@@ -3,7 +3,7 @@
    [routerLink]="searchLink"
    [queryParams]="(removeParametersMin$ | async)"
    (click)="searchFilterService.minimizeAll()"
-   class="badge badge-primary">
+   class="badge bg-primary">
   <span class="d-flex">
     <span class="flex-grow-1 text-left">{{('search.filters.applied.f.' + appliedFilter.filter + '.min') | translate}}: {{ min }}</span>
     <span class="ps-1" aria-hidden="true">×</span>
@@ -14,7 +14,7 @@
    [routerLink]="searchLink"
    [queryParams]="(removeParametersMax$ | async)"
    (click)="searchFilterService.minimizeAll()"
-   class="badge badge-primary">
+   class="badge bg-primary">
   <span class="d-flex">
     <span class="flex-grow-1 text-left">{{('search.filters.applied.f.' + appliedFilter.filter + '.max') | translate}}: {{ max }}</span>
     <span class="ps-1" aria-hidden="true">×</span>

diff --git a/src/styles/_bootstrap_variables_mapping.scss b/src/styles/_bootstrap_variables_mapping.scss
@@ -55,7 +55,8 @@
   --bs-table-striped-bg: #{$light};
 }
 
-cdk-tree-node .btn {
+.btn-transparent
+{
   --bs-btn-box-shadow: none;
   --bs-btn-focus-box-shadow: none;
   --bs-btn-active-border-color: transparent;

diff --git a/src/themes/dspace/app/header/header.component.html b/src/themes/dspace/app/header/header.component.html
@@ -23,7 +23,7 @@
       </div>
 
       <div id="mobile-navbar-toggler" class="d-block d-lg-none ms-3" *ngIf="(isMobile$ | async)">
-        <button id="navbar-toggler" class="btn" type="button" (click)="toggleNavbar()"
+        <button id="navbar-toggler" class="btn btn-transparent" type="button" (click)="toggleNavbar()"
                 [attr.aria-label]="'nav.toggle' | translate" aria-controls="collapsible-mobile-navbar" [attr.aria-expanded]="(isNavBarCollapsed$ | async) !== true">
           <span class="fas fa-bars fa-fw fa-xl toggler-icon" aria-hidden="true"></span>
         </button>

diff --git a/src/themes/dspace/styles/_global-styles.scss b/src/themes/dspace/styles/_global-styles.scss
@@ -13,7 +13,7 @@
     padding-bottom: 0.5rem !important;
   }
 
-  .badge-secondary {
+  .bg-secondary {
     background-color: var(--bs-primary);
   }
 

diff --git a/src/themes/dspace/styles/_theme_css_variable_overrides.scss b/src/themes/dspace/styles/_theme_css_variable_overrides.scss
@@ -2,7 +2,7 @@
 
 :root {
 
-  @include media-breakpoint-up(md) {
+  @include media-breakpoint-up(sm) {
     --ds-header-logo-height: 40px;
     --ds-header-height: 80px;
   }