Skip to content

Commit

Permalink
Adjust style
Browse files Browse the repository at this point in the history
  • Loading branch information
Yatekii committed Jan 17, 2025
1 parent cb64f71 commit 23db989
Show file tree
Hide file tree
Showing 8 changed files with 111 additions and 68 deletions.
80 changes: 33 additions & 47 deletions assets/tailwind.css
Original file line number Diff line number Diff line change
Expand Up @@ -558,22 +558,14 @@ video {
position: static;
}

.ml-3 {
margin-left: 0.75rem;
}

.mr-2 {
margin-right: 0.5rem;
.m-2 {
margin: 0.5rem;
}

.ml-2 {
margin-left: 0.5rem;
}

.inline {
display: inline;
}

.table {
display: table;
}
Expand All @@ -586,6 +578,10 @@ video {
border-collapse: collapse;
}

.rounded-sm {
border-radius: 0.125rem;
}

.rounded-e-md {
border-start-end-radius: 0.375rem;
border-end-end-radius: 0.375rem;
Expand All @@ -600,42 +596,28 @@ video {
border-width: 1px;
}

.border-y-\[1px\] {
border-top-width: 1px;
border-bottom-width: 1px;
}

.border-r-\[1px\] {
border-right-width: 1px;
}

.border-l-\[1px\] {
border-left-width: 1px;
}

.border-green-500 {
--tw-border-opacity: 1;
border-color: rgb(34 197 94 / var(--tw-border-opacity, 1));
.border-solid {
border-style: solid;
}

.border-probe-rs-green {
--tw-border-opacity: 1;
border-color: rgb(20 133 113 / var(--tw-border-opacity, 1));
}

.border-probe-rs-black {
--tw-border-opacity: 1;
border-color: rgb(15 17 22 / var(--tw-border-opacity, 1));
.bg-gray-300 {
--tw-bg-opacity: 1;
background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
}

.bg-probe-rs-black {
.bg-gray-700 {
--tw-bg-opacity: 1;
background-color: rgb(15 17 22 / var(--tw-bg-opacity, 1));
background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}

.bg-gray-300 {
.bg-slate-700 {
--tw-bg-opacity: 1;
background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}

.p-2 {
Expand All @@ -656,6 +638,11 @@ video {
line-height: 2rem;
}

.text-4xl {
font-size: 2.25rem;
line-height: 2.5rem;
}

.text-green-500 {
--tw-text-opacity: 1;
color: rgb(34 197 94 / var(--tw-text-opacity, 1));
Expand All @@ -666,37 +653,36 @@ video {
color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}

.odd\:border-probe-rs-green:nth-child(odd) {
--tw-border-opacity: 1;
border-color: rgb(20 133 113 / var(--tw-border-opacity, 1));
.text-probe-rs-green {
--tw-text-opacity: 1;
color: rgb(20 133 113 / var(--tw-text-opacity, 1));
}

.odd\:border-probe-rs-black:nth-child(odd) {
--tw-border-opacity: 1;
border-color: rgb(15 17 22 / var(--tw-border-opacity, 1));
.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.hover\:border-probe-rs-green:hover {
.odd\:border-probe-rs-green:nth-child(odd) {
--tw-border-opacity: 1;
border-color: rgb(20 133 113 / var(--tw-border-opacity, 1));
}

.hover\:bg-green-500:hover {
.hover\:bg-gray-400:hover {
--tw-bg-opacity: 1;
background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
}

.hover\:bg-probe-rs-green:hover {
--tw-bg-opacity: 1;
background-color: rgb(20 133 113 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-400:hover {
.hover\:bg-slate-600:hover {
--tw-bg-opacity: 1;
background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
background-color: rgb(71 85 105 / var(--tw-bg-opacity, 1));
}

.group:hover .group-hover\:border-probe-rs-green {
--tw-border-opacity: 1;
border-color: rgb(20 133 113 / var(--tw-border-opacity, 1));
.hover\:underline:hover {
text-decoration-line: underline;
}
11 changes: 7 additions & 4 deletions src/components/navbar.rs
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,13 @@ pub fn Navbar() -> Element {
rsx! {
document::Link { rel: "stylesheet", href: NAVBAR_CSS }

div { id: "navbar",
Link { to: Route::Home {}, "Home" }
}
div { class: "bg-slate-700 p-5",
div { id: "navbar",
Link { to: Route::Home {}, "Home" }
Link { to: Route::Runs {}, "Runs" }
}

Outlet::<Route> {}
Outlet::<Route> {}
}
}
}
33 changes: 27 additions & 6 deletions src/components/run_list_entry.rs
Original file line number Diff line number Diff line change
@@ -1,14 +1,22 @@
use crate::models::run::RunModel;
use crate::{helpers::read_env_var, models::run::RunModel};
use chrono::SecondsFormat;
use dioxus::prelude::*;

/// Echo component that demonstrates fullstack server functions.
#[component]
pub fn RunListEntry(run: RunModel, odd: bool) -> Element {
let date = run
.datetime
.into_inner_ref()
.to_rfc3339_opts(SecondsFormat::Secs, true);
let org = read_env_var("GITHUB_ORG");
let repo = read_env_var("GITHUB_REPO");
rsx! {
td { class: "p-2 px-3 rounded-s-md",
td { class: "p-2 px-3",
{
rsx! {
Link {
class: "hover:underline",
to: crate::Route::Run {
run: run.id.key().to_string().parse().unwrap(),
},
Expand All @@ -17,9 +25,22 @@ pub fn RunListEntry(run: RunModel, odd: bool) -> Element {
}
}
}
td { class: "p-2 px-3", "{run.datetime}" }
td { class: "p-2 px-3", "{run.author}" }
td { class: "p-2 px-3", {run.pr_url_element()} }
td { class: "p-2 px-3 rounded-e-md", "{run.measurements.len()}" }
td { class: "p-2 px-3", "{date}" }
td { class: "p-2 px-3",
a {
class: "hover:underline",
href: "https://github.com/{org}/{repo}/pull/{run.pr}/commits/{run.commit}",
"{run.commit}"
}
}
td { class: "p-2 px-3",
a {
class: "hover:underline",
href: "https://github.com/{run.author}",
"{run.author}"
}
}
td { class: "p-2 px-3", {run.pr_url_element(&org, &repo)} }
td { class: "p-2 px-3", "{run.measurements.len()}" }
}
}
5 changes: 3 additions & 2 deletions src/main.rs
Original file line number Diff line number Diff line change
Expand Up @@ -18,14 +18,16 @@ use helpers::read_env_var;
use std::sync::LazyLock;
use surrealdb::engine::remote::ws::Client;
use surrealdb::Surreal;
use views::{home::Home, run::Run};
use views::{home::Home, run::Run, runs::Runs};

#[derive(Debug, Clone, Routable, PartialEq)]
#[rustfmt::skip]
enum Route {
#[layout(Navbar)]
#[route("/")]
Home {},
#[route("/runs")]
Runs {},
#[route("/run/:run")]
Run { run: i64 },
// #[route("/benchmark/:run")]
Expand Down Expand Up @@ -139,7 +141,6 @@ fn App() -> Element {
// Build cool things ✌️

rsx! {
// Global app resources
document::Link { rel: "icon", href: FAVICON }
document::Link { rel: "stylesheet", href: TAILWIND_CSS }

Expand Down
7 changes: 1 addition & 6 deletions src/models/run.rs
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@ use dioxus::prelude::*;
use serde::{Deserialize, Serialize};
use surrealdb::{Datetime, RecordId};

use crate::helpers::read_env_var;

use super::measurement::{MeasurementMappedModel, MeasurementModel};

#[derive(Serialize, Deserialize, Clone, PartialEq, Debug)]
Expand Down Expand Up @@ -55,10 +53,7 @@ pub struct RunMappedParentModel {
}

impl RunModel {
pub fn pr_url_element(&self) -> Element {
let org = read_env_var("GITHUB_ORG");
let repo = read_env_var("GITHUB_REPO");

pub fn pr_url_element(&self, org: &str, repo: &str) -> Element {
rsx! {
a { href: "https://github.com/{org}/{repo}/pull/{self.pr}", "#{self.pr}" }
}
Expand Down
6 changes: 3 additions & 3 deletions src/views/home.rs
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,15 @@ pub fn Home() -> Element {

let runs = match &*runs {
Some(Ok(runs)) => runs,
Some(Err(err)) => return rsx!("Unable to load runs: {err}"),
Some(Err(err)) => return rsx!( "Unable to load runs: {err}" ),
None => unreachable!(),
};

rsx! {
div { class: "p-5",
table { class: "w-full",
table { class: "w-full border-collapse",
{runs.iter().enumerate().map(|(i, run)| rsx! {
tr { class: "w-full odd:border-probe-rs-green hover:bg-probe-rs-green",
tr { class: "w-full border-probe-rs-green hover:bg-slate-600",
RunListEntry { run: run.clone(), odd: i % 2 != 0 }
}
})}
Expand Down
1 change: 1 addition & 0 deletions src/views/mod.rs
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
pub mod benchmark;
pub mod home;
pub mod run;
pub mod runs;
36 changes: 36 additions & 0 deletions src/views/runs.rs
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
use crate::components::run_list_entry::RunListEntry;
use crate::models::run::RunModel;
use crate::DB;
use dioxus::prelude::*;

#[component]
pub fn Runs() -> Element {
let runs = use_server_future(get_runs)?;
let runs = runs.value();
let runs = runs.read();

let runs = match &*runs {
Some(Ok(runs)) => runs,
Some(Err(err)) => return rsx!( "Unable to load runs: {err}" ),
None => unreachable!(),
};

rsx! {
div {
h1 { class: "m-2 text-4xl text-white", "Runs" }
table { class: "w-full border-collapse",
{runs.iter().enumerate().map(|(i, run)| rsx! {
tr { class: "w-full border-probe-rs-green border-solid border-[1px] hover:bg-slate-600 rounded-sm text-probe-rs-green",
RunListEntry { run: run.clone(), odd: i % 2 != 0 }
}
})}
}
}
}
}

#[server]
async fn get_runs() -> Result<Vec<RunModel>, ServerFnError> {
let people: Vec<RunModel> = DB.select("run").await?;
Ok(people)
}

0 comments on commit 23db989

Please sign in to comment.