Projekt

Obecné

Profil

« Předchozí | Další » 

Revize f851ac73

Přidáno uživatelem Jan Šedivý před více než 5 roky(ů)

Re #7328 stylování select inputů pro nastavení zobrazování výsledků

Zobrazit rozdíly:

app/FrontModule/component/Transliteration/TransliterationSearchResultList.latte
1 1
{snippet resultList}
2 2
    <div class="row h-100 pagination-header">
3 3
        <div class="col my-auto">
4
            <div class="text-muted results-found">
5
                Total results found: {$paginator->getItemCount()}
6
            </div>
4 7
            {if $paginator->getPageCount() > 1}
5
            <nav aria-label="Page navigation example">
6
                <ul class="pagination">
7
                    <li class="page-item">
8
                        <a class="page-link" href="{link changePage!, $paginator->first()->getPageNumber(), $paginator->first()->getPageSize()}">
9
                            <span aria-hidden="true">&laquo;</span>
10
                            <span class="sr-only">First</span>
11
                        </a>
12
                    </li>
13
                    <li class="page-item">
14
                        <a class="page-link" href="{link changePage!, $paginator->previous()->getPageNumber(), $paginator->previous()->getPageSize()}">
15
                            <span aria-hidden="true">&lsaquo;</span>
16
                            <span class="sr-only">Previous</span>
17
                        </a>
18
                    </li>
19
                    {for $i = $paginator->getStartingPage(); $i <= $paginator->getEndingPage(); $i++}
20
                        <li class="page-item{if $paginator->getPageNumber() == $i} active{/if}">
21
                            <a class="page-link" href="{link changePage!, $i, $paginator->getPageSize()}">
22
                                {$i}
8
                <nav aria-label="Page navigation example">
9
                    <ul class="pagination">
10
                        <li class="page-item">
11
                            <a class="page-link"
12
                               href="{link changePage!, $paginator->first()->getPageNumber(), $paginator->first()->getPageSize()}">
13
                                <span aria-hidden="true">&laquo;</span>
14
                                <span class="sr-only">First</span>
23 15
                            </a>
24 16
                        </li>
25
                    {/for}
26
                    <li class="page-item">
27
                        <a class="page-link" href="{link changePage!, $paginator->next()->getPageNumber(), $paginator->next()->getPageSize()}">
28
                            <span aria-hidden="true">&rsaquo;</span>
29
                            <span class="sr-only">Next</span>
30
                        </a>
31
                    </li>
32
                    <li class="page-item">
33
                        <a class="page-link" href="{link changePage!, $paginator->last()->getPageNumber(), $paginator->last()->getPageSize()}">
34
                            <span aria-hidden="true">&raquo;</span>
35
                            <span class="sr-only">Last</span>
36
                        </a>
37
                    </li>
38
                </ul>
39
            </nav>
17
                        <li class="page-item">
18
                            <a class="page-link"
19
                               href="{link changePage!, $paginator->previous()->getPageNumber(), $paginator->previous()->getPageSize()}">
20
                                <span aria-hidden="true">&lsaquo;</span>
21
                                <span class="sr-only">Previous</span>
22
                            </a>
23
                        </li>
24
                        {for $i = $paginator->getStartingPage(); $i <= $paginator->getEndingPage(); $i++}
25
                            <li class="page-item{if $paginator->getPageNumber() == $i} active{/if}">
26
                                <a class="page-link" href="{link changePage!, $i, $paginator->getPageSize()}">
27
                                    {$i}
28
                                </a>
29
                            </li>
30
                        {/for}
31
                        <li class="page-item">
32
                            <a class="page-link"
33
                               href="{link changePage!, $paginator->next()->getPageNumber(), $paginator->next()->getPageSize()}">
34
                                <span aria-hidden="true">&rsaquo;</span>
35
                                <span class="sr-only">Next</span>
36
                            </a>
37
                        </li>
38
                        <li class="page-item">
39
                            <a class="page-link"
40
                               href="{link changePage!, $paginator->last()->getPageNumber(), $paginator->last()->getPageSize()}">
41
                                <span aria-hidden="true">&raquo;</span>
42
                                <span class="sr-only">Last</span>
43
                            </a>
44
                        </li>
45
                    </ul>
46
                </nav>
40 47
            {/if}
48

  
41 49
        </div>
42
        <div class="col text-right my-auto">
43
            <span class="text-muted align-middle">
44
                Results found: {$paginator->getItemCount()} ({$paginator->getPageSize()} per page).
45
            </span>
46
        </div>
50
            {form searchSettingsForm class => "form-inline"}
51
            <div class="col text-right my-auto">
52
                Results per page: {input limit class => "form-control form-control-sm search-settings-select"}<br>
53
                Show adjacent lines: {input lines class => "form-control form-control-sm search-settings-select"}
54
            </div>
55
            {/form}
47 56
    </div>
48 57

  
49 58
    {foreach $resultRows as $result}
......
53 62
            {$result->book_abrev}, {$result->chapter}
54 63
        </a>
55 64
        <div>
56
            <span class="lineno linefound">{$result->line_number}.</span>
57
            <span class="line">{$result->transliteration}</span>
65
            <span class="linefound">{$result->line_number}.</span>
66
            <span>{$result->transliteration}</span>
58 67
        </div>
59 68

  
60 69
    {/foreach}
61 70

  
62
    {control searchSettingsForm}
63

  
64

  
65
{block scripts}
66
    <script>
67
        $(document).ready(function () {
68
            $('select[name="limit"]').change(function () {
69
                let limit = this.value;
71
    {block scripts}
72
        <script>
73
            $(document).ready(function () {
74
                $('select[name="limit"]').change(function () {
75
                    let limit = this.value;
70 76

  
71
                $.nette.ajax({
72
                    url: {link changeLimit!},
73
                    data: {'limit': limit}
74
                })
75
            });
77
                    $.nette.ajax({
78
                        url: {link changeLimit!},
79
                        data: {'limit': limit}
80
                    })
81
                });
76 82

  
77
            $('select[name="lines"]').change(function () {
78
                let lines = this.value;
83
                $('select[name="lines"]').change(function () {
84
                    let lines = this.value;
79 85

  
80
                $.nette.ajax({
81
                    url: {link changeLines!},
82
                    data: {'lines': lines}
83
                })
84
            });
85
        })
86
    </script>
87
{/block}
86
                    $.nette.ajax({
87
                        url: {link changeLines!},
88
                        data: {'lines': lines}
89
                    })
90
                });
91
            })
92
        </script>
93
    {/block}
88 94
{/snippet}
www/css/front/style.css
63 63

  
64 64
.required{
65 65
    font-weight: bold;
66
}
67

  
68
.linefound {
69
    font-weight: 600;
70
}
71

  
72
.found {
73
    font-weight: 600;
74
    color: #003366;
75
}
76

  
77
.search-settings-select {
78
    width: 60px;
79
}
80

  
81
.form-group.search-settings-row {
82
    margin-bottom: 0;
83
}
84

  
85
.results-found {
86
    margin-bottom: 0.2em;
66 87
}

Také k dispozici: Unified diff