Improved anime list rendering

pages/animelist/animelist.pixy

@@ -39,18 +39,17 @@ component AnimeLists(animeLists map[string]*arn.AnimeList, viewUser *arn.User, u
 				AnimeList(animeLists[arn.AnimeListStatusDropped], viewUser, user)
 
 component AnimeList(animeList *arn.AnimeList, viewUser *arn.User, user *arn.User)
-	table.anime-list
+	.anime-list
-		tbody
 		each item in animeList.Items
-				tr.anime-list-item.mountable(title=item.Notes, data-api="/api/animelist/" + animeList.UserID + "/field/Items[AnimeID=\"" + item.AnimeID + "\"]")
+			.anime-list-item.mountable(title=item.Notes, data-api="/api/animelist/" + animeList.UserID + "/field/Items[AnimeID=\"" + item.AnimeID + "\"]")
-					td.anime-list-item-image-container
+				.anime-list-item-image-container
 					a.ajax(href=item.Anime().Link())
 						img.anime-list-item-image.lazy(data-src=item.Anime().Image("small"), data-webp="true", alt=item.Anime().Title.ByUser(user))
 
-					td.anime-list-item-name
+				.anime-list-item-name
 					a.ajax(href=item.Link(animeList.User().Nick))= item.Anime().Title.ByUser(user)
 
-					td.anime-list-item-actions
+				.anime-list-item-actions
 					if user != nil && item.Status == arn.AnimeListStatusWatching
 						//- if user.ID == "KpdWUlPzR"
 						//- 	a(href=arn.Nyaa.GetLink(item.Anime()), title="Search on Nyaa", target="_blank", rel="noopener")
@@ -61,25 +60,33 @@ component AnimeList(animeList *arn.AnimeList, viewUser *arn.User, user *arn.User
 								a(href=link, title="Watch episode " + toString(item.Episodes + 1) + " on twist.moe", target="_blank", rel="noopener")
 									RawIcon("eye")
 
-					td.anime-list-item-airing-date
+				.anime-list-item-airing-date
 					if (item.Status == arn.AnimeListStatusWatching || item.Status == arn.AnimeListStatusPlanned) && item.Anime().UpcomingEpisode() != nil
 						span.utc-airing-date(data-start-date=item.Anime().UpcomingEpisode().Episode.AiringDate.Start, data-end-date=item.Anime().UpcomingEpisode().Episode.AiringDate.End, data-episode-number=item.Anime().UpcomingEpisode().Episode.Number)
 
-					td.anime-list-item-episodes
 				if item.Status != arn.AnimeListStatusCompleted
+					.anime-list-item-episodes
 						.anime-list-item-episodes-watched
 							.action(contenteditable=utils.SameUser(user, viewUser), data-field="Episodes", data-type="number", data-trigger="focusout", data-action="save")= item.Episodes
+							
 							if item.Status == arn.AnimeListStatusWatching
 								.plus-episode.action(data-action="increaseEpisode", data-trigger="click") +
+							else
+								.plus-episode-dummy +
 
 						.anime-list-item-episodes-separator /
 						.anime-list-item-episodes-max= item.Anime().EpisodeCountString()
 
-					td.anime-list-item-rating(title="Overall rating")
+				.anime-list-item-rating(title="Overall rating")
 					.action(contenteditable=utils.SameUser(user, viewUser), data-field="Rating.Overall", data-type="number", data-trigger="focusout", data-action="save")= utils.FormatRating(item.Rating.Overall)
-					//- td.anime-list-item-rating(title="Story rating")
+				
+				//- if item.Status == arn.AnimeListStatusCompleted
+				//- 	.anime-list-item-rating(title="Story rating")
+				//- 		span.rating-label S:
 				//- 		.action(contenteditable=utils.SameUser(user, viewUser), data-field="Rating.Story", data-type="number", data-trigger="focusout", data-action="save")= fmt.Sprintf("%.1f", item.Rating.Story)
-					//- td.anime-list-item-rating(title="Visuals rating")
+				//- 	.anime-list-item-rating(title="Visuals rating")
+				//- 		span.rating-label V:
 				//- 		.action(contenteditable=utils.SameUser(user, viewUser), data-field="Rating.Visuals", data-type="number", data-trigger="focusout", data-action="save")= fmt.Sprintf("%.1f", item.Rating.Visuals)
-					//- td.anime-list-item-rating(title="Soundtrack rating")
+				//- 	.anime-list-item-rating(title="Soundtrack rating")
+				//- 		span.rating-label M:
 				//- 		.action(contenteditable=utils.SameUser(user, viewUser), data-field="Rating.Soundtrack", data-type="number", data-trigger="focusout", data-action="save")= fmt.Sprintf("%.1f", item.Rating.Soundtrack)

pages/animelist/animelist.scarlet

@@ -8,11 +8,10 @@
 	vertical
 
 .anime-list-item
+	table-row
 	horizontal
-
-	td
-		display flex
 	align-items center
+	padding-right 1rem
 
 .anime-list-item-image-container
 	padding 0
@@ -26,6 +25,7 @@
 
 .anime-list-item-name
 	flex 1
+	margin 0.5rem 1rem
 	clip-long-text
 
 	a
@@ -38,7 +38,8 @@
 	justify-content flex-end
 	text-align right
 	white-space nowrap
-	width 130px
+	flex-basis 80px
+	flex-shrink 1
 
 	:hover
 		.plus-episode
@@ -46,7 +47,7 @@
 			pointer-events auto
 
 .anime-list-item-episodes-watched
-	flex 0.4
+	flex 0.45
 	horizontal
 	justify-content flex-end
 
@@ -58,18 +59,28 @@
 	margin-left 1px
 	transition opacity transition-speed ease
 
+.plus-episode-dummy
+	display inline-block
+	opacity 0
+
 .anime-list-item-episodes-separator
-	flex 0.2
+	flex 0.1
 	opacity 0.5
 
 .anime-list-item-episodes-max
-	flex 0.4
+	flex 0.3
 	opacity 0.5
 
 .anime-list-item-rating
+	horizontal
 	text-align right
 	justify-content flex-end
-	width 65px
+	flex-basis 65px
+	flex-shrink 1
+
+// .rating-label
+// 	opacity 0.5
+// 	margin-right 0.2rem
 
 .anime-list-item-actions
 	display none !important
@@ -81,7 +92,8 @@
 > 740px
 	.anime-list-item-actions
 		display flex !important
-		width 30px
+		flex-basis 30px
+		flex-shrink 1
 
 		:empty
 			display none !important
@@ -93,10 +105,14 @@
 	.anime-list-item-airing-date
 		display flex !important
 		text-align right
-		width 150px
+		flex-basis 150px
+		flex-shrink 1
 		opacity 0.8
 		justify-content flex-end
 
+	.anime-list-item-episodes
+		flex-basis 130px
+
 < 1100px
 	.anime-list-item-rating
 		display none !important

styles/table.scarlet

@@ -1,27 +1,39 @@
-table
+mixin table-root
 	width 100%
 	max-width table-width-normal
 	margin 0 auto
 
-tr
+mixin table-row
 	border-bottom-width 1px
 	border-bottom-style solid
 	border-bottom-color rgba(0, 0, 0, 0.05)
+	background-color transparent
+
+	:hover
+		background-color table-row-hover-background
+
 	:last-child
 		border none
 
-td
+mixin table-cell
 	padding 0.5rem 1rem
 
+table
+	table-root
+
+tr
+	table-row
+
+td
+	table-cell
+
 th
 	font-size 1.2em
 	text-align left
 	padding 0.5rem 1rem
 	font-weight bold
 
-tbody
+thead
 	tr
-		background-color transparent
-		
 		:hover
-			background-color table-row-hover-background
+			background-color transparent