Improved anime view on characters

arn/ID.go

@@ -1,4 +1,35 @@
 package arn
 
+import (
+	"errors"
+	"strings"
+
+	shortid "github.com/ventu-io/go-shortid"
+)
+
 // ID is used for object identification and is simply a string.
 type ID = string
+
+// GenerateID generates a unique ID for a given collection.
+func GenerateID(collection string) ID {
+	id, _ := shortid.Generate()
+
+	// Retry until we find an unused ID
+	retry := 0
+
+	for {
+		_, err := DB.Get(collection, id)
+
+		if err != nil && strings.Contains(err.Error(), "not found") {
+			return id
+		}
+
+		retry++
+
+		if retry > 10 {
+			panic(errors.New("Can't generate unique ID"))
+		}
+
+		id, _ = shortid.Generate()
+	}
+}

arn/Utils.go

@@ -18,7 +18,6 @@ import (
 	"github.com/akyoto/color"
 	"github.com/animenotifier/kitsu"
 	"github.com/animenotifier/mal"
-	shortid "github.com/ventu-io/go-shortid"
 )
 
 var (
@@ -31,30 +30,6 @@ var (
 	writtenByRegex = regexp.MustCompile(`\[Written by (.*?)\]`)
 )
 
-// GenerateID generates a unique ID for a given collection.
-func GenerateID(collection string) ID {
-	id, _ := shortid.Generate()
-
-	// Retry until we find an unused ID
-	retry := 0
-
-	for {
-		_, err := DB.Get(collection, id)
-
-		if err != nil && strings.Contains(err.Error(), "not found") {
-			return id
-		}
-
-		retry++
-
-		if retry > 10 {
-			panic(errors.New("Can't generate unique ID"))
-		}
-
-		id, _ = shortid.Generate()
-	}
-}
-
 // GetUserFromContext returns the logged in user for the given context.
 func GetUserFromContext(ctx aero.Context) *User {
 	if !ctx.HasSession() {
@@ -208,23 +183,22 @@ func FixGender(gender string) string {
 func DateToSeason(date time.Time) string {
 	month := date.Month()
 
-	if month >= 4 && month <= 6 {
+	switch {
+	case month >= 4 && month <= 6:
 		return "spring"
-	}
 
-	if month >= 7 && month <= 9 {
+	case month >= 7 && month <= 9:
 		return "summer"
-	}
 
-	if month >= 10 && month <= 12 {
+	case month >= 10 && month <= 12:
 		return "autumn"
-	}
 
-	if month >= 1 && month < 4 {
+	case month >= 1 && month < 4:
 		return "winter"
-	}
 
+	default:
 		return ""
+	}
 }
 
 // BroadcastEvent sends the given event to the event streams of all users.

mixins/cards/Anime/AnimeCard.pixy

@@ -0,0 +1,7 @@
+component AnimeCard(anime *arn.Anime, note string, user *arn.User)
+	a.anime-card.mountable(href=anime.Link())
+		.anime-card-image-container
+			img.anime-card-image.lazy(data-src=anime.ImageLink("small"), data-webp="true", data-color=anime.AverageColor(), alt=anime.Title.ByUser(user))
+		.anime-card-info
+			.anime-card-info-main= anime.Title.ByUser(user)
+			.anime-card-info-details= note

mixins/cards/Anime/anime-card.scarlet

@@ -0,0 +1,32 @@
+.anime-cards
+	horizontal-wrap
+
+.anime-card
+	card
+
+> 600px
+	.anime-card
+		max-width 300px
+
+.anime-card-image-container
+	width anime-image-small-width
+	height anime-image-small-width
+
+	img
+		width anime-image-small-width
+		height anime-image-small-width
+		border-radius ui-element-border-radius
+		object-fit cover
+
+.anime-card-info
+	vertical
+	margin-left card-padding
+	font-size 0.95em
+
+.anime-card-info-main
+	flex 1
+	line-height 1.3em
+
+.anime-card-info-details
+	color text-color
+	opacity 0.5

mixins/cards/User/UserCard.pixy

@@ -1,7 +1,7 @@
 component UserCard(user *arn.User, note string)
 	a.user-card.mountable(href=user.Link(), data-pro=user.IsPro())
-		.user-card-avatar
+		.user-card-image-container
 			AvatarNoLink(user)
 		.user-card-info
-			.user-card-nick= user.Nick
+			.user-card-info-main= user.Nick
-			.user-card-note= note
+			.user-card-info-details= note

mixins/cards/User/user-card.scarlet

@@ -0,0 +1,33 @@
+.user-cards
+	horizontal-wrap
+	justify-content center
+
+.user-card
+	card
+
+> 600px
+	.user-card
+		max-width 230px
+
+.user-card-image-container
+	width avatar-size
+	height avatar-size
+
+	img
+		width avatar-size
+		height avatar-size
+		border-radius ui-element-border-radius
+		box-shadow none
+
+.user-card-info
+	vertical
+	margin-left card-padding
+	overflow hidden
+
+.user-card-info-main
+	clip-long-text
+
+.user-card-info-details
+	clip-long-text
+	color text-color
+	opacity 0.5

pages/anime/anime.pixy

@@ -229,7 +229,7 @@ component AnimeInformation(anime *arn.Anime)
 				tr.mountable(data-mountable-type="info")
 					td.anime-info-key Season:
 					td.anime-info-value
-						a(href="/explore/anime/" + anime.StartDate[:4] + "/" + strings.ToLower(anime.Season()) + "/any/" + anime.Type)= stringutils.Capitalize(anime.Season()) + " " + anime.StartDate[:4]
+						a(href="/explore/anime/" + anime.StartDate[:4] + "/" + anime.Season() + "/any/" + anime.Type)= stringutils.Capitalize(anime.Season()) + " " + anime.StartDate[:4]
 			
 			if anime.Source != "" && arn.AnimeSourceHumanReadable[anime.Source] != ""
 				tr.mountable(data-mountable-type="info")

pages/anime/relations.pixy

@@ -11,6 +11,7 @@ component AnimeRelations(anime *arn.Anime, user *arn.User, standAlonePage bool)
 			.anime-relations
 				each relation in anime.Relations().Items
 					if relation.Anime() != nil
+						//- AnimeCard(relation.Anime(), fmt.Sprintf("%s (%d)", relation.HumanReadableType(), anime.StartDateTime().Year()), user)
 						a.anime-relation.tip.mountable(href=relation.Anime().Link(), aria-label=relation.Anime().Title.ByUser(user), data-mountable-type="relation")
 							img.anime-relation-image.lazy(data-src=relation.Anime().ImageLink("small"), data-webp="true", data-color=relation.Anime().AverageColor(), alt=relation.Anime().Title.ByUser(user))
 							.anime-relation-type= relation.HumanReadableType()

pages/character/character.pixy

@@ -46,20 +46,15 @@ component CharacterDetails(character *arn.Character, characterAnime []*arn.Anime
 					.character-section
 						h3.character-section-name.mountable Anime
 
-						.character-anime.mountable
+						.anime-cards
 							each anime in characterAnime
-								.character-anime-item
+								AnimeCard(anime, fmt.Sprintf("%s %d", stringutils.Capitalize(anime.Season()), anime.StartDateTime().Year()), user)
-									.character-anime-item-overview
-										a.tip.mountable(href=anime.Link(), aria-label=anime.Title.ByUser(user), data-mountable-type="anime")
-											img.character-anime-item-image.lazy(data-src=anime.ImageLink("small"), data-webp="true", data-color=anime.AverageColor(), alt=anime.Title.ByUser(user))
-									.character-anime-item-details
-										a(href=anime.Link())= anime.TitleByUser(user)
 
 				if len(quotes) > 0
 					.character-section
 						h3.character-section-name.mountable Quotes
 
-						.quotes.character-quotes.mountable
+						.character-quotes.mountable
 							each quote in quotes
 								QuotePreview(quote, user)
 		
@@ -109,7 +104,7 @@ component CharacterSidebar(character *arn.Character, friends []*arn.User, releva
 		
 		if len(friends) > 0
 			.character-friends
-				h3.mountable(data-mountable-type="sidebar") Friends
+				h3.mountable(data-mountable-type="sidebar") Likes
 
 				.user-avatars.mountable(data-mountable-type="sidebar")
 					each friend in friends

pages/character/character.scarlet

@@ -70,9 +70,6 @@
 	.quote-footer
 		display none
 
-	.quote
-		max-width 500px
-
 .character-friends
 	.user-avatars
 		justify-content flex-start

pages/users/user-cards.scarlet

@@ -1,40 +0,0 @@
-const user-card-padding = 1rem
-
-.user-cards
-	horizontal-wrap
-	justify-content center
-
-.user-card
-	horizontal
-	ui-element
-	padding user-card-padding
-	margin 0.4rem
-	width 100%
-	height calc(avatar-size + user-card-padding * 2)
-
-	:hover
-		border 1px solid input-focus-border-color
-		// TODO: Replace with alpha(main-color, 20%) function
-		box-shadow 0 0 6px rgba(248, 165, 130, 0.2)
-
-> 600px
-	.user-card
-		max-width 230px
-
-.user-card-avatar
-	.user-image
-		border-radius ui-element-border-radius
-		box-shadow none
-
-.user-card-info
-	vertical
-	margin-left user-card-padding
-	overflow hidden
-
-.user-card-nick
-	clip-long-text
-
-.user-card-note
-	clip-long-text
-	color text-color
-	opacity 0.5

styles/config.scarlet

@@ -71,7 +71,7 @@ const group-post-width = comment-width
 const post-avatar-text-margin = 0.5rem
 
 // Avatar
-avatar-size = 50px
+const avatar-size = 50px
 
 // Badge
 badge-important-bg-color = rgb(215, 38, 15)

styles/mixins/card.scarlet

@@ -0,0 +1,13 @@
+const card-padding = 1rem
+
+mixin card
+	horizontal
+	ui-element
+	padding card-padding
+	margin 0.4rem
+	width 100%
+
+	:hover
+		border 1px solid input-focus-border-color
+		// TODO: Replace with alpha(main-color, 20%) function
+		box-shadow 0 0 6px rgba(248, 165, 130, 0.2)