student page design
This commit is contained in:
parent
915a0fd093
commit
08a48b4213
|
@ -17,21 +17,22 @@ object student {
|
|||
)(implicit ctx: Context) =
|
||||
bits.layout(s.user.username, Left(clas))(
|
||||
cls := "student-show",
|
||||
div(cls := "box__top")(
|
||||
div(cls := "student-show__title", dataIcon := "r")(
|
||||
div(
|
||||
h1(s.user.username),
|
||||
p(
|
||||
"Invited to ",
|
||||
a(href := routes.Clas.show(clas.id.value))(clas.name),
|
||||
" by ",
|
||||
userIdLink(s.student.created.by.value.some),
|
||||
" ",
|
||||
momentFromNowOnce(s.student.created.at)
|
||||
)
|
||||
div(cls := "student-show__top")(
|
||||
h1(dataIcon := "r")(
|
||||
span(
|
||||
strong(s.user.username),
|
||||
em(s.student.realName)
|
||||
)
|
||||
),
|
||||
div(cls := "box__top__actions")(
|
||||
div(cls := "student-show__top__meta")(
|
||||
p(
|
||||
"Invited to ",
|
||||
a(href := routes.Clas.show(clas.id.value))(clas.name),
|
||||
" by ",
|
||||
userIdLink(s.student.created.by.value.some, withOnline = false),
|
||||
" ",
|
||||
momentFromNowOnce(s.student.created.at)
|
||||
),
|
||||
a(
|
||||
href := routes.User.show(s.user.username),
|
||||
cls := "button button-empty",
|
||||
|
@ -41,8 +42,6 @@ object student {
|
|||
),
|
||||
div(cls := "box__pad")(
|
||||
standardFlash(),
|
||||
div(
|
||||
),
|
||||
s.student.archived map { archived =>
|
||||
div(cls := "student-show__archived")(
|
||||
div(
|
||||
|
@ -102,6 +101,7 @@ object student {
|
|||
thead(
|
||||
tr(
|
||||
th(attr("data-sort-default") := "1")(title),
|
||||
th("Real name"),
|
||||
sortNumberTh("Rating"),
|
||||
sortNumberTh("Games"),
|
||||
sortNumberTh("Active")
|
||||
|
@ -109,7 +109,7 @@ object student {
|
|||
),
|
||||
tbody(
|
||||
students.sortBy(_.user.username).map {
|
||||
case Student.WithUser(_, user) =>
|
||||
case Student.WithUser(student, user) =>
|
||||
tr(
|
||||
td(
|
||||
if (teacher)
|
||||
|
@ -118,6 +118,7 @@ object student {
|
|||
)
|
||||
else userLink(user)
|
||||
),
|
||||
td(student.realName),
|
||||
td(user.perfs.bestRating),
|
||||
td(user.count.game.localize),
|
||||
td(dataSort := user.seenAt.map(_.getMillis.toString))(user.seenAt.map(momentFromNowOnce))
|
||||
|
|
|
@ -65,18 +65,56 @@
|
|||
&__empty {
|
||||
margin-bottom: 8em;
|
||||
}
|
||||
td:first-child {
|
||||
font-weight: bold;
|
||||
}
|
||||
td:nth-child(2) {
|
||||
color: $c-font-dim;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.student-show {
|
||||
|
||||
$top-background: rgb(127, 90, 240);
|
||||
$top-font: white;
|
||||
$top-font-dim: mix($top-font, $top-background, 80%);
|
||||
|
||||
padding-bottom: 3em;
|
||||
|
||||
&__title {
|
||||
@extend %flex-center;
|
||||
&::before {
|
||||
font-size: 3.5em;
|
||||
margin-right: .4em;
|
||||
&__top {
|
||||
padding: calc(5vh - 1rem) var(--box-padding);
|
||||
background: $top-background;
|
||||
margin-bottom: 3em;
|
||||
&, a, .button, .title {
|
||||
color: $top-font !important;
|
||||
}
|
||||
a:not(.button) {
|
||||
font-weight: bold;
|
||||
border-bottom: 1px dotted $top-font-dim;
|
||||
}
|
||||
h1 {
|
||||
@extend %flex-center;
|
||||
margin-bottom: .6em;
|
||||
&::before {
|
||||
font-size: 2.5em;
|
||||
margin-right: .4em;
|
||||
color: $top-font-dim;
|
||||
}
|
||||
strong {
|
||||
display: block;
|
||||
}
|
||||
em {
|
||||
@extend %roboto;
|
||||
color: $top-font-dim;
|
||||
}
|
||||
}
|
||||
&__meta {
|
||||
@extend %flex-between;
|
||||
justify-items: center;
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -84,6 +122,7 @@
|
|||
@extend %box-radius, %flex-between;
|
||||
background: fade-out($c-primary, .8);
|
||||
padding: 1em 2em;
|
||||
margin: 1em 0 2em 0;
|
||||
p {
|
||||
margin: 0;
|
||||
&::before {
|
||||
|
@ -97,6 +136,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
.activity {
|
||||
margin: 1em 0 2em 0;
|
||||
}
|
||||
|
||||
&__archived {
|
||||
@extend %box-radius, %flex-between;
|
||||
background: $c-bg-zebra2;
|
||||
|
@ -119,7 +162,7 @@
|
|||
align-items: center;
|
||||
|
||||
h2 {
|
||||
margin: 1em 0;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue