HTML → PHP

Refactor project to PHP, using templates structure.

ToDo | Minimal & Extra Requirements

Minimal:

Extra:

Shelters como utilizadores
Shelters terem uma página dedicada com todos os pets para adoção
Users serem colaboradores de um shelter
- Terem possibilidade de editar info sobre o shelter
- Terem possibilidade de editar os pets do shelter
Ter um Workflow para a adoção de testes
Após users adotarem um pet, O pet fica como adopted e dá na mesma para adicioanr fotos á galeria

X - Dani
@ - Filipe
% - Gonçalo

Style CSS

Cores
Estilo dos Inputs
Acabar descrição homepage com "..." e max length
Style dos Favoritos
Editar Info Utilizador/Shelter (quando js estiver feito) **falta php **
Adicionar proposta (idem)
Estilo About Me (idem)
Estilo Contacts (idem)
Caso anos seja maior que 0, colocar meses (php) -> trocar anos por meses

CSRF

pôr acceptProposal como action_accept_Proposal
fix a botão dos favoritos

<input id="csrf_var" type="hidden" name="csrf" value="<?=$_SESSION['csrf']?>">

include 'csrf_set.php';
set_csrf();

if (!isset($_SESSION['csrf']) || $_SESSION['csrf'] !== $_POST['csrf']){
  echo '<script type="text/javascript">alert("Hacker Attack")</script>';
  die();
}

Using SASS as CSS Preprocessor

Preprocessing

CSS on its own can be fun, but stylesheets are getting larger, more complex, and harder to maintain. This is where a preprocessor can help. Sass lets you use features that don't exist in CSS yet like variables, nesting, mixins, inheritance and other nifty goodies that make writing CSS fun again.

Once you start tinkering with Sass, it will take your preprocessed Sass file and save it as a normal CSS file that you can use in your website.

Installing SASS

Install Anywhere (Standalone)

You can install Sass on Windows, Mac, or Linux by downloading the package for your operating system from GitHub and adding it to your PATH. That’s all—there are no external dependencies and nothing else you need to install.

Install Anywhere (npm)

If you use Node.js, you can also install Sass using npm by running

npm install -g sass

However, please note that this will install the pure JavaScript implementation of Sass, which runs somewhat slower than the other options listed here. But it has the same interface, so it’ll be easy to swap in another implementation later if you need a bit more speed!

Webstorm

Guide to SASS/LESS/SCSS on WebStorm

How to code in SASS

You can find useful information here

Project Structure

Our SASS files will be stored on ./style
The main .css file (style.css) will contain all CSS code from every SASS file.

The goal here is to separate styles from each page in several SASS files, this allows us to have a better understanding of what is going on with our site's style.

style.sass should only contain @use statements so it can process every other SASS file inside.
there sould be a SASS file for every group of pages. i.e. credentials.sass for login.html and register.html; homepage.sass for homepage.html, etc.
common.sass should contain style code for common elements throughout the project as the filename suggests.

This ussue will be updated as we learn more about SASS.

Responsivo

ToDo

X - Dani
@ - Filipe
% - Gonçalo

X Ver favoritos - botão que altera "My Pets" e troca-se a si próprio para uma casa
% CORES
X Verificação Inputs
- Add pet <-
- Registo
% Estilo Inputs
@ Proposals (JS):
- Comentário/Motivação
- Botão submit
X Add to Favourites em cada pet
%? Página de próprio user com capacidade de editar campos:
- About me
- password
- username
X Pesquisa de Pets
% HomePage - não ter texto todo nos pets. Pôr max length e a acabar com ...
% Adicionar unidades comprimento em pets_list
@ Responsivo
- Telemóvel
- Tablet
X Segurança
Caso os anos sejam menores que 0, pôr em meses

feup-ltw / ltw-project-g60 Goto Github PK

ltw-project-g60's People

Contributors

Stargazers

Watchers

Forkers

ltw-project-g60's Issues