Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feature: upgrade swiper #4496

Merged
merged 10 commits into from
Mar 18, 2025
Merged

feature: upgrade swiper #4496

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
79892cb
update package-lock.json
itsmostafa Mar 7, 2025
88d36b4
update swiper package
itsmostafa Mar 7, 2025
8ea71cc
update swiper to v11
itsmostafa Mar 10, 2025
10f5020
remove defunct swiper component
itsmostafa Mar 10, 2025
14701fa
commit test component
itsmostafa Mar 14, 2025
46e423a
Merge branch 'develop' into feature/upgrade-swiper
itsmostafa Mar 17, 2025
7ead552
update test swiper component
itsmostafa Mar 17, 2025
af722cb
update new-assessment component
itsmostafa Mar 17, 2025
74b9645
update search page component
itsmostafa Mar 18, 2025
fe653d5
remove test swiper component
itsmostafa Mar 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1,556 changes: 728 additions & 828 deletions CSETWebNg/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion CSETWebNg/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@
"sass": "^1.85.1",
"screenfull": "^5.2.0",
"style-loader": "^4.0.0",
"swiper": "^8.4.7",
"swiper": "^11.2.5",
"typescript": "^5.7.3",
"zone.js": "^0.15.0"
},
Expand Down
1 change: 0 additions & 1 deletion CSETWebNg/src/app/app-routing.module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -244,7 +244,6 @@ import { Cmmc2ScorecardPageComponent } from './assessment/results/mat-cmmc2/scor
import { Cmmc2ScorecardReportComponent } from './reports/cmmc2/cmmc2-scorecard-report/cmmc2-scorecard-report.component';

