3f1a69d316
Tailwind CSS is a utility-first CSS framework that has a development model more
congenial to customization. Tailwind UI has beautifully designed component
examples, it makes developing UI faster. Also Tailwind UI's license is suitable
for open-source projects.
Tailwind CSS is installed via npm, and its cli automatically removes all unused
CSS when building for production, which mean final CSS bundle is the smallest it
could possibly be. You need to build `app.css` file:
asdf plugin add nodejs
asdf install nodejs
npm install
npm run prod
We don't push built CSS file to repository, because it's machine generated code
and it will conflict absolutely when two different people work on UI.
`app.css` has styles based on Tailwind CSS, and `app.js` has JavaScript codes
that provides interactivity with jQuery. jQuery is loaded from CDN for now.
`views/layouts/app.erb` is foundation of all views. It establishes the basic
structure such as importing `app.css/js`, importing jQuery, rendering sidebar,
setting page title etc. It has 3 different sublayouts:
1. HTTP error page.
2. If user is authenticated show sidebar and page's content.
- Sidebar has two version: desktop and mobile. Their content is same,
only different is the how to show it. jQuery handles desktop-mobile
transaction.
3. If user is not authenticated, show centered form layout.
- Rodauth has built-in views for authentication actions such as
login/register etc. Also it allows to overwrite them. I put new
authentication views to `views/auth` directory. I tried to match
functionality with built-in ones and only changed appearance.
Virtual machines are the only resource to show on console for now. It has
5 endpoints and 3 views.
GET /vm - Show list of virtual machines
GET /vm/:id - Show details of a virtual machine
GET /vm/create - Show virtual machine create form
POST /vm - Create virtual machine
DELETE /vm/:id - Delete virtual machine
`VmShadow` is a representation of virtual machine on UI side. It has only
required information.
VM creation page has selector for location, boot images, and vm sizes.
Currently, we keep available options hardcoded in `Option::Locations`,
`Option::BootImages`, `Option::VmSizes` variables. We prefer hardcoded them
into source code instead of dynamic on DB, because hardcoded version allows us
to track changes.
Our JavaScript code has some triggers and helpers:
- When click on an element that has `.delete-btn` class, it sends `DELETE`
request to `data-url` with `data-csrf` value. Also if `data-confirmation` is
provided, it asks to type this value to confirm deletion.
- When click on an element that has `.copy-content` class, it writes `data-content`
value to clipboard and shows a notication with `data-message`.
- When click on an element that has `.back-btn` class, it redirects to previous page.
- `notication("message")` helper shows a notification on page.
Improvement areas for future:
- Move SVG icons out of HTML files
- Write unit tests
- Extract more partials to decrease code duplication
- Might not need jQuery at all https://youmightnotneedjquery.com
- Move JavaScript code to TypeScript
- Move all Rodauth templates to Tailwind CSS from Bootstrap
4 lines
59 B
CSS
4 lines
59 B
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|