diff --git a/src/app/modules/starter/components/starter/starter.component.scss b/src/app/modules/starter/components/starter/starter.component.scss
index 618f5822..bf43234a 100755
--- a/src/app/modules/starter/components/starter/starter.component.scss
+++ b/src/app/modules/starter/components/starter/starter.component.scss
@@ -1,9 +1,11 @@
@import '/src/styles/colors';
@import '/src/styles/buttons';
@import '/src/styles/fonts';
+
.starter {
height: 100%;
}
+
h2 {
font-size: 26px;
line-height: 34px;
@@ -16,7 +18,7 @@ img[alt='filter-icon'] {
ul {
list-style: none;
-
+
li {
display: flex;
font-size: 14px;
@@ -43,10 +45,10 @@ ul {
&::after {
opacity: 1;
- }
- &.up::after {
- transform: rotate(180deg);
+ &.up {
+ transform: rotate(180deg);
+ }
}
}
@@ -64,38 +66,37 @@ app-starter-filters p {
@media screen and (max-width: 768px) {
h2 {
- margin-bottom: 1rem;
- margin-top: 0.5rem;
+ margin: 0.5rem 0 1rem;
}
}
#filters-container {
position: sticky;
top: 40px;
- height: 100%; /* Asegura que el contenedor tome toda la altura de la pantalla */
- overflow-y: auto; /* Permite el scroll interno si es necesario */
+ height: 100%;
+ overflow-y: auto;
}
#challenges-container {
- height: 100%; /* Ajusta la altura del contenedor para que no se superponga con otros elementos */
- overflow: hidden; /* Evita el scroll en este contenedor */
+ height: 100%;
+ overflow: hidden;
display: flex;
flex-direction: column;
}
#challenges {
- flex: 1; /* Permite que el contenedor ocupe el espacio disponible */
- overflow-y: auto; /* Permite el scroll interno */
- scrollbar-width: none; /* Firefox */
- -ms-overflow-style: none; /* Internet Explorer 10+ */
+ flex: 1;
+ overflow-y: auto;
+ scrollbar-width: none;
+ -ms-overflow-style: none;
}
-#challenges::-webkit-scrollbar { /* WebKit (Chrome, Safari) */
+#challenges::-webkit-scrollbar {
width: 0;
height: 0;
}
app-pagination {
- flex-shrink: 0; /* Asegura que la paginación no se colapse */
- padding: 10px 0; /* Espaciado para la paginación */
-}
+ flex-shrink: 0;
+ padding: 10px 0;
+}
\ No newline at end of file
diff --git a/src/app/modules/starter/starter.module.ts b/src/app/modules/starter/starter.module.ts
index 47f74aff..763ad514 100755
--- a/src/app/modules/starter/starter.module.ts
+++ b/src/app/modules/starter/starter.module.ts
@@ -11,7 +11,6 @@ import { ChallengeService } from 'src/app/services/challenge.service'
import { TranslateModule } from '@ngx-translate/core'
import { ModalsModule } from '../modals/modals.module'
import { DynamicTranslatePipe } from 'src/app/pipes/dynamic-translate.pipe'
-import { FormatDatePipe } from 'src/app/pipes/format-date.pipe'
@NgModule({
declarations: [
@@ -28,8 +27,7 @@ import { FormatDatePipe } from 'src/app/pipes/format-date.pipe'
SharedComponentsModule,
TranslateModule,
ModalsModule,
- DynamicTranslatePipe,
- FormatDatePipe
+ DynamicTranslatePipe
],
providers: [
ChallengeService
diff --git a/src/app/pipes/format-date.pipe.spec.ts b/src/app/pipes/format-date.pipe.spec.ts
deleted file mode 100644
index 2691737f..00000000
--- a/src/app/pipes/format-date.pipe.spec.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { FormatDatePipe } from './format-date.pipe'
-
-describe('FormatDatePipe', () => {
- let pipe: FormatDatePipe
-
- beforeEach(() => {
- pipe = new FormatDatePipe()
- })
-
- it('create an instance', () => {
- expect(pipe).toBeTruthy()
- })
-
- it('transforms date correctly', () => {
- const inputDate = '2023-05-20T00:00:00.000Z'
- const expectedOutput = 'May 20, 2023'
- expect(pipe.transform(inputDate)).toEqual(expectedOutput)
- })
-})
diff --git a/src/app/pipes/format-date.pipe.ts b/src/app/pipes/format-date.pipe.ts
deleted file mode 100644
index c6532df3..00000000
--- a/src/app/pipes/format-date.pipe.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { DatePipe } from '@angular/common'
-import { Pipe, type PipeTransform } from '@angular/core'
-
-@Pipe({
- name: 'formatDate',
- pure: true,
- standalone: true
-})
-export class FormatDatePipe implements PipeTransform {
- transform (date: string | Date): any {
- // todo: need to fix, need change with the lenguage selected
- const datePipe: DatePipe = new DatePipe('en-EU')
- return datePipe.transform(date, 'MMM d, y')
- }
-}
diff --git a/src/app/services/date-formatter.service.spec.ts b/src/app/services/date-formatter.service.spec.ts
deleted file mode 100644
index 5ba28686..00000000
--- a/src/app/services/date-formatter.service.spec.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import { TestBed } from '@angular/core/testing'
-import { DateFormatterService } from './date-formatter.service'
-import { TranslateService } from '@ngx-translate/core'
-
-describe('DateFormatterService', () => {
- let service: DateFormatterService
- let translateService: TranslateService
-
- beforeEach(() => {
- TestBed.configureTestingModule({
- providers: [
- {
- provide: TranslateService,
- useValue: {
- currentLang: 'en'
- }
- }
- ]
- })
- service = TestBed.inject(DateFormatterService)
- translateService = TestBed.inject(TranslateService)
- })
-
- it('should be created', () => {
- expect(service).toBeTruthy()
- })
-
- it('should format date correctly in English', () => {
- translateService.currentLang = 'en'
- const date = new Date('2023-04-01')
- expect(service.format(date)).toEqual('Apr 01, 2023')
- })
-
- it('should format date correctly in Spanish', () => {
- translateService.currentLang = 'es'
- const date = new Date('2023-04-01')
- expect(service.format(date)).toEqual('01 Abr 2023')
- })
-
- it('should use default pattern if language is not supported', () => {
- translateService.currentLang = 'fr' // French is not supported, so it should fall back to default
- const date = new Date('2023-04-01')
- expect(service.format(date)).toEqual('01 D’abr. 2023') // Assuming default is Catalan
- })
-})
diff --git a/src/app/services/date-formatter.service.ts b/src/app/services/date-formatter.service.ts
deleted file mode 100644
index 029d47ee..00000000
--- a/src/app/services/date-formatter.service.ts
+++ /dev/null
@@ -1,80 +0,0 @@
-import { Injectable, inject } from '@angular/core'
-import { TranslateService } from '@ngx-translate/core'
-import { formatDate, registerLocaleData } from '@angular/common'
-import localeEs from '@angular/common/locales/es'
-import localeCa from '@angular/common/locales/ca'
-import localeEn from '@angular/common/locales/en'
-
-@Injectable({
- providedIn: 'root'
-})
-export class DateFormatterService {
- private readonly translate = inject(TranslateService)
-
- constructor () {
- registerLocaleData(localeEs, 'es')
- registerLocaleData(localeCa, 'ca')
- registerLocaleData(localeEn, 'en')
- }
-
- format (date: Date, pattern: string = 'dd MMM yyyy'): string {
- if (date === null || date === undefined) {
- console.error('DateFormatterService.format: La fecha es indefinida o inválida')
- return '' // Retorna un string vacío si la fecha no es válida.
- }
- const localeId = this.getLocaleId(this.translate.currentLang)
- const formatPattern = this.getFormatPattern(this.translate.currentLang, pattern)
- let formattedDate = formatDate(date, formatPattern, localeId)
-
- // Ajuste manual para asegurar que el mes esté en el formato correcto.
- const parts = formattedDate.split(' ')
- if (this.translate.currentLang === 'en' && parts.length === 3) {
- // Reordena para inglés a "MMM dd, yyyy".
- formattedDate = `${parts[0]} ${parts[1]} ${parts[2]}`
- } else if (parts.length >= 3) {
- let monthIndex = 1 // Índice del mes en el arreglo.
- if (this.translate.currentLang === 'ca' && parts[1] === 'de') {
- // Ajuste específico para catalán, donde el formato incluye 'de'.
- monthIndex = 2 // El mes está en la tercera posición para catalán.
- }
- const month = parts[monthIndex]
- // Asegura que la primera letra esté en mayúscula y el resto en minúsculas.
- parts[monthIndex] = month.charAt(0).toUpperCase() + month.slice(1).toLowerCase()
-
- if (this.translate.currentLang === 'ca' && parts[1] === 'de') {
- // Para catalán, asegura que el mes siempre esté presente incluso después de ajustar.
- // No remueve 'de' para mantener la consistencia con el formato original.
- } else if (this.translate.currentLang === 'ca') {
- // Si se requiere otro ajuste para catalán que no involucre 'de'.
- }
- formattedDate = parts.join(' ')
- }
-
- return formattedDate
- }
-
- private getLocaleId (lang: string): string {
- switch (lang) {
- case 'es': return 'es-ES'
- case 'ca': return 'ca-ES'
- case 'en': return 'en-US'
- default: return 'ca-ES'
- }
- }
-
- // Selecciona el patrón de formato basado en el idioma.
- private getFormatPattern (lang: string, defaultPattern: string): string {
- switch (lang) {
- case 'en':
- // Patrón de formato para inglés ajustado.
- return 'MMM dd, yyyy'
- case 'es':
- case 'ca':
- // Patrón de formato para español y catalán, ajustado para coincidir con Figma.
- return 'dd MMM yyyy'
- default:
- // Retorna el patrón por defecto para los demás idiomas.
- return defaultPattern
- }
- }
-}
diff --git a/src/app/shared/components/challenge-card/challenge-card.component.html b/src/app/shared/components/challenge-card/challenge-card.component.html
index b39ac081..2a63ca22 100755
--- a/src/app/shared/components/challenge-card/challenge-card.component.html
+++ b/src/app/shared/components/challenge-card/challenge-card.component.html
@@ -22,38 +22,34 @@
{{title}}
+
- {{ formattedDate }}
+ {{creation_date | date:'mediumDate':'':currentLang}}
