From ea5aa8d873725fd8f44388856ba8eb25f8b03959 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michal=20Kv=C3=A1=C4=8Dek?= <michal@binarity.cz>
Date: Tue, 13 Sep 2016 03:51:34 +0200
Subject: [PATCH] FEATURE: make content pages list responsive

---
 .../views/admin/content/overview.blade.php    | 90 ++++++++-----------
 1 file changed, 39 insertions(+), 51 deletions(-)

diff --git a/resources/views/admin/content/overview.blade.php b/resources/views/admin/content/overview.blade.php
index c1086b0e..e12746a3 100644
--- a/resources/views/admin/content/overview.blade.php
+++ b/resources/views/admin/content/overview.blade.php
@@ -4,9 +4,9 @@
 @section('headerButtons')
 
     @if($module)
-    <a href="{{route('content.new', ['moduleId' => $module->id])}}" class="btn btn-primary btn-sm rounded-s">
-        <i class="fa fa-plus"></i>
-    </a>
+        <a href="{{route('content.new', ['moduleId' => $module->id])}}" class="btn btn-primary btn-sm rounded-s">
+            <i class="fa fa-plus"></i>
+        </a>
     @endif
 @endsection
 
@@ -21,21 +21,19 @@
         </div>
     @endif
 
-
-
     @if (count($pages))
-        <table class="table item-list full-width content-overview table-striped table-bordered table-hover">
-            <tr>
-                <th></th>
-                <th>@lang('admin/contents.title')</th>
-                <th>@lang('admin/contents.status')</th>
-                <th>@lang('admin/contents.moduleName')</th>
-                <th>@lang('admin/contents.createdAt')</th>
-                <th>@lang('admin/contents.actions')</th>
-            </tr>
+        <div class="item-list rows-striped">
+            <div class="row bold p-tb-15">
+                <div class="col-md-1 hidden-sm-down"></div>
+                <div class="col-xs-10 col-md-3 col-lg-4">@lang('admin/contents.title')</div>
+                <div class="col-lg-2 col-md-3 hidden-sm-down">@lang('admin/contents.status')</div>
+                <div class="col-lg-2 col-md-3 hidden-sm-down">@lang('admin/contents.moduleName')</div>
+                <div class="col-lg-2 hidden-md-down">@lang('admin/contents.createdAt')</div>
+                <div class="col-xs-2 col-lg-1">@lang('admin/contents.actions')</div>
+            </div>
             @foreach($pages as $page)
-                <tr>
-                    <td class="text-center with-placeholder">
+                <div class="row p-tb-15">
+                    <div class="col-md-1 hidden-sm-down text-center with-placeholder">
                         <a href="{{route('content.edit', ['id' => $page->id])}}">
                             @if(!empty($page->title_photo))
                                 <img src="@upload($page->title_photo)" class="placeholder" alt="{{$page->title}}" />
@@ -44,20 +42,20 @@
                                      alt="{{$page->title}}" />
                             @endif
                         </a>
-                    </td>
-                    <td>
+                    </div>
+                    <div class="col-xs-10 col-md-3 col-lg-4">
                         <a href="{{route('content.edit', ['id' => $page->id])}}">
                             {{$page->title}}
                         </a>
-                    </td>
-                    <td>{{$statuses[$page->status]}}</td>
-                    <td>
+                    </div>
+                    <div class="col-lg-2 col-md-3 hidden-sm-down">{{$statuses[$page->status]}}</div>
+                    <div class="col-lg-2 col-md-3 hidden-sm-down">
                         <a href="{{route('content.overview', ['moduleId' => $page->module_id])}}">
                             {{trans($page->module_name)}}
                         </a>
-                    </td>
-                    <td>@date($page->created_at)</td>
-                    <td class="text-center">
+                    </div>
+                    <div class="col-lg-2 hidden-md-down">@date($page->created_at)</div>
+                    <div class="col-xs-2 col-lg-1 text-center">
                         <div class="item-actions-dropdown">
                             <a class="item-actions-toggle-btn">
                                 <span class="inactive">
@@ -71,65 +69,54 @@
                                 <ul class="item-actions-list">
 
                                     @if(!$page->is_homepage)
-
                                         <li>
 
-                                            <a href="{{route('content.setHomepage', ['id' => $page->id])}}"
-                                               class="button tiny success">
+                                            <a href="{{route('content.setHomepage', ['id' => $page->id])}}" data-toggle="tooltip" title="@lang('admin/contents.setHomepage')">
                                                 <i class="fa fa-home"></i>
-                                                {{--@lang('admin/contents.setHomepage')--}}
                                             </a>
                                         </li>
-
-
                                     @endif
 
                                     <li>
-                                        <a class="edit" href="{{route('content.edit', ['id' => $page->id])}}"
-                                           class="button tiny success">
+                                        <a class="edit" href="{{route('content.edit', ['id' => $page->id])}}" data-toggle="tooltip" title="@lang('admin/contents.editPlain')">
                                             <i class="fa fa-pencil"></i>
-                                            {{--                                        @lang('admin/contents.editPlain')--}}
                                         </a>
                                     </li>
 
                                     @if($page->status == \App\Models\Content::STATUS_DRAFT)
                                         <li>
                                             <a href="{{route('content.changeStatus', ['id' => $page->id, 'status' => \App\Models\Content::STATUS_PUBLIC])}}"
-                                               class="button tiny success">
+                                               class="confirm" data-toggle="tooltip" title="@lang('admin/contents.makePublic')">
                                                 <i class="fa fa-eye"></i>
-                                                {{--                                            @lang('admin/contents.makePublic')--}}
                                             </a>
                                         </li>
                                         <li>
                                             <a href="{{route('content.changeStatus', ['id' => $page->id, 'status' => \App\Models\Content::STATUS_PROTECTED])}}"
-                                               class="button tiny warning" data-toggle="modal"
-                                               data-target="#confirm-modal">
+                                               class="confirm" data-toggle="tooltip"
+                                               title="@lang('admin/contents.makeProtected')">
                                                 <i class="fa fa-lock"></i>
-                                                {{--                                            @lang('admin/contents.makeProtected')--}}
                                             </a>
                                         </li>
                                     @else
                                         <li>
                                             <a href="{{route('page.content', ['url' => $page->url])}}" target="_blank"
-                                               class="button tiny secondary"><i class="fa fa-desktop"></i>
-                                                {{--@lang('admin/contents.viewPage')--}}
+                                               data-toggle="tooltip" title="@lang('admin/contents.viewPage')"
+                                               class="button tiny secondary"><i class="fa fa-globe"></i>
                                             </a>
                                         </li>
                                         <li>
                                             <a href="{{route('content.changeStatus', ['id' => $page->id, 'status' => \App\Models\Content::STATUS_DRAFT])}}"
-                                               class="button tiny warning confirm"><i
-                                                        class="fa fa-eye-slash"></i>
-                                                {{--@lang('admin/contents.makeDraft')--}}
+                                               class="button tiny warning confirm" data-toggle="tooltip"
+                                               title="@lang('admin/contents.makeDraft')">
+                                                <i class="fa fa-eye-slash"></i>
                                             </a>
                                         </li>
                                     @endif
 
                                     <li>
-                                        <a class="remove" data-toggle="modal" data-target="#confirm-modal"
-                                           href="{{route('content.delete', ['id' => $page->id])}}"
-                                           class="button tiny alert confirm"><i
+                                        <a href="{{route('content.delete', ['id' => $page->id])}}"
+                                           class="button tiny alert remove confirm" data-toggle="tooltip" title="@lang('admin/contents.deletePage')"><i
                                                     class="fa fa-trash-o"></i>
-                                            {{--@lang('admin/contents.deletePage')--}}
                                         </a>
                                     </li>
 
@@ -139,16 +126,17 @@
                                     {{--class="fa fa-trash-o "></i> </a>--}}
                                     {{--</li>--}}
                                     {{--<li>--}}
-                                    {{--<a class="edit" href="item-editor.html"> <i class="fa fa-pencil"></i> </a>--}}
+                                    {{--<a class="edit" href="{{route('content.edit', ['id' => $page->id])}}"> <i--}}
+                                    {{--class="fa fa-pencil"></i> </a>--}}
                                     {{--</li>--}}
                                 </ul>
                             </div>
                         </div>
 
-                    </td>
-                </tr>
+                    </div>
+                </div>
             @endforeach
-        </table>
+        </div>
 
         <div class="row">
             {!! $pages->render() !!}