From 34d85e5bd18657b79b1387cf71b968b873552a37 Mon Sep 17 00:00:00 2001 From: Eduard Urbach Date: Sun, 9 Jul 2017 04:22:14 +0200 Subject: [PATCH] New dashboard layout --- pages/animelistitem/animelistitem.pixy | 2 +- pages/dashboard/dashboard.pixy | 24 +++++++++++++-- pages/listimport/listimport.pixy | 26 ++++++++-------- pages/newsoundtrack/newsoundtrack.pixy | 2 +- pages/newthread/newthread.pixy | 9 +++--- pages/profile/profile.scarlet | 3 +- pages/search/search.pixy | 26 ++++++++++++++-- pages/settings/settings.pixy | 5 +-- pages/settings/settings.scarlet | 6 ++-- styles/include/config.scarlet | 2 +- styles/widgets.scarlet | 42 ++++++++++++++++---------- 11 files changed, 101 insertions(+), 46 deletions(-) diff --git a/pages/animelistitem/animelistitem.pixy b/pages/animelistitem/animelistitem.pixy index b5052d63..d0dfe9aa 100644 --- a/pages/animelistitem/animelistitem.pixy +++ b/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 diff --git a/pages/dashboard/dashboard.pixy b/pages/dashboard/dashboard.pixy index d0f557c1..2d0638ad 100644 --- a/pages/dashboard/dashboard.pixy +++ b/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 diff --git a/pages/listimport/listimport.pixy b/pages/listimport/listimport.pixy index e237e2a7..eaac0fbe 100644 --- a/pages/listimport/listimport.pixy +++ b/pages/listimport/listimport.pixy @@ -1,13 +1,15 @@ component ImportLists(user *arn.User) - .buttons.buttons-vertical - if user.Accounts.AniList.Nick != "" - .widget-input - a.button.mountable.ajax(href="/import/anilist/animelist") - Icon("download") - span Import AniList - - if user.Accounts.MyAnimeList.Nick != "" - .widget-input - a.button.mountable.ajax(href="/import/myanimelist/animelist") - Icon("download") - span Import MyAnimeList \ No newline at end of file + if user.Accounts.AniList.Nick != "" + label AniList: + + .widget-input + a.button.mountable.ajax(href="/import/anilist/animelist") + Icon("download") + span Import AniList + + if user.Accounts.MyAnimeList.Nick != "" + label MyAnimeList: + .widget-input + a.button.mountable.ajax(href="/import/myanimelist/animelist") + Icon("download") + span Import MyAnimeList \ No newline at end of file diff --git a/pages/newsoundtrack/newsoundtrack.pixy b/pages/newsoundtrack/newsoundtrack.pixy index e1a85517..9d29aea0 100644 --- a/pages/newsoundtrack/newsoundtrack.pixy +++ b/pages/newsoundtrack/newsoundtrack.pixy @@ -1,5 +1,5 @@ component NewSoundTrack(user *arn.User) - .widgets + .widget-form .widget h1 New soundtrack diff --git a/pages/newthread/newthread.pixy b/pages/newthread/newthread.pixy index 08bfb5ef..479864bf 100644 --- a/pages/newthread/newthread.pixy +++ b/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") - Icon("check") - span Create thread \ No newline at end of file + .buttons + button.action(data-action="createThread", data-trigger="click") + Icon("check") + span Create thread \ No newline at end of file diff --git a/pages/profile/profile.scarlet b/pages/profile/profile.scarlet index 7ec638c4..d232cf1f 100644 --- a/pages/profile/profile.scarlet +++ b/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 diff --git a/pages/search/search.pixy b/pages/search/search.pixy index b6ea2c5a..8fd64e6b 100644 --- a/pages/search/search.pixy +++ b/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) \ No newline at end of file + 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. \ No newline at end of file diff --git a/pages/settings/settings.pixy b/pages/settings/settings.pixy index 300f5f4c..f3e2fa01 100644 --- a/pages/settings/settings.pixy +++ b/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 diff --git a/pages/settings/settings.scarlet b/pages/settings/settings.scarlet index 301a0549..a773b757 100644 --- a/pages/settings/settings.scarlet +++ b/pages/settings/settings.scarlet @@ -1,2 +1,4 @@ -.social-account-button - margin-bottom 1rem \ No newline at end of file +.widget-input + button, + .button + margin-bottom 1rem \ No newline at end of file diff --git a/styles/include/config.scarlet b/styles/include/config.scarlet index 7ee83f3e..e108721a 100644 --- a/styles/include/config.scarlet +++ b/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 diff --git a/styles/widgets.scarlet b/styles/widgets.scarlet index 33940d6b..e60792a6 100644 --- a/styles/widgets.scarlet +++ b/styles/widgets.scarlet @@ -1,21 +1,23 @@ .widgets - horizontal-wrap - justify-content space-around + display grid + 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 - width 100% - padding 0.25rem - max-width 400px - -> 1240px - .widget - max-width 30vw - -< 810px - .widget - max-width 600px + margin-bottom content-padding .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 \ No newline at end of file + margin 1rem 0 !important + +.widget-form + width 100% + max-width 650px + margin 0 auto \ No newline at end of file