Added media icons to sidebar (closes #52)

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

View File

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

View File

@ -189,17 +189,6 @@
.user-avatars .user-avatars
justify-content flex-start 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 .relations
horizontal-wrap horizontal-wrap

View File

@ -14,26 +14,5 @@ component FrontPage
source(src="//cdn-e2.streamable.com/video/mp4/e5mx7.mp4?token=1500414089_8b2b3b0665984dcf4dc8d33e534bc1c8881b2da1", type="video/mp4") source(src="//cdn-e2.streamable.com/video/mp4/e5mx7.mp4?token=1500414089_8b2b3b0665984dcf4dc8d33e534bc1c8881b2da1", type="video/mp4")
component Footer component Footer
.footer.text-center.mountable .footer.mountable
SocialMediaLinks 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

View File

@ -14,5 +14,5 @@ component Inventory(inventory *arn.Inventory, viewUser *arn.User, user *arn.User
if slot.Quantity > 1 if slot.Quantity > 1
.inventory-slot-quantity= slot.Quantity .inventory-slot-quantity= slot.Quantity
.footer.text-center.mountable .footer.mountable
p You can consume items by double-clicking them. p You can consume items by double-clicking them.

View File

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

View File

@ -34,7 +34,7 @@ component Track(track *arn.SoundTrack, user *arn.User)
.tags .tags
each tag in track.Tags each tag in track.Tags
.tag= tag .tag= tag
.footer.text-center.mountable .footer.mountable
if track.EditedBy != "" if track.EditedBy != ""
span Edited span Edited
span.utc-date(data-date=track.Edited) span.utc-date(data-date=track.Edited)

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

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))