Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use Tailwind #3

Merged
merged 8 commits into from
Apr 5, 2024
Merged

Use Tailwind #3

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
f89c336
Remove bootstrap
HenryRiddallWork Mar 9, 2024
491d3ff
Install Tailwindcss
HenryRiddallWork Mar 9, 2024
4bda1bd
Add jump animation
HenryRiddallWork Apr 5, 2024
077ce77
Implement new styles :) (sorry quite a lot in one commit I got a litt…
HenryRiddallWork Apr 5, 2024
dc91a7f
Update card so text doesnt overlap buttons and overflow doesn't get c…
HenryRiddallWork Apr 5, 2024
158921e
Update README.md
HenryRiddallWork Apr 5, 2024
f28ac2f
Update README.md
HenryRiddallWork Apr 5, 2024
245d594
Provide npm script to run the flask app and css compiler concurrently
HenryRiddallWork Apr 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,3 +118,9 @@ env/

### Configuration files ###
.env

### NPM things ###
node_modules/

### Tailwin Generated CSS ###
todo_app/static/css/index.css
HenryRiddallWork marked this conversation as resolved.
Show resolved Hide resolved
4 changes: 2 additions & 2 deletions .vscode/launch.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
"configurations": [
{
"name": "Python: Flask",
"type": "python",
"type": "debugpy",
"request": "launch",
"module": "flask",
"env": {
Expand All @@ -21,7 +21,7 @@
},
{
"name": "Python: Current File",
"type": "python",
"type": "debugpy",
"request": "launch",
"program": "${file}",
"console": "integratedTerminal"
Expand Down
30 changes: 30 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,33 @@

The project uses poetry for Python to create an isolated environment and manage package dependencies. To prepare your system, ensure you have an official distribution of Python version 3.8+ and install Poetry using one of the following commands (as instructed by the [poetry documentation](https://python-poetry.org/docs/#system-requirements)):

For styling tailwindcss is used via their CLI tool. For this to work you must also have Node installed.

### VSCode

It is reccomended to use VSCode for this project as there is an included launch config and linting has so far been enforced using VSCode extensions. The reccomended linting extensions are:
HenryRiddallWork marked this conversation as resolved.
Show resolved Hide resolved

- Better Jinja
- Black Formatter
- Mypy
- Prettier (You will also need the NPM package, installation details described in the style section)

However none of these styles are enforced yet so go wild I guess.

You may also want to install other extensions to make development easier such as Pylance and Tailwind CSS IntelliSense (this extension is especially helpul if you are new to tailwind).

### Styles

- Install the latest version of Node from: https://nodejs.org/en
- Install the dependancies using `npm install`
- To keep the css build updated run the cli tool with the following command (--watch will watch for file changes in the project regenerate the CSS when neccisary):
HenryRiddallWork marked this conversation as resolved.
Show resolved Hide resolved

```
npx tailwindcss -i ./todo_app/tailwind.css -o ./todo_app/static/css/index.css --watch
```
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is not important, just in case interesting

I often feel that having a separate extra command for this kind of thing is slightly annoying as a dev; this definitely isn't important but if we can bake it into the "default" run command, I always think that's nicer. I have used poetry's scripts section before, but it looks like it's not great at running arbitrary commands and certainly not combos (e.g. this discussion) - one option might be this plugin but given that you've brought in NPM, I know we can solve this there!

For example, we could:

  • Install the concurrently package, so we can run two commands in parallel with a single command
  • Add a scripts section to our package.json that looks something like:
  "scripts": {
    "css": "npx tailwindcss -i ./todo_app/tailwind.css -o ./todo_app/static/css/index.css --watch",
    "dev": "concurrently \"npm run css\" \"poetry run flask run\""
  }

And then we can start both css and app together with npm run dev

Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ooooo thats very nice, I also didn't like having to run extra commands but hadn't considered enforcing it on run... but that makes a lot of sense as you would always want the current css 😄


Note: the website will not have any styles if you do not run the above as the generated CSS file is in the .gitignore.

### Poetry installation (Bash)

```bash
Expand Down Expand Up @@ -43,11 +70,13 @@ You must also populate the TRELLO_XXXXX variables with your own API key, token a
## Running the App

Once the all dependencies have been installed, start the Flask app in development mode within the Poetry environment by running:

```bash
$ poetry run flask run
```

You should see output similar to the following:

```bash
* Serving Flask app 'todo_app/app'
* Debug mode: on
Expand All @@ -58,4 +87,5 @@ Press CTRL+C to quit
* Debugger is active!
* Debugger PIN: 113-666-066
```

Now visit [`http://localhost:5000/`](http://localhost:5000/) in your web browser to view the app.
Loading