const appRoutes: Routes = [

// reports routing
{
path: 'report-test',
Expand Down
13 changes: 7 additions & 6 deletions CSETWebNg/src/app/app.module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
////////////////////////////////
import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
import { DatePipe } from '@angular/common';
import { NgModule, inject, provideAppInitializer } from '@angular/core';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule, inject, provideAppInitializer } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

// import { MatAutocompleteModule } from '@angular/material/autocomplete';
Expand Down Expand Up @@ -472,7 +472,6 @@ import { MergeExaminationsComponent } from './assessment/merge/merge-examination
import { CharterMismatchComponent } from './dialogs/charter-mistmatch/charter-mismatch.component';
import { DigitsOnlyNotZeroDirective } from './helpers/digits-only-not-zero.directive';
import { LandingPageTabsComponent } from './initial/landing-page-tabs/landing-page-tabs.component';
import { NewAssessmentComponent } from './initial/new-assessment/new-assessment.component';
import { ModuleContentStandardComponent } from './reports/module-content/module-content-standard/module-content-standard.component';
import { ModuleContentModelComponent } from './reports/module-content/model/module-content-model/module-content-model.component';
import { McGroupingComponent } from './reports/module-content/model/mc-grouping/mc-grouping.component';
Expand All @@ -481,7 +480,6 @@ import { McOptionComponent } from './reports/module-content/model/mc-option/mc-o
import { GuidanceBlockComponent } from './reports/module-content/guidance-block/guidance-block.component';
import { ReferencesBlockComponent } from './reports/module-content/references-block/references-block.component';
import { ExamProfileSummaryComponent } from './assessment/prepare/irp-summary/irp-ise-summary.component';
import { SwiperModule } from 'swiper/angular';
import { NewAssessmentDialogComponent } from './dialogs/new-assessment-dialog/new-assessment-dialog.component';
import { GalleryService } from './services/gallery.service';
import { EllipsisModule } from './modules/ngx-ellipsis/ellipsis.module';
Expand Down Expand Up @@ -666,7 +664,6 @@ import { CiePrinciplePhaseComponent } from './reports/cie/cie-principle-phase/ci
import { CieNotApplicableComponent } from './reports/cie/cie-not-applicable/cie-not-applicable.component';
import { SdOwnerDeficiencyComponent } from './reports/sd-owner/sd-owner-deficiency/sd-owner-deficiency.component';
import { SdOwnerCommentsMfrComponent } from './reports/sd-owner/sd-owner-comments/sd-owner-comments-mfr.component';

import { ReferencesSectionComponent } from './assessment/questions/references-section/references-section.component';
import { CisaWorkflowWarningsComponent } from './assessment/results/reports/cisa-workflow-warnings/cisa-workflow-warnings.component';
import { AnalyticsComponent } from './assessment/results/analytics/analytics.component';
Expand All @@ -689,6 +686,10 @@ import { firstValueFrom } from 'rxjs';
import { UpgradeComponent } from './assessment/upgrade/upgrade.component';
import { CodeEditorModule } from '@ngstack/code-editor';
import { ImportComponent } from './import/import.component';
import { NewAssessmentComponent } from './initial/new-assessment/new-assessment.component';
import { register as registerSwiper } from 'swiper/element/bundle';

registerSwiper();

@NgModule({
declarations: [
Expand Down Expand Up @@ -1031,7 +1032,6 @@ import { ImportComponent } from './import/import.component';
CharterMismatchComponent,
DigitsOnlyNotZeroDirective,
LandingPageTabsComponent,
NewAssessmentComponent,
ModuleContentStandardComponent,
ModuleContentModelComponent,
McGroupingComponent,
Expand Down Expand Up @@ -1062,6 +1062,7 @@ import { ImportComponent } from './import/import.component';
CmuNistCsfCatSummaryComponent,
ImrReportComponent,
ReferencesBlockComponent,
NewAssessmentComponent,
NewAssessmentDialogComponent,
CrrMainTocComponent,
Cmmc2CommentsMarkedComponent,
Expand Down Expand Up @@ -1291,13 +1292,13 @@ import { ImportComponent } from './import/import.component';
NgbModule,
NgxChartsModule,
TooltipModule,
SwiperModule,
EllipsisModule,
HotkeyModule.forRoot(),
CodeEditorModule.forRoot({
typingsWorkerUrl: 'assets/workers/typings-worker.js',
baseUrl: 'assets/monaco'
})],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
providers: [
TranslocoService,
provideTranslocoScope('tutorial', 'reports'),
Expand Down
69 changes: 35 additions & 34 deletions CSETWebNg/src/app/initial/new-assessment/new-assessment.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,43 +20,44 @@
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
-------------------------->
<ng-container *transloco="let t">
<div *transloco="let t">
<div class="m-4" [innerHTML]="pageTitle">
</div>
<div *ngFor="let row of gallerySvc.rows" class="m-4" style="height:240px;">
<div *ngFor="let row of gallerySvc.rows" class="container m-2" style="height:240px;">
<div>
<h4>{{row.group_Title}}</h4>
</div>
<swiper class="gallery-slider" [config]="config" (slideChange)="onSlideChange()" #swiper>
<ng-template swiperSlide *ngFor="let c of row.galleryItems; let i = index">
<div [attr.id]="'c'+c.gallery_Item_Guid" class="card gallery-card" tabindex="0"
(focus)="onHover(c.gallery_Item_Guid)" (mouseover)="onHover(c.gallery_Item_Guid)"
(mouseleave)="onHoverOut(-1, c.gallery_Item_Guid)">

<div class="card-body gallery-card-body cursor-pointer"
style="min-height:150px; max-height:150px; z-index:1"
(click)="navSvc.beginNewAssessmentGallery(c)">
<div class="img-container">
<img class="img-cropped-calc" [src]="getImageSrc(c.icon_File_Name_Small)">
<div>
<h4>{{row.group_Title}}</h4>
</div>
<swiper-container class="gallery-slider">
<swiper-slide *ngFor="let c of row.galleryItems; let i = index">
<div [attr.id]="'c'+c.gallery_Item_Guid" class="card gallery-card"
(focus)="onHover(c.gallery_Item_Guid)" (mouseover)="onHover(c.gallery_Item_Guid)"
(mouseleave)="onHoverOut(-1, c.gallery_Item_Guid)">
<div class="card-body gallery-card-body cursor-pointer"
style="min-height:150px; max-height:150px; z-index:1"
(click)="navSvc.beginNewAssessmentGallery(c)">
<div class="img-container">
<img class="img-cropped-calc" [src]="getImageSrc(c.icon_File_Name_Small)">
</div>
<h6 class="card-title" ellipsis [ellipsis-content]="c.title"
style="max-height:80px; min-height:80px; font-weight:bold;"></h6>
</div>
<div class="card-footer" [class.gallery-card-footer]="c.gallery_Item_Guid==hoverIndex"
style="text-align:right;">
<!--[hidden]="c.gallery_Item_Guid!=hoverIndex">-->
<button [matTooltip]="t('tooltip.view detail')" [hidden]="c.gallery_Item_Guid!=hoverIndex"
class="btn btn-outline-light btn-circle btn-sm gallery-btn-info" (click)="openDialog(c)"
style="margin-right:5px; z-index:100"><i class="fa-solid fa-circle-info"
style="font-size: 16px;"></i></button>
<button [matTooltip]="t('tooltip.create assessment')"
[hidden]="c.gallery_Item_Guid!=hoverIndex"
class="btn btn-light btn-circle btn-sm gallery-btn-play"
(click)="navSvc.beginNewAssessmentGallery(c)"><i class="fa-solid fa-play"
style="font-size: 16px; z-index:100"></i></button>
</div>
<h6 class="card-title" ellipsis [ellipsis-content]="c.title"
style="max-height:80px; min-height:80px; font-weight:bold;"></h6>

</div>
<div class="card-footer" [class.gallery-card-footer]="c.gallery_Item_Guid==hoverIndex"
style="text-align:right;">
<!--[hidden]="c.gallery_Item_Guid!=hoverIndex">-->
<button [matTooltip]="t('tooltip.view detail')" [hidden]="c.gallery_Item_Guid!=hoverIndex"
class="btn btn-outline-light btn-circle btn-sm gallery-btn-info" (click)="openDialog(c)"
style="margin-right:5px; z-index:100"><i class="fa-solid fa-circle-info"
style="font-size: 16px;"></i></button>
<button [matTooltip]="t('tooltip.create assessment')" [hidden]="c.gallery_Item_Guid!=hoverIndex"
class="btn btn-light btn-circle btn-sm gallery-btn-play"
(click)="navSvc.beginNewAssessmentGallery(c)"><i class="fa-solid fa-play"
style="font-size: 16px; z-index:100"></i></button>
</div>
</div>
</ng-template>
</swiper>
</swiper-slide>
</swiper-container>
</div>
</div>
</ng-container>
</div>
52 changes: 47 additions & 5 deletions CSETWebNg/src/app/initial/new-assessment/new-assessment.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,15 +49,57 @@ SOFTWARE.
opacity: 100%;
}

.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
opacity: 0;
}

.img-container {
position: relative;
width: 100%;
height: 70px;
overflow: hidden;
border-bottom: 1px solid rgba(54, 113, 144, .2)
}

.swiper-buttons {
position: relative;
/* Or absolute, depending on desired layout */
/* Add styling to position the buttons as desired */
display: flex;
justify-content: center;
/* Example: Center the buttons */
margin-top: 10px;
/* Add spacing between slider and buttons */
}

.swiper-button-next,
.swiper-button-prev {
color: black;
/* Change the arrow color */
background-color: rgba(255, 255, 255, 0.8);
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background-color 0.3s ease;
position: static;
/* Override default Swiper positioning */
margin: 0 10px;
/* Add space between the buttons */
}

.swiper-button-next:after,
.swiper-button-prev:after {
font-size: 20px;
/* Adjust arrow size */
font-weight: bold;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
background-color: rgba(255, 255, 255, 1);
}

.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
opacity: 0;
}
Loading
Loading