Issue #25 Extend dashboard by gallery

Labs64 · Oct 9, 2017 · 631514e · 631514e
1 parent 66bc19b
commit 631514e
Show file tree

Hide file tree

Showing 6 changed files with 172 additions and 0 deletions.
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
     "cross-env": "^3.2.3",
     "font-awesome": "^4.7.0",
     "gentelella": "^1.3.0",
+    "jcarousel": "^0.3.5",
     "jquery": "^3.2.1",
     "laravel-mix": "0.*",
     "lodash": "^4.17.4",

diff --git a/resources/assets/admin/css/dashboard.css b/resources/assets/admin/css/dashboard.css
@@ -30,3 +30,88 @@
     background-color: #90CAF9;
 }
 
+.jcarousel-wrapper {
+    margin: 20px auto;
+    position: relative;
+    border: 10px solid #fff;
+    /*
+    (4 * width: 150px) + (3 * margin-right: 1px) = 603px
+    */
+    width: 603px;
+    height: 100px;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+    -webkit-box-shadow: 0 0 2px #999;
+    -moz-box-shadow: 0 0 2px #999;
+    box-shadow: 0 0 2px #999;
+}
+
+/** Carousel **/
+
+.jcarousel {
+    position: relative;
+    overflow: hidden;
+}
+
+.jcarousel ul {
+    width: 20000em;
+    position: relative;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.jcarousel li {
+    float: left;
+    width: 300px;
+    height: 300px;
+    margin-right: 10px;
+}
+
+.jcarousel img {
+    max-height: 300px;
+}
+
+.jcarousel .loading {
+    text-align: center;
+    line-height: 90px; /* Fake vertical aligning */
+}
+
+/** Carousel Controls **/
+
+.jcarousel-control {
+    padding-top: 15px;
+}
+
+.jcarousel-control-prev,
+.jcarousel-control-next {
+    /*position: absolute;*/
+    /*top: 35px;*/
+    display: inline-block;
+    width: 30px;
+    height: 30px;
+    text-align: center;
+    background: #4E443C;
+    color: #fff;
+    text-decoration: none;
+    text-shadow: 0 0 1px #000;
+    font: 24px/27px Arial, sans-serif;
+    -webkit-border-radius: 30px;
+    -moz-border-radius: 30px;
+    border-radius: 30px;
+    -webkit-box-shadow: 0 0 2px #999;
+    -moz-box-shadow: 0 0 2px #999;
+    box-shadow: 0 0 2px #999;
+}
+
+.jcarousel-control-prev:hover span,
+.jcarousel-control-next:hover span {
+    display: block;
+}
+
+.jcarousel-control-prev.inactive,
+.jcarousel-control-next.inactive {
+    opacity: .5;
+    cursor: default;
+}
diff --git a/resources/assets/admin/js/dashboard.js b/resources/assets/admin/js/dashboard.js
@@ -213,4 +213,59 @@
 
     registrationUsage.init($('#registration_usage'));
 
+    //jcarousel
+    var jcarousel = $('.jcarousel').jcarousel();
+
+    $('.jcarousel-control-prev')
+        .on('jcarouselcontrol:active', function () {
+            $(this).removeClass('inactive');
+        })
+        .on('jcarouselcontrol:inactive', function () {
+            $(this).addClass('inactive');
+        })
+        .jcarouselControl({
+            target: '-=1'
+        });
+
+    $('.jcarousel-control-next')
+        .on('jcarouselcontrol:active', function () {
+            $(this).removeClass('inactive');
+        })
+        .on('jcarouselcontrol:inactive', function () {
+            $(this).addClass('inactive');
+        })
+        .jcarouselControl({
+            target: '+=1'
+        });
+
+    var url = 'https://photolancer.zone/api/photos',
+        param = {
+            page: 1,
+            perPage: 10,
+            sort: [{by: 'rating', type: 'desc'}]
+        };
+
+    $.ajax({
+        url: url + '?' + $.param(param),
+        method: 'GET',
+        success: function (response) {
+            var html = '<ul>';
+
+            $.each(response, function () {
+                html += '<li><img src="' + this.thumbnails.file.photos.small + '" alt="' + this.name + '"></li>';
+            });
+
+            html += '</ul>';
+
+            // Append items
+            jcarousel
+                .html(html);
+
+            // Reload carousel
+            jcarousel
+                .jcarousel('reload');
+        }
+    });
+
+
 })(jQuery);
diff --git a/resources/lang/en.json b/resources/lang/en.json
@@ -112,10 +112,12 @@
   "views.admin.dashboard.sub_title_2": "Registration Stats",
   "views.admin.dashboard.sub_title_3": "Source",
   "views.admin.dashboard.sub_title_4": "Count",
+  "views.admin.dashboard.sub_title_5": "<a target='_blank' href=':href'>Photolancer.zone</a> top 10 photos",
   "views.admin.dashboard.source_0": "E-Mail",
   "views.admin.dashboard.source_1": "Google",
   "views.admin.dashboard.source_2": "Facebook",
   "views.admin.dashboard.source_3": "Twitter",
+  "views.admin.dashboard.loading": "Loading carousel items...",
   "**************************** Admin user **********************": "Admin user i18n",
   "views.admin.users.index.title": "Users",
   "views.admin.users.index.table_header_0": "E-Mail",

diff --git a/resources/views/admin/dashboard.blade.php b/resources/views/admin/dashboard.blade.php
@@ -33,6 +33,34 @@
     </div>
     <!-- /top tiles -->
 
+    {{--Carousel--}}
+    <div class="row">
+        <div class="col-md-12 col-sm-12 col-xs-12">
+            <div class="x_panel">
+                <div class="row x_title">
+                    <div class="col-md-6">
+                        <h3>
+                            {!! __('views.admin.dashboard.sub_title_5',['href'=>'http://photolancer.zone']) !!}
+                        </h3>
+                    </div>
+                </div>
+                <div class="x_content">
+                    <div class="col-md-12">
+                        <div class="jcarousel">
+                            <div class="loading">{{ __('views.admin.dashboard.loading') }}</div>
+                        </div>
+
+                    </div>
+                    <div class="col-md-12 text-center jcarousel-control">
+                        <a href="#" class="jcarousel-control-prev">&lsaquo;</a>
+                        <a href="#" class="jcarousel-control-next">&rsaquo;</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+
     <div class="row">
         <div class="col-md-12 col-sm-12 col-xs-12">
             <div id="log_activity" class="dashboard_graph">

diff --git a/webpack.mix.js b/webpack.mix.js
@@ -120,6 +120,7 @@ mix.scripts([
 
 
     'node_modules/gentelella/vendors/Chart.js/dist/Chart.js',
+    'node_modules/jcarousel/dist/jquery.jcarousel.min.js',
 
     'resources/assets/admin/js/dashboard.js',
 ], 'public/assets/admin/js/dashboard.js').version();