Skip to content

Commit 897dbc7

Browse files
ghabriel25ghabriel25
committed
feat(structure): update fomantic-ui responsiveness
1 parent fa02f92 commit 897dbc7

File tree

2 files changed

+94
-89
lines changed

2 files changed

+94
-89
lines changed

‎resources/views/fomanticui/fomantic-ui.blade.php

Lines changed: 62 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,77 @@
11
@if ($paginator->hasPages())
22
@props(['darkMode' => false])
33

4-
<div class="ui three column compact center aligned grid">
5-
{{-- Previous Page Link --}}
6-
<div class="two wide computer four wide tablet eight wide mobile left floated column">
7-
<div class="ui compact fluid buttons">
8-
@if ($paginator->onFirstPage())
9-
<div class="ui disabled @if ($darkMode) inverted basic @endif button"
10-
aria-disabled="true">
11-
{!! __('pagination.previous') !!}
12-
</div>
13-
@else
14-
<a class="ui @if ($darkMode) inverted @else basic @endif button"
15-
href="{{ $paginator->previousPageUrl() }}"
16-
rel="prev">
17-
{!! __('pagination.previous') !!}
18-
</a>
19-
@endif
20-
</div>
21-
</div>
22-
23-
{{-- Pagination Elements --}}
24-
<div class="twelve wide computer only column">
25-
<div class="ui compact wrapping spaced buttons">
26-
@foreach ($elements as $element)
27-
{{-- "Three Dots" Separator --}}
28-
@if (is_string($element))
29-
<div class="ui disabled basic @if ($darkMode) inverted @endif button"
4+
<div class="ui three column grid">
5+
<div class="row">
6+
{{-- Previous Page Link --}}
7+
<div class="two wide computer four wide tablet eight wide mobile left floated column">
8+
<div class="ui compact fluid buttons">
9+
@if ($paginator->onFirstPage())
10+
<div class="ui disabled @if ($darkMode) inverted basic @endif button"
3011
aria-disabled="true">
31-
{{ $element }}
12+
{!! __('pagination.previous') !!}
3213
</div>
14+
@else
15+
<a class="ui @if ($darkMode) inverted @else basic @endif button"
16+
href="{{ $paginator->previousPageUrl() }}"
17+
rel="prev">
18+
{!! __('pagination.previous') !!}
19+
</a>
3320
@endif
21+
</div>
22+
</div>
3423

35-
{{-- Array Of Links --}}
36-
@if (is_array($element))
37-
@foreach ($element as $page => $url)
38-
@if ($page == $paginator->currentPage())
39-
<div class="ui active @if ($darkMode) inverted @endif button">
40-
{{ $page }}
41-
</div>
42-
@else
43-
<a class="ui @if ($darkMode) inverted @else basic @endif button"
44-
href="{{ $url }}">
45-
{{ $page }}
46-
</a>
47-
@endif
48-
@endforeach
49-
@endif
50-
@endforeach
24+
{{-- Pagination Elements --}}
25+
<div class="twelve wide computer only column center aligned">
26+
<div class="ui compact wrapping spaced buttons">
27+
@foreach ($elements as $element)
28+
{{-- "Three Dots" Separator --}}
29+
@if (is_string($element))
30+
<div class="ui disabled basic @if ($darkMode) inverted @endif button"
31+
aria-disabled="true">
32+
{{ $element }}
33+
</div>
34+
@endif
35+
36+
{{-- Array Of Links --}}
37+
@if (is_array($element))
38+
@foreach ($element as $page => $url)
39+
@if ($page == $paginator->currentPage())
40+
<div class="ui active @if ($darkMode) inverted @endif button">
41+
{{ $page }}
42+
</div>
43+
@else
44+
<a class="ui @if ($darkMode) inverted @else basic @endif button"
45+
href="{{ $url }}">
46+
{{ $page }}
47+
</a>
48+
@endif
49+
@endforeach
50+
@endif
51+
@endforeach
52+
</div>
5153
</div>
52-
</div>
5354

