From 0dcf233369174c895730d1be6d0b74d4dfbf19d1 Mon Sep 17 00:00:00 2001
From: Hugo BAYOUD <hugo.bayoud@etu.uca.fr>
Date: Wed, 31 Mar 2021 07:59:09 +0200
Subject: [PATCH] drink card created, waiting for /api/v1/drinks to be created
---
src/app/app.module.ts | 2 +-
src/app/components/bars/bars.component.html | 12 +-
src/app/components/bars/bars.component.ts | 3 +-
.../components/drinks/drinks.component.css | 145 ++++++++++++++++++
.../components/drinks/drinks.component.html | 16 +-
src/app/components/drinks/drinks.component.ts | 1 +
src/app/share/modules/core.module.ts | 10 +-
src/styles.css | 13 +-
8 files changed, 182 insertions(+), 20 deletions(-)
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 3f06fc67..15fe88de 100644
--- a/src/app/app.module.ts
+++ b/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,
diff --git a/src/app/components/bars/bars.component.html b/src/app/components/bars/bars.component.html
index 0f6bc5a5..753b1426 100644
--- a/src/app/components/bars/bars.component.html
+++ b/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>
diff --git a/src/app/components/bars/bars.component.ts b/src/app/components/bars/bars.component.ts
index 8f2c600a..22aa225d 100644
--- a/src/app/components/bars/bars.component.ts
+++ b/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',
diff --git a/src/app/components/drinks/drinks.component.css b/src/app/components/drinks/drinks.component.css
index e69de29b..b06396fd 100644
--- a/src/app/components/drinks/drinks.component.css
+++ b/src/app/components/drinks/drinks.component.css
@@ -0,0 +1,145 @@
+.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
diff --git a/src/app/components/drinks/drinks.component.html b/src/app/components/drinks/drinks.component.html
index 74be67f4..4caab9b3 100644
--- a/src/app/components/drinks/drinks.component.html
+++ b/src/app/components/drinks/drinks.component.html
@@ -1,7 +1,13 @@
-<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
diff --git a/src/app/components/drinks/drinks.component.ts b/src/app/components/drinks/drinks.component.ts
index 8679885f..0c641ff0 100644
--- a/src/app/components/drinks/drinks.component.ts
+++ b/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() { }
diff --git a/src/app/share/modules/core.module.ts b/src/app/share/modules/core.module.ts
index 887ac028..8518e41b 100644
--- a/src/app/share/modules/core.module.ts
+++ b/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({
diff --git a/src/styles.css b/src/styles.css
index 28c4700e..36a4f8ae 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1,8 +1,17 @@
/* 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;
--
GitLab