Improved tooltips

This commit is contained in:
Eduard Urbach 2018-04-18 16:27:08 +02:00
parent 976563ed60
commit 334be053fe
9 changed files with 46 additions and 39 deletions

View File

@ -23,7 +23,7 @@ component Postable(post arn.Postable, user *arn.User, highlightAuthorID string)
Icon("close")
span Cancel
.post-date.utc-date(data-date=post.Created())
.post-date.utc-date.no-tip(data-date=post.Created())
.post-toolbar(id="toolbar-" + post.ID())
.spacer

View File

@ -1,5 +1,5 @@
component Rating(value float64, userCount int, user *arn.User)
if user == nil
.anime-rating(title="Rated by " + arn.Plural(userCount, "user"))= fmt.Sprintf("%.1f", value)
.anime-rating.tip(aria-label="Rated by " + arn.Plural(userCount, "user"))= fmt.Sprintf("%.1f", value)
else
.anime-rating(title="Rated by " + arn.Plural(userCount, "user"))= fmt.Sprintf("%." + strconv.Itoa(user.Settings().Format.RatingsPrecision) + "f", value)
.anime-rating.tip(aria-label="Rated by " + arn.Plural(userCount, "user"))= fmt.Sprintf("%." + strconv.Itoa(user.Settings().Format.RatingsPrecision) + "f", value)

View File

@ -78,6 +78,7 @@ component AnimeRatings(anime *arn.Anime, user *arn.User)
h3.anime-section-name Ratings
table.anime-info-table
tbody
tr.mountable(data-mountable-type="info")
td.anime-info-key
if anime.Status == "upcoming"

View File

@ -58,8 +58,15 @@
margin 0.25rem
.anime-info-table
vertical
margin 0
tr
horizontal
.anime-info-key
flex 1
.anime-info-value
text-align right
@ -152,9 +159,8 @@
margin-top 0.6rem
margin-bottom 0.4rem
< 800px
.anime-rating-categories
vertical
.anime-rating
// ...
.anime-friends
.user-avatars

View File

@ -3,7 +3,7 @@ component AnimeListPage(animeListItems []*arn.AnimeListItem, nextIndex int, view
if user.ID != viewUser.ID
.anime-list-user-avatar
Avatar(viewUser)
AvatarNoTip(viewUser)
StatusTabs("/+" + viewUser.Nick + "/animelist")
AnimeListItems(animeListItems, nextIndex, viewUser, user)

View File

@ -70,8 +70,8 @@
.edit-log-date
display flex
align-items center
opacity 0.5
flex-basis 120px
half-opacity-text
.edit-log-empty
opacity 0.25

View File

@ -23,13 +23,7 @@
margin 0
.quote-footer
text-align center
margin-bottom 1rem
margin-top 0.4rem
font-size 0.9em
span
opacity 0.65
media-footer
blockquote
flex-grow 1

View File

@ -123,8 +123,14 @@ export function displayDate(element: HTMLElement, now: Date) {
}
element.innerText = remainingString
let tooltip = dayNames[startDate.getDay()] + " " + startTime
element.title = dayNames[startDate.getDay()] + " " + startTime
if(element.classList.contains("no-tip")) {
element.title = tooltip
} else {
element.setAttribute("aria-label", tooltip)
element.classList.add("tip")
}
}
export function displayTime(element: HTMLElement, now: Date) {

View File

@ -5,4 +5,4 @@ mixin media-footer
font-size 0.9em
span
opacity 0.65
color hsla(text-color-h, text-color-s, text-color-l, 0.65)