54-
{{-- Next Page Link --}}
55-
<div class="two wide computer four wide tablet eight wide mobile right floated column">
56-
<div class="ui compact fluid buttons">
57-
@if ($paginator->hasMorePages())
58-
<a class="ui @if ($darkMode) inverted @else basic @endif button"
59-
href="{{ $paginator->nextPageUrl() }}"
60-
rel="next">
61-
{!! __('pagination.next') !!}
62-
</a>
63-
@else
64-
<div class="ui disabled @if ($darkMode) inverted basic @endif button"
65-
aria-disabled="true">
66-
{!! __('pagination.next') !!}
67-
</div>
68-
@endif
55+
{{-- Next Page Link --}}
56+
<div class="two wide computer four wide tablet eight wide mobile right floated column">
57+
<div class="ui compact fluid buttons">
58+
@if ($paginator->hasMorePages())
59+
<a class="ui @if ($darkMode) inverted @else basic @endif button"
60+
href="{{ $paginator->nextPageUrl() }}"
61+
rel="next">
62+
{!! __('pagination.next') !!}
63+
</a>
64+
@else
65+
<div class="ui disabled @if ($darkMode) inverted basic @endif button"
66+
aria-disabled="true">
67+
{!! __('pagination.next') !!}
68+
</div>
69+
@endif
70+
</div>
6971
</div>
7072
</div>
7173
</div>
72-
<div class="ui one column compact grid">
74+
<div class="ui one column grid">
7375
<div class="mobile tablet only column">
7476
<div class="ui compact wrapping spaced buttons">
7577
@foreach ($elements as $element)

‎resources/views/fomanticui/simple-fomantic-ui.blade.php

Lines changed: 32 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,38 @@
11
@if ($paginator->hasPages())
22
@props(['darkMode' => false])
33

4-
<div class="ui grid">
5-
<div class="column">
6-
{{-- Previous Page Link --}}
7-
@if ($paginator->onFirstPage())
8-
<div class="ui disabled left floated @if ($darkMode) inverted basic @endif compact button"
9-
aria-disabled="true">
10-
{!! __('pagination.previous') !!}
11-
</div>
12-
@else
13-
<a class="ui left floated @if ($darkMode) inverted @else basic @endif compact button"
14-
href="{{ $paginator->previousPageUrl() }}"
15-
rel="prev">
16-
{!! __('pagination.previous') !!}
17-
</a>
18-
@endif
19-
20-
{{-- Next Page Link --}}
21-
@if ($paginator->hasMorePages())
22-
<a class="ui right floated @if ($darkMode) inverted @else basic @endif compact button"
23-
href="{{ $paginator->nextPageUrl() }}"
24-
rel="next">
25-
{!! __('pagination.next') !!}
26-
</a>
27-
@else
28-
<div class="ui disabled right floated @if ($darkMode) inverted basic @endif compact button"
29-
aria-disabled="true">
30-
{!! __('pagination.next') !!}
31-
</div>
32-
@endif
4+
<div class="ui two column compact center aligned grid">
5+
<div class="row">
6+
<div class="two wide computer four wide tablet eight wide mobile left floated column">
7+
{{-- Previous Page Link --}}
8+
@if ($paginator->onFirstPage())
9+
<div class="ui disabled @if ($darkMode) inverted basic @endif compact fluid button"
10+
aria-disabled="true">
11+
{!! __('pagination.previous') !!}
12+
</div>
13+
@else
14+
<a class="ui @if ($darkMode) inverted @else basic @endif compact fluid button"
15+
href="{{ $paginator->previousPageUrl() }}"
16+
rel="prev">
17+
{!! __('pagination.previous') !!}
18+
</a>
19+
@endif
20+
</div>
21+
<div class="two wide computer four wide tablet eight wide mobile right floated column">
22+
{{-- Next Page Link --}}
23+
@if ($paginator->hasMorePages())
24+
<a class="ui @if ($darkMode) inverted @else basic @endif compact fluid button"
25+
href="{{ $paginator->nextPageUrl() }}"
26+
rel="next">
27+
{!! __('pagination.next') !!}
28+
</a>
29+
@else
30+
<div class="ui disabled @if ($darkMode) inverted basic @endif compact fluid button"
31+
aria-disabled="true">
32+
{!! __('pagination.next') !!}
33+
</div>
34+
@endif
35+
</div>
3336
</div>
3437
</div>
3538
@endif

0 commit comments

Comments
 (0)