From 0822c8f8292934e592c57c4cb90d9e0bd548d377 Mon Sep 17 00:00:00 2001 From: Eduard Urbach Date: Sun, 18 Jun 2017 20:22:43 +0200 Subject: [PATCH] Settings page (visual only) --- pages/dashboard/dashboard.pixy | 68 +++++++++---------- pages/settings/settings.pixy | 24 ++++++- styles/forms.scarlet | 11 ++- styles/icons.scarlet | 3 + .../widgets.scarlet | 22 +++--- 5 files changed, 80 insertions(+), 48 deletions(-) rename pages/dashboard/dashboard.scarlet => styles/widgets.scarlet (69%) diff --git a/pages/dashboard/dashboard.pixy b/pages/dashboard/dashboard.pixy index 20218c97..370fca9f 100644 --- a/pages/dashboard/dashboard.pixy +++ b/pages/dashboard/dashboard.pixy @@ -1,78 +1,76 @@ component Dashboard(posts []*arn.Post) h2.page-title Dash - .dashboard - .dashboard-widget - h3 Schedule + .widgets + .widget + h3.widget-title Schedule for i := 1; i <= 5; i++ - .dashboard-event - .dashboard-event-text + .widget-element + .widget-element-text Icon("calendar-o") span ... - .dashboard-widget - h3 Forums + .widget + h3.widget-title Forums each post in posts - a.dashboard-event.ajax(href=post.Link()) - //- .dashboard-event-author - //- AvatarNoLink(post.Author()) - .dashboard-event-text + a.widget-element.ajax(href=post.Link()) + .widget-element-text Icon(arn.GetForumIcon(post.Thread().Tags[0])) span= post.Thread().Title - .dashboard-widget - h3 Groups + .widget + h3.widget-title Groups for i := 1; i <= 5; i++ - .dashboard-event - .dashboard-event-text + .widget-element + .widget-element-text Icon("group") span ... - .dashboard-widget - h3 Messages + .widget + h3.widget-title Messages for i := 1; i <= 5; i++ - .dashboard-event - .dashboard-event-text + .widget-element + .widget-element-text Icon("comment") span ... - .dashboard-widget - h3 Contacts + .widget + h3.widget-title Contacts for i := 1; i <= 5; i++ - .dashboard-event - .dashboard-event-text + .widget-element + .widget-element-text Icon("address-card") span ... - .dashboard-widget - h3 Follow + .widget + h3.widget-title Follow - a.dashboard-event(href="https://discord.gg/0kimAmMCeXGXuzNF", target="_blank", rel="noopener") - .dashboard-event-text + a.widget-element(href="https://discord.gg/0kimAmMCeXGXuzNF", target="_blank", rel="noopener") + .widget-element-text Icon("microphone") span Discord - a.dashboard-event(href="https://www.facebook.com/animenotifier", target="_blank", rel="noopener") - .dashboard-event-text + a.widget-element(href="https://www.facebook.com/animenotifier", target="_blank", rel="noopener") + .widget-element-text Icon("facebook") span Facebook - a.dashboard-event(href="https://twitter.com/animenotifier", target="_blank", rel="noopener") - .dashboard-event-text + a.widget-element(href="https://twitter.com/animenotifier", target="_blank", rel="noopener") + .widget-element-text Icon("twitter") span Twitter - a.dashboard-event(href="https://plus.google.com/+AnimeReleaseNotifierOfficial", target="_blank", rel="noopener") - .dashboard-event-text + a.widget-element(href="https://plus.google.com/+AnimeReleaseNotifierOfficial", target="_blank", rel="noopener") + .widget-element-text Icon("google-plus") span Google+ - a.dashboard-event(href="https://github.com/animenotifier/notify.moe", target="_blank", rel="noopener") - .dashboard-event-text + a.widget-element(href="https://github.com/animenotifier/notify.moe", target="_blank", rel="noopener") + .widget-element-text Icon("github") span GitHub \ No newline at end of file diff --git a/pages/settings/settings.pixy b/pages/settings/settings.pixy index 64bb800e..ab2d5fe0 100644 --- a/pages/settings/settings.pixy +++ b/pages/settings/settings.pixy @@ -1,3 +1,25 @@ component Settings(user *arn.User) h2.page-title Settings - input(type="text", value=user.Nick) \ No newline at end of file + .widgets + .widget + h3.widget-title + Icon("user") + span Personal + + InputText("nick", user.Nick, "Username", "Your username on notify.moe") + InputText("tagline", user.Tagline, "Tagline", "Text that appears below your username") + InputText("website", user.Website, "website", "Your homepage") + + .widget + h3.widget-title + Icon("cubes") + span Accounts + + InputText("accounts.anilist.nick", user.Accounts.AniList.Nick, "AniList", "Your username on anilist.co") + InputText("accounts.myanimelist.nick", user.Accounts.MyAnimeList.Nick, "MyAnimeList", "Your username on myanimelist.net") + InputText("accounts.kitsu.nick", user.Accounts.Kitsu.Nick, "Kitsu", "Your username on kitsu.io") + +component InputText(id string, value string, label string, placeholder string) + .widget-input + label(for=id)= label + ":" + input.widget-element(id=id, type="text", value=value, placeholder=placeholder) \ No newline at end of file diff --git a/styles/forms.scarlet b/styles/forms.scarlet index c864e926..49d05b47 100644 --- a/styles/forms.scarlet +++ b/styles/forms.scarlet @@ -8,13 +8,15 @@ input, textarea, button, select input, textarea border ui-border - background-color white + background white box-shadow none + :focus color black - border 1px solid main-color + border 1px solid main-color !important // TODO: Replace with alpha(main-color, 20%) function box-shadow 0 0 6px rgba(248, 165, 130, 0.2) + :disabled ui-disabled @@ -32,6 +34,11 @@ button, select // // box-shadow 0 0 6px alpha(mainColor, 20%) // border 1px solid main-color +label + width 100% + padding 0.5rem 0 + text-align left + // input[type="submit"]:hover, // button:hover // cursor pointer diff --git a/styles/icons.scarlet b/styles/icons.scarlet index 350a0a87..dd1085d2 100644 --- a/styles/icons.scarlet +++ b/styles/icons.scarlet @@ -7,4 +7,7 @@ fill currentColor .raw-icon + width 1em + height 1em + min-width 1em fill currentColor \ No newline at end of file diff --git a/pages/dashboard/dashboard.scarlet b/styles/widgets.scarlet similarity index 69% rename from pages/dashboard/dashboard.scarlet rename to styles/widgets.scarlet index 677f98ed..5f07d687 100644 --- a/pages/dashboard/dashboard.scarlet +++ b/styles/widgets.scarlet @@ -1,15 +1,15 @@ -.dashboard +.widgets horizontal-wrap justify-content space-around -.dashboard-widget +.widget vertical align-items center width 100% padding 0.25rem max-width 600px -.dashboard-event +.widget-element vertical-wrap ui-element margin-bottom 1rem @@ -17,14 +17,16 @@ width 100% max-width 700px -.dashboard-event-author - horizontal - justify-content center - width 100% - -.dashboard-event-text +.widget-element-text horizontal clip-long-text justify-content flex-start align-items center - width 100% \ No newline at end of file + width 100% + +.widget-input + vertical + width 100% + +.widget-title + // \ No newline at end of file