Etheryo/curriculum-vitae
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases 1 Packages Wiki Activity Actions

Frontend: Added color.js, calculating text/icon color depending on the background color. Backend: Skills are now ordered by id.

Browse source
This commit is contained in:
Yohan Boujon 2023-11-19 20:11:44 +01:00
parent 1a414fe9f0
commit 447decd5d8
4 changed files with 30 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
backend/src/main.rs
View file

@ -79,7 +79,7 @@ async fn skills(State(pool): State<PgPool>, Path(id): Path<i32>) -> Result<Json<
let programming_languages = sqlx::query_as!(
ProgrammingLanguages,
"SELECT lang, icon, type_icon, color FROM public.programming_languages WHERE programming_languages.info_id = $1",
"SELECT lang, icon, type_icon, color FROM public.programming_languages WHERE programming_languages.info_id = $1 ORDER BY programming_languages.id",
id
)
.fetch_all(&pool)
@ -87,7 +87,7 @@ async fn skills(State(pool): State<PgPool>, Path(id): Path<i32>) -> Result<Json<
let softwares = sqlx::query_as!(
Softwares,
"SELECT software, icon, type_icon, color FROM public.softwares WHERE softwares.info_id = $1",
"SELECT software, icon, type_icon, color FROM public.softwares WHERE softwares.info_id = $1 ORDER BY softwares.id",
id
)
.fetch_all(&pool)
@ -95,7 +95,7 @@ async fn skills(State(pool): State<PgPool>, Path(id): Path<i32>) -> Result<Json<
let languages = sqlx::query_as!(
Languages,
"SELECT lang, icon_alpha, level FROM public.languages WHERE languages.info_id = $1",
"SELECT lang, icon_alpha, level FROM public.languages WHERE languages.info_id = $1 ORDER BY languages.id",
id
)
.fetch_all(&pool)

7
frontend/src/lib/components/pill.svelte
View file

@ -2,20 +2,21 @@
import SvgIcon from "@jamescoyle/svelte-icon";
import "$lib/css/pill.css";
import { mdiHelp } from "@mdi/js";
import { shouldColorBeWhite } from "$lib/js/color.js";
export let name = "Unknown";
export let icon = mdiHelp;
export let color = "#000000";
export let type_icon = "mdi";
const white = shouldColorBeWhite(color.slice(1));
const style = `background-color: ${color};
box-shadow: 0px 8px 18px -1px ${color}40;`;
box-shadow: 0px 8px 18px -1px ${color}60;`;
</script>
<div class="pill-container" {style}>
<div class={white ? "pill-container pill-white" : "pill-container pill-black"} {style}>
{#if type_icon === "simpleicons"}
<img
class="pill-white"
height="20"
width="20"
src="https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/{icon}.svg"

17
frontend/src/lib/css/pill.css
View file

@ -4,7 +4,6 @@
padding-left: 1rem;
border-radius: 3rem;
background-color: #000000;
color: var(--color-background);
display: flex;
flex-direction: row;
width: fit-content;
@ -15,9 +14,21 @@
}
.pill-white {
color: var(--color-background);
}
.pill-black {
color: var(--color-text);
}
.pill-white img {
filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(19deg) brightness(116%) contrast(113%);
}
.pill-container img, svg {
margin: 0.5rem;
.pill-black img {
filter: invert(8%) sepia(21%) saturate(1187%) hue-rotate(234deg) brightness(101%) contrast(91%);
}
.pill-container img, svg {
margin-right: 0.5rem;
}

10
frontend/src/lib/js/color.js Normal file
View file

@ -0,0 +1,10 @@
export function shouldColorBeWhite(color) {
const colorHex = {
red: parseInt(color.slice(0,2),16),
green: parseInt(color.slice(2,4),16),
blue: parseInt(color.slice(4,6),16)
}
const total = colorHex.red*0.299 + colorHex.green*0.587 + colorHex.blue*0.114;
console.log(total <= 186);
return total <= 186;
}