improve class student dashboard

app/views/clas/bits.scala

@@ -6,7 +6,7 @@ import lila.app.templating.Environment._
 import lila.app.ui.ScalatagsTemplate._
 import lila.clas.{ Clas, Student }
 
-object bits {
+private object bits {
 
   def layout(
       title: String,
@@ -51,4 +51,7 @@ object bits {
       " ",
       momentFromNowOnce(archived.at)
     )
+
+  val sortNumberTh = th(attr("data-sort-method") := "number")
+  val dataSort     = attr("data-sort")
 }

app/views/clas/studentDashboard.scala

@@ -9,6 +9,8 @@ import lila.common.String.html.richText
 
 object studentDashboard {
 
+  import bits.{ dataSort, sortNumberTh }
+
   def apply(
       c: Clas,
       teachers: List[Teacher.WithUser],
@@ -16,15 +18,15 @@ object studentDashboard {
   )(implicit ctx: Context) =
     bits.layout(c.name, Left(c withStudents Nil))(
       cls := "clas-show dashboard dashboard-student",
-      div(cls := "box__top")(
-        h1(dataIcon := "f", cls := "text")(c.name)
+      div(cls := "clas-show__top")(
+        h1(dataIcon := "f", cls := "text")(c.name),
+        c.desc.trim.nonEmpty option div(cls := "clas-show__desc")(richText(c.desc))
       ),
       c.archived map { archived =>
         div(cls := "box__pad")(
           div(cls := "clas-show__archived archived")(bits.showArchived(archived))
         )
       },
-      c.desc.trim.nonEmpty option div(cls := "clas-show__overview")(richText(c.desc)),
       table(cls := "slist slist-pad teachers")(
         thead(
           tr(
@@ -61,13 +63,13 @@ object studentDashboard {
     )
 
   def studentList(students: List[Student.WithUser])(implicit ctx: Context) =
-    table(cls := "slist slist-pad")(
+    table(cls := "slist slist-pad sortable")(
       thead(
         tr(
-          th("Students"),
-          th("Rating"),
-          th("Games"),
-          th("Puzzles"),
+          th(attr("data-sort-default") := "1")("Students"),
+          sortNumberTh("Rating"),
+          sortNumberTh("Games"),
+          sortNumberTh("Puzzles"),
           th
         )
       ),
@@ -84,7 +86,9 @@ object studentDashboard {
                   ).some
                 )
               ),
-              td(cls := "rating")(user.best3Perfs.map { showPerfRating(user, _) }),
+              td(dataSort := user.perfs.bestRating, cls := "rating")(cls := "rating")(user.best3Perfs.map {
+                showPerfRating(user, _)
+              }),
               td(user.count.game.localize),
               td(user.perfs.puzzle.nb.localize),
               challengeTd(user)
@@ -94,12 +98,14 @@ object studentDashboard {
     )
 
   private def challengeTd(user: lila.user.User)(implicit ctx: Context) =
-    td(
-      a(
-        dataIcon := "U",
-        cls := "button button-empty",
-        title := trans.challengeToPlay.txt(),
-        href := s"${routes.Lobby.home()}?user=${user.username}#friend"
+    if (ctx.me.exists(user.is)) td
+    else
+      td(
+        a(
+          dataIcon := "U",
+          cls := "button button-empty text",
+          title := trans.challengeToPlay.txt(),
+          href := s"${routes.Lobby.home()}?user=${user.username}#friend"
+        )(trans.play())
       )
-    )
 }

app/views/clas/teacherDashboard.scala

@@ -10,6 +10,8 @@ import lila.common.String.html.richText
 
 object teacherDashboard {
 
+  import bits.{ dataSort, sortNumberTh }
+
   private[clas] def layout(
       c: Clas,
       students: List[Student.WithUser],
@@ -197,7 +199,4 @@ object teacherDashboard {
         )
       )
     )
-
-  private val sortNumberTh = th(attr("data-sort-method") := "number")
-  private val dataSort     = attr("data-sort")
 }

modules/user/src/main/User.scala

@@ -108,6 +108,7 @@ case class User(
   def createdSinceDays(days: Int) = createdAt isBefore DateTime.now.minusDays(days)
 
   def is(name: String) = id == User.normalize(name)
+  def is(other: User)  = id == other.id
 
   def isBot = title has Title.BOT
   def noBot = !isBot

ui/site/css/_clas.scss

@@ -40,6 +40,10 @@ $c-bg-clas-over-dim: mix($c-bg-clas-over, $c-bg-clas, 80%);
   }
 }
 
+.slist tbody tr:nth-child(2n) {
+  background: mix($c-bg-box, $c-bg-clas, 93%);
+}
+
 .clas-index {
   .box__top {
     background: $c-bg-clas;
@@ -131,9 +135,13 @@ $c-bg-clas-over-dim: mix($c-bg-clas-over, $c-bg-clas, 80%);
     }
     .button {
       font-size: 1.2em;
+      color: $c-font-clas;
     }
     .user-link {
       @extend %flex-center;
+      &:hover {
+        color: $c-font-clas;
+      }
       span {
         pointer-events: none;
       }
@@ -191,6 +199,12 @@ $c-bg-clas-over-dim: mix($c-bg-clas-over, $c-bg-clas, 80%);
   }
 
   &-student {
+    .clas-show__top {
+      @extend %box-padding;
+      h1 {
+        margin: .5em 0;
+      }
+    }
     .teachers {
       margin-bottom: 2em;
     }