Centered the div and pretty language buttons
Signed-off-by: Tuan-Dat Tran <tuan-dat.tran@tudattr.dev>pull/7/head
Tuan-Dat Tran
parent
6ca89b3bd5
commit
0dd9cec4bd
|
|
@ -787,6 +787,20 @@ video {
|
|||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.rounded-md {
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
|
||||
.rounded-s-lg {
|
||||
border-start-start-radius: 0.5rem;
|
||||
border-end-start-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.rounded-e-lg {
|
||||
border-start-end-radius: 0.5rem;
|
||||
border-end-end-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.border {
|
||||
border-width: 1px;
|
||||
}
|
||||
|
|
@ -972,6 +986,11 @@ video {
|
|||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.px-4 {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.pb-4 {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
|
@ -1128,6 +1147,12 @@ video {
|
|||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
|
||||
.shadow-sm {
|
||||
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
|
||||
.grayscale {
|
||||
--tw-grayscale: grayscale(100%);
|
||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||
|
|
@ -1161,6 +1186,11 @@ video {
|
|||
color: rgb(255 255 255 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.hover\:text-blue-700:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(29 78 216 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.hover\:underline:hover {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
|
@ -1170,6 +1200,15 @@ video {
|
|||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||
}
|
||||
|
||||
.focus\:z-10:focus {
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.focus\:text-blue-700:focus {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(29 78 216 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.focus\:outline-none:focus {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
|
|
@ -1181,11 +1220,22 @@ video {
|
|||
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
||||
}
|
||||
|
||||
.focus\:ring-2:focus {
|
||||
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
||||
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
||||
}
|
||||
|
||||
.focus\:ring-cyan-300:focus {
|
||||
--tw-ring-opacity: 1;
|
||||
--tw-ring-color: rgb(103 232 249 / var(--tw-ring-opacity));
|
||||
}
|
||||
|
||||
.focus\:ring-blue-700:focus {
|
||||
--tw-ring-opacity: 1;
|
||||
--tw-ring-color: rgb(29 78 216 / var(--tw-ring-opacity));
|
||||
}
|
||||
|
||||
.group:hover .group-hover\:from-green-400 {
|
||||
--tw-gradient-from: #4ade80 var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(74 222 128 / 0) var(--tw-gradient-to-position);
|
||||
|
|
@ -1364,10 +1414,25 @@ video {
|
|||
background-color: rgb(55 65 81 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.dark\:hover\:text-white:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.dark\:focus\:text-white:focus {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.dark\:focus\:ring-cyan-800:focus {
|
||||
--tw-ring-opacity: 1;
|
||||
--tw-ring-color: rgb(21 94 117 / var(--tw-ring-opacity));
|
||||
}
|
||||
|
||||
.dark\:focus\:ring-blue-500:focus {
|
||||
--tw-ring-opacity: 1;
|
||||
--tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
|
|
|
|||
|
|
@ -84,7 +84,7 @@ pub fn Card(prop: CardProp) -> Element {
|
|||
Picture {src: "{prop.picture}"},
|
||||
}
|
||||
}
|
||||
H5 { "{prop.name}", span { class: "text-grey-600 dark:text-grey-500 text-lg", " ({prop.gender})" } },
|
||||
H5 { "{prop.name}", span { class: "text-grey-600 dark:text-grey-500 text-lg", " {prop.gender}" } },
|
||||
{ prop.children }
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@
|
|||
"consulting": "Consulting",
|
||||
"about": "Impressum",
|
||||
"language_buttons": {
|
||||
"english": "Englisch",
|
||||
"german": "Deutsch"
|
||||
"english": "🇬🇧 Englisch",
|
||||
"german": "🇩🇪 Deutsch"
|
||||
}
|
||||
},
|
||||
"home": {
|
||||
|
|
|
|||
|
|
@ -8,14 +8,14 @@
|
|||
"consulting": "Consulting",
|
||||
"about": "About",
|
||||
"language_buttons": {
|
||||
"english": "English",
|
||||
"german": "German"
|
||||
"english": "🇬🇧 English",
|
||||
"german": "🇩🇪 German"
|
||||
}
|
||||
},
|
||||
"home": {
|
||||
"card": {
|
||||
"name": "Tuan-Dat Tran",
|
||||
"gender": "He/Him",
|
||||
"gender": "(He/Him)",
|
||||
"l1": "Hey there! 👋🏻👋🏼👋🏽👋🏾👋🏿",
|
||||
"l2": "Welcome to my little place on the internet.",
|
||||
"l3": "While you're here, why don't you check out my projects over on ",
|
||||
|
|
|
|||
|
|
@ -4,10 +4,7 @@ use dioxus_sdk::{i18n::*, translate};
|
|||
use crate::Route;
|
||||
|
||||
pub fn Header() -> Element {
|
||||
let mut i18 = use_i18();
|
||||
|
||||
let change_to_english = move |_| i18.set_language("en-GB".parse().unwrap());
|
||||
let change_to_german = move |_| i18.set_language("de-DE".parse().unwrap());
|
||||
let i18 = use_i18();
|
||||
|
||||
rsx! {
|
||||
nav {
|
||||
|
|
@ -26,15 +23,28 @@ pub fn Header() -> Element {
|
|||
li { HeaderLink { url: Route::Consulting {}, text: translate!(i18, "headers.consulting") } },
|
||||
li { HeaderLink { url: Route::Impressum {}, text: translate!(i18, "headers.about") } },
|
||||
},
|
||||
ul {
|
||||
button { onclick: change_to_english, label { { translate!(i18, "headers.language_buttons.english") } } },
|
||||
button { onclick: change_to_german, label { { translate!(i18, "headers.language_buttons.german") } } }
|
||||
}
|
||||
LanguageButtonGroup { },
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#[component]
|
||||
fn LanguageButtonGroup() -> Element {
|
||||
let mut i18 = use_i18();
|
||||
|
||||
let change_to_english = move |_| i18.set_language("en-GB".parse().unwrap());
|
||||
let change_to_german = move |_| i18.set_language("de-DE".parse().unwrap());
|
||||
|
||||
rsx! {
|
||||
div {
|
||||
class: "inline-flex rounded-md shadow-sm",
|
||||
button { class: "px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-s-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-blue-500 dark:focus:text-white", onclick: change_to_english, label { { translate!(i18, "headers.language_buttons.english") } } },
|
||||
button { class: "px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-e-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-blue-500 dark:focus:text-white", onclick: change_to_german, label { { translate!(i18, "headers.language_buttons.german") } } }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#[component]
|
||||
fn HeaderLink(url: Route, text: String) -> Element {
|
||||
rsx! {
|
||||
|
|
|
|||
|
|
@ -92,8 +92,8 @@ pub struct BodyProp {
|
|||
pub fn Body(prop: BodyProp) -> Element {
|
||||
rsx! {
|
||||
div {
|
||||
class: "justify-center my-4",
|
||||
{prop.children}
|
||||
}
|
||||
class: "my-4 flex justify-center",
|
||||
{prop.children}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue