responsive /study

app/views/study/bits.scala

@@ -33,17 +33,18 @@ object bits {
 
   def widget(s: lila.study.Study.WithChaptersAndLiked, tag: Tag = h2)(implicit ctx: Context) = frag(
     a(cls := "overlay", href := routes.Study.show(s.study.id.value)),
-    div(cls := "top")(
-      iconTag("4")(cls := "icon"),
-      tag(cls := "study-name")(s.study.name.value),
-      span(
-        iconTag(if (s.liked) "" else ""),
-        " ",
-        s.study.likes.value,
-        " • ",
-        usernameOrId(s.study.ownerId),
-        " • ",
-        momentFromNow(s.study.createdAt)
+    div(cls := "top", dataIcon := "4")(
+      div(
+        tag(cls := "study-name")(s.study.name.value),
+        span(
+          iconTag(if (s.liked) "" else ""),
+          " ",
+          s.study.likes.value,
+          " • ",
+          usernameOrId(s.study.ownerId),
+          " • ",
+          momentFromNow(s.study.createdAt)
+        )
       )
     ),
     div(cls := "body")(

ui/analyse/css/study/_index.scss

@@ -6,13 +6,16 @@ $top-height: 3.2rem;
   .box__top {
     @extend %flex-center;
     .search {
-      flex: 1 1 auto;
+      flex: 2 1 auto;
       display: flex;
       input {
         @extend %box-radius-left;
         flex: 1 1 100%;
         height: $top-height;
-        font-size: 1.2em;
+        font-size: 1.1em;
+        @include breakpoint($mq-xx-small) {
+          font-size: 1.2em;
+        }
       }
       .button {
         @extend %box-radius-right;
@@ -21,6 +24,7 @@ $top-height: 3.2rem;
       }
     }
     .mselect {
+      flex: 1 1 auto;
       font-size: 1.2em;
       &__label::after {
         margin-left: .6em;
@@ -35,7 +39,7 @@ $top-height: 3.2rem;
     .mselect__label {
       height: 100%;
     }
-    .new-study .button{
+    .new-study .button {
       height: $top-height;
       padding: 0 1em;
       &::before {

ui/analyse/css/study/_list-widget.scss

@@ -1,16 +1,18 @@
 $c-study: $c-primary;
+
 .studies {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax($viewport-min-width, 1fr));
+  @include breakpoint($mq-medium) {
+    grid-template-columns: repeat(auto-fill, minmax(45ch, 1fr));
+  }
   .study {
+    position: relative;
     border: $border;
     border-width: 0 1px 1px 0;
     padding: 1em .6em 1em 1.3em;
-    position: relative;
+    overflow: hidden;
     @include transition();
-    &:hover {
-      background: mix($c-study, $c-bg-box, 10%);
-    }
     .overlay {
       @extend %link-overlay;
     }
@@ -36,12 +38,7 @@ $c-study: $c-primary;
       }
     }
     .top {
-      @extend %roboto;
-      font-weight: normal;
-      display: block;
-      position: relative;
-      height: 60px;
-      padding-left: 54px;
+      @extend %flex-center-nowrap, %break-word, %roboto;
       .study-name {
         @extend %nowrap-hidden;
         font-size: 1.5em;
@@ -56,16 +53,20 @@ $c-study: $c-primary;
         display: block;
         color: $c-font-dim;
       }
-      .icon {
-        position: absolute;
-        top: 0;
-        left: 0;
+      &::before {
+        color: mix($c-link, $c-bg-box, 80%);
+        font-size: 4em;
+        margin-right: .2em;
+        @include transition();
+        @include breakpoint($mq-not-xx-small) {
+          display: none;
+        }
       }
-      .icon::before {
-        color: $c-study;
-        font-size: 38px;
-        line-height: 45px;
-        opacity: .8;
+    }
+    &:hover {
+      background: mix($c-study, $c-bg-box, 10%);
+      .top::before {
+        color: mix($c-link, $c-bg-box, 100%);
       }
     }
   }

ui/common/css/abstract/_variables.scss

@@ -1,6 +1,8 @@
 $font-path: "../font";
 $img-path: "../images";
 
+$viewport-min-width: 320px;
+
 $block-gap: 2vmin;
 $block-gap-h: 2vh;
 $block-gap-w: 2vw;

ui/common/css/component/_box.scss

@@ -18,8 +18,8 @@ $vp-max-width: 1200px;
     @extend %flex-between, %box-padding;
 
     /* flex gutters, waiting for row-gap to be implemented for flexbox.  https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items#Creating_gutters_between_items */
-    margin-bottom: -1em;
-    > * { margin-bottom: 1em; }
+    margin:  0 0 -1em -1em;
+    > * { margin: 0 0 1em 1em; }
     /* end of flex gutter hack */
 
     h1 {

ui/site/css/relay/_widget.scss

@@ -5,15 +5,19 @@
   position: relative;
   @include transition();
   &::before {
-    color: $c-link;
+    color: mix($c-link, $c-bg-box, 80%);
     font-size: 5em;
     margin-right: .4em;
+    @include transition();
     @include breakpoint($mq-not-xx-small) {
       display: none;
     }
   }
   &:hover {
     background: mix($c-link, $c-bg-box, 10%);
+    &::before {
+      color: mix($c-link, $c-bg-box, 100%);
+    }
   }
   .overlay {
     @extend %link-overlay