New dashboard layout

pages/animelistitem/animelistitem.pixy

@@ -1,5 +1,5 @@
 component AnimeListItem(viewUser *arn.User, item *arn.AnimeListItem, anime *arn.Anime)
-	.widgets.mountable
+	.widget-form.mountable
 		.widget.anime-list-item-view(data-api="/api/animelist/" + viewUser.ID + "/update/" + anime.ID)
 			h1= anime.Title.Canonical
 

pages/dashboard/dashboard.pixy

@@ -28,14 +28,14 @@ component Dashboard(schedule []*arn.UpcomingEpisode, posts []arn.Postable, sound
 					.widget-element-text
 						Icon(arn.GetForumIcon(post.Thread().Tags[0]))
 						span= post.Thread().Title
-
+		
 		.widget.mountable
-			h3.widget-title Groups
+			h3.widget-title Artworks
 
 			for i := 1; i <= 5; i++
 				.widget-element
 					.widget-element-text
-						Icon("group")
+						Icon("paint-brush")
 						span ...
 
 		.widget.mountable
@@ -52,7 +52,25 @@ component Dashboard(schedule []*arn.UpcomingEpisode, posts []arn.Postable, sound
 						.widget-element-text
 							Icon("music")
 							span ...
+		
+		.widget.mountable
+			h3.widget-title AMVs
 
+			for i := 1; i <= 5; i++
+				.widget-element
+					.widget-element-text
+						Icon("video-camera")
+						span ...
+		
+		.widget.mountable
+			h3.widget-title Groups
+
+			for i := 1; i <= 5; i++
+				.widget-element
+					.widget-element-text
+						Icon("group")
+						span ...
+		
 		.widget.mountable
 			h3.widget-title Contacts
 

pages/listimport/listimport.pixy

@@ -1,13 +1,15 @@
 component ImportLists(user *arn.User)
-	.buttons.buttons-vertical
+	if user.Accounts.AniList.Nick != ""
-		if user.Accounts.AniList.Nick != ""
+		label AniList:
-			.widget-input
+
-				a.button.mountable.ajax(href="/import/anilist/animelist")
+		.widget-input
-					Icon("download")
+			a.button.mountable.ajax(href="/import/anilist/animelist")
-					span Import AniList
+				Icon("download")
-		
+				span Import AniList
-		if user.Accounts.MyAnimeList.Nick != ""
+	
-			.widget-input
+	if user.Accounts.MyAnimeList.Nick != ""
-				a.button.mountable.ajax(href="/import/myanimelist/animelist")
+		label MyAnimeList:
-					Icon("download")
+		.widget-input
-					span Import MyAnimeList
+			a.button.mountable.ajax(href="/import/myanimelist/animelist")
+				Icon("download")
+				span Import MyAnimeList

pages/newsoundtrack/newsoundtrack.pixy

@@ -1,5 +1,5 @@
 component NewSoundTrack(user *arn.User)
-	.widgets
+	.widget-form
 		.widget
 			h1 New soundtrack
 

pages/newthread/newthread.pixy

@@ -1,5 +1,5 @@
 component NewThread(user *arn.User)
-	.widgets
+	.widget-form
 		.widget
 			input#title.widget-element(type="text", placeholder="Title")
 			
@@ -15,6 +15,7 @@ component NewThread(user *arn.User)
 				if user.Role == "admin"
 					option(value="update") Update
 			
-			button.action(data-action="createThread", data-trigger="click")
+			.buttons
-				Icon("check")
+				button.action(data-action="createThread", data-trigger="click")
-				span Create thread
+					Icon("check")
+					span Create thread

pages/profile/profile.scarlet

@@ -87,7 +87,8 @@ profile-boot-duration = 2s
 	margin-bottom 1rem
 
 .no-data
-	text-align center
+	width 100%
+	text-align left
 
 // Categories
 

pages/search/search.pixy

@@ -3,7 +3,10 @@ component SearchResults(term string, users []*arn.User, animeResults []*arn.Anim
 
 	.widgets
 		.widget
-			h3 Users
+			h3.widget-title
+				Icon("user")
+				span Users
+			
 			.user-avatars.user-search
 				if len(users) == 0
 					p.no-data.mountable No users found.
@@ -14,11 +17,28 @@ component SearchResults(term string, users []*arn.User, animeResults []*arn.Anim
 						//- a.ajax(href=user.Link())= user.Nick
 		
 		.widget
-			h3 Anime
+			h3.widget-title
+				Icon("tv")
+				span Anime
+			
 			.profile-watching-list.anime-search
 				if len(animeResults) == 0
 					p.no-data.mountable No anime found.
 				else
 					each anime in animeResults
 						a.profile-watching-list-item.mountable.ajax(href=anime.Link(), title=anime.Title.Canonical, data-mountable-type="anime")
-							img.anime-cover-image.anime-search-result(src=anime.Image.Tiny, alt=anime.Title.Canonical)
+							img.anime-cover-image.anime-search-result(src=anime.Image.Tiny, alt=anime.Title.Canonical)
+		
+		.widget
+			h3.widget-title
+				Icon("comment")
+				span Forums
+			
+			p.no-data.mountable Forums search coming soon.
+		
+		.widget
+			h3.widget-title
+				Icon("music")
+				span Soundtracks
+			
+			p.no-data.mountable Soundtrack search coming soon.

pages/settings/settings.pixy

@@ -51,7 +51,7 @@ component Settings(user *arn.User)
 		
 		.widget.mountable
 			h3.widget-title
-				Icon("refresh")
+				Icon("download")
 				span Import
 			
 			ImportLists(user)
@@ -61,7 +61,8 @@ component Settings(user *arn.User)
 				Icon("puzzle-piece")
 				span Extensions
 			
-			.buttons
+			.widget-input
+				label Chrome Extension:
 				button.action(data-action="installExtension", data-trigger="click")
 					Icon("chrome")
 					span Get the Chrome Extension

pages/settings/settings.scarlet

@@ -1,2 +1,4 @@
-.social-account-button
+.widget-input
-	margin-bottom 1rem
+	button,
+	.button
+		margin-bottom 1rem

styles/include/config.scarlet

@@ -67,4 +67,4 @@ typography-margin = 0.4rem
 // Timings
 fade-speed = 200ms
 transition-speed = 250ms
-mountable-transition-speed = 400ms
+mountable-transition-speed = 300ms

styles/widgets.scarlet

@@ -1,21 +1,23 @@
 .widgets
-	horizontal-wrap
+	display grid
-	justify-content space-around
+	grid-template-columns 1fr
+
+> 810px
+	.widgets
+		grid-template-columns repeat(2, 1fr)
+		grid-gap content-padding
+
+> 1240px
+	.widgets
+		grid-template-columns repeat(3, 1fr)
+
+> 1640px
+	.widgets
+		grid-template-columns repeat(4, 1fr)
 
 .widget
 	vertical
-	align-items center
+	margin-bottom content-padding
-	width 100%
-	padding 0.25rem
-	max-width 400px
-
-> 1240px
-	.widget
-		max-width 30vw
-
-< 810px
-	.widget
-		max-width 600px
 
 .widget-element
 	vertical-wrap
@@ -24,7 +26,7 @@
 	margin-bottom 1rem
 	padding 0.5rem 1rem
 	width 100%
-	max-width 700px
+	// max-width 700px
 
 .widget-element-text
 	horizontal
@@ -38,5 +40,13 @@
 	width 100%
 
 .widget-title
+	text-align left
+	padding-bottom 0.5rem
+	border-bottom 1px solid rgba(0, 0, 0, 0.1)
 	// We need !important here to overwrite the h3:first-child rule
-	margin 1rem 0 !important
+	margin 1rem 0 !important
+
+.widget-form
+	width 100%
+	max-width 650px
+	margin 0 auto