Added media icons to sidebar (closes #52)
This commit is contained in:
parent
7f8c582917
commit
6ced454e97
@ -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
36
mixins/SocialMedia.pixy
Normal 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")
|
@ -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
|
||||||
|
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
component FrontPage
|
component FrontPage
|
||||||
.frontpage-background
|
.frontpage-background
|
||||||
|
|
||||||
.frontpage
|
.frontpage
|
||||||
h1.mountable notify.moe
|
h1.mountable notify.moe
|
||||||
|
|
||||||
@ -8,32 +8,11 @@ component FrontPage
|
|||||||
|
|
||||||
Login
|
Login
|
||||||
Footer
|
Footer
|
||||||
|
|
||||||
video.bg-video(autoplay="autoplay", loop="loop")
|
video.bg-video(autoplay="autoplay", loop="loop")
|
||||||
source(src="//s1.webmshare.com/nZVby.webm", type="video/webm")
|
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")
|
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
|
|
@ -1,6 +1,6 @@
|
|||||||
component Inventory(inventory *arn.Inventory, viewUser *arn.User, user *arn.User)
|
component Inventory(inventory *arn.Inventory, viewUser *arn.User, user *arn.User)
|
||||||
ShopTabs(user)
|
ShopTabs(user)
|
||||||
|
|
||||||
h1.page-title Inventory
|
h1.page-title Inventory
|
||||||
|
|
||||||
.inventory(data-api="/api/inventory/" + viewUser.ID)
|
.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)
|
Icon(slot.Item().Icon)
|
||||||
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.
|
@ -8,8 +8,8 @@ component ProfileStats(stats *utils.UserStats, viewUser *arn.User, user *arn.Use
|
|||||||
Icon("pie-chart")
|
Icon("pie-chart")
|
||||||
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.
|
@ -34,16 +34,16 @@ 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)
|
||||||
span by
|
span by
|
||||||
span= track.EditedByUser().Nick
|
span= track.EditedByUser().Nick
|
||||||
else
|
else
|
||||||
span Posted
|
span Posted
|
||||||
span.utc-date(data-date=track.Created)
|
span.utc-date(data-date=track.Created)
|
||||||
span by
|
span by
|
||||||
span= track.Creator().Nick
|
span= track.Creator().Nick
|
||||||
|
|
||||||
span .
|
span .
|
||||||
|
11
styles/footer.scarlet
Normal file
11
styles/footer.scarlet
Normal 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
52
styles/social-media.scarlet
Normal 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))
|
Loading…
Reference in New Issue
Block a user