diff --git a/toolkit/scss/toolkit.scss b/toolkit/scss/toolkit.scss index 931b82b..7063634 100644 --- a/toolkit/scss/toolkit.scss +++ b/toolkit/scss/toolkit.scss @@ -20,6 +20,7 @@ $dark-body: #333; $dark-text: #f5f5f5; $dark-text-hover: #e5e5e5; $dark-border: #555; +$dark-border-hover: #4a4a4a; $dark-primary: #ec3d77; $dark-primary-hover: #d72d66; @@ -46,6 +47,63 @@ img { object-fit: contain; } +.toolkit-thumbnails { + display: flex; + flex-wrap: wrap; + justify-content: space-around; + padding: 4px; + + img { + max-height: 150px; + } + + .toolkit-thumbnail { + flex: 1 1 auto; + padding: 4px; + } + + .toolkit-thumbnail--content { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + padding: 16px 8px; + border-radius: 3px; + border-width: 1px; + border-style: solid; + } + + .toolkit-thumbnail--image { + position: relative; + } + + color: $dark; + background-color: $light-background; + .toolkit-thumbnail--content { + background-color: $white; + border-color: $border-light; + } + + a.toolkit-thumbnail:hover .toolkit-thumbnail--content { + background-color: $lighter-background; + border-color: $secondary-border-hover; + } +} +.toolkit-dark .toolkit-thumbnails { + color: $dark-text; + background-color: $dark-body; + + .toolkit-thumbnail--content { + background-color: $dark-heading; + border-color: $dark-border; + } + + a.toolkit-thumbnail:hover .toolkit-thumbnail--content { + background-color: $dark-heading-hover; + border-color: $dark-border-hover; + } +} + .toolkit-select { .toolkit-select--title { display: block; @@ -244,30 +302,32 @@ img { } } - &.toolkit-dark { - color: $dark-primary; - &.toolkit-plain { - color: $dark-text; + &:hover, + &:focus, + &:active { + color: $primary-hover; + } +} +.toolkit-dark .toolkit-link { + color: $dark-primary; + &.toolkit-plain { + color: $dark-text; - &:hover, - &:focus, - &:active { - color: $dark-text-hover; - } + &:hover, + &:focus, + &:active { + color: $dark-text-hover; } } &:hover, &:focus, &:active { - color: $primary-hover; - - &.toolkit-dark { - color: $dark-primary-hover; - } + color: $dark-primary-hover; } } + .toolkit-input { width: 300px; padding: 8px 0; @@ -338,9 +398,53 @@ img { } } +.toolkit-indicator { + position: absolute; + top: 4px; + right: 4px; + height: 36px; + width: 36px; + border-width: 1px; + border-style: solid; + border-radius: 18px; + display: flex; + justify-content: space-around; + align-items: center; + font-weight: 600; + + &__red { + border-color: $white; + color: $white; + background-color: $primary; + } + + &__gray { + border-color: $white; + color: $white; + background-color: $dark-heading; + } + + &__white { + border-color: $dark; + color: $dark; + background-color: $white; + } +} + .toolkit-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); + color: $light-background; + + a.tile-link { + color: $dark-text; + + &:hover, + &:focus, + &:active { + color: $dark-text; + } + } &__scroll { grid-auto-flow: column; @@ -361,40 +465,7 @@ img { position: relative; } - .toolkit-tile--banner { - position: absolute; - top: 4px; - right: 4px; - height: 36px; - width: 36px; - border-width: 1px; - border-style: solid; - border-radius: 18px; - display: flex; - justify-content: space-around; - align-items: center; - font-weight: 600; - - &__red { - border-color: $white; - color: $white; - background-color: $primary; - } - - &__gray { - border-color: $white; - color: $white; - background-color: $dark-heading; - } - - &__white { - border-color: $dark; - color: $dark; - background-color: $white; - } - } - - &__small .toolkit-tile--banner { + &__small .toolkit-tile--indicator { height: 26px; width: 26px; border-radius: 13px; diff --git a/toolkit/src/lib.rs b/toolkit/src/lib.rs index 66b7365..88b1e23 100644 --- a/toolkit/src/lib.rs +++ b/toolkit/src/lib.rs @@ -11,6 +11,7 @@ mod link; mod profile; mod select; mod text_input; +mod thumbnail; mod tile; pub use self::{ @@ -25,7 +26,8 @@ pub use self::{ profile::Profile, select::Select, text_input::TextInput, - tile::{BannerColor, Tile, Tiles}, + thumbnail::Thumbnail, + tile::{IndicatorColor, Tile, Tiles}, }; use chrono::{DateTime, Utc}; diff --git a/toolkit/src/link.rs b/toolkit/src/link.rs index 0d8bbc9..0cddb81 100644 --- a/toolkit/src/link.rs +++ b/toolkit/src/link.rs @@ -5,8 +5,8 @@ pub struct Link { pub(crate) href: String, pub(crate) kind: LinkKind, pub(crate) title: Option, + classes: Vec, plain: bool, - dark: bool, } impl Link { @@ -22,8 +22,8 @@ impl Link { href: href.to_owned(), kind: LinkKind::NewTab, title: None, - dark: false, plain: false, + classes: vec![], } } @@ -32,24 +32,23 @@ impl Link { self } - pub fn dark(mut self, dark: bool) -> Self { - self.dark = dark; - self - } - pub fn plain(mut self, plain: bool) -> Self { self.plain = plain; self } - pub(crate) fn class_string(&self) -> String { - let mut classes = vec!["toolkit-link"]; + pub fn class(mut self, class: &str) -> Self { + self.classes.push(class.to_owned()); + self + } + + pub(crate) fn class_string(&self) -> String { + let mut classes = self.classes.clone(); + + classes.push("toolkit-link".to_owned()); - if self.dark { - classes.push("toolkit-dark"); - } if self.plain { - classes.push("toolkit-plain"); + classes.push("toolkit-plain".to_owned()); } classes.join(" ") diff --git a/toolkit/src/thumbnail.rs b/toolkit/src/thumbnail.rs new file mode 100644 index 0000000..053a5d3 --- /dev/null +++ b/toolkit/src/thumbnail.rs @@ -0,0 +1,40 @@ +use crate::image::Image; +use crate::tile::{Indicator, IndicatorColor}; +use std::rc::Rc; + +pub struct Thumbnail { + image: Rc, + pub(crate) title: String, + pub(crate) author: String, + pub(crate) indicator: Option, + pub(crate) href: Option, +} + +impl Thumbnail { + pub fn new(image: impl Image + 'static, title: &str, author: &str) -> Self { + Thumbnail { + image: Rc::new(image), + title: title.to_owned(), + author: author.to_owned(), + indicator: None, + href: None, + } + } + + pub fn indicator(mut self, text: &str, color: IndicatorColor) -> Self { + self.indicator = Some(Indicator { + text: text.to_owned(), + color, + }); + self + } + + pub fn link(mut self, href: &str) -> Self { + self.href = Some(href.to_owned()); + self + } + + pub(crate) fn image(&self) -> &dyn Image { + &*self.image + } +} diff --git a/toolkit/src/tile.rs b/toolkit/src/tile.rs index 05bba48..69b6ebd 100644 --- a/toolkit/src/tile.rs +++ b/toolkit/src/tile.rs @@ -44,26 +44,26 @@ pub enum TileFlag { } #[derive(Clone, Copy, Debug)] -pub enum BannerColor { +pub enum IndicatorColor { Red, White, Gray, } #[derive(Clone, Debug)] -pub(crate) struct Banner { +pub(crate) struct Indicator { pub(crate) text: String, - color: BannerColor, + pub(crate) color: IndicatorColor, } -impl Banner { +impl Indicator { pub(crate) fn class_string(&self) -> String { - let mut classes = vec!["toolkit-tile--banner".to_owned()]; + let mut classes = vec!["toolkit-indicator".to_owned()]; match self.color { - BannerColor::Red => classes.push("toolkit-tile--banner__red".to_owned()), - BannerColor::White => classes.push("toolkit-tile--banner__white".to_owned()), - BannerColor::Gray => classes.push("toolkit-tile--banner__gray".to_owned()), + IndicatorColor::Red => classes.push("toolkit-indicator__red".to_owned()), + IndicatorColor::White => classes.push("toolkit-indicator__white".to_owned()), + IndicatorColor::Gray => classes.push("toolkit-indicator__gray".to_owned()), } classes.join(" ") @@ -75,7 +75,7 @@ pub struct Tile { pub(crate) title: Option, pub(crate) description: Option, pub(crate) link: Option, - pub(crate) banner: Option, + pub(crate) indicator: Option, pub(crate) flag: TileFlag, image: Rc, } @@ -86,14 +86,14 @@ impl Tile { title: None, description: None, link: None, - banner: None, + indicator: None, flag: TileFlag::Normal, image: Rc::new(image), } } - pub fn banner(mut self, text: &str, color: BannerColor) -> Self { - self.banner = Some(Banner { + pub fn indicator(mut self, text: &str, color: IndicatorColor) -> Self { + self.indicator = Some(Indicator { text: text.to_owned(), color, }); @@ -144,7 +144,7 @@ impl std::fmt::Debug for Tile { .field("title", &self.title) .field("description", &self.description) .field("link", &self.link) - .field("banner", &self.banner) + .field("indicator", &self.indicator) .field("flag", &self.flag) .field("image", &"Box") .finish() diff --git a/toolkit/templates/ago.rs.html b/toolkit/templates/ago.rs.html index 32c7818..5527c25 100644 --- a/toolkit/templates/ago.rs.html +++ b/toolkit/templates/ago.rs.html @@ -1,15 +1,15 @@ @use chrono::{DateTime, Utc}; @use crate::{Link, templates::link}; -@(time: DateTime, dark: bool) +@(time: DateTime) - @:link(&Link::current_tab("#").title(&crate::time(time)).plain(true).dark(dark), { + @:link(&Link::current_tab("#").title(&crate::time(time)).plain(true), { @crate::time_ago_long(time) }) - @:link(&Link::current_tab("#").title(&crate::time(time)).plain(true).dark(dark), { + @:link(&Link::current_tab("#").title(&crate::time(time)).plain(true), { @crate::time_ago_short(time) }) diff --git a/toolkit/templates/thumbnail.rs.html b/toolkit/templates/thumbnail.rs.html new file mode 100644 index 0000000..2536cd1 --- /dev/null +++ b/toolkit/templates/thumbnail.rs.html @@ -0,0 +1,15 @@ +@use crate::{templates::link, Link}; +@use crate::templates::thumbnail_inner; +@use crate::thumbnail::Thumbnail; + +@(thumb: &Thumbnail) + +@if let Some(href) = &thumb.href { + @:link(&Link::current_tab(href).plain(true).class("toolkit-thumbnail"), { + @:thumbnail_inner(thumb) + }) +} else { +
+ @:thumbnail_inner(thumb) +
+} diff --git a/toolkit/templates/thumbnail_inner.rs.html b/toolkit/templates/thumbnail_inner.rs.html new file mode 100644 index 0000000..997248f --- /dev/null +++ b/toolkit/templates/thumbnail_inner.rs.html @@ -0,0 +1,23 @@ +@use crate::templates::image; +@use crate::thumbnail::Thumbnail; + +@(thumb: &Thumbnail) + +
+
+ @if let Some(indicator) = &thumb.indicator { +
+ @indicator.text +
+ } + @:image(thumb.image()) +
+
+
+ @thumb.title +
+
+ @thumb.author +
+
+
diff --git a/toolkit/templates/thumbnails.rs.html b/toolkit/templates/thumbnails.rs.html new file mode 100644 index 0000000..3e6f0b9 --- /dev/null +++ b/toolkit/templates/thumbnails.rs.html @@ -0,0 +1,5 @@ +@(body: Content) + +
+ @:body() +
diff --git a/toolkit/templates/tile.rs.html b/toolkit/templates/tile.rs.html index e283c6a..923fe4c 100644 --- a/toolkit/templates/tile.rs.html +++ b/toolkit/templates/tile.rs.html @@ -5,7 +5,7 @@ @(tile: &Tile) @if let Some(href) = &tile.link { - @:link(&Link::current_tab(href).plain(true).dark(true), { + @:link(&Link::current_tab(href).plain(true).class("tile-link"), { @:tile_inner(tile) }) } else { diff --git a/toolkit/templates/tile_inner.rs.html b/toolkit/templates/tile_inner.rs.html index 10af2c0..a607ae4 100644 --- a/toolkit/templates/tile_inner.rs.html +++ b/toolkit/templates/tile_inner.rs.html @@ -4,9 +4,9 @@ @(tile: &Tile)
- @if let Some(banner) = &tile.banner { -
- @banner.text + @if let Some(indicator) = &tile.indicator { +
+ @indicator.text
}