Skip to content

Commit 1f69d23

Browse files
EG-MohamedEG-Mohamed
authored
Update reorder.blade.php
Add isRtl to reorder to fix RTL problem
1 parent 3863417 commit 1f69d23

File tree

1 file changed

+111
-108
lines changed

1 file changed

+111
-108
lines changed

‎src/resources/views/crud/reorder.blade.php‎

Lines changed: 111 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -89,135 +89,135 @@ function tree_element($entry, $key, $all_entries, $crud)
8989

9090

9191
@section('after_styles')
92-
<style>
93-
.ui-sortable .placeholder {
94-
outline: 1px dashed #4183C4;
95-
/*-webkit-border-radius: 3px;
96-
-moz-border-radius: 3px;
97-
border-radius: 3px;
98-
margin: -1px;*/
99-
}
92+
<style>
93+
.ui-sortable .placeholder {
94+
outline: 1px dashed #4183C4;
95+
/*-webkit-border-radius: 3px;
96+
-moz-border-radius: 3px;
97+
border-radius: 3px;
98+
margin: -1px;*/
99+
}
100100
101-
.ui-sortable .mjs-nestedSortable-error {
102-
background: #fbe3e4;
103-
border-color: transparent;
104-
}
101+
.ui-sortable .mjs-nestedSortable-error {
102+
background: #fbe3e4;
103+
border-color: transparent;
104+
}
105105
106-
.ui-sortable ol {
107-
margin: 0;
108-
padding: 0;
109-
padding-left: 30px;
110-
}
106+
.ui-sortable ol {
107+
margin: 0;
108+
padding: 0;
109+
padding-left: 30px;
110+
}
111111
112-
ol.sortable, ol.sortable ol {
113-
margin: 0 0 0 25px;
114-
padding: 0;
115-
list-style-type: none;
116-
}
112+
ol.sortable, ol.sortable ol {
113+
margin: 0 0 0 25px;
114+
padding: 0;
115+
list-style-type: none;
116+
}
117117
118-
ol.sortable {
119-
margin: 2em 0;
120-
}
118+
ol.sortable {
119+
margin: 2em 0;
120+
}
121121
122-
.sortable li {
123-
margin: 5px 0 0 0;
124-
padding: 0;
125-
}
122+
.sortable li {
123+
margin: 5px 0 0 0;
124+
padding: 0;
125+
}
126126
127-
.sortable li div {
128-
border: 1px solid #ddd;
129-
-webkit-border-radius: 3px;
130-
-moz-border-radius: 3px;
131-
border-radius: 3px;
132-
padding: 6px;
133-
margin: 0;
134-
cursor: move;
135-
background-color: #f4f4f4;
136-
color: #444;
137-
border-color: #00acd6;
138-
}
127+
.sortable li div {
128+
border: 1px solid #ddd;
129+
-webkit-border-radius: 3px;
130+
-moz-border-radius: 3px;
131+
border-radius: 3px;
132+
padding: 6px;
133+
margin: 0;
134+
cursor: move;
135+
background-color: #f4f4f4;
136+
color: #444;
137+
border-color: #00acd6;
138+
}
139139
140-
.sortable li.mjs-nestedSortable-branch div {
141-
/*background-color: #00c0ef;*/
142-
/*border-color: #00acd6;*/
143-
}
140+
.sortable li.mjs-nestedSortable-branch div {
141+
/*background-color: #00c0ef;*/
142+
/*border-color: #00acd6;*/
143+
}
144144
145-
.sortable li.mjs-nestedSortable-leaf div {
146-
/*background-color: #00c0ef;*/
147-
border: 1px solid #ddd;
148-
}
145+
.sortable li.mjs-nestedSortable-leaf div {
146+
/*background-color: #00c0ef;*/
147+
border: 1px solid #ddd;
148+
}
149149
150-
li.mjs-nestedSortable-collapsed.mjs-nestedSortable-hovering div {
151-
border-color: #999;
152-
background: #fafafa;
153-
}
150+
li.mjs-nestedSortable-collapsed.mjs-nestedSortable-hovering div {
151+
border-color: #999;
152+
background: #fafafa;
153+
}
154154
155-
.ui-sortable .disclose {
156-
cursor: pointer;
157-
width: 10px;
158-
display: none;
159-
}
155+
.ui-sortable .disclose {
156+
cursor: pointer;
157+
width: 10px;
158+
display: none;
159+
}
160160
161-
.sortable li.mjs-nestedSortable-collapsed > ol {
162-
display: none;
163-
}
161+
.sortable li.mjs-nestedSortable-collapsed > ol {
162+
display: none;
163+
}
164164
165-
.sortable li.mjs-nestedSortable-branch > div > .disclose {
166-
display: inline-block;
167-
}
165+
.sortable li.mjs-nestedSortable-branch > div > .disclose {
166+
display: inline-block;
167+
}
168168
169-
.sortable li.mjs-nestedSortable-collapsed > div > .disclose > span:before {
170-
content: '+ ';
171-
}
169+
.sortable li.mjs-nestedSortable-collapsed > div > .disclose > span:before {
170+
content: '+ ';
171+
}
172172
173-
.sortable li.mjs-nestedSortable-expanded > div > .disclose > span:before {
174-
content: '- ';
175-
}
173+
.sortable li.mjs-nestedSortable-expanded > div > .disclose > span:before {
174+
content: '- ';
175+
}
176176
177-
.ui-sortable h1 {
178-
font-size: 2em;
179-
margin-bottom: 0;
180-
}
177+
.ui-sortable h1 {
178+
font-size: 2em;
179+
margin-bottom: 0;
180+
}
181181
182-
.ui-sortable h2 {
183-
font-size: 1.2em;
184-
font-weight: normal;
185-
font-style: italic;
186-
margin-top: .2em;
187-
margin-bottom: 1.5em;
188-
}
182+
.ui-sortable h2 {
183+
font-size: 1.2em;
184+
font-weight: normal;
185+
font-style: italic;
186+
margin-top: .2em;
187+
margin-bottom: 1.5em;
188+
}
189189
190-
.ui-sortable h3 {
191-
font-size: 1em;
192-
margin: 1em 0 .3em;;
193-
}
190+
.ui-sortable h3 {
191+
font-size: 1em;
192+
margin: 1em 0 .3em;;
193+
}
194194
195-
.ui-sortable p, .ui-sortable ol, .ui-sortable ul, .ui-sortable pre, .ui-sortable form {
196-
margin-top: 0;
197-
margin-bottom: 1em;
198-
}
195+
.ui-sortable p, .ui-sortable ol, .ui-sortable ul, .ui-sortable pre, .ui-sortable form {
196+
margin-top: 0;
197+
margin-bottom: 1em;
198+
}
199199
200-
.ui-sortable dl {
201-
margin: 0;
202-
}
200+
.ui-sortable dl {
201+
margin: 0;
202+
}
203203
204-
.ui-sortable dd {
205-
margin: 0;
206-
padding: 0 0 0 1.5em;
207-
}
204+
.ui-sortable dd {
205+
margin: 0;
206+
padding: 0 0 0 1.5em;
207+
}
208208
209-
.ui-sortable code {
210-
background: #e5e5e5;
211-
}
209+
.ui-sortable code {
210+
background: #e5e5e5;
211+
}
212212
213-
.ui-sortable input {
214-
vertical-align: text-bottom;
215-
}
213+
.ui-sortable input {
214+
vertical-align: text-bottom;
215+
}
216216
217-
.ui-sortable .notice {
218-
color: #c33;
219-
}
220-
</style>
217+
.ui-sortable .notice {
218+
color: #c33;
219+
}
220+
</style>
221221
@endsection
222222

