study search filters and new list header

app/views/study/all.scala.html

@@ -5,6 +5,7 @@ title = s"All studies",
 active = "all",
 order = order,
 pag = pag,
+searchFilter = "",
 url = o => routes.Study.all(o)) {
 All studies
 }

app/views/study/byOwner.scala.html

@@ -5,6 +5,7 @@ title = s"Studies created by ${owner.titleName}",
 active = "owner",
 order = order,
 pag = pag,
+searchFilter = s"owner:${owner.username}",
 url = o => routes.Study.byOwner(owner.username, o)) {
 @userLink(owner)'s studies
 }

app/views/study/listLayout.scala.html

@@ -1,4 +1,4 @@
-@(title: String, active: String, order: lila.study.Order, pag: Paginator[lila.study.Study.WithChaptersAndLiked], url: controllers.Study.ListUrl)(titleHtml: Html)(implicit ctx: Context)
+@(title: String, active: String, order: lila.study.Order, pag: Paginator[lila.study.Study.WithChaptersAndLiked], url: controllers.Study.ListUrl, searchFilter: String)(titleHtml: Html)(implicit ctx: Context)
 
 @moreCss = {
 @cssTag("studyList.css")
@@ -24,9 +24,9 @@ moreJs = moreJs,
 withLangAnnotations = false) {
 <div class="content_box no_padding studies">
   <div class="top">
-    <h1>@titleHtml</h1>
     <form class="search" action="@routes.Study.search()" method="get">
-      <input name="q" placeholder="@trans.search()" />
+      <input name="q" placeholder="@title" value="@searchFilter@if(searchFilter.nonEmpty){ }" />
+      <button type="submit" class="submit button" data-icon="y"></button>
     </form>
     @orderChoice(o => url(o.key), order, if (active == "all") lila.study.Order.allButOldest else lila.study.Order.all)
     @newForm()

app/views/study/mine.scala.html

@@ -5,6 +5,7 @@ title = s"My studies",
 active = "mine",
 order = order,
 pag = pag,
+searchFilter = s"owner:${me.username}",
 url = o => routes.Study.mine(o)) {
 My studies
 }

app/views/study/mineLikes.scala.html

@@ -5,6 +5,7 @@ title = "My favourite studies",
 active = "mineLikes",
 order = order,
 pag = pag,
+searchFilter = "",
 url = o => routes.Study.mineLikes(o)) {
 My favourite studies
 }

app/views/study/mineMember.scala.html

@@ -5,6 +5,7 @@ title = s"Studies I contribute to",
 active = "mineMember",
 order = order,
 pag = pag,
+searchFilter = s"member:${me.username}",
 url = o => routes.Study.mineMember(o)) {
 Studies I contribute to
 }

app/views/study/minePrivate.scala.html

@@ -5,6 +5,7 @@ title = "My private studies",
 active = "minePrivate",
 order = order,
 pag = pag,
+searchFilter = s"owner:${me.username}",
 url = o => routes.Study.minePrivate(o)) {
 My private studies
 }

app/views/study/minePublic.scala.html

@@ -5,6 +5,7 @@ title = "My public studies",
 active = "minePublic",
 order = order,
 pag = pag,
+searchFilter = s"owner:${me.username}",
 url = o => routes.Study.minePublic(o)) {
 My public studies
 }

app/views/study/search.scala.html

@@ -26,7 +26,6 @@ moreJs = moreJs,
 withLangAnnotations = false) {
 <div class="content_box no_padding studies search">
   <div class="top">
-    <h1>Search studies</h1>
     <form class="search" action="@routes.Study.search()" method="get">
       <input name="q" placeholder="@trans.search()" value="@text" />
     </form>

public/stylesheets/studyList.css

@@ -2,24 +2,38 @@
   display: flex;
   align-items: center;
 }
-.studies .top h1 {
+.studies .top .search {
   flex: 1 1 100%;
+  margin: 15px 20px;
+  display: flex;
+}
+.studies .top .search input {
+  flex: 1 1 100%;
+  padding: 0 10px;
+  font-size: 20px;
+  line-height: 40px;
+  border: 1px solid #ccc;
+}
+.studies .top .search .submit {
+  padding: 0 30px;
+  border-radius: 0 3px 3px 0;
+  border-left: 0;
+  font-size: 16px;
+}
+.studies .top .search .submit::before {
+  opacity: 0.7;
+}
+.studies .top .search .submit:hover::before {
+  opacity: 1;
 }
 .studies .top .new_study,
 .studies .top .orders {
   white-space: nowrap;
-  margin-right: 20px;
+  margin-right: 10px;
 }
 .studies .top .new_study .button i::before {
   color: #759900;
-  font-size: 27px;
-}
-.studies .top .search input {
-  margin-right: 20px;
-  padding: 0 10px;
-  font-size: 15px;
-  line-height: 28px;
-  border: 1px solid #ccc;
+  font-size: 40px;
 }
 .studies .list {
   display: flex;
@@ -133,15 +147,14 @@ body.dark .studies .study {
   border:0;
 }
 .mselect .button {
-  padding-right: 22px;
-  position: relative;
-  display: inline-block;
+  padding: 0 10px 0 10px;
+  display: flex;
+  align-items: center;
+  line-height: 40px;
 }
 .mselect .button i {
+  margin-left: 5px;
   font-size: 10px;
-  position: absolute;
-  right: 5px;
-  top: 7px;
 }
 .mselect .list {
   margin:0;