student page design

app/views/clas/student.scala

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

ui/site/css/_clas.scss

@@ -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;
     }
   }