132007: Bootstrap fixes

This commit is contained in:
Alexandre Vryghem
2025-07-07 19:36:16 +02:00
parent bcc437d029
commit b4d694e0c0
47 changed files with 113 additions and 137 deletions

View File

@@ -83,7 +83,7 @@
<form [formGroup]="searchForm" (ngSubmit)="search(searchForm.value)" class="d-flex justify-content-between">
<div class="flex-grow-1 me-3">
<div class="form-group input-group me-3">
<div class="mb-3 input-group me-3">
<input type="text" name="query" id="query" formControlName="query"
class="form-control" aria-label="Search input">
<span class="input-group-append">

View File

@@ -6,7 +6,7 @@
<!-- In the toggle section -->
@if (!isNewService) {
<div class="toggle-switch-container">
<label class="status-label font-weight-bold" for="enabled">{{ 'ldn-service-status' | translate }}</label>
<label class="status-label fw-bold" for="enabled">{{ 'ldn-service-status' | translate }}</label>
<div>
<input formControlName="enabled" hidden id="enabled" name="enabled" type="checkbox">
<div (click)="toggleEnabled()" [class.checked]="formModel.get('enabled').value" class="toggle-switch">
@@ -17,7 +17,7 @@
}
<!-- In the Name section -->
<div class="mb-5">
<label for="name" class="font-weight-bold">{{ 'ldn-new-service.form.label.name' | translate }}</label>
<label for="name" class="fw-bold">{{ 'ldn-new-service.form.label.name' | translate }}</label>
<input [class.invalid-field]="formModel.get('name').invalid && formModel.get('name').touched"
[placeholder]="'ldn-new-service.form.placeholder.name' | translate" class="form-control"
formControlName="name"
@@ -33,7 +33,7 @@
<!-- In the description section -->
<div class="mb-5 mt-5 d-flex flex-column">
<label for="description" class="font-weight-bold">{{ 'ldn-new-service.form.label.description' | translate }}</label>
<label for="description" class="fw-bold">{{ 'ldn-new-service.form.label.description' | translate }}</label>
<textarea [placeholder]="'ldn-new-service.form.placeholder.description' | translate"
class="form-control" formControlName="description" id="description" name="description"></textarea>
</div>
@@ -42,7 +42,7 @@
<!-- In the url section -->
<div class="d-flex align-items-center">
<div class="d-flex flex-column w-50 me-2">
<label for="url" class="font-weight-bold">{{ 'ldn-new-service.form.label.url' | translate }}</label>
<label for="url" class="fw-bold">{{ 'ldn-new-service.form.label.url' | translate }}</label>
<input [class.invalid-field]="formModel.get('url').invalid && formModel.get('url').touched"
[placeholder]="'ldn-new-service.form.placeholder.url' | translate" class="form-control"
formControlName="url"
@@ -57,7 +57,7 @@
</div>
<div class="d-flex flex-column w-50">
<label for="score" class="font-weight-bold">{{ 'ldn-new-service.form.label.score' | translate }}</label>
<label for="score" class="fw-bold">{{ 'ldn-new-service.form.label.score' | translate }}</label>
<input [class.invalid-field]="formModel.get('score').invalid && formModel.get('score').touched"
[placeholder]="'ldn-new-service.form.placeholder.score' | translate" formControlName="score"
id="score"
@@ -78,7 +78,7 @@
<!-- In the IP range section -->
<div class="mb-5 mt-5">
<label for="lowerIp" class="font-weight-bold">{{ 'ldn-new-service.form.label.ip-range' | translate }}</label>
<label for="lowerIp" class="fw-bold">{{ 'ldn-new-service.form.label.ip-range' | translate }}</label>
<div class="d-flex">
<input [class.invalid-field]="formModel.get('lowerIp').invalid && formModel.get('lowerIp').touched"
[placeholder]="'ldn-new-service.form.placeholder.lowerIp' | translate" class="form-control me-2"
@@ -105,7 +105,7 @@
<!-- In the ldnUrl section -->
<div class="mb-5 mt-5">
<label for="ldnUrl" class="font-weight-bold">{{ 'ldn-new-service.form.label.ldnUrl' | translate }}</label>
<label for="ldnUrl" class="fw-bold">{{ 'ldn-new-service.form.label.ldnUrl' | translate }}</label>
<input [class.invalid-field]="formModel.get('ldnUrl').invalid && formModel.get('ldnUrl').touched"
[placeholder]="'ldn-new-service.form.placeholder.ldnUrl' | translate" class="form-control"
formControlName="ldnUrl"
@@ -130,7 +130,7 @@
<!-- In the usesActorEmailId section -->
<div class="mb-5 mt-5">
<label class="status-label font-weight-bold" for="usesActorEmailId">{{ 'ldn-service-usesActorEmailId' | translate }}</label>
<label class="status-label fw-bold" for="usesActorEmailId">{{ 'ldn-service-usesActorEmailId' | translate }}</label>
<div>
<input formControlName="usesActorEmailId" hidden id="usesActorEmailId"
name="usesActorEmailId" type="checkbox">
@@ -149,14 +149,14 @@
@if (areControlsInitialized) {
<div class="row mb-1 mt-5">
<div class="col">
<label class="font-weight-bold">{{ 'ldn-new-service.form.label.inboundPattern' | translate }} </label>
<label class="fw-bold">{{ 'ldn-new-service.form.label.inboundPattern' | translate }} </label>
</div>
@if (formModel.get('notifyServiceInboundPatterns')['controls'][0]?.value?.pattern) {
<div class="col">
<label class="font-weight-bold">{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
<label class="fw-bold">{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
</div>
<div class="col-sm-1">
<label class="font-weight-bold">{{ 'ldn-new-service.form.label.automatic' | translate }}</label>
<label class="fw-bold">{{ 'ldn-new-service.form.label.automatic' | translate }}</label>
</div>
}
<div class="col-sm-2">
@@ -295,8 +295,8 @@
<span (click)="addInboundPattern()"
class="add-pattern-link mb-2">{{ 'ldn-new-service.form.label.addPattern' | translate }}</span>
<hr>
<div class="form-group row">
<div class="col text-right space-children-mr">
<div class="mb-3 row">
<div class="col text-end space-children-mr">
<ng-content select="[before]"></ng-content>
<button (click)="resetFormAndLeave()" class="btn btn-outline-secondary" type="button">
<span>&nbsp;{{ 'submission.general.back.submit' | translate }}</span>
@@ -317,9 +317,7 @@
@if (isNewService) {
<h4>{{'service.overview.create.modal' | translate }}</h4>
}
<button (click)="closeModal()" aria-label="Close"
class="close" type="button">
<span aria-hidden="true">×</span>
<button (click)="closeModal()" aria-label="Close" class="btn-close" type="button">
</button>
</div>

View File

@@ -77,8 +77,7 @@
</div>
<button (click)="closeModal()" aria-label="Close"
[attr.aria-label]="'ldn-service-overview-close-modal' | translate"
class="close" type="button">
<span aria-hidden="true">×</span>
class="btn-close" type="button">
</button>
</div>
@@ -86,7 +85,7 @@
<div>
{{ 'service.overview.delete.body' | translate }}
</div>
<div class="mt-4 text-right">
<div class="mt-4 text-end">
<button (click)="closeModal()"
[attr.aria-label]="'ldn-service-overview-close-modal' | translate"
class="btn btn-outline-secondary me-2">{{ 'service.detail.delete.cancel' | translate }}</button>

View File

@@ -1,15 +1,14 @@
<div class="modal-header">
<h4 class="modal-title">{{'notify-message-modal.title' | translate}}</h4>
<button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
<span aria-hidden="true">&times;</span>
<button type="button" class="btn-close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
</button>
</div>
<div class="modal-body p-4">
@for (key of notifyMessageKeys; track key) {
<div>
<div class="row mb-4">
<div class="font-weight-bold col">{{ key + '.notify-detail-modal' | translate}}</div>
<div class="col text-right">{{'notify-detail-modal.' + notifyMessage[key] | translate: {default: notifyMessage[key] ?? "n/a" } }}</div>
<div class="fw-bold col">{{ key + '.notify-detail-modal' | translate}}</div>
<div class="col text-end">{{'notify-detail-modal.' + notifyMessage[key] | translate: {default: notifyMessage[key] ?? "n/a" } }}</div>
</div>
</div>
}

View File

@@ -1,6 +1,6 @@
<div class="container my-4">
<div class="row">
<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-12 col-md-3 text-start h4">{{((isInbound$ | async) ? 'admin.notify.dashboard.inbound' : 'admin.notify.dashboard.outbound') | translate}}</div>
<div class="col-md-9">
<div class="h4">
@if ((selectedSearchConfig$ | async) !== defaultConfiguration) {

View File

@@ -15,7 +15,7 @@
<ds-loading></ds-loading>
}
@if ((loadingCollections$ | async) !== true) {
<select id="collSel" name="collSel" class="form-control" multiple="multiple" size="10" formControlName="collections">
<select id="collSel" name="collSel" class="form-select" multiple="multiple" size="10" formControlName="collections">
@for (item of collections; track item) {
<option [value]="item.id" [disabled]="item.disabled">{{item.name$ | async}}</option>
}
@@ -32,11 +32,11 @@
{{'admin.reports.items.section.metadataFieldQueries' | translate}}
</ng-template>
<ng-template ngbPanelContent>
<fieldset id="predefqueries" class="form-group">
<fieldset id="predefqueries" class="mb-3">
<label>
{{'admin.reports.items.predefinedQueries' | translate}}
</label>
<select id="predefselect" formControlName="presetQuery" class="form-control" (change)="setPresetQuery()">
<select id="predefselect" formControlName="presetQuery" class="form-select" (change)="setPresetQuery()">
@for (item of presetQueries; track item.id) {
<option [value]="item.id" [selected]="item.isDefault">{{item.label | translate}}</option>
}
@@ -46,17 +46,17 @@
<div id="queries">
@for (pred of queryPredicatesArray().controls; track pred; let i = $index) {
<div class="metadata">
<div [formGroup]="pred" class="form-group">
<div class="form-row">
<div [formGroup]="pred" class="mb-3">
<div class="row">
<div class="col-4">
<select class="query-tool" formControlName="field" class="form-control">
<select class="query-tool" formControlName="field" class="form-select">
@for (item of metadataFieldsWithAny; track item) {
<option [value]="item.id">{{item.name$ | async}}</option>
}
</select>
</div>
<div class="col-auto">
<select class="query-tool" formControlName="operator" class="form-control">
<select class="query-tool" formControlName="operator" class="form-select">
@for (item of predicates; track item) {
<option [value]="item.id">{{item.name$ | async | translate}}</option>
}
@@ -86,17 +86,17 @@
{{'admin.reports.items.section.limitPaginateQueries' | translate}}
</ng-template>
<ng-template ngbPanelContent>
<div class="row align-items-center">
<div class="row align-items-center mb-3">
<label for="limit" class="col-sm-2 col-form-label">{{'admin.reports.items.limit' | translate}}:</label>
<div class="col-6">
<select id="limit" name="limit" formControlName="pageLimit" class="form-control col-6">
<select id="limit" name="limit" formControlName="pageLimit" class="form-select col-6">
@for (item of pageLimits; track item) {
<option value="{{item.id}}" [selected]="item.isDefault">{{item.name$ | async}}</option>
}
</select>
</div>
</div>
<div class="row align-items-center">
<div class="row align-items-center mb-3">
<label for="offset" class="col-sm-2 col-form-label">{{'admin.reports.items.offset' | translate}}:</label>
<div class="col-6">
<input id="offset" name="offset" value="0" class="form-control col-6">
@@ -104,7 +104,7 @@
</div>
<div class="row">
<span class="col-3"></span>
<button class="btn btn-primary mt-1 col-6" (click)="submit()">{{'admin.reports.items.run' | translate}}</button>
<button class="btn btn-primary col-6" (click)="submit()">{{'admin.reports.items.run' | translate}}</button>
</div>
</ng-template>
</ngb-panel>
@@ -130,7 +130,7 @@
</ng-template>
<ng-template ngbPanelContent>
<div id="show-fields">
<select class="query-tool" name="show_fields" multiple="multiple" size="8" class="form-control" formControlName="additionalFields">
<select class="query-tool" name="show_fields" multiple="multiple" size="8" class="form-select" formControlName="additionalFields">
@for (item of metadataFields; track item) {
<option [value]="item.id">{{item.name$ | async}}</option>
}

View File

@@ -19,7 +19,7 @@
[innerHTML]="mdRepresentation.getValue()"
[ngbTooltip]="mdRepresentation.allMetadata(['person.jobTitle']).length > 0 ? descTemplate : null"></a>
@if (mdRepresentation.firstMetadata('person.identifier.orcid')) {
<ds-orcid-badge-and-tooltip class="ml-1"
<ds-orcid-badge-and-tooltip class="ms-1"
[orcid]="mdRepresentation.firstMetadata('person.identifier.orcid')"
[authenticatedTimestamp]="mdRepresentation.firstMetadata('dspace.orcid.authenticated')">
</ds-orcid-badge-and-tooltip>

View File

@@ -3,8 +3,8 @@
</h4>
<form [formGroup]="emailForm" (ngSubmit)="submitForm()">
<div class="form-group">
<div class="form-row">
<div class="mb-3">
<div class="row">
<div class="col-12 my-2">
<input
type="email"
@@ -26,7 +26,7 @@
}
</div>
</div>
<div class="form-row">
<div class="row">
<div class="col-12">
<button type="submit" class="btn btn-lg btn-primary w-100">
{{ "external-login.confirm.button.label" | translate }}

View File

@@ -3,8 +3,8 @@
</h4>
<form [formGroup]="emailForm" (ngSubmit)="submitForm()">
<div class="form-group">
<div class="form-row">
<div class="mb-3">
<div class="row">
<div class="col-12 my-2">
<input
type="email"
@@ -26,7 +26,7 @@
}
</div>
</div>
<div class="form-row">
<div class="row">
<div class="col-12">
<button type="submit" class="btn btn-lg btn-primary w-100">
{{ "external-login.provide-email.button.label" | translate }}

View File

@@ -1,6 +1,6 @@
<form class="form-login"
[formGroup]="form" novalidate>
<label class="font-weight-bold mb-0 text-uppercase">{{ registrationData.registrationType }}</label>
<label class="fw-bold mb-0 text-uppercase">{{ registrationData.registrationType }}</label>
<input [attr.aria-label]="'external-login-page.orcid-confirmation.netid.label' | translate"
autocomplete="off"
autofocus
@@ -9,14 +9,14 @@
[placeholder]="'external-login-page.orcid-confirmation.netid.placeholder' | translate"
type="text"
[attr.data-test]="'netId' | dsBrowserOnly">
<label class="font-weight-bold mb-0">{{"external-login-page.orcid-confirmation.lastname" | translate}}</label>
<label class="fw-bold mb-0">{{"external-login-page.orcid-confirmation.lastname" | translate}}</label>
<input [attr.aria-label]="'external-login-page.orcid-confirmation.lastname.label' | translate"
autocomplete="off"
class="form-control form-control-lg position-relative mb-2"
formControlName="lastname"
type="text"
[attr.data-test]="'lastname' | dsBrowserOnly">
<label class="font-weight-bold mb-0">{{"external-login-page.orcid-confirmation.firstname" | translate}}</label>
<label class="fw-bold mb-0">{{"external-login-page.orcid-confirmation.firstname" | translate}}</label>
<input [attr.aria-label]="'external-login-page.orcid-confirmation.firstname.label' | translate"
autocomplete="off"
class="form-control form-control-lg position-relative mb-2"
@@ -24,7 +24,7 @@
type="text"
[attr.data-test]="'firstname' | dsBrowserOnly">
@if (registrationData?.email) {
<label class="font-weight-bold mb-0">{{"external-login-page.orcid-confirmation.email" | translate}}</label>
<label class="fw-bold mb-0">{{"external-login-page.orcid-confirmation.email" | translate}}</label>
<input [attr.aria-label]="'external-login-page.orcid-confirmation.email.label' | translate"
autocomplete="off"
class="form-control form-control-lg position-relative"

View File

@@ -6,15 +6,15 @@
<thead class="thead-light">
<tr>
<th scope="col">
<span class="h5 font-weight-bold">{{ 'external-login-validation.review-account-info.table.header.information' | translate }}</span>
<span class="h5 fw-bold">{{ 'external-login-validation.review-account-info.table.header.information' | translate }}</span>
</th>
<th scope="col">
<span class="h5 font-weight-bold">{{'external-login-validation.review-account-info.table.header.received-value' | translate }}</span>
<span class="h5 fw-bold">{{'external-login-validation.review-account-info.table.header.received-value' | translate }}</span>
</th>
<th scope="col">
<span class="h5 font-weight-bold">{{'external-login-validation.review-account-info.table.header.current-value' | translate }}</span>
<span class="h5 fw-bold">{{'external-login-validation.review-account-info.table.header.current-value' | translate }}</span>
</th>
<th scope="col"><span class="h5 font-weight-bold">{{'external-login-validation.review-account-info.table.header.action' | translate }}</span></th>
<th scope="col"><span class="h5 fw-bold">{{'external-login-validation.review-account-info.table.header.action' | translate }}</span></th>
</tr>
</thead>
<tbody>

View File

@@ -1,4 +1,4 @@
<div class="jumbotron py-4 px-2 py-sm-5 px-sm-0 mt-ncs mb-4">
<div class="home-news-content py-4 px-2 py-sm-5 px-sm-0 mt-ncs mb-4">
<div class="container">
<div class="d-flex flex-wrap">
<div>

View File

@@ -6,7 +6,7 @@
word-break: break-word;
}
.jumbotron {
.home-news-content {
background-color: var(--ds-home-news-background-color);
}

View File

@@ -2,7 +2,7 @@
<h2>{{ 'info.accessibility-settings.title' | translate }}</h2>
<form>
<div class="form-group row">
<div class="mb-3 row">
<label [for]="'disableNotificationTimeOutInput'" class="col-sm-4 col-form-label">
{{ 'info.accessibility-settings.disableNotificationTimeOut.label' | translate }}
</label>
@@ -23,7 +23,7 @@
</div>
</div>
<div class="form-group row">
<div class="mb-3 row">
<label [for]="'notificationTimeOutInput'" class="col-sm-4 col-form-label">
{{ 'info.accessibility-settings.notificationTimeOut.label' | translate }}
</label>
@@ -50,7 +50,7 @@
</div>
</div>
<div class="form-group row">
<div class="mb-3 row">
<label [for]="'liveRegionTimeOutInput'" class="col-sm-4 col-form-label">
{{ 'info.accessibility-settings.liveRegionTimeOut.label' | translate }}
</label>
@@ -77,7 +77,7 @@
</div>
<div role="group">
<button type="submit" (click)="saveSettings()" class="btn btn-primary mr-2">
<button type="submit" (click)="saveSettings()" class="btn btn-primary me-2">
{{ 'info.accessibility-settings.submit' | translate }}
</button>
<button (click)="resetSettings()" class="btn btn-warning">

View File

@@ -58,13 +58,13 @@
<div class="row mb-4">
<div class="col-12">
<div>{{'bitstream-request-a-copy.allfiles.label' |translate}}</div>
<div class="ms-4 form-check">
<div class="ms-2 form-check">
<input [className]="'form-check-input'" type="radio"
id="allfiles-true" formControlName="allfiles" value="true">
<label class="form-check-label"
for="allfiles-true">{{'bitstream-request-a-copy.files-all-true.label' | translate}}</label>
</div>
<div class="ms-4">
<div class="ms-2 form-check">
<input [className]="'form-check-input'" type="radio"
id="allfiles-false" formControlName="allfiles" value="false" [attr.disabled]="bitstream === undefined ? true : null ">
<label class="form-check-label"

View File

@@ -14,7 +14,7 @@
<table class="table" [class.mt-n1]="!isFirstTable"
[attr.aria-label]="'item.edit.bitstreams.bundle.table.aria-label' | translate: { bundle: bundleName } ">
<thead [class.visually-hidden]="!isFirstTable">
<tr class="header-row font-weight-bold">
<tr class="header-row fw-bold">
<th id="name" scope="col" class="{{ columnSizes.columns[0].buildClasses() }}">
{{'item.edit.bitstreams.headers.name' | translate}}
</th>
@@ -31,10 +31,10 @@
</thead>
<tbody cdkDropList (cdkDropListDropped)="drop($event)">
<tr class="bundle-row">
<th id="{{ bundleName }}" class="span" colspan="3" scope="colgroup">
<th id="{{ bundleName }}" class="row-element" colspan="3" scope="colgroup">
{{'item.edit.bitstreams.bundle.name' | translate:{ name: bundleName } }}
</th>
<td class="text-center">
<td class="text-center row-element">
<div class="btn-group">
<button [routerLink]="[itemPageRoute, 'bitstreams', 'new']"
[queryParams]="{bundle: bundle.id}"
@@ -43,9 +43,9 @@
title="{{'item.edit.bitstreams.bundle.edit.buttons.upload' | translate}}">
<i class="fas fa-upload fa-fw"></i>
</button>
<div ngbDropdown #paginationControls="ngbDropdown" class="btn-group float-right btn-sm p-0"
placement="bottom-right">
<button class="btn btn-outline-secondary" id="paginationControls" ngbDropdownToggle
<div ngbDropdown #paginationControls="ngbDropdown" class="btn-group float-end p-0"
container="body" placement="bottom-right">
<button class="btn btn-outline-secondary btn-sm" id="paginationControls" ngbDropdownToggle
[title]="'pagination.options.description' | translate"
[attr.aria-label]="'pagination.options.description' | translate" aria-haspopup="true"
aria-expanded="false">
@@ -79,7 +79,7 @@
(cdkDragStarted)="dragStart()" (cdkDragEnded)="dragEnd()">
<th class="bitstream-name row-element {{ columnSizes.columns[0].buildClasses() }}"
scope="row" id="{{ entry.nameStripped }}" headers="{{ bundleName }} name">
<div class="drag-handle text-muted float-left p-1 mr-2 d-inline" tabindex="0" cdkDragHandle
<div class="drag-handle text-muted float-start p-1 me-2 d-inline" tabindex="0" cdkDragHandle
(keydown.enter)="select($event, entry)" (keydown.space)="select($event, entry)" (click)="select($event, entry)">
<i class="fas fa-grip-vertical fa-fw"
[title]="'item.edit.bitstreams.edit.buttons.drag' | translate"></i>

View File

@@ -1,5 +1,5 @@
<div class="col-12 col-md-3 h-auto float-start d-flex action-label">
<span class="justify-content-center align-self-center font-weight-bold">
<span class="justify-content-center align-self-center fw-bold">
{{'item.edit.tabs.status.buttons.' + operation.operationKey + '.label' | translate}}
</span>
</div>

View File

@@ -2,7 +2,7 @@
<div class="row">
@for (statusKey of statusDataKeys; track statusKey) {
<div class="w-100 pt-1">
<div class="col-12 col-md-3 float-start status-label font-weight-bold">
<div class="col-12 col-md-3 float-start status-label fw-bold">
{{'item.edit.tabs.status.labels.' + statusKey | translate}}:
</div>
<div class="col-12 col-md-9 float-start status-data" id="status-{{statusKey}}">
@@ -15,17 +15,17 @@
<div class="w-100 pt-1">
@if ((identifier.identifierType==='doi')) {
<div>
<div class="col-12 col-md-3 float-start status-label font-weight-bold">
<div class="col-12 col-md-3 float-start status-label fw-bold">
{{identifier.identifierType.toLocaleUpperCase()}}
</div>
<div class="col-12 col-md-9 float-start status-label font-weight-bold">{{identifier.value}}
<div class="col-12 col-md-9 float-start status-label fw-bold">{{identifier.value}}
({{"item.edit.identifiers.doi.status."+identifier.identifierStatus|translate}})</div>
</div>
}
</div>
}
<div class="col-12 col-md-3 float-start status-label font-weight-bold">
<div class="col-12 col-md-3 float-start status-label fw-bold">
{{'item.edit.tabs.status.labels.itemPage' | translate}}:
</div>
<div class="col-12 col-md-9 float-start status-data" id="status-itemPage">

View File

@@ -301,7 +301,7 @@
<div class="modal-body">
<p>{{'quality-assurance.event.accept.description' | translate}}</p>
<button class="btn btn-outline-success float-right" (click)="modal.close('do')">
<button class="btn btn-outline-success float-end" (click)="modal.close('do')">
<i class="fas fa-check"></i>
<span class="d-none d-sm-inline"> {{'quality-assurance.event.action.import' | translate}}</span>
</button>
@@ -318,7 +318,7 @@
</div>
<div class="modal-body">
<p>{{'quality-assurance.event.ignore.description' | translate}}</p>
<button class="btn btn-outline-danger float-right" (click)="modal.close('do')">
<button class="btn btn-outline-danger float-end" (click)="modal.close('do')">
<i class="fas fa-trash-alt"></i>
<span class="d-none d-sm-inline"> {{'quality-assurance.event.action.ignore' | translate}}</span>
</button>
@@ -335,7 +335,7 @@
</div>
<div class="modal-body">
<p>{{'quality-assurance.event.reject.description' | translate}}</p>
<button class="btn btn-outline-danger float-right" (click)="modal.close('do')">
<button class="btn btn-outline-danger float-end" (click)="modal.close('do')">
<i class="fas fa-trash-alt"></i>
<span class="d-none d-sm-inline"> {{'quality-assurance.event.action.reject' | translate}}</span>
</button>
@@ -352,7 +352,7 @@
</div>
<div class="modal-body">
<p>{{'quality-assurance.event.undo.description' | translate}}</p>
<button class="btn btn-outline-danger float-right" (click)="modal.close('do')">
<button class="btn btn-outline-danger float-end" (click)="modal.close('do')">
<i class="fas fa-trash-alt"></i>
<span class="d-none d-sm-inline"> {{'quality-assurance.event.action.undo' | translate}}</span>
</button>

View File

@@ -1,8 +1,7 @@
<div class="modal-header">
<h4 class="modal-title" id="modal-title">{{ (labelPrefix + label + '.title') | translate }}</h4>
<button type="button" class="close" aria-label="Close button" aria-describedby="modal-title"
<button type="button" class="btn-close" aria-label="Close button" aria-describedby="modal-title"
(click)="close()">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">

View File

@@ -2,14 +2,13 @@
<div class="notifications-wrapper position-fixed top right">
<div class="notification alert alert-success alert-dismissible m-3 shadow" role="alert">
<button (click)="removePopup()"
type="button" class="close pt-0 pe-1 pe-0 pb-0" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
type="button" class="close pt-0 pe-1 pe-0 pb-0" data-bs-dismiss="alert" aria-label="Close">
</button>
<div class="d-flex flex-row">
<div class="d-flex flex-column justify-content-center align-items-center">
<div class="notification-icon d-flex justify-content-center"><i class="fas fa-2x fa-check-circle"></i></div>
</div>
<div class="d-flex flex-column justify-content-center align-content-stretch text-left p-2">
<div class="d-flex flex-column justify-content-center align-content-stretch text-start p-2">
@if ((suggestionsRD$ | async); as suggestions) {
@for (suggestion of suggestions; track suggestion) {
<ng-container class="alert alert-info">

View File

@@ -4,7 +4,7 @@
</span>
<span class="file-name ms-1">{{fileObject?.name}}</span>
</label>
<input requireFile #file="ngModel" type="file" name="file-upload-{{index}}" id="file-upload-{{index}}" class="form-control-file d-none" [ngModel]="fileObject" (ngModelChange)="setFile($event)"/>
<input requireFile #file="ngModel" type="file" name="file-upload-{{index}}" id="file-upload-{{index}}" class="form-control d-none" [ngModel]="fileObject" (ngModelChange)="setFile($event)"/>
@if (file.invalid && (file.dirty || file.touched)) {
<div
class="alert alert-danger validation-error">

View File

@@ -16,7 +16,7 @@
<!-- Display access periods if more than one was bound to input. The parent component (grant-request-copy)
sends an empty list if the feature is not enabled or applicable to this request. -->
@if (hasValue(validAccessPeriods$ | async) && (validAccessPeriods$ | async).length > 0) {
<div class="form-group">
<div class="mb-3">
<label for="accessPeriod">{{ 'grant-request-copy.access-period.header' | translate }}</label>
<div ngbDropdown class="d-block">
<!-- Show current selected access period (defaults to first in array) -->

View File

@@ -3,7 +3,7 @@
<form [formGroup]="searchForm" (ngSubmit)="onSubmit(searchForm.value)" autocomplete="on" class="d-flex">
<input #searchInput [@toggleAnimation]="isExpanded" [attr.aria-label]="('nav.search' | translate)" name="query"
formControlName="query" type="text" placeholder="{{searchExpanded ? ('nav.search' | translate) : ''}}"
class="d-inline-block bg-transparent position-absolute form-control dropdown-menu-right p1"
class="d-inline-block bg-transparent position-absolute form-control dropdown-menu-end p1"
[class.display]="searchExpanded ? 'inline-block' : 'none'"
[tabIndex]="searchExpanded ? 0 : -1"
[attr.data-test]="'header-search-box' | dsBrowserOnly">

View File

@@ -5,7 +5,7 @@
}
<ng-content></ng-content>
@if (dismissible) {
<button type="button" class="btn-close" data-dismiss="alert" aria-label="Close" (click)="dismiss()">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" (click)="dismiss()">
</button>
}
</div>

View File

@@ -3,22 +3,20 @@
@if (this.canWithdraw) {
<div class="modal-header">
{{ 'item.qa.withdrawn.modal.header' | translate }}
<button type="button" class="close" (click)="onModalClose()" aria-label="Close">
<span aria-hidden="true">×</span>
<button type="button" class="btn-close" (click)="onModalClose()" aria-label="Close">
</button>
</div>
} @else {
@if (!this.canWithdraw) {
<div class="modal-header">
{{'item.qa.reinstate.modal.header' | translate}}
<button type="button" class="close" (click)="onModalClose()" aria-label="Close">
<span aria-hidden="true">×</span>
<button type="button" class="btn-close" (click)="onModalClose()" aria-label="Close">
</button>
</div>
}
}
<div class="modal-body">
<div class="form-group">
<div class="mb-3">
<label for="reason">{{ this.canWithdraw ? ('qa-withdrawn.create.modal.form.summary.label' | translate)
: ('qa-reinstate.create.modal.form.summary.label' | translate) }}</label>
<label for="reason">{{ this.canWithdraw ? ('qa-withdrawn.create.modal.form.summary2.label' | translate)

View File

@@ -14,7 +14,7 @@
<span role="img"
[attr.aria-label]="'file-download-link.restricted' | translate"
[title]="'file-download-link.restricted' | translate"
class="pr-1">
class="pe-1">
<i class="fas fa-lock"></i>
</span>
} @else if ((canDownloadWithToken$ | async) && (canDownload$ | async) === false) {
@@ -22,7 +22,7 @@
<span role="img"
[attr.aria-label]="'file-download-link.secure-access' | translate"
[title]="'file-download-link.secure-access' | translate"
class="pr-1 request-a-copy-access-icon">
class="pe-1 request-a-copy-access-icon">
<i class="fa-solid fa-lock-open"></i>
</span>
} @else if (showIcon) {

View File

@@ -1,5 +1,5 @@
<div [formGroup]="group" [ngClass]="getClass('element', 'container')" class="form-check custom-control form-switch" [class.disabled]="model.disabled">
<input type="checkbox" class="form-check-input custom-control-input"
<input type="checkbox" class="form-check-input form-check-input"
[checked]="model.checked"
[class.is-invalid]="showErrorMessages"
[id]="id"
@@ -13,7 +13,7 @@
(blur)="onBlur($event)"
(change)="onChange($event)"
(focus)="onFocus($event)"/>
<label class="form-check-label custom-control-label" [for]="bindId && model.id">
<label class="form-check-label form-check-label" [for]="bindId && model.id">
<span [innerHTML]="model.label | translate"
[ngClass]="[getClass('element', 'label'), getClass('grid', 'label')]"></span>
</label>

View File

@@ -1,16 +0,0 @@
div.custom-switch {
&.custom-control-right {
margin-left: 0;
margin-right: 0;
&::after {
right: -1.5rem;
left: auto;
}
&::before {
right: -2.35rem;
left: auto;
}
}
}

View File

@@ -30,7 +30,7 @@
<button id="resultdropdown" type="button"
ngbDropdownToggle
class="btn btn-outline-secondary dropdown-toggle-split"
data-toggle="dropdown" aria-haspopup="true"
data-bs-toggle="dropdown" aria-haspopup="true"
aria-expanded="false"
[hidden]="selectAllLoading">
<span class="sr-only">{{ ('submission.sections.describe.relationship-lookup.toggle-dropdown' | translate) }}</span>

View File

@@ -6,7 +6,7 @@
aria-haspopup="menu"
class="dropdown-toggle btn btn-link px-0"
[title]="'nav.language' | translate"
(click)="$event.preventDefault()" data-toggle="dropdown" ngbDropdownToggle
(click)="$event.preventDefault()" data-bs-toggle="dropdown" ngbDropdownToggle
data-test="lang-switch"
tabindex="0">
<i class="fas fa-globe-asia fa-lg fa-fw"></i>

View File

@@ -7,8 +7,8 @@
[title]="boxConfig.description | translate"
>
<div [ngStyle]="{'color': boxConfig.textColor}" class="d-flex flex-column justify-content-center align-items-center">
<div class="mb-3 font-weight-bold box-counter">{{ boxConfig.count ?? 0 }}</div>
<div class="font-weight-bold d-flex justify-content-center w-100">{{ boxConfig.title | translate }}</div>
<div class="mb-3 fw-bold box-counter">{{ boxConfig.count ?? 0 }}</div>
<div class="fw-bold d-flex justify-content-center w-100">{{ boxConfig.title | translate }}</div>
</div>
</div>
}

View File

@@ -10,7 +10,7 @@
@if (notification.options.clickToClose) {
<button
(click)="remove()"
type="button" class="btn-close pt-0 pe-1 ps-0 pb-0 mt-1 me-1" data-dismiss="alert" aria-label="Close">
type="button" class="btn-close pt-0 pe-1 ps-0 pb-0 mt-1 me-1" data-bs-dismiss="alert" aria-label="Close">
</button>
}

View File

@@ -1,11 +1,11 @@
<td class="text-center">
<div class="custom-control custom-checkbox">
<div>
<input type="checkbox"
class="custom-control-input"
class="form-check-input"
[id]="entry.id"
[ngModel]="entry.checked"
(ngModelChange)="this.toggleCheckbox.emit($event);">
<label class="custom-control-label" [for]="entry.id">
<label class="form-check-label" [for]="entry.id">
<span class="sr-only">{{(entry.checked ? 'resource-policies.table.headers.deselect' : 'resource-policies.table.headers.select') | translate}}</span>
</label>
</div>

View File

@@ -42,12 +42,12 @@
@if ((getResourcePolicies() | async)?.length > 0) {
<tr class="text-center">
<th>
<div class="custom-control custom-checkbox">
<div>
<input #selectAllBtn type="checkbox"
class="custom-control-input"
class="form-check-input"
[id]="'selectAll_' + resourceUUID"
(change)="selectAllCheckbox($event)">
<label class="custom-control-label" [for]="'selectAll_' + resourceUUID">
<label class="form-check-label" [for]="'selectAll_' + resourceUUID">
<span class="sr-only">{{(selectAllBtn.checked ? 'resource-policies.table.headers.deselect-all' : 'resource-policies.table.headers.select-all') | translate}}</span>
</label>
</div>

View File

@@ -6,7 +6,7 @@
</label>
<select [(ngModel)]="currentFilter" (keyup.enter)="applyFilter()"
(ngModelChange)="currentOperator = advancedFilterMap.get(currentFilter).operators[0].operator"
class="form-control mb-2" id="advanced-search-filters">
class="form-select mb-2" id="advanced-search-filters">
@for (advancedFilter of (advancedFilters$ | async); track advancedFilter.filter) {
<option [value]="advancedFilter.filter">
{{ 'search.filters.filter.' + advancedFilter.filter + '.head' | translate }}
@@ -17,7 +17,7 @@
{{ 'search.sidebar.advanced-search.operators' | translate }}
</label>
<select [(ngModel)]="currentOperator" (keyup.enter)="applyFilter()"
class="form-control mb-2" id="advanced-search-operators">
class="form-select mb-2" id="advanced-search-operators">
@for (operator of advancedFilterMap.get(currentFilter)?.operators; track operator) {
<option [value]="operator.operator">
{{ 'search.filters.operator.' + operator.operator + '.text' | translate }}

View File

@@ -9,7 +9,7 @@
role="button"
tabindex="0"
>
<span class="h4 d-inline-block text-left mt-auto mb-auto dark:text-white text-dark">
<span class="h4 d-inline-block text-start mt-auto mb-auto dark:text-white text-dark">
{{'search.filters.filter.' + filter.name + '.head'| translate}}
</span>
<i class="filter-toggle flex-grow-1 fas p-auto"

View File

@@ -6,7 +6,7 @@
(click)="searchFilterService.minimizeAll()"
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="flex-grow-1 text-start">{{('search.filters.applied.f.' + appliedFilter.filter + '.min') | translate}}: {{ min }}</span>
<span class="ps-1" aria-hidden="true">×</span>
</span>
</a>
@@ -19,7 +19,7 @@
(click)="searchFilterService.minimizeAll()"
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="flex-grow-1 text-start">{{('search.filters.applied.f.' + appliedFilter.filter + '.max') | translate}}: {{ max }}</span>
<span class="ps-1" aria-hidden="true">×</span>
</span>
</a>

View File

@@ -4,7 +4,7 @@
[queryParams]="(removeParameters$ | async)"
(click)="searchFilterService.minimizeAll()">
<span class="d-flex">
<span class="flex-grow-1 text-left">{{ ('search.filters.applied.f.' + appliedFilter.filter) | translate}}{{'search.filters.applied.operator.' + appliedFilter.operator | translate}}: {{'search.filters.' + appliedFilter.filter + '.' + appliedFilter.label | translate: { default: appliedFilter.label } }}</span>
<span class="flex-grow-1 text-start">{{ ('search.filters.applied.f.' + appliedFilter.filter) | translate}}{{'search.filters.applied.operator.' + appliedFilter.operator | translate}}: {{'search.filters.' + appliedFilter.filter + '.' + appliedFilter.label | translate: { default: appliedFilter.label } }}</span>
<span class="ps-1" aria-hidden="true">×</span>
</span>
</a>

View File

@@ -16,7 +16,7 @@
<div>
@for (subscriptionType of subscriptionForm?.controls | keyvalue; track subscriptionType) {
<fieldset formGroupName="{{subscriptionType.key}}" class="mb-3 row">
<legend class="col-md-4 col-form-label float-md-left pt-0">
<legend class="col-md-4 col-form-label float-md-start pt-0">
{{ 'subscriptions.modal.new-subscription-form.type.' + subscriptionType.key | translate }}:
</legend>
<div class="col-md-8">

View File

@@ -23,7 +23,7 @@
<span><i class="fas fa-cloud-upload"
aria-hidden="true"></i> {{ ((fileObject === null || fileObject === undefined) ? dropMessageLabel : dropMessageLabelReplacement) | translate}} {{'uploader.or' | translate}}</span>
<label class="btn btn-link m-0 p-0 ms-1">
<input class="form-control-file d-none" type="file" name="file-upload"
<input class="form-control d-none" type="file" name="file-upload"
id="file-upload"
(change)="handleFileInput($event)">
{{'uploader.browse' | translate}}

View File

@@ -1,4 +1,4 @@
<div class="btn-group" data-toggle="buttons">
<div class="btn-group" data-bs-toggle="buttons">
@if (isToShow(viewModeEnum.ListElement)) {
<button
[attr.aria-current]="currentMode === viewModeEnum.ListElement"

View File

@@ -2,7 +2,7 @@
Template for the detect duplicates submission section component
@author Kim Shepherd
-->
<div class="text-sm-left" *ngVar="(this.getDuplicateData() | async) as data">
<div class="text-sm-start" *ngVar="(this.getDuplicateData() | async) as data">
@if (data?.potentialDuplicates.length === 0) {
<div class="alert alert-success w-100">{{ 'submission.sections.duplicates.none' | translate }}</div>
}

View File

@@ -2,15 +2,15 @@
<div class="row">
<!-- Default switch -->
<div class="col-md-2 d-flex justify-content-center align-items-center" >
<div class="custom-control custom-switch">
<div class="form-check form-switch">
<input
type="checkbox"
class="custom-control-input"
class="form-check-input"
id="primaryBitstream{{fileIndex}}"
[disabled]="processingSaveStatus$ | async"
[checked]="isPrimary"
(change)="togglePrimaryBitstream($event)">
<label class="custom-control-label" for="primaryBitstream{{fileIndex}}">
<label class="form-check-label" for="primaryBitstream{{fileIndex}}">
@if (!isPrimary) {
<span class="sr-only">{{'submission.sections.upload.primary.make' | translate:{ fileName: fileName } }}</span>
}

View File

@@ -21,7 +21,7 @@
}
<div class="row">
<div class="col-md-2">
<span class="text-left font-weight-bold">{{ 'bitstream.edit.form.primaryBitstream.label' | translate }}</span>
<span class="text-start fw-bold">{{ 'bitstream.edit.form.primaryBitstream.label' | translate }}</span>
</div>
</div>
<div class="row">

View File

@@ -1,6 +1,6 @@
<div class="background-image-container mt-ncs">
<div class="container">
<div class="jumbotron py-4 px-2 py-sm-5 px-sm-0 mt-0 mb-4">
<div class="home-news-content py-4 px-2 py-sm-5 px-sm-0 mt-0 mb-4">
<div class="d-flex flex-wrap">
<div>
<h1 class="display-2">DSpace 9</h1>

View File

@@ -58,7 +58,7 @@
}
}
.jumbotron {
.home-news-content {
background-color: transparent;
}