drink card created, waiting for /api/v1/drinks to be created

src/app/app.module.ts

@@ -27,7 +27,7 @@ import { BarEffects } from './share/store/effects/bar.effects';
 import { DrinksComponent } from './components/drinks/drinks.component';
 
 @NgModule({
-  declarations: [AppComponent, DrinksComponent],
+  declarations: [AppComponent],
   imports: [
 		BrowserModule,
 		BrowserAnimationsModule,

src/app/components/bars/bars.component.html

@@ -3,7 +3,7 @@
 	<p>Choisis ton lieu de beuverie.
 		Tu pourras ensuite accéder à la carte des boissons.</p>
 	</div>
-<section>
+<!-- <section>
 	<div *ngFor="let bar of (bars$ | async)" class=" card row-container center">
 		<div class="card-header">
 			<img class="logo-img" src="https://fakeimg.pl/300/" alt="fake-img">
@@ -16,18 +16,18 @@
 			<button mat-raised-button routerLink="/drinks" color='accent'>choisir</button>
 		</div>
 	</div>
-</section>
-<!-- <section>
+</section> -->
+<section>
 	<div class=" card row-container center">
 		<div class="card-header">
 			<img class="logo-img" src="https://fakeimg.pl/300/" alt="fake-img">
 		</div>
 		<div class="card-content">
 			<p>Déliriuem Café clermont-ferrand</p>
-			<div>{{ bar.address }}</div>
+			<div>Delidelideli</div>
 		</div>
 		<div class="card-action">
-			<button mat-raised-button color='accent'>choisir</button>
+			<button mat-raised-button routerLink="/drinks" color='accent'>choisir</button>
 		</div>
 	</div>
-</section> -->
+</section>

src/app/components/bars/bars.component.ts

@@ -4,8 +4,7 @@ import { Bar } from '../../share/models/bar.model';
 import { Store } from '@ngrx/store';
 import { State } from '../../share/store';
 import { allBarsSelector } from '../../share/store/selectors/bar.selectors';
-import { BarActionsTypes, FetchBars, FetchBarsSuccess } from 'src/app/share/store/actions/bar.actions';
-import { BarService } from 'src/app/share/services/bar.service';
+import { FetchBars } from 'src/app/share/store/actions/bar.actions';
 
 @Component({
   selector: 'app-bars',

src/app/components/drinks/drinks.component.css

+.row-container {
+	/* display: flex;
+	flex-flow: row wrap; */
+	grid-template-columns: 1fr 1fr 1fr 1fr;
+}
+
+/* Au dessus de 430px de large, on place deux cards par ligne */
+.band {
+	width: 90%;
+	margin: 10px auto;
+
+	display: grid;
+	grid-template-columns: 1fr;
+  grid-template-rows: auto;
+  grid-gap: 20px;
+
+	justify-content: center;
+}
+
+@media only screen and (min-width: 430px) {
+  .band {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media only screen and (min-width: 700px) {
+  .band {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+}
+
+@media only screen and (min-width: 950px) {
+  .band {
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+  }
+}
+
+.drink-card {
+  min-height: 100%;
+	max-width: 200px;
+  background: white;
+	padding: 10px;
+
+	box-shadow: 0 2px 2px rgba(0,0,0,0.1);
+	border-radius: 4px;
+
+	display: flex;
+	flex-flow: column nowrap;
+
+	color: #222222;
+
+  top: 0;
+	position: relative;
+  transition: all .1s ease-in;
+}
+
+article .xp-number {
+	color: #EAE000;
+	font-size: 1.8em;
+	font-weight: bolder;
+}
+
+article .xp {
+	font-size: 1.3em;
+	font-weight: bolder;
+	text-transform: uppercase;
+	color: #000000;
+}
+
+.drink-card:hover {
+  top: -2px;
+  box-shadow: 0 4px 5px rgba(0,0,0,0.2);
+}
+
+.title {
+	color: #6E2424;
+	font-size: 1.1em;
+	font-weight: bold;
+}
+
+.thumb {
+	padding: 5% 5% 60% 5%;
+	background-size: cover;
+	background-position: center center;
+}
+
+.drink-card > hr {
+	margin-top: 0;
+	margin-bottom: 3px;
+}
+
+.description {
+	font-size: 0.7em;
+	color: #95A5A6;
+}
+
+.drink-card button {
+	align-self: flex-end;
+	margin: 0 auto
+}
+
+
+
+/*a moi*/
+
+.card-header {
+	background-color: transparent;
+	align-self: flex-start;
+}
+
+.card-content {
+	align-self: center;
+}
+
+.card-action {
+	align-self: flex-end;
+}
+
+.card-header > img {
+	height: 130px;
+	width: 130px;
+}
+
+.card-header > p {
+	color: #6E2424;
+	font-size: 1.1em;
+	font-weight: bold;
+}
+
+.card-header > p, .card-header > img {
+	margin: 5px auto;
+}
+
+.column-container {
+	display: flex;
+	flex-flow: column nowrap;
+}
+
+.h-center {
+  text-align: center;
+}
+
+.v-center {
+  text-align: center;
+}
\ No newline at end of file

src/app/components/drinks/drinks.component.html

-<p>drinks works!</p>
-<div class="drink-card">
-	<div class="card-img">
-		
-
+<div class="band">
+	<div *ngFor="let nb of tests" class="drink-card">
+		<h3 class="title">Délirium Tremens</h3>
+		<div class="thumb" style="background-image: url(https://fakeimg.pl/250x250/);"></div>
+		<hr>
+		<article>
+			<p>degrée : <strong>7,5°</strong> / Prix : <strong>7.5€</strong></p>
+			<span class="xp-number">1200</span><span class="xp">xp</span>
+			<p class="description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut officiis ea minus nostrum vel fuga.</p>
+		</article>
+		<button mat-raised-button routerLink="/drinks" color='accent'>commander</button>
 	</div>
 </div>
\ No newline at end of file

src/app/components/drinks/drinks.component.ts

@@ -6,6 +6,7 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./drinks.component.css']
 })
 export class DrinksComponent implements OnInit {
+	public tests: number[] = [0, 1, 2, 3, 4];
 
   constructor() { }
 

src/app/share/modules/core.module.ts

@@ -2,6 +2,7 @@
 import { NgModule } from '@angular/core';
 import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
 import { RouterModule } from '@angular/router';
+import { ReactiveFormsModule } from '@angular/forms';
 
 // Modules
 import { LayoutModule } from './layout.module';
@@ -17,19 +18,20 @@ import { AuthGuard } from '../guards/auth.guard';
 import { SignupComponent } from '../../components/signup/signup.component';
 import { SigninComponent } from '../../components/signin/signin.component';
 import { TopbarComponent } from '../components/topbar/topbar.component';
+import { WelcomeComponent } from '../../components/welcome/welcome.component';
+import { BarsComponent } from '../../components/bars/bars.component';
+import { DrinksComponent } from '../../components/drinks/drinks.component';
 
 // Interceptors
 import { AuthInterceptor } from '../interceptors/auth.interceptor';
-import { ReactiveFormsModule } from '@angular/forms';
-import { WelcomeComponent } from 'src/app/components/welcome/welcome.component';
-import { BarsComponent } from 'src/app/components/bars/bars.component';
 
 const COMPONENTS = [
 	SignupComponent,
 	SigninComponent,
 	WelcomeComponent,
 	BarsComponent,
-	TopbarComponent
+	TopbarComponent,
+	DrinksComponent
 ];
 
 @NgModule({

src/styles.css

 /* You can add global styles to this file, and also import other style files */
 @import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
 
-html, body { height: 100%; }
-body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; background-color: #f1f1f1; text-align: center; color: #222222}
+html, body { 
+	height: 100%;
+}
+
+body { 
+	margin: 0;
+	font-family: Roboto, "Helvetica Neue", sans-serif;
+	background-color: #f1f1f1;
+	text-align: center;
+	color: #222222;
+}
 
 .link {
 	outline: 0;