updated conditional styling
This commit is contained in:
parent
60f28672d3
commit
4cb62d830d
8 changed files with 1115 additions and 30 deletions
|
|
@ -555,18 +555,10 @@ video {
|
|||
display: table;
|
||||
}
|
||||
|
||||
.h-6 {
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.h-8 {
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
.w-6 {
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
.w-8 {
|
||||
width: 2rem;
|
||||
}
|
||||
|
|
@ -596,14 +588,14 @@ video {
|
|||
border-color: rgb(3 7 18 / var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.bg-gray-300 {
|
||||
.bg-blue-400 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(209 213 219 / var(--tw-bg-opacity));
|
||||
background-color: rgb(96 165 250 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-gray-500 {
|
||||
.bg-blue-500 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(107 114 128 / var(--tw-bg-opacity));
|
||||
background-color: rgb(59 130 246 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-purple-500 {
|
||||
|
|
@ -611,11 +603,26 @@ video {
|
|||
background-color: rgb(168 85 247 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-red-400 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(248 113 113 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-slate-700 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(51 65 85 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-yellow-400 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(250 204 21 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-green-400 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(74 222 128 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.p-2 {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
|
@ -643,6 +650,10 @@ video {
|
|||
font-weight: 700;
|
||||
}
|
||||
|
||||
.capitalize {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.text-gray-100 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(243 244 246 / var(--tw-text-opacity));
|
||||
|
|
|
|||
4
justfile
4
justfile
|
|
@ -1,7 +1,5 @@
|
|||
tailwind:
|
||||
export PATH=${pkgs.nodejs_20}/bin:${pkgs.nodePackages_latest.pnpm}/bin:$PATH
|
||||
pnpm dlx tailwindcss -i src/styles/tailwind.css -o assets/main.css --watch
|
||||
|
||||
nix .#tailwind
|
||||
dev:
|
||||
cargo watch -x 'run test_data/test.json'
|
||||
|
||||
|
|
|
|||
1072
package-lock.json
generated
Normal file
1072
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -27,7 +27,7 @@ pub struct CardFromFile {
|
|||
pub struct CardForTemplate {
|
||||
pub name: String,
|
||||
pub count: i32,
|
||||
pub usd_value: String, // No longer an Option
|
||||
pub usd_value: f32, // No longer an Option
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ use crate::templates::RootTemplate;
|
|||
use crate::util::HtmlTemplate;
|
||||
|
||||
pub async fn root() -> Result<HtmlTemplate<RootTemplate>, (StatusCode, String)> {
|
||||
let file_path = "test_data/test.json";
|
||||
let file_path = "test_data/cards.json";
|
||||
match read_card_file(file_path).await {
|
||||
Ok(card_file) => {
|
||||
let cards_for_template: Vec<_> = card_file.cards
|
||||
|
|
@ -14,7 +14,7 @@ pub async fn root() -> Result<HtmlTemplate<RootTemplate>, (StatusCode, String)>
|
|||
.map(|card| CardForTemplate {
|
||||
name: card.name,
|
||||
count: card.count,
|
||||
usd_value: card.usd_value.unwrap_or_else(|| "N/A".into()),
|
||||
usd_value: card.usd_value.and_then(|value| value.parse::<f32>().ok()).unwrap_or(0.0),
|
||||
})
|
||||
.collect();
|
||||
let template = RootTemplate {
|
||||
|
|
|
|||
|
|
@ -15,7 +15,3 @@ pub struct RootTemplate {
|
|||
#[derive(Template)]
|
||||
#[template(path="base.html")]
|
||||
pub struct BaseTemplate;
|
||||
|
||||
#[derive(Template)]
|
||||
#[template(path="head.html")]
|
||||
pub struct HeadTemplate;
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
<h1 class="text-2xl text-white">{{ name }}'s SK TCG Trader</h1>
|
||||
|
||||
<table id="card_table" class="my-4 border-collapse text-center">
|
||||
<tr class="text-gray-100 bg-gray-500 font-bold text-xl">
|
||||
<tr class="text-gray-100 bg-blue-500 font-bold text-xl">
|
||||
<th class="p-2 border-2 border-gray-950">Card Name</th>
|
||||
<th class="p-2 border-2 border-gray-950">Card Value</th>
|
||||
<th class="p-2 border-2 border-gray-950">Card Count</th>
|
||||
|
|
@ -14,13 +14,21 @@
|
|||
</tr>
|
||||
<!-- TODO: Add for loop for cards in data -->
|
||||
{% for card in cards %}
|
||||
<tr class="text-gray-900 bg-gray-300 text-lg">
|
||||
<td class="p-2 border-2 border-gray-950">{{ card.name }}</td>
|
||||
<td class="p-2 border-2 border-gray-950">{{ card.usd_value }}</td>
|
||||
<td class="p-2 border-2 border-gray-950">{{ card.count }}</td>
|
||||
<tr class="text-gray-900 bg-blue-400 text-lg">
|
||||
<td class="p-2 border-2 border-gray-950">{{ card.name|capitalize }}</td>
|
||||
{% if card.usd_value > 5.00 %}
|
||||
<td class="p-2 border-2 bg-green-400 border-gray-950">{{ card.usd_value }}</td>
|
||||
{% else if card.usd_value < 1.00 %}
|
||||
<td class="p-2 border-2 bg-red-400 border-gray-950">{{ card.usd_value }}</td>
|
||||
{% else %}
|
||||
<td class="p-2 border-2 bg-yellow-400 border-gray-950">{{ card.usd_value }}</td>
|
||||
{% endif %}
|
||||
<td class="p-2 border-2 border-gray-950">{{ card.count }}</td>
|
||||
<td class="p-2 border-2 border-gray-950">
|
||||
<button class="p-2 rounded-xl bg-purple-500 text-lg font-bold text-gray-100">
|
||||
{% include "icons/data.html"%}
|
||||
<button class="p-2 rounded-xl bg-purple-500 text-lg text-gray-100">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25M9 16.5v.75m3-3v3M15 12v5.25m-4.5-15H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
|
||||
</svg>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue