appview/pages: improve search bar styling in issues and pulls #775

···

       
104
       
 
       
            </div>

     

       
105
       
 
       
        </nav>

     

       
106
       
 
       
        {{ block "repoContentLayout" . }}

     

       
107
       
-
       
          <section class="bg-white dark:bg-gray-800 p-6 rounded relative w-full mx-auto dark:text-white">

     

       
108
       
 
       
            {{ block "repoContent" . }}{{ end }}

     

       
109
       
 
       
          </section>

     

       
110
       
 
       
          {{ block "repoAfter" . }}{{ end }}

     

···

       
104
       
 
       
            </div>

     

       
105
       
 
       
        </nav>

     

       
106
       
 
       
        {{ block "repoContentLayout" . }}

     

       
107
       
+
       
          <section class="bg-white dark:bg-gray-800 px-6 py-4 rounded relative w-full mx-auto dark:text-white">

     

       
108
       
 
       
            {{ block "repoContent" . }}{{ end }}

     

       
109
       
 
       
          </section>

     

       
110
       
 
       
          {{ block "repoAfter" . }}{{ end }}

     

···

       
8
       
 
       
{{ end }}

     

       
9
       
 
       


     

       
10
       
 
       
{{ define "repoContent" }}

     

       
11
       
-
       
<div class="flex justify-between items-center gap-4">

     

       
12
       
-
       
  <div class="flex gap-4">

     

       
13
       
-
       
    <a

     

       
14
       
-
       
        href="?state=open"

     

       
15
       
-
       
        class="flex items-center gap-2 {{ if .FilteringByOpen }}font-bold {{ else }}text-gray-500 dark:text-gray-400{{ end }}"

     

       
16
       
-
       
        >

     

       
17
       
-
       
        {{ i "circle-dot" "w-4 h-4" }}

     

       
18
       
-
       
        <span>{{ .RepoInfo.Stats.IssueCount.Open }} open</span>

     

       
19
       
-
       
    </a>

     

       
20
       
-
       
    <a

     

       
21
       
-
       
        href="?state=closed"

     

       
22
       
-
       
        class="flex items-center gap-2 {{ if not .FilteringByOpen }}font-bold {{ else }}text-gray-500 dark:text-gray-400{{ end }}"

     

       
23
       
-
       
        >

     

       
24
       
-
       
        {{ i "ban" "w-4 h-4" }}

     

       
25
       
-
       
        <span>{{ .RepoInfo.Stats.IssueCount.Closed }} closed</span>

     

       
26
       
-
       
    </a>

     

       
27
       
-
       
    <form class="flex gap-4" method="GET">

     

       
28
       
 
       
        <input type="hidden" name="state" value="{{ if .FilteringByOpen }}open{{ else }}closed{{ end }}">

     

       
29
       
-
       
        <input class="" type="text" name="q" value="{{ .FilterQuery }}">

     

       
30
       
-
       
        <button class="btn" type="submit">

     

       
31
       
-
       
            search

     

       
32
       
-
       
        </button>

     

       
33
       
-
       
    </form>

     

       
34
       
-
       
  </div>

     

       
35
       
-
       
  <a

     

       
36
       
-
       
      href="/{{ .RepoInfo.FullName }}/issues/new"

     

       
37
       
-
       
      class="btn-create text-sm flex items-center justify-center gap-2 no-underline hover:no-underline hover:text-white"

     

       
38
       
-
       
      >

     

       
39
       
-
       
      {{ i "circle-plus" "w-4 h-4" }}

     

       
40
       
-
       
      <span>new</span>

     

       
41
       
-
       
  </a>

     

       
42
       
-
       
</div>

     

       
43
       
-
       
<div class="error" id="issues"></div>

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
44
       
 
       
{{ end }}

     

       
45
       
 
       


     

       
46
       
 
       
{{ define "repoAfter" }}

     

···

       
8
       
 
       
{{ end }}

     

       
9
       
 
       


     

       
10
       
 
       
{{ define "repoContent" }}

     

       
11
       
+
       
    <div class="flex justify-between items-stretch gap-4">

     

       
12
       
+
       
      <form class="flex flex-1 relative" method="GET">

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
13
       
 
       
        <input type="hidden" name="state" value="{{ if .FilteringByOpen }}open{{ else }}closed{{ end }}">

     

       
14
       
+
       
        <div class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none">

     

       
15
       
+
       
          {{ i "search" "w-4 h-4" }}

     

       
16
       
+
       
        </div>

     

       
17
       
+
       
        <input class="flex-1 p-1 pl-10 pr-10 peer" type="text" name="q" value="{{ .FilterQuery }}" placeholder=" ">

     

       
18
       
+
       
        <a 

     

       
19
       
+
       
          href="?state={{ if .FilteringByOpen }}open{{ else }}closed{{ end }}"

     

       
20
       
+
       
          class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hidden peer-[:not(:placeholder-shown)]:block"

     

       
21
       
+
       
          >

     

       
22
       
+
       
          {{ i "x" "w-4 h-4" }}

     

       
23
       
+
       
        </a>

     

       
24
       
+
       
      </form>

     

       
25
       
+
       
      <a

     

       
26
       
+
       
          href="/{{ .RepoInfo.FullName }}/issues/new"

     

       
27
       
+
       
          class="btn-create text-sm flex items-center justify-center gap-2 no-underline hover:no-underline hover:text-white"

     

       
28
       
+
       
          >

     

       
29
       
+
       
          {{ i "circle-plus" "w-4 h-4" }}

     

       
30
       
+
       
          <span>new</span>

     

       
31
       
+
       
      </a>

     

       
32
       
+
       
    </div>

     

       
33
       
+
       
    <div class="mt-2 ml-2 flex gap-4 text-xs">

     

       
34
       
+
       
      <a

     

       
35
       
+
       
          href="?state=open"

     

       
36
       
+
       
          class="flex items-center gap-2 {{ if .FilteringByOpen }}font-bold {{ else }}text-gray-500 dark:text-gray-400{{ end }}"

     

       
37
       
+
       
          >

     

       
38
       
+
       
          {{ i "circle-dot" "w-4 h-4" }}

     

       
39
       
+
       
          <span>{{ .RepoInfo.Stats.IssueCount.Open }} open</span>

     

       
40
       
+
       
      </a>

     

       
41
       
+
       
      <a

     

       
42
       
+
       
          href="?state=closed"

     

       
43
       
+
       
          class="flex items-center gap-2 {{ if not .FilteringByOpen }}font-bold {{ else }}text-gray-500 dark:text-gray-400{{ end }}"

     

       
44
       
+
       
          >

     

       
45
       
+
       
          {{ i "ban" "w-4 h-4" }}

     

       
46
       
+
       
          <span>{{ .RepoInfo.Stats.IssueCount.Closed }} closed</span>

     

       
47
       
+
       
      </a>

     

       
48
       
+
       
    </div>

     

       
49
       
+
       
    <div class="error" id="issues"></div>

     

       
50
       
 
       
{{ end }}

     

       
51
       
 
       


     

       
52
       
 
       
{{ define "repoAfter" }}

     

···

       
8
       
 
       
{{ end }}

     

       
9
       
 
       


     

       
10
       
 
       
{{ define "repoContent" }}

     

       
11
       
-
       
    <div class="flex justify-between items-center">

     

       
12
       
-
       
        <div class="flex gap-4">

     

       
13
       
-
       
            <a

     

       
14
       
-
       
                href="?state=open"

     

       
15
       
-
       
                class="flex items-center gap-2 {{ if .FilteringBy.IsOpen }}font-bold {{ else }}text-gray-500 dark:text-gray-400{{ end }}"

     

       
16
       
-
       
            >

     

       
17
       
-
       
                {{ i "git-pull-request" "w-4 h-4" }}

     

       
18
       
-
       
                <span>{{ .RepoInfo.Stats.PullCount.Open }} open</span>

     

       
19
       
-
       
            </a>

     

       
20
       
-
       
            <a

     

       
21
       
-
       
                href="?state=merged"

     

       
22
       
-
       
                class="flex items-center gap-2 {{ if .FilteringBy.IsMerged }}font-bold {{ else }}text-gray-500 dark:text-gray-400{{ end }}"

     

       
23
       
-
       
            >

     

       
24
       
-
       
                {{ i "git-merge" "w-4 h-4" }}

     

       
25
       
-
       
                <span>{{ .RepoInfo.Stats.PullCount.Merged }} merged</span>

     

       
26
       
-
       
            </a>

     

       
27
       
-
       
            <a

     

       
28
       
-
       
                href="?state=closed"

     

       
29
       
-
       
                class="flex items-center gap-2 {{ if .FilteringBy.IsClosed }}font-bold {{ else }}text-gray-500 dark:text-gray-400{{ end }}"

     

       
30
       
-
       
            >

     

       
31
       
-
       
                {{ i "ban" "w-4 h-4" }}

     

       
32
       
-
       
                <span>{{ .RepoInfo.Stats.PullCount.Closed }} closed</span>

     

       
33
       
-
       
            </a>

     

       
34
       
-
       
            <form class="flex gap-4" method="GET">

     

       
35
       
-
       
                <input type="hidden" name="state" value="{{ .FilteringBy.String }}">

     

       
36
       
-
       
                <input class="" type="text" name="q" value="{{ .FilterQuery }}">

     

       
37
       
-
       
                <button class="btn" type="submit">

     

       
38
       
-
       
                    search

     

       
39
       
-
       
                </button>

     

       
40
       
-
       
            </form>

     

       
41
       
 
       
        </div>

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
42
       
 
       
        <a

     

       
43
       
-
       
            href="/{{ .RepoInfo.FullName }}/pulls/new"

     

       
44
       
-
       
            class="btn-create text-sm flex items-center gap-2 no-underline hover:no-underline hover:text-white"

     

       
45
       
 
       
        >

     

       
46
       
-
       
            {{ i "git-pull-request-create" "w-4 h-4" }}

     

       
47
       
-
       
            <span>new</span>

     

       
48
       
 
       
        </a>

     

       
49
       
 
       
    </div>

     

       
50
       
 
       
    <div class="error" id="pulls"></div>

     

···

       
8
       
 
       
{{ end }}

     

       
9
       
 
       


     

       
10
       
 
       
{{ define "repoContent" }}

     

       
11
       
+
       
    <div class="flex justify-between items-stretch gap-4">

     

       
12
       
+
       
      <form class="flex flex-1 relative" method="GET">

     

       
13
       
+
       
        <input type="hidden" name="state" value="{{ .FilteringBy.String }}">

     

       
14
       
+
       
        <div class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none">

     

       
15
       
+
       
          {{ i "search" "w-4 h-4" }}

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
16
       
 
       
        </div>

     

       
17
       
+
       
        <input class="flex-1 p-1 pl-10 pr-10 peer" type="text" name="q" value="{{ .FilterQuery }}" placeholder=" ">

     

       
18
       
+
       
        <a 

     

       
19
       
+
       
          href="?state={{ .FilteringBy.String }}"

     

       
20
       
+
       
          class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hidden peer-[:not(:placeholder-shown)]:block"

     

       
21
       
+
       
          >

     

       
22
       
+
       
          {{ i "x" "w-4 h-4" }}

     

       
23
       
+
       
        </a>

     

       
24
       
+
       
      </form>

     

       
25
       
+
       
      <a

     

       
26
       
+
       
          href="/{{ .RepoInfo.FullName }}/pulls/new"

     

       
27
       
+
       
          class="btn-create text-sm flex items-center gap-2 no-underline hover:no-underline hover:text-white"

     

       
28
       
+
       
      >

     

       
29
       
+
       
          {{ i "git-pull-request-create" "w-4 h-4" }}

     

       
30
       
+
       
          <span>new</span>

     

       
31
       
+
       
      </a>

     

       
32
       
+
       
    </div>

     

       
33
       
+
       
    <div class="mt-2 ml-2 flex gap-4 text-xs">

     

       
34
       
+
       
        <a

     

       
35
       
+
       
            href="?state=open"

     

       
36
       
+
       
            class="flex items-center gap-2 {{ if .FilteringBy.IsOpen }}font-bold {{ else }}text-gray-500 dark:text-gray-400{{ end }}"

     

       
37
       
+
       
        >

     

       
38
       
+
       
            {{ i "git-pull-request" "w-4 h-4" }}

     

       
39
       
+
       
            <span>{{ .RepoInfo.Stats.PullCount.Open }} open</span>

     

       
40
       
+
       
        </a>

     

       
41
       
+
       
        <a

     

       
42
       
+
       
            href="?state=merged"

     

       
43
       
+
       
            class="flex items-center gap-2 {{ if .FilteringBy.IsMerged }}font-bold {{ else }}text-gray-500 dark:text-gray-400{{ end }}"

     

       
44
       
+
       
        >

     

       
45
       
+
       
            {{ i "git-merge" "w-4 h-4" }}

     

       
46
       
+
       
            <span>{{ .RepoInfo.Stats.PullCount.Merged }} merged</span>

     

       
47
       
+
       
        </a>

     

       
48
       
 
       
        <a

     

       
49
       
+
       
            href="?state=closed"

     

       
50
       
+
       
            class="flex items-center gap-2 {{ if .FilteringBy.IsClosed }}font-bold {{ else }}text-gray-500 dark:text-gray-400{{ end }}"

     

       
51
       
 
       
        >

     

       
52
       
+
       
            {{ i "ban" "w-4 h-4" }}

     

       
53
       
+
       
            <span>{{ .RepoInfo.Stats.PullCount.Closed }} closed</span>

     

       
54
       
 
       
        </a>

     

       
55
       
 
       
    </div>

     

       
56
       
 
       
    <div class="error" id="pulls"></div>