manuelcillero/pagetop
manuelcillero/pagetop
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

🎨 Mejora la página de bienvenida y el tema básico #6

Merged
manuelcillero merged 37 commits from advanced-welcome-page into main 2025-09-20 12:37:55 +02:00
Conversation 0 Commits 37 Files changed 79 +88 -79
3 changed files with 88 additions and 79 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit d43b699a32 - Show all commits

26
src/base/component/poweredby.rs
View file

@ -1,10 +1,13 @@
use crate::prelude::*; use crate::prelude::*;
/// Muestra un texto con información de copyright, típica en un pie de página. // Enlace a la página oficial de PageTop.
const LINK: &str = "<a href=\"https://pagetop.cillero.es\" rel=\"noreferrer\">PageTop</a>";
/// Componente que renderiza la sección 'Powered by' (*Funciona con*) típica del pie de página.
/// ///
/// Por defecto, usando [`default()`](Self::default) sólo se muestra un /// Por defecto, usando [`default()`](Self::default) sólo se muestra un reconocimiento a PageTop.
/// reconocimiento a PageTop. Sin embargo, se puede usar [`new()`](Self::new) /// Sin embargo, se puede usar [`new()`](Self::new) para crear una instancia con un texto de
/// para crear una instancia con un texto de copyright predeterminado. /// copyright predeterminado.
#[derive(AutoDefault)] #[derive(AutoDefault)]
pub struct PoweredBy { pub struct PoweredBy {
copyright: Option<String>, copyright: Option<String>,
@ -13,8 +16,8 @@ pub struct PoweredBy {
impl Component for PoweredBy { impl Component for PoweredBy {
/// Crea una nueva instancia de `PoweredBy`. /// Crea una nueva instancia de `PoweredBy`.
/// ///
/// El copyright se genera automáticamente con el año actual y el nombre de /// El copyright se genera automáticamente con el año actual y el nombre de la aplicación
/// la aplicación configurada en [`global::SETTINGS`]. /// configurada en [`global::SETTINGS`].
fn new() -> Self { fn new() -> Self {
let year = Utc::now().format("%Y").to_string(); let year = Utc::now().format("%Y").to_string();
let c = join!(year, " © ", global::SETTINGS.app.name); let c = join!(year, " © ", global::SETTINGS.app.name);
@ -22,19 +25,14 @@ impl Component for PoweredBy {
} }
fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup { fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup {
let poweredby_pagetop = L10n::l("poweredby_pagetop")
.with_arg(
"pagetop_link",
"<a href=\"https://crates.io/crates/pagetop\">PageTop</a>",
)
.to_markup(cx);
PrepareMarkup::With(html! { PrepareMarkup::With(html! {
div id=[self.id()] class="poweredby" { div id=[self.id()] class="poweredby" {
@if let Some(c) = self.copyright() { @if let Some(c) = self.copyright() {
span class="poweredby__copyright" { (c) "." } " " span class="poweredby__copyright" { (c) "." } " "
} }
span class="poweredby__pagetop" { (poweredby_pagetop) } span class="poweredby__pagetop" {
(L10n::l("poweredby_pagetop").with_arg("pagetop_link", LINK).to_markup(cx))
}
} }
}) })
} }

30
src/base/extension/welcome.rs
View file

@ -29,19 +29,19 @@ async fn homepage(request: HttpRequest) -> ResultPage<Markup, ErrorPage> {
.with_theme("Basic") .with_theme("Basic")
.with_assets(AssetsOp::AddStyleSheet(StyleSheet::from("/css/welcome.css"))) .with_assets(AssetsOp::AddStyleSheet(StyleSheet::from("/css/welcome.css")))
.with_body_classes(ClassesOp::Add, "welcome") .with_body_classes(ClassesOp::Add, "welcome")
.with_component(Html::with(move |cx| html! { .with_component_in("header", Html::with(move |cx| html! {
div id="main-header" { div class="welcome-header" {
header { header class="welcome-header__body" {
h1 h1
id="header-title" class="welcome-header__title"
aria-label=(L10n::l("welcome_aria").with_arg("app", app).to_markup(cx)) aria-label=(L10n::l("welcome_aria").with_arg("app", app).to_markup(cx))
{ {
span { (L10n::l("welcome_title").to_markup(cx)) } span { (L10n::l("welcome_title").to_markup(cx)) }
(L10n::l("welcome_intro").with_arg("app", app).to_markup(cx)) (L10n::l("welcome_intro").with_arg("app", app).to_markup(cx))
} }
} }
aside id="header-image" aria-hidden="true" { aside class="welcome-header__image" aria-hidden="true" {
div id="monster" { div class="welcome-header__monster" {
picture { picture {
source source
type="image/avif" type="image/avif"
@ -61,25 +61,27 @@ async fn homepage(request: HttpRequest) -> ResultPage<Markup, ErrorPage> {
} }
})) }))
.with_component(Html::with(move |cx| html! { .with_component(Html::with(move |cx| html! {
main id="main-content" { main class="welcome-content" {
section class="content-body" { section class="welcome-content__body" {
div id="poweredby-button" { div class="welcome-poweredby" {
a a
id="poweredby-link" class="welcome-poweredby__link"
href="https://pagetop.cillero.es" href="https://pagetop.cillero.es"
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
{ {
span {} span {} span {} span {} span {} span {}
div id="poweredby-text" { (L10n::l("welcome_powered").to_markup(cx)) } div class="welcome-poweredby__text" {
(L10n::l("welcome_powered").to_markup(cx))
}
} }
} }
div class="content-text" { div class="welcome-text" {
p { (L10n::l("welcome_text1").to_markup(cx)) } p { (L10n::l("welcome_text1").to_markup(cx)) }
p { (L10n::l("welcome_text2").to_markup(cx)) } p { (L10n::l("welcome_text2").to_markup(cx)) }
div class="subcontent" { div class="welcome-text__block" {
h1 { span { (L10n::l("welcome_about").to_markup(cx)) } } h2 { span { (L10n::l("welcome_about").to_markup(cx)) } }
p { (L10n::l("welcome_pagetop").to_markup(cx)) } p { (L10n::l("welcome_pagetop").to_markup(cx)) }
p { (L10n::l("welcome_issues1").to_markup(cx)) } p { (L10n::l("welcome_issues1").to_markup(cx)) }
p { (L10n::l("welcome_issues2").with_arg("app", app).to_markup(cx)) } p { (L10n::l("welcome_issues2").with_arg("app", app).to_markup(cx)) }

111
static/css/welcome.css
View file

@ -58,12 +58,17 @@ a:hover:visited {
align-items: center; align-items: center;
} }
#main-header { /*
* Region header
*/
.welcome-header {
display: flex; display: flex;
flex-direction: column-reverse; flex-direction: column-reverse;
padding-bottom: 9rem;
max-width: 80rem;
width: 100%; width: 100%;
max-width: 80rem;
margin: 0 auto;
padding-bottom: 9rem;
background-image: var(--bg-img-sm); background-image: var(--bg-img-sm);
background-image: var(--bg-img-sm-set); background-image: var(--bg-img-sm-set);
background-position: top center; background-position: top center;
@ -71,11 +76,11 @@ a:hover:visited {
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
#main-header header { .welcome-header__body {
padding: 0; padding: 0;
background: none; background: none;
} }
#header-title { .welcome-header__title {
margin: 0 0 0 1.5rem; margin: 0 0 0 1.5rem;
text-align: left; text-align: left;
display: flex; display: flex;
@ -89,7 +94,7 @@ a:hover:visited {
line-height: 110%; line-height: 110%;
text-shadow: 0 0.125rem 0.1875rem rgba(0, 0, 0, 0.3); text-shadow: 0 0.125rem 0.1875rem rgba(0, 0, 0, 0.3);
} }
#header-title > span { .welcome-header__title > span {
background: linear-gradient(180deg, #ddff95 30%, #ffb84b 100%); background: linear-gradient(180deg, #ddff95 30%, #ffb84b 100%);
background-clip: text; background-clip: text;
-webkit-background-clip: text; -webkit-background-clip: text;
@ -100,40 +105,44 @@ a:hover:visited {
line-height: 110%; line-height: 110%;
text-shadow: none; text-shadow: none;
} }
#header-image { .welcome-header__image {
width: 100%;
text-align: right;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
text-align: right;
width: 100%;
} }
#header-image #monster { .welcome-header__monster {
margin-right: 12rem; margin-right: 12rem;
margin-top: 1rem; margin-top: 1rem;
flex-shrink: 1; flex-shrink: 1;
} }
@media (min-width: 64rem) { @media (min-width: 64rem) {
#main-header { .welcome-header {
background-image: var(--bg-img); background-image: var(--bg-img);
background-image: var(--bg-img-set); background-image: var(--bg-img-set);
} }
#header-title { .welcome-header__title {
padding: 1.2rem 2rem 2.6rem 2rem; padding: 1.2rem 2rem 2.6rem 2rem;
} }
#header-image { .welcome-header__image {
justify-content: flex-end; justify-content: flex-end;
} }
} }
#main-content { /*
* Region content
*/
.welcome-content {
height: auto; height: auto;
margin-top: 1.6rem; margin-top: 1.6rem;
} }
.content-body { .welcome-content__body {
box-sizing: border-box; box-sizing: border-box;
max-width: 80rem; max-width: 80rem;
} }
.content-body:before, .welcome-content__body:before,
.content-body:after { .welcome-content__body:after {
content: ''; content: '';
position: absolute; position: absolute;
left: 0; left: 0;
@ -143,38 +152,38 @@ a:hover:visited {
filter: blur(2.75rem); filter: blur(2.75rem);
opacity: 0.8; opacity: 0.8;
inset: 11.75rem; inset: 11.75rem;
z-index: 0; /*z-index: 0;*/
} }
.content-body:before { .welcome-content__body:before {
top: -1rem; top: -1rem;
} }
.content-body:after { .welcome-content__body:after {
bottom: -1rem; bottom: -1rem;
} }
@media (max-width: 48rem) { @media (max-width: 48rem) {
.content-body { .welcome-content__body {
margin-top: -9.8rem; margin-top: -9.8rem;
} }
.content-body:before, .welcome-content__body:before,
.content-body:after { .welcome-content__body:after {
inset: unset; inset: unset;
} }
} }
@media (min-width: 64rem) { @media (min-width: 64rem) {
#main-content { .welcome-content {
margin-top: 0; margin-top: 0;
} }
.content-body { .welcome-content__body {
margin-top: -5.7rem; margin-top: -5.7rem;
} }
} }
#poweredby-button { .welcome-poweredby {
width: 100%; width: 100%;
margin: 0 auto 3rem; margin: 0 auto 3rem;
z-index: 10; z-index: 10;
} }
#poweredby-link { .welcome-poweredby__link {
background: #7f1d1d; background: #7f1d1d;
background-image: linear-gradient(to bottom, rgba(255,0,0,0.8), rgba(255,255,255,0)); background-image: linear-gradient(to bottom, rgba(255,0,0,0.8), rgba(255,255,255,0));
background-position: top left, center; background-position: top left, center;
@ -187,7 +196,7 @@ a:hover:visited {
font-size: 1.5rem; font-size: 1.5rem;
line-height: 1.3; line-height: 1.3;
text-decoration: none; text-decoration: none;
text-shadow: var(--shadow); /*text-shadow: var(--shadow);*/
transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
@ -195,7 +204,7 @@ a:hover:visited {
min-height: 7.6875rem; min-height: 7.6875rem;
outline: none; outline: none;
} }
#poweredby-link::before { .welcome-poweredby__link::before {
content: ''; content: '';
position: absolute; position: absolute;
top: -13.125rem; top: -13.125rem;
@ -207,7 +216,7 @@ a:hover:visited {
transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out;
z-index: 5; z-index: 5;
} }
#poweredby-text { .welcome-poweredby__text {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1; flex: 1;
@ -217,25 +226,25 @@ a:hover:visited {
padding: 1rem 1.5rem; padding: 1rem 1.5rem;
text-align: left; text-align: left;
color: white; color: white;
text-shadow: 0 0.101125rem 0.2021875rem rgba(0, 0, 0, 0.25); /*text-shadow: 0 0.101125rem 0.2021875rem rgba(0, 0, 0, 0.25);*/
font-size: 1.65rem; font-size: 1.65rem;
font-style: normal; font-style: normal;
font-weight: 600; font-weight: 600;
line-height: 130.023%; line-height: 130.023%;
letter-spacing: 0.0075rem; letter-spacing: 0.0075rem;
} }
#poweredby-text strong { .welcome-poweredby__text strong {
font-size: 2.625rem; font-size: 2.625rem;
font-weight: 600; font-weight: 600;
line-height: 130.023%; line-height: 130.023%;
letter-spacing: 0.013125rem; letter-spacing: 0.013125rem;
} }
#poweredby-link span { .welcome-poweredby__link span {
position: absolute; position: absolute;
display: block; display: block;
pointer-events: none; pointer-events: none;
} }
#poweredby-link span:nth-child(1) { .welcome-poweredby__link span:nth-child(1) {
height: 8px; height: 8px;
width: 100%; width: 100%;
top: 0; top: 0;
@ -255,7 +264,7 @@ a:hover:visited {
transform: translateX(100%); transform: translateX(100%);
} }
} }
#poweredby-link span:nth-child(2) { .welcome-poweredby__link span:nth-child(2) {
width: 8px; width: 8px;
height: 100%; height: 100%;
top: 0; top: 0;
@ -275,7 +284,7 @@ a:hover:visited {
transform: translateY(100%); transform: translateY(100%);
} }
} }
#poweredby-link span:nth-child(3) { .welcome-poweredby__link span:nth-child(3) {
height: 8px; height: 8px;
width: 100%; width: 100%;
bottom: 0; bottom: 0;
@ -295,22 +304,22 @@ a:hover:visited {
transform: translateX(-100%); transform: translateX(-100%);
} }
} }
#poweredby-link:hover span { .welcome-poweredby__link:hover span {
animation-play-state: paused; animation-play-state: paused;
} }
@media (max-width: 48rem) { @media (max-width: 48rem) {
#poweredby-link { .welcome-poweredby__link {
height: 6.25rem; height: 6.25rem;
min-width: auto; min-width: auto;
border-radius: 0; border-radius: 0;
} }
#poweredby-text { .welcome-poweredby__text {
display: inline; display: inline;
padding-top: .5rem; padding-top: .5rem;
} }
} }
@media (min-width: 48rem) { @media (min-width: 48rem) {
#poweredby-button { .welcome-poweredby {
position: absolute; position: absolute;
top: 0; top: 0;
left: 50%; left: 50%;
@ -318,14 +327,14 @@ a:hover:visited {
max-width: 29.375rem; max-width: 29.375rem;
margin-bottom: 0; margin-bottom: 0;
} }
#poweredby-link:hover { .welcome-poweredby__link:hover {
transition: all .5s; transition: all .5s;
transform: rotate(-3deg) scale(1.1); transform: rotate(-3deg) scale(1.1);
box-shadow: 0px 3px 5px rgba(0,0,0,.4); /*box-shadow: 0px 3px 5px rgba(0,0,0,.4);*/
} }
} }
.content-text { .welcome-text {
z-index: 1; z-index: 1;
width: 100%; width: 100%;
display: flex; display: flex;
@ -343,7 +352,7 @@ a:hover:visited {
padding: 6rem 1.063rem 0.75rem; padding: 6rem 1.063rem 0.75rem;
overflow: hidden; overflow: hidden;
} }
.content-text p { .welcome-text p {
width: 100%; width: 100%;
line-height: 150%; line-height: 150%;
font-weight: 400; font-weight: 400;
@ -351,14 +360,14 @@ a:hover:visited {
margin: 0 0 1.5rem; margin: 0 0 1.5rem;
} }
@media (min-width: 48rem) { @media (min-width: 48rem) {
.content-text { .welcome-text {
font-size: 1.375rem; font-size: 1.375rem;
line-height: 2rem; line-height: 2rem;
padding-top: 7rem; padding-top: 7rem;
} }
} }
@media (min-width: 64rem) { @media (min-width: 64rem) {
.content-text { .welcome-text {
border-radius: 0.75rem; border-radius: 0.75rem;
box-shadow: var(--shadow); box-shadow: var(--shadow);
max-width: 60rem; max-width: 60rem;
@ -368,13 +377,13 @@ a:hover:visited {
} }
} }
.subcontent { .welcome-text__block {
position: relative; position: relative;
} }
.subcontent h1 { .welcome-text__block h2 {
margin: 1em 0 .8em; margin: 1em 0 .8em;
} }
.subcontent h1 span { .welcome-text__block h2 span {
display: inline-block; display: inline-block;
padding: 10px 30px 14px; padding: 10px 30px 14px;
margin: 0 0 0 20px; margin: 0 0 0 20px;
@ -385,7 +394,7 @@ a:hover:visited {
border-color: orangered; border-color: orangered;
transform: rotate(-3deg) translateY(-25%); transform: rotate(-3deg) translateY(-25%);
} }
.subcontent h1:before { .welcome-text__block h2:before {
content: ""; content: "";
height: 5px; height: 5px;
position: absolute; position: absolute;
@ -398,7 +407,7 @@ a:hover:visited {
transform: rotate(2deg) translateY(-50%); transform: rotate(2deg) translateY(-50%);
transform-origin: top left; transform-origin: top left;
} }
.subcontent h1:after { .welcome-text__block h2:after {
content: ""; content: "";
height: 70rem; height: 70rem;
position: absolute; position: absolute;