# Roadmap ER - 15/04 19h

#### Notas

- Se fizerem páginas php sigam a estrutura : `nomeDaPasta_nomeDaPágina.php`. Se a página for feita apenas para ser incluida (por exemplo o conteudo de uma tab ou um template de um produto) a estrutura fica: `nomeDaPasta_inc_nomeDaPágina.php`
- Como o Ricardo disse no Discord:
- Os corações de like vão ser radio buttons estilizados, necessário aplicar isso
- As cores dos butões podem ser mudadas no css e depois são aplicadas globalmente, preocupem-se em usar as [classes dos botões](https://getbootstrap.com/docs/5.0/components/buttons/#examples) de bootstrap corretamente e no final, ao alterar a cor, fica tudo alterado

| | |
|-|-|
| | |

## Luís

### createProduct.php

| | |
|-|-|
|  |  |

- Ainda falta uma forma para adicionar fotos, por enquanto só dá para ver o slideshow.
- Os inputs precisam de uma revisão, tanto de posicionamento com de estilo. Adiciona mais espacamentos, especialmente entre as duas metades da páginas (superior e inferior AKA imagens, nome, preço & descrição, tags, delete).
- O sítio das tags precisa de ter espaço como no esboço.
- Adequar tamanhos de acordo com o esboço.

### productDetail.php

| | |
|-|-|
|  |  |

- A página é muito semelhante á de cima, se arranjas as coisa de cima, já arranjas para duas páginas.
- O Fundo cinzento no mockup não significa fundo cinzento na página web, podes deixar branco e depois adiciona-se uma cor secundária.
- Posições das estrelas. Do exemplo onde foste buscar o css centra as estrelas, tens de mudar aí.

### createEditBundle.php

| | |
|-|-|
|  |  |

Não tinha reparado que a página estava tão diferente do esboço na metade superior.
- A lista de produtos tem de ser refeita para ficar de acordo com o esperado
- Os inputs a meio da página também têm de ser refeitos/estilizados
- A descrição e as tags têm de receber o mesmo tratamento que a página de cima
- Podes também dar shave off a um bocado do espaço acima do "Create Bundle"

### createEditCoupon.php

Esta página é muito semelhante á de create product, o que está lá pode ser aplicado a esta. Como as páginas são semelhantes podes aproveitar e extrair partes iguais (descrição, tags) para ficheiros php à parte e apenas dar include

### productList.php

| | |
|-|-|
|  |  |

- A Coluna dos filtros precisa de muita mão de obra.
- Coisas umas em cima das outras, falta de espaçamentos.
- Algumas checkboxes ainda não funcionam. as opções podem ser extraidas para um .php externo
- Essa barra lateral não precisa de estar todo o tempo aí, pode ser [colapsavel](https://www.w3schools.com/howto/howto_js_collapse_sidebar.asp). Quando colapsável pode mostrar 2 colunas de conteudo e quando não está colapsável pode mostrar apenas uma. Just an example
- A barra de Order By também precisa de ser tratada para apenas não desaparecer quando a janela ficar um bocado mais pequena, secalhar até pode ficar dentro da sidebar
- É também preciso que os butões Stores/Products funcionem
- e adicionar a [paginação](https://getbootstrap.com/docs/5.0/components/pagination/).

### supplier_detail.php

| | |
|-|-|
|  |  |

- É preciso refazer o header, não está nada na posição correta
- O order by está na posição errada
- Espaçamentos e posições como nas outras páginas

## Zé

### bundles_and_cupons.php

| | |
|-|-|
|  |  |

De acordo com o JCL é preciso tirar a horizontalidade disto. O melhor seria aplicar [tabs](https://getbootstrap.com/docs/5.0/components/navs-tabs/#javascript-behavior) para ter separações numa mesma página e assim dá para manter aqui os dois ecrãs. Também será necessário adicionar a [paginação](https://getbootstrap.com/docs/5.0/components/pagination/) que já tinhas noutro sitio.

Outra coisa importante é remover a parte das imagens diminuirem de largura quando se diminui a página , tens [esta resposta](https://stackoverflow.com/questions/37287153/how-to-get-images-in-bootstraps-card-to-be-the-same-height-width) como ponto de partida para a pesquisa.

### supplier_all_products.php

Mesma [cena das imagens](https://stackoverflow.com/questions/37287153/how-to-get-images-in-bootstraps-card-to-be-the-same-height-width), e [paginação](https://getbootstrap.com/docs/5.0/components/pagination/). Cada card também precisa de ser clicável para ir para os detalhes para conseguir editar

:::info
Para os cards sugiro ir a [este site](https://www.ordinarycoders.com/blog/article/codepen-bootstrap-card-hovers) e seguir o primeiro exemplo do `CodePen` da secção "Hover Bootstrap Cards". Assim ficam os cards apetecíveis e com uma ligação.
:::

### checkout_cart_info.php

| | |
|-|-|
|  |  |
|  |  |

- Os espaçamentos aqui tem de ser melhor trabalhados. Experimenta explorar o que consegues fazer com as [utilidades de espaço](https://getbootstrap.com/docs/5.0/utilities/spacing/#margin-and-padding) do bootstrap
- Nos Periodic Buys é suposto [descolapsar](https://getbootstrap.com/docs/5.0/components/collapse/) as opções extra, não aparecer um modal
- Fizeste bem em pôr a lista de produtos numa grid com 2 colunas, é necessário que as imagens fiquem bem na mesma, tal como nas páginas acima, check that out.
- Mobile também precisa de muito trabalho. Não é uma prioridade, trabalha primeiro nas outras de desktop. mas dá uma olhada em [reordenar classes](https://getbootstrap.com/docs/5.0/layout/columns/#order-classes) para mudar o posicionamento de cenas.
- Tem também em conta o tamanho das letras e que podes determinar tamanhos diferentes para ecrãs diferentes de acordo com os [breakpoints de bootstrap](https://getbootstrap.com/docs/5.0/layout/breakpoints/)

## Ricardo

### about_us.php

Só uma ideia, [**isto**](https://getbootstrap.com/docs/5.0/components/scrollspy/#example-in-navbar) para a página de About Us pode ficar nice. Also, é necessário tratar da parte responsiva nisso.

### home_page.php

| | | |
|-|-|-|
|  |  | |

- Tal como na do Zé é preciso tratar das imagens dos cards
- A banner pode ser mais larga. Also, em mobile a imagem sai fora, gotta fix that

## André

- [x] Site Map
- [ ] Client
- [x] Pôr likes como botões rádio que sejam corações preenchidos ou não preenchidos
- [x] Acabar modais de Review e editar periodic buys
- [ ] Fazer cards para Bundles
- [ ] Nome e imagem editáveis, tal como cartão crédito e possibilidade de adicionar card
- [ ] Tratar de mobile
- [ ] Supplier
- [x] diminuir coluna da esquerda
- [ ] fazer cenas editáveis [this thing](https://www.ordinarycoders.com/blog/article/codepen-bootstrap-card-hovers)