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

🚚 Better class names for inner content

Browse source
This commit is contained in:
Manuel Cillero 2024-03-11 20:11:35 +01:00
parent 193a1b3911
commit b4bb82aa69
8 changed files with 81 additions and 81 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/base/component/branding.rs
View file

@ -33,18 +33,19 @@ impl ComponentTrait for Branding {
fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup {
let logo = self.logo().render(cx);
let title = L10n::l("site_home").using(cx.langid());
let home = self.frontpage()(cx);
let title = &L10n::l("site_home").using(cx.langid());
PrepareMarkup::With(html! {
div id=[self.id()] class="branding__container" {
div class="branding__inner" {
div class="branding__content" {
@if !logo.is_empty() {
div class="branding__logo" { (logo) }
a class="branding__logo" href=(home) title=[title] rel="home" {
(logo)
}
}
div class="branding__text" {
div class="branding__name" {
a href=(self.frontpage()(cx)) title=[title] rel="home" {
(self.app_name())
}
a class="branding__name" href=(home) title=[title] rel="home" {
(self.app_name())
}
@if let Some(slogan) = self.slogan().using(cx.langid()) {
div class="branding__slogan" {

2
src/base/component/flex/item.rs
View file

@ -54,7 +54,7 @@ impl ComponentTrait for Item {
};
PrepareMarkup::With(html! {
div id=[self.id()] class=[self.classes().get()] style=[order] {
div class="flex-item__inner" {
div class="flex-item__content" {
(self.components().render(cx))
}
}

2
src/base/component/menu/menu_main.rs
View file

@ -34,7 +34,7 @@ impl ComponentTrait for Menu {
PrepareMarkup::With(html! {
div id=[self.id()] class="menu__container" {
div class="menu__inner" {
div class="menu__content" {
div class="menu__main" {
div class="menu__overlay" {}
nav class="menu__nav" {

10
src/base/component/wrapper.rs
View file

@ -42,35 +42,35 @@ impl ComponentTrait for Wrapper {
match self.wrapper_type() {
WrapperType::Container => PrepareMarkup::With(html! {
div id=[self.id()] class=[self.classes().get()] {
div class="wrapper__inner" {
div class="wrapper__content" {
(self.components().render(cx))
}
}
}),
WrapperType::Main => PrepareMarkup::With(html! {
main id=[self.id()] class=[self.classes().get()] {
div class="wrapper__inner" {
div class="wrapper__content" {
(self.components().render(cx))
}
}
}),
WrapperType::Section => PrepareMarkup::With(html! {
section id=[self.id()] class=[self.classes().get()] {
div class="wrapper__inner" {
div class="wrapper__content" {
(self.components().render(cx))
}
}
}),
WrapperType::Header => PrepareMarkup::With(html! {
header id=[self.id()] class=[self.classes().get()] {
div class="wrapper__inner" {
div class="wrapper__content" {
(self.components().render(cx))
}
}
}),
WrapperType::Footer => PrepareMarkup::With(html! {
footer id=[self.id()] class=[self.classes().get()] {
div class="wrapper__inner" {
div class="wrapper__content" {
(self.components().render(cx))
}
}

93
src/core/theme/definition.rs
View file

@ -19,32 +19,41 @@ pub type ThemeRef = &'static dyn ThemeTrait;
/// alternative class name or space-separated class names for each variant, without altering the
/// default page rendering process.
pub enum ThemeBuiltInClasses {
/// Main body container. Default is `body__container`.
BodyContainer,
/// Body inner container. Default is `body__inner`.
BodyInner,
/// A region container. Default is `region__container`.
RegionContainer,
/// A region inner container. Default is `region__inner`.
RegionInner,
/// Main content container. Default is `content__container`.
ContentContainer,
/// Content inner container. Default is `content__inner`.
ContentInner,
/// Skip to content link. Default is `skip__to_content`.
SkipToContent,
/// Main body wrapper. Default is `body__wrapper`.
BodyWrapper,
/// Main content wrapper. Default is `content__wrapper`.
ContentWrapper,
/// A region container. Default is `region__container`.
RegionContainer,
/// The region inner content. Default is `region__content`.
RegionContent,
}
#[rustfmt::skip]
impl ToString for ThemeBuiltInClasses {
fn to_string(&self) -> String {
match self {
ThemeBuiltInClasses::SkipToContent => String::from("skip__to_content"),
ThemeBuiltInClasses::BodyWrapper => String::from("body__wrapper"),
ThemeBuiltInClasses::ContentWrapper => String::from("content__wrapper"),
ThemeBuiltInClasses::RegionContainer => String::from("region__container"),
ThemeBuiltInClasses::RegionContent => String::from("region__content"),
}
}
}
/// Los temas deben implementar este "trait".
pub trait ThemeTrait: PackageTrait + Send + Sync {
#[rustfmt::skip]
fn regions(&self) -> Vec<(&'static str, L10n)> {
vec![
("header", L10n::l("header")),
("pagetop", L10n::l("pagetop")),
("content", L10n::l("content")),
("sidebar", L10n::l("sidebar")),
("footer", L10n::l("footer")),
("header", L10n::l("header")),
("pagetop", L10n::l("pagetop")),
("sidebar_left", L10n::l("sidebar_left")),
("content", L10n::l("content")),
("sidebar_right", L10n::l("sidebar_right")),
("footer", L10n::l("footer")),
]
}
@ -55,31 +64,22 @@ pub trait ThemeTrait: PackageTrait + Send + Sync {
/// Theme developers can customize the default implementation of this method to return
/// alternative class name or space-separated class names for each variant, without altering the
/// default page rendering process.
fn builtin_classes(&self, builtin: ThemeBuiltInClasses) -> Option<&str> {
match builtin {
ThemeBuiltInClasses::BodyContainer => Some("body__container"),
ThemeBuiltInClasses::BodyInner => Some("body__inner"),
ThemeBuiltInClasses::RegionContainer => Some("region__container"),
ThemeBuiltInClasses::RegionInner => Some("region__inner"),
ThemeBuiltInClasses::ContentContainer => Some("content__container"),
ThemeBuiltInClasses::ContentInner => Some("content__inner"),
ThemeBuiltInClasses::SkipToContent => Some("skip__to_content"),
}
fn builtin_classes(&self, builtin: ThemeBuiltInClasses) -> Option<String> {
Some(builtin.to_string())
}
fn prepare_region(&self, page: &mut Page, region_name: &str) -> Markup {
let render_region = page.components_in(region_name).render(page.context());
if render_region.is_empty() {
html! {}
} else {
html! {
div
id=[OptionId::new(region_name).get()]
class=[self.builtin_classes(ThemeBuiltInClasses::RegionContainer)]
{
div class=[self.builtin_classes(ThemeBuiltInClasses::RegionInner)] {
(render_region)
}
return html! {};
}
html! {
div
id=[OptionId::new(region_name).get()]
class=[self.builtin_classes(ThemeBuiltInClasses::RegionContainer)]
{
div class=[self.builtin_classes(ThemeBuiltInClasses::RegionContent)] {
(render_region)
}
}
}
@ -98,18 +98,15 @@ pub trait ThemeTrait: PackageTrait + Send + Sync {
a href=(skip_to) { (skip) }
}
}
div class=[self.builtin_classes(ThemeBuiltInClasses::BodyContainer)] {
div class=[self.builtin_classes(ThemeBuiltInClasses::BodyInner)] {
(self.prepare_region(page, "header"))
(self.prepare_region(page, "pagetop"))
div class=[self.builtin_classes(ThemeBuiltInClasses::ContentContainer)] {
div class=[self.builtin_classes(ThemeBuiltInClasses::ContentInner)] {
(self.prepare_region(page, "content"))
(self.prepare_region(page, "sidebar"))
}
}
(self.prepare_region(page, "footer"))
div class=[self.builtin_classes(ThemeBuiltInClasses::BodyWrapper)] {
(self.prepare_region(page, "header"))
(self.prepare_region(page, "pagetop"))
div class=[self.builtin_classes(ThemeBuiltInClasses::ContentWrapper)] {
(self.prepare_region(page, "sidebar_left"))
(self.prepare_region(page, "content"))
(self.prepare_region(page, "sidebar_right"))
}
(self.prepare_region(page, "footer"))
}
}
}

4
static/base/css/looks.css
View file

@ -257,7 +257,7 @@
/* Branding component */
.branding__inner {
.branding__content {
display: flex;
align-items: flex-end;
column-gap: var(--val-gap-0-75);
@ -265,6 +265,8 @@
.branding__name {
letter-spacing: 0.02em;
font-size: var(--val-fs--l);
font-weight: 700;
text-decoration: none;
}
.branding__slogan {
font-size: var(--val-fs--m);

10
static/base/css/menu.css
View file

@ -9,11 +9,11 @@
background: var(--val-menu--color-bg);
}
.menu__inner {
.menu__content {
padding-right: var(--val-gap);
}
.menu__inner a,
.menu__inner button {
.menu__content a,
.menu__content button {
cursor: pointer;
border: none;
background: none;
@ -119,10 +119,10 @@
.menu__container {
border-radius: var(--val-border-radius);
}
.menu__inner {
.menu__content {
padding-right: var(--val-gap-0-5);
}
.menu__inner button {
.menu__content button {
margin: var(--val-gap-0-5) 0 var(--val-gap-0-5) var(--val-gap-0-5);
}
.menu__trigger {

26
static/base/css/welcome.css
View file

@ -16,11 +16,11 @@
padding-top: 0;
}
#welcome [class$="-col-text"] > .flex-item__inner {
#welcome [class$="-col-text"] > .flex-item__content {
margin: 5% 5% 0;
text-align: center;
}
#welcome [class$="-col-image"] > .flex-item__inner {
#welcome [class$="-col-image"] > .flex-item__content {
margin: 1rem 5%;
}
@ -28,7 +28,7 @@
text-align: center;
margin: 0 5%;
}
#welcome .welcome > .wrapper__inner {
#welcome .welcome > .wrapper__content {
padding: 2rem 1rem;
border-radius: 28px;
background: url("/base/images/welcome.jpg") center center no-repeat;
@ -36,18 +36,18 @@
background-size: cover;
color: #fff;
}
#welcome .welcome > .wrapper__inner > h2 {
#welcome .welcome > .wrapper__content > h2 {
color: #fff;
}
#welcome .welcome > .wrapper__inner > h3 {
#welcome .welcome > .wrapper__content > h3 {
color: #ccc;
}
#welcome .promo-col-image > .flex-item__inner {
#welcome .promo-col-image > .flex-item__content {
padding: 0 5%;
}
#welcome .issues-col-image > .flex-item__inner img {
#welcome .issues-col-image > .flex-item__content img {
border-radius: 40px;
}
@ -55,20 +55,20 @@
/* MD - Applies >= 768px */
@media screen and (min-width: 48rem) {
#welcome .promo-col-image > .flex-item__inner {
#welcome .promo-col-image > .flex-item__content {
padding: 0;
}
#welcome .issues {
padding-top: 1.6rem;
}
#welcome .issues-col-text > .flex-item__inner {
#welcome .issues-col-text > .flex-item__content {
text-align: left;
}
}
/* LG - Applies >= 992px */
@media screen and (min-width: 62rem) {
#welcome .hello-col-text > .flex-item__inner {
#welcome .hello-col-text > .flex-item__content {
margin-top: 2rem;
text-align: left;
}
@ -77,19 +77,19 @@
padding: 0 15% 2rem;
}
#welcome .promo-col-text > .flex-item__inner {
#welcome .promo-col-text > .flex-item__content {
margin-right: 0;
text-align: right;
}
}
/* XL - Applies >= 1280px */
@media screen and (min-width: 80rem) {
#welcome .hello-col-text > .flex-item__inner {
#welcome .hello-col-text > .flex-item__content {
margin-top: 4rem;
margin-left: 20%;
}
#welcome .pagetop-col-text > .flex-item__inner {
#welcome .pagetop-col-text > .flex-item__content {
text-align: left;
}
}