223223
@section('after_scripts')
@@ -226,7 +226,10 @@ function tree_element($entry, $key, $all_entries, $crud)
226226

227227
<script type="text/javascript">
228228
jQuery(document).ready(function($) {
229-
229+
var isRtl = ($('html').attr('dir') == 'rtl') ? true : false;
230+
if(isRtl) {
231+
$( " <style> .ui-sortable ol {margin: 0;padding: 0;padding-right: 30px;}ol.sortable, ol.sortable ol {margin: 0 25px 0 0;padding: 0;list-style-type: none;}.ui-sortable dd {margin: 0;padding: 0 1.5em 0 0;}</style>" ).appendTo( "head" )
232+
}
230233
// initialize the nested sortable plugin
231234
$('.sortable').nestedSortable({
232235
forcePlaceholderSize: true,
@@ -237,10 +240,10 @@ function tree_element($entry, $key, $all_entries, $crud)
237240
placeholder: 'placeholder',
238241
revert: 250,
239242
tabSize: 25,
243+
rtl: isRtl,
240244
tolerance: 'pointer',
241245
toleranceElement: '> div',
242246
maxLevels: {{ $crud->get('reorder.max_level') ?? 3 }},
243-
244247
isTree: true,
245248
expandOnHover: 700,
246249
startCollapsed: false

0 commit comments

Comments
 (0)