diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml index 6d5d01d3ba4981cd2d48d0d20d9e824860c18b7f..05d2fe9559e979d55090bfebbd8f9984a66eb4e6 100644 --- a/.gitlab-ci.yml +++ b/.gitlab-ci.yml @@ -1,3 +1,8 @@ +image: docker:git + +services: + - docker:dind + stages: - sonar-analysis - build @@ -7,8 +12,6 @@ build: services: - docker:18.09-dind stage: build - tags: - - build-push-to-registry only: - master script: @@ -29,9 +32,10 @@ build_dev: - docker push "$CI_REGISTRY_IMAGE:dev" code_analysis: + image: skilldlabs/sonar-scanner:3.4.0 + services: + - docker:18.09-dind stage: sonar-analysis - tags: - - test only: - dev script: diff --git a/.vscode/settings.json b/.vscode/settings.json index 139f71bf7462ede1599f7b2e8d97050d7b14d443..700283a6a04703c6acfc7e81fe49d2743367b025 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,8 +1,29 @@ { + "eslint.enable": true, + "javascript.format.enable": false, + "editor.codeActionsOnSave": { + "source.fixAll.eslint": true + }, + "[html]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + }, + "[javascript]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + }, + "[json]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + }, + "[scss]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + }, + "[typescript]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + }, "editor.formatOnSave": true, "i18n-ally.includeSubfolders": true, "i18n-ally.displayLanguage": "fr", "i18n-ally.localesPaths": "client/src/assets/i18n", "i18n-ally.keystyle": "nested", - "i18n-ally.enabledFrameworks": "ngx-translate" + "i18n-ally.enabledFrameworks": "ngx-translate", + "typescript.preferences.importModuleSpecifier": "relative" } diff --git a/Dockerfile b/Dockerfile index 078d6f357ac49f256e63e1b85fe2cf648f08a4b0..de073df464578b69b4d97bd44fcdab2519e50a2c 100644 --- a/Dockerfile +++ b/Dockerfile @@ -14,20 +14,20 @@ RUN npm install --silent COPY angular.json . COPY tsconfig.json . COPY tsconfig.app.json . -COPY nginx.conf . +COPY /nginx/nginx.conf . COPY /src ./src ARG conf # Building the Angular app /dist i18n -RUN npm run build:${conf} +RUN npm run build:dev # Stage 1, based on Nginx, to have only the compiled app FROM nginx:1.16.0-alpine # copy artifact build from the 'build environment' -COPY --from=build /app/dist /var/www/htdocs -COPY --from=build /app/nginx.conf /etc/nginx/nginx.conf + +COPY --from=build /app/dist/fr /usr/share/nginx/html RUN touch /var/run/nginx.pid diff --git a/README.md b/README.md index 7964a7fba92951f13cd6d87c55dfa6c36cb8c678..903bb66d9009b9bd8658fdea3d11cdb820fedf9e 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ This project was generated with [Angular CLI](https://github.com/angular/angular ## Development server -Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. +Run `npm start` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. ## Code scaffolding @@ -12,15 +12,19 @@ Run `ng generate component component-name` to generate a new component. You can ## Build -Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build. +Run `npm run build:dev` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `npm run build:prod` flag for a production build. ## Running unit tests -Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). +Run `npm run test` to execute the unit tests via [Karma](https://karma-runner.github.io). ## Running end-to-end tests -Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/). +Run `npm run e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/). + +## Contributing + +Use conventional commit format. For more info please read this article on [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/) ## Further help diff --git a/docker-compose.yml b/docker-compose.yml index e96b52b975a0793ad2bab7a383927ae4c5e84d77..e15eab3596649afe294a1a5919d127ba224e75d2 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -1,11 +1,11 @@ -version: '3' +version: '2' services: web-app: restart: unless-stopped build: . - image: registry.forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client:${TAG} + image: registry.forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client::${TAG} volumes: - - ./nginx.conf:/etc/nginx/conf.d/default.conf + - ./nginx/dev.conf:/etc/nginx/conf.d/default.conf ports: - 8080:8080 diff --git a/nginx.conf b/nginx.conf deleted file mode 100644 index 7f1102659fc5a8b6c24bc2ee7e0727e93443e191..0000000000000000000000000000000000000000 --- a/nginx.conf +++ /dev/null @@ -1,13 +0,0 @@ -server { - # staging server is listening on the port 8080 - listen 8080; - server_name _; - root /usr/share/nginx/html/; - - # rule serving the fr build - location / { - try_files $uri$args /index.html; - sub_filter '<html lang="fr">'; - } - -} diff --git a/nginx/dev.conf b/nginx/dev.conf new file mode 100644 index 0000000000000000000000000000000000000000..0ec8e46c464e62745120cb4c04c99df55e37c97c --- /dev/null +++ b/nginx/dev.conf @@ -0,0 +1,23 @@ +server { + listen 8080 default_server; + + root /usr/share/nginx/html/; + + location / { + # First attempt to serve request as file, then + # as directory, then fall back to displaying a 404. + try_files $uri $uri/ /index.html; + sub_filter '<html lang="en">' '<html lang="fr">'; + } + + # Rule serving the en build + location /en { + try_files $uri$args /en/index.html; + } + + # redirecting the /fr url to the new location of the fr build + location ~ ^/fr(.*)$ { + return 301 $scheme://$http_host$1$is_args$args; + } + +} diff --git a/nginx/nginx.conf b/nginx/nginx.conf new file mode 100644 index 0000000000000000000000000000000000000000..01a7b65eb8e408e76655934d5146669ea1e9870b --- /dev/null +++ b/nginx/nginx.conf @@ -0,0 +1,30 @@ +worker_processes 1; +error_log /var/log/nginx/error.log warn; +pid /var/run/nginx.pid; + +events { + worker_connections 1024; +} + +http { + include /etc/nginx/mime.types; + default_type application/octet-stream; + + log_format main '$remote_addr - $remote_user [$time_local] "$request" ' + '$status $body_bytes_sent "$http_referer" ' + '"$http_user_agent" "$http_x_forwarded_for"'; + + access_log /var/log/nginx/access.log main; + + sendfile on; + + keepalive_timeout 65; + + gzip on; + + include /etc/nginx/conf.d/*.conf; + + # Max Body Size + client_max_body_size 10M; + +} diff --git a/package.json b/package.json index e7add9406412c5a3c39f4a21bfca05b5610abebc..5a8956c0f4d5d75b2dd23ac104a517e7ffe915ea 100644 --- a/package.json +++ b/package.json @@ -35,7 +35,7 @@ "@angular/localize": "^10.1.3", "@types/jasmine": "~3.5.0", "@types/jasminewd2": "~2.0.3", - "@types/node": "^12.11.1", + "@types/node": "^12.12.62", "codelyzer": "^6.0.0", "jasmine-core": "~3.6.0", "jasmine-spec-reporter": "~5.0.0", diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 51288081bbb14b13dcee6c757b3ced5f9d53ce3c..4ad3e88617de7993fb074fa3ac938dcd0aadc4e7 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -10,10 +10,11 @@ import { CustomBreakPointsProvider } from './config/custom-breakpoint'; import { StructureListComponent } from './structure-list/structure-list.component'; import { FooterComponent } from './footer/footer.component'; import { HeaderComponent } from './header/header.component'; +import { SharedModule } from './shared/shared.module'; @NgModule({ declarations: [AppComponent, HeaderComponent, FooterComponent, HomeComponent, StructureListComponent], - imports: [BrowserModule, AppRoutingModule, FlexLayoutModule], + imports: [BrowserModule, AppRoutingModule, FlexLayoutModule, SharedModule], providers: [{ provide: LOCALE_ID, useValue: 'fr' }, CustomBreakPointsProvider], bootstrap: [AppComponent], }) diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html index 96ee72c300cc887a5af444c3444f768e39060d67..78509bdd99c991d973d2fb70cfa70001abf123cf 100644 --- a/src/app/header/header.component.html +++ b/src/app/header/header.component.html @@ -14,7 +14,7 @@ </div> <div fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="40px" class="grey-background"> <a routerLink="/login" [routerLinkActive]="'active'" i18n>Se connecter</a> - <span class="clickable ico-mglass orange"></span> + <span class="clickable ico-mglass purple"></span> </div> </div> </div> diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss index 269d2cc39fe65ac570d0d169696e80d5b8bdbb6f..f22e53e199fe83d560af907c95bbbfe97e5ff75a 100644 --- a/src/app/header/header.component.scss +++ b/src/app/header/header.component.scss @@ -23,6 +23,9 @@ height: 100%; padding: 0 3vw; background-color: $grey-2; + a { + text-decoration: underline; + } } } diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html index 76af61ff9b3c042b345358c1245b228c040cb8fe..4f2ba48bcf5fce48d7690c8b79df492311eb776a 100644 --- a/src/app/home/home.component.html +++ b/src/app/home/home.component.html @@ -1,3 +1,5 @@ -<div fxLayout="column"> - <p>home works!</p> +<div class="content-container"> + <div class="section-container"> + <p>Home works!</p> + </div> </div> diff --git a/src/app/shared/components/card/card.component.html b/src/app/shared/components/card/card.component.html new file mode 100644 index 0000000000000000000000000000000000000000..f2fda252a00e00222fcb897e4b51d94fd9a9c12c --- /dev/null +++ b/src/app/shared/components/card/card.component.html @@ -0,0 +1 @@ +<p>card works!</p> diff --git a/src/app/shared/components/card/card.component.scss b/src/app/shared/components/card/card.component.scss new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/src/app/shared/components/card/card.component.spec.ts b/src/app/shared/components/card/card.component.spec.ts new file mode 100644 index 0000000000000000000000000000000000000000..3093fd5a30b9312cf88096bb93f28699e5be088f --- /dev/null +++ b/src/app/shared/components/card/card.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { CardComponent } from './card.component'; + +describe('CardComponent', () => { + let component: CardComponent; + let fixture: ComponentFixture<CardComponent>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ CardComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(CardComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/shared/components/card/card.component.ts b/src/app/shared/components/card/card.component.ts new file mode 100644 index 0000000000000000000000000000000000000000..07a9ab07eff2b4b7ff193ff9906138d2f43366cd --- /dev/null +++ b/src/app/shared/components/card/card.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-card', + templateUrl: './card.component.html', + styleUrls: ['./card.component.scss'] +}) +export class CardComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/shared/components/index.ts b/src/app/shared/components/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..d8ec6de94aaed2d9b059b9ce0d40e7db8787ed2e --- /dev/null +++ b/src/app/shared/components/index.ts @@ -0,0 +1,7 @@ +import { CardComponent } from './card/card.component'; + +// tslint:disable-next-line: max-line-length +export { CardComponent }; + +// tslint:disable-next-line:variable-name +export const SharedComponents = [CardComponent]; diff --git a/src/app/shared/directives/index.ts b/src/app/shared/directives/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..9cee80e98a91ceba14c2c0c1356f669d0d347793 --- /dev/null +++ b/src/app/shared/directives/index.ts @@ -0,0 +1,4 @@ +export {}; + +// tslint:disable-next-line:variable-name +export const SharedDirectives = []; diff --git a/src/app/shared/pipes/index.ts b/src/app/shared/pipes/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..67f3e70ccf2a27431196f18ee456234c27bf441b --- /dev/null +++ b/src/app/shared/pipes/index.ts @@ -0,0 +1,4 @@ +export {}; + +// tslint:disable-next-line:variable-name +export const SharedPipes = []; diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts new file mode 100644 index 0000000000000000000000000000000000000000..34daa65e8ebed0fdfcbda98b03fd17ebbaa0ad82 --- /dev/null +++ b/src/app/shared/shared.module.ts @@ -0,0 +1,13 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { SharedComponents } from './components'; +import { SharedPipes } from './pipes'; +import { SharedDirectives } from './directives'; +import { RouterModule } from '@angular/router'; + +@NgModule({ + imports: [CommonModule, RouterModule], + declarations: [...SharedPipes, ...SharedComponents, ...SharedDirectives], + exports: [...SharedPipes, ...SharedComponents, ...SharedDirectives], +}) +export class SharedModule {} diff --git a/src/app/structure-list/structure-list.component.html b/src/app/structure-list/structure-list.component.html index 445a9df34b528875721d1709a87da4b8e9bb7c17..15a9b1218fdd436491efddfe635a7af80a2c3e30 100644 --- a/src/app/structure-list/structure-list.component.html +++ b/src/app/structure-list/structure-list.component.html @@ -1 +1,31 @@ -<p>structure-list works!</p> +<div class="content-container no-pt"> + <div + class="section-container no-max-width orange-background" + fxLayout="row" + fxLayout.lt-sm="column" + fxLayoutAlign="center baseline" + fxLayoutAlign.lt-sm="center center" + fxLayoutGap="20px" + > + <p>Vous faites partie d’une structure de médiation ?</p> + <a [href]="regisrationFormLink" target="_blank">Inscrivez-vous</a> + </div> + <div class="section-container card"> + <div fxLayout="row" fxLayoutGap="40px" fxLayoutAlign="space-between center"> + <div class="input-container" fxLayout="row" fxLayoutGap="16px"> + <span class="ico-mglass purple"></span> + <input class="input-field" type="text" placeholder="Rechercher une adresse, une association..." name="search" /> + </div> + <div fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="10px"> + <span class="clickable ico-pin orange"></span> + <a>Me localiser</a> + </div> + </div> + </div> +</div> + +<div class="content-container no-pt"> + <div class="section-container"> + <p>structure-list works!</p> + </div> +</div> diff --git a/src/app/structure-list/structure-list.component.scss b/src/app/structure-list/structure-list.component.scss index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..a88f768846c2e642b35093f45795719497427739 100644 --- a/src/app/structure-list/structure-list.component.scss +++ b/src/app/structure-list/structure-list.component.scss @@ -0,0 +1,53 @@ +@import '../../assets/scss/color'; +@import '../../assets/scss/typography'; +@import '../../assets/scss/breakpoint'; +@import '../../assets/scss/icons'; + +.orange-background { + background-color: $orange; + height: 130px; + color: $white; + padding-top: 20px; + p { + @include cn-bold-18; + } + a { + color: $white; + text-decoration: underline; + } + @media #{$large-phone} { + height: 15vh; + padding-top: 0px; + } +} + +.card { + background: #ffffff; + border: 1px solid $grey-3; + box-sizing: border-box; + padding: 20px 24px; +} + +.card { + margin-top: -60px; + a { + @include cn-bold-16; + color: $orange; + white-space: nowrap; + text-decoration: underline; + } +} + +.input-container { + background-color: $grey-4; + align-items: center; + width: 100%; + height: 40px; + padding: 10px 14px; + .input-field { + width: 100%; + background-color: inherit; + border: unset; + outline: none; //TODO: accesibility issue + } +} diff --git a/src/app/structure-list/structure-list.component.ts b/src/app/structure-list/structure-list.component.ts index 0e755a84b7dd46b19c1d0ab0e300be743bcaabd9..00d10eeb59e21612161fe6622dca034293854c0c 100644 --- a/src/app/structure-list/structure-list.component.ts +++ b/src/app/structure-list/structure-list.component.ts @@ -1,15 +1,15 @@ import { Component, OnInit } from '@angular/core'; +import { environment } from '../../environments/environment'; @Component({ selector: 'app-structure-list', templateUrl: './structure-list.component.html', - styleUrls: ['./structure-list.component.scss'] + styleUrls: ['./structure-list.component.scss'], }) export class StructureListComponent implements OnInit { + public regisrationFormLink: string = environment.registrationForm; - constructor() { } - - ngOnInit(): void { - } + constructor() {} + ngOnInit(): void {} } diff --git a/src/assets/scss/_color.scss b/src/assets/scss/_color.scss index f33be488626a5e23242dfca8a7d73879e507761e..e1ac547a830a6adff9d3d84f08ad5a3a3fa016e5 100644 --- a/src/assets/scss/_color.scss +++ b/src/assets/scss/_color.scss @@ -1,9 +1,12 @@ +//TODO: Clean colors when design is properly setup $black: #000000; $white: #ffff; /* GREYS */ $grey: #b4bbbf; $grey-1: #333333; $grey-2: #eeeeee; +$grey-3: #c3c3c3; +$grey-4: #f2ecf2; /* YELLOW */ $yellow: #f2cb04; $yellow-light: #fff8d6; diff --git a/src/assets/scss/_icons.scss b/src/assets/scss/_icons.scss index 48c008dd98631fa1fb65e540c200e95e511cce7e..b1dcb9ac71b2a68e6b57b51cffeb4c8bce009c9d 100644 --- a/src/assets/scss/_icons.scss +++ b/src/assets/scss/_icons.scss @@ -5,9 +5,11 @@ display: inline-block; background: transparent; border-radius: 30px; + border: 2px solid $grey; height: 12px; width: 12px; - border: 2px solid $grey; + min-width: 12px; + max-width: 12px; &:after { content: ''; @@ -41,6 +43,8 @@ .ico-pin { width: 20px; height: 20px; + max-width: 20px; + max-height: 20px; border-radius: 50% 50% 50% 0; background: transparent; transform: rotate(-45deg); diff --git a/src/assets/scss/_typography.scss b/src/assets/scss/_typography.scss index 749a95022752da3613b3cb727cd37a2e00464a09..d21536e48e55c3a5a706c2b292336252ccbd842d 100644 --- a/src/assets/scss/_typography.scss +++ b/src/assets/scss/_typography.scss @@ -94,6 +94,12 @@ h6, font-weight: normal; font-size: $font-size-medium-mobile; } +@mixin cn-bold-18 { + font-family: $title-font; + font-style: normal; + font-weight: bold; + font-size: $font-size-medium-mobile; +} @mixin cn-bold-16 { font-family: $text-font; font-style: normal; diff --git a/src/environments/environment.ts b/src/environments/environment.ts index 7b4f817adb754769ca126a939d48ac4b0850489d..79b25c9003972a9962763fdbc373514b09f0d65a 100644 --- a/src/environments/environment.ts +++ b/src/environments/environment.ts @@ -3,7 +3,9 @@ // The list of file replacements can be found in `angular.json`. export const environment = { - production: false + production: false, + registrationForm: 'https://services.formulaireextranet.grandlyon.com/saisie-fiche-structure', + VERSION: require('../../package.json').version, }; /* diff --git a/src/styles.scss b/src/styles.scss index 60f2a0fef73f4136497f740d036b2d922e98d184..96329efae6b58606d3cbc3ec830fab25f923f0d3 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -61,5 +61,6 @@ a { &.no-max-width { max-width: unset; margin-bottom: 1rem; + width: unset; } } diff --git a/tsconfig.app.json b/tsconfig.app.json index 82d91dc4a4de57f380b66c59cdd16ff6cd5798e4..6bb6c9dac340be90680b2d850be439cc40d1ac45 100644 --- a/tsconfig.app.json +++ b/tsconfig.app.json @@ -3,13 +3,8 @@ "extends": "./tsconfig.json", "compilerOptions": { "outDir": "./out-tsc/app", - "types": [] + "types": ["node"] }, - "files": [ - "src/main.ts", - "src/polyfills.ts" - ], - "include": [ - "src/**/*.d.ts" - ] + "files": ["src/main.ts", "src/polyfills.ts"], + "include": ["src/**/*.d.ts"] } diff --git a/tsconfig.json b/tsconfig.json index f69f65417ab821ad93f8914a20e5ea720d165e63..f1830d0f877e27efbe55a9f6aad87fde1e508a6a 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -12,9 +12,6 @@ "importHelpers": true, "target": "es2015", "module": "es2020", - "lib": [ - "es2018", - "dom" - ] + "lib": ["es2018", "dom"] } }