web/notify.moe
Code Issues Pull Requests Activity

Added media icons to sidebar (closes #52)

Browse Source
This commit is contained in:
Eduard Urbach 2017-11-13 16:46:33 +01:00
parent 7f8c582917
commit 6ced454e97
10 changed files with 116 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
jobs/sync-jikan/sync-jikan.go → jobs/sync-jikan-anime/sync-jikan-anime.go
View File

3
layout/sidebar/sidebar.pixy
View File

@ -51,6 +51,9 @@ component Sidebar(user *arn.User)
else
SidebarButton("Login", "/login", "sign-in")
.sidebar-social-media
SocialMediaButtons
component SidebarButton(name string, target string, icon string)
a.sidebar-link.ajax(href=target, aria-label=name, data-bubble="true")
.sidebar-button

36
mixins/SocialMedia.pixy Normal file
View File

@ -0,0 +1,36 @@
component SocialMediaLinks
a.footer-element(href="https://discord.gg/0kimAmMCeXGXuzNF", target="_blank", rel="noopener")
Icon("microphone")
span Discord
a.footer-element(href="https://www.facebook.com/animenotifier", target="_blank", rel="noopener")
Icon("facebook")
span Facebook
a.footer-element(href="https://twitter.com/animenotifier", target="_blank", rel="noopener")
Icon("twitter")
span Twitter
a.footer-element(href="https://plus.google.com/+AnimeReleaseNotifierOfficial", target="_blank", rel="noopener")
Icon("google-plus")
span Google+
a.footer-element(href="https://github.com/animenotifier/notify.moe", target="_blank", rel="noopener")
Icon("github")
span GitHub
component SocialMediaButtons
a.social-media-button.circle-1(href="https://discord.gg/0kimAmMCeXGXuzNF", title="Discord", target="_blank", rel="noopener")
RawIcon("microphone")
a.social-media-button.circle-2(href="https://www.facebook.com/animenotifier", title="Facebook", target="_blank", rel="noopener")
RawIcon("facebook-square")
a.social-media-button.circle-3(href="https://twitter.com/animenotifier", title="Twitter", target="_blank", rel="noopener")
RawIcon("twitter-square")
a.social-media-button.circle-4(href="https://plus.google.com/+AnimeReleaseNotifierOfficial", title="Google+", target="_blank", rel="noopener")
RawIcon("google-plus-square")
a.social-media-button.circle-5(href="https://github.com/animenotifier/notify.moe", title="GitHub", target="_blank", rel="noopener")
RawIcon("github")

11
pages/anime/anime.scarlet
View File

@ -189,17 +189,6 @@
.user-avatars
justify-content flex-start
.footer
font-size 0.8rem
opacity 0.7
margin-top 0.5rem
&.mountable
opacity 0 !important
&.mounted
opacity 0.7 !important
.relations
horizontal-wrap

29
pages/frontpage/frontpage.pixy
View File

@ -1,6 +1,6 @@
component FrontPage
.frontpage-background
.frontpage
h1.mountable notify.moe
@ -8,32 +8,11 @@ component FrontPage
Login
Footer
video.bg-video(autoplay="autoplay", loop="loop")
source(src="//s1.webmshare.com/nZVby.webm", type="video/webm")
source(src="//cdn-e2.streamable.com/video/mp4/e5mx7.mp4?token=1500414089_8b2b3b0665984dcf4dc8d33e534bc1c8881b2da1", type="video/mp4")
component Footer
.footer.text-center.mountable
SocialMediaLinks
component SocialMediaLinks
a.footer-element(href="https://discord.gg/0kimAmMCeXGXuzNF", target="_blank", rel="noopener")
Icon("microphone")
span Discord
a.footer-element(href="https://www.facebook.com/animenotifier", target="_blank", rel="noopener")
Icon("facebook")
span Facebook
a.footer-element(href="https://twitter.com/animenotifier", target="_blank", rel="noopener")
Icon("twitter")
span Twitter
a.footer-element(href="https://plus.google.com/+AnimeReleaseNotifierOfficial", target="_blank", rel="noopener")
Icon("google-plus")
span Google+
a.footer-element(href="https://github.com/animenotifier/notify.moe", target="_blank", rel="noopener")
Icon("github")
span GitHub
.footer.mountable
SocialMediaLinks

6
pages/inventory/inventory.pixy
View File

@ -1,6 +1,6 @@
component Inventory(inventory *arn.Inventory, viewUser *arn.User, user *arn.User)
ShopTabs(user)
h1.page-title Inventory
.inventory(data-api="/api/inventory/" + viewUser.ID)
@ -13,6 +13,6 @@ component Inventory(inventory *arn.Inventory, viewUser *arn.User, user *arn.User
Icon(slot.Item().Icon)
if slot.Quantity > 1
.inventory-slot-quantity= slot.Quantity
.footer.text-center.mountable
.footer.mountable
p You can consume items by double-clicking them.

4
pages/profile/stats.pixy
View File

@ -8,8 +8,8 @@ component ProfileStats(stats *utils.UserStats, viewUser *arn.User, user *arn.Use
Icon("pie-chart")
span= pie.Title
PieChart(pie.Slices)
.footer.text-center
.footer
span= viewUser.Nick + " spent "
span= int(stats.AnimeWatchingTime / time.Hour / 24)
span days watching anime.

10
pages/soundtrack/soundtrack.pixy
View File

@ -34,16 +34,16 @@ component Track(track *arn.SoundTrack, user *arn.User)
.tags
each tag in track.Tags
.tag= tag
.footer.text-center.mountable
.footer.mountable
if track.EditedBy != ""
span Edited
span Edited
span.utc-date(data-date=track.Edited)
span by
span by
span= track.EditedByUser().Nick
else
span Posted
span Posted
span.utc-date(data-date=track.Created)
span by
span by
span= track.Creator().Nick
span .

11
styles/footer.scarlet Normal file
View File

@ -0,0 +1,11 @@
.footer
text-align center
font-size 0.8rem
opacity 0.7
margin-top 0.5rem
&.mountable
opacity 0 !important
&.mounted
opacity 0.7 !important

52
styles/social-media.scarlet Normal file
View File

@ -0,0 +1,52 @@
.sidebar-social-media
horizontal
justify-content space-around
padding 0.6rem 0
border-top 1px solid rgba(0, 0, 0, 0.1)
.social-media-button
opacity 0.25
color text-color
:hover
transform scale(1.1)
opacity 1
// .sidebar-social-media
// position relative
// width 6rem
// height 6rem
// // border dashed 1px
// // border-radius 50%
// margin content-padding auto
// default-transition
// :hover
// transform scale(1.2)
// .social-media-button
// display block
// position absolute
// left 50%
// top 50%
// width 4rem
// height 4rem
// margin -0.5rem
// color text-color
// circle-start = 160deg
// .circle-1
// transform rotate(circle-start) translate(2rem) rotate(calc(circle-start * -1))
// .circle-2
// transform rotate(calc(circle-start + 72deg)) translate(2rem) rotate(calc((circle-start + 72deg) * -1))
// .circle-3
// transform rotate(calc(circle-start + 144deg)) translate(2rem) rotate(calc((circle-start + 144deg) * -1))
// .circle-4
// transform rotate(calc(circle-start + 216deg)) translate(2rem) rotate(calc((circle-start + 216deg) * -1))
// .circle-5
// transform rotate(calc(circle-start + 288deg)) translate(2rem) rotate(calc((circle-start + 288deg) * -1))