Revize 977060b9

Revert "Issue @7957 #4h"

This reverts commit 31d7501407215a8231bb8604220a81dd33979ff8.

app/Http/Controllers/CategoriesController.php

@@ -14 +14 @@
         $this->middleware('auth');
     }
 
+    public function calculateClusters($categoriesCount)
+    {
+        if(isset($categoriesCount))
+        {
+            $min = PHP_INT_MAX;
+            $max = PHP_INT_MIN;
+            foreach($categoriesCount as $category)
+            {
+                $c = count($category);
+                if($c < $min)
+                {
+                    $min = $c;
+                }
+
+                if($c > $max)
+                {
+                    $max = $c;
+                }
+            }
+            $center = $min + (($max - $min)/2);
+            return array($min, $center, $max);
+        }
+        else
+        {
+            return null;
+        }
+    }
+
     /**
      * Display a listing of the resource.
      *
@@ -25 +53 @@
         {
             $userId = Auth::user()->id;
 
-            $categoryNames = Category::orderBy('id')->get();
+            $categoryNames = Category::all();
             $countCategory = count($categoryNames);
+            $categories = array();
+            for($i = 1; $i <= $countCategory;$i++)
+            {
+                array_push($categories, Category::find($i)->artefacts()->get());
+            }
+            $clusters = $this->calculateClusters($categories);
+
+            $categorySizes = array();
+            if(isset($clusters))
+            {
+                foreach($categories as $category)
+                {
+                    $c = count($category);
+                    $type1 = abs($clusters['0'] - $c);
+                    $type2 = abs($clusters['1'] - $c);
+                    $type3 = abs($clusters['2'] - $c);
+
+                    if($type1 <= $type2 && $type1 <= $type3)
+                    {
+                        array_push($categorySizes, 1);
+                    }
+                    else if($type2 <= $type1 && $type2 <= $type3)
+                    {
+                        array_push($categorySizes, 2);
+                    }
+                    else
+                    {
+                        array_push($categorySizes, 3);
+                    }
+                }
+            }
 
             $data = array(
                 'title' => 'Categories',
                 'user' => User::find($userId),
                 'count' => $countCategory,
+                'categories' => $categories,
+                'categorySizes' => $categorySizes,
                 'categoryNames' => $categoryNames
             );
             return view('categories.index') -> with($data);

resources/sass/_custom.scss

@@ -360 +360 @@
         }
     }
 
-    .content {
-    position: relative;
-
-    //Circle style button
-    //Toto možná nebude zcela optimální pro ostatní circle buttony. Nehodící se propagujte do btn-categories.
-    .btn-circle.rounded-circle {
-        padding: 6px 0px;
-        font-size: 16px;
-        text-align: center;
-    }
+    .monButton {
 
-    .btn-categories {
-        position: absolute;
-        border-width: 5px;
-        background-color: $theme-color-five;
-        border-color: $theme-color-four;
-        color: $theme-color-four;
-        outline: none !important;
-        box-shadow: none !important;
-        font-weight: $font-weight-two;
+        &:before {
+            background-image : url(../images/Button_Arrow_Small.png);
+            //height: 0.9685rem;
+            //width: 0.59055rem;
+        }
 
-        &:active {
-            background-color: $theme-color-three;
+        &:hover {
+            background-color: transparent;
+            border-color: $theme-color-four;
+        }
+
+        &:focus {
+            background-color: transparent;
             border-color: $theme-color-four;
             outline: none !important;
             box-shadow: none !important;
-            color: $theme-color-five;
         }
-    }
-}
-
-    //CATEGORIES - TILES
-    .btn.btn-dark.cat-tile
-    {
-        //STYLING
-        border-color: $theme-color-four;
-        border-radius: 0;
-        border-style: solid;
-        border-width: 2px;
-        color: $theme-color-four;
-        background-color: $theme-color-five;
-        text-align: center;
-        outline: none !important;
-        box-shadow: none !important;
 
-        //FONT
-        font-size: 8mm;
-        word-wrap: break-word;
+        &:active {
+            background-color: transparent !important;
+            border-color: transparent !important;
+            outline: none !important;
+            box-shadow: none !important;
+        }
+    }
 
-        //SPACING
-        margin: 10pt 32pt;
-        height: 40mm;
-        width: 86%;
+    .content {
+        position: relative;
 
-        &:active, &:focus
+        //Circle style button
+            //Toto možná nebude zcela optimální pro ostatní circle buttony. Nehodící se propagujte do btn-categories.
+        .btn-circle.rounded-circle {
+            padding: 6px 0px;
+            font-size: 16px;
+            text-align: center;
+        }
+        .btn-categories
         {
-            background-color: $theme-color-three;
+            position: absolute;
+            border-width: 5px;
+            background-color: $theme-color-five;
             border-color: $theme-color-four;
+            color:$theme-color-four;
             outline: none !important;
             box-shadow: none !important;
-            color: $theme-color-five;
+            font-weight: $font-weight-two;
+
+            &:active
+            {
+                background-color: $theme-color-three;
+                border-color: $theme-color-four;
+                outline: none !important;
+                box-shadow: none !important;
+                color:$theme-color-five;
+            }
+        }
+
+        .btn-sm
+        {
+            width: 120px;
+            height: 120px;
+        }
+        .btn-dm
+        {
+            width: 240px;
+            height: 240px;
+        }
+        .btn-xl
+        {
+            width: 360px;
+            height: 360px;
         }
-    }
 
-    //CATEGORIES - enter button
-    .btn.button-square.cat-enter-butt
-    {
-        position: fixed;
-        bottom: 8%;
-        right: 45%;
-        display: none;
     }
 }
 
@@ -511 +515 @@
 {
     .head-title.text-center h1
     {
-        font-size: 23pt;
-        padding-top: 50pt;
-        margin-left: 36pt;
-        white-space: nowrap;
+        font-size: 45pt;
     }
 
     .btn-circle.rounded-circle.btn-sm

resources/views/categories/index.blade.php

@@ -1 @@
-@extends('layouts.app')
+@extends('layouts.art')
 
 @section('title', 'Categories')
 
 @section('content')
     @if(isset($user))
         {{--<p><?php dd($categories); ?></p>--}}
-        <div class="cat-main-div" onclick="resetEnter()">
-            <div class="head-title text-center">
-                <h1>choose a few topics</h1>
-            </div>
-            <div class="row">
-                {{--@for($k = 1; $k <= count($categories);$k++)--}}
-                @for($k = 0; $k < $count;$k++)
-                    <div class="col-md-2">
-                        <button class="btn btn-dark cat-tile" onclick="showEnterButton({{$categoryNames[$k]->id}})">
-                            {{$categoryNames[$k]->nameCZ}}
-                        </button>
-                    </div>
-                @endfor
-            </div>
-            <div class="carousel-button">
-                <a class="btn button-square cat-enter-butt" role="button">enter</a>
-            </div>
+        <div>
+            <button type="button" class="btn btn-primary button-image monButton"></button>
+        </div>
+        <div class="head-title text-center">
+            <h1>choose a few topics</h1>
+        </div>
+        <div class="content" id="canvas">
+            {{--@for($k = 1; $k <= count($categories);$k++)--}}
+            @for($k = 1; $k <= 10;$k++)
+                @if($categorySizes[$k-1] == 1)
+                        <button type="button" class="btn btn-circle rounded-circle btn-categories btn-sm" id="cat-{{$k}}">{{$categoryNames[$k-1]->nameEN}}</button>
+                @elseif($categorySizes[$k-1] == 2)
+                        <button type="button" class="btn btn-circle rounded-circle btn-categories btn-dm" id="cat-{{$k}}">{{$categoryNames[$k-1]->nameEN}}</button>
+                @else
+                        <button type="button" class="btn btn-circle rounded-circle btn-categories btn-xl" id="cat-{{$k}}">{{$categoryNames[$k-1]->nameEN}}</button>
+                @endif
+            @endfor
         </div>
         <script>
-            var catId = -1;
-            var show = 0;
-
-            function showEnterButton(id)
+            function randomCategoryPos(name, countButtons)
             {
-                catId = id;
-                show = 1;
-                $(".cat-enter-butt").css('display', "inline");
-            }
+                var DISTANCE = 360;
+                var MAX_DISTANCE = 3.5 * DISTANCE;
+                var sWidth = screen.width;
+                var positionsX = [];
+                var positionsY = [];
+                var types = [];
+                var offset = 50;
 
-            function resetEnter()
-            {
-                if(show == 0)
+                if(sWidth <= 540)
                 {
-                    catId = -1;
-                    $(".cat-enter-butt").css('display', "none");
+                    sWidth -= 100;
+                    DISTANCE = 190;
+                    MAX_DISTANCE = 3.5 * DISTANCE;
+                    offset = 25;
+                }
+                else
+                {
+                    if(sWidth > 720)
+                    {
+                        sWidth = 720;
+                    }
+                }
+                console.log(DISTANCE+ "dis\n");
+                console.log(MAX_DISTANCE+ "max_dis\n");
+                for(var i = 0; i < countButtons; i++)
+                {
+                    var size = document.getElementById(name + (i+1)).className;
+                    var type;
+                    if(size.includes("btn-sm"))
+                    {
+                        if(sWidth <= 540)
+                        {
+                            type = 45;
+                        }
+                        else
+                        {
+                            type = 60;
+                        }
+                    }
+                    else if(size.includes("btn-dm"))
+                    {
+                        if(sWidth <= 540)
+                        {
+                            type = 65;
+                        }
+                        else
+                        {
+                            type = 120;
+                        }
+                    }
+                    else
+                    {
+                        if(sWidth <= 540)
+                        {
+                            type = 90;
+                        }
+                        else
+                        {
+                            type = 180;
+                        }
+                    }
+                    console.log(type + "<br>");
+                    //document.write(type + "<br>");
+
+                    var done = true;
+                    var topS;
+                    var rightS;
+                    while(done)
+                    {
+                        if(i == 0)
+                        {
+                            topS = offset + type;
+                        }
+                        else
+                        {
+                            topS = (Math.floor(Math.random() * 2048) + offset) + type;
+                        }
+                        rightS = (Math.floor(Math.random() * sWidth) + 1) + type;
+                        console.log(topS + " " + rightS + "nn<br>");
+
+                        //Check distancing from other circles
+                        var okay = true;
+                        for(var k = 0; k < positionsX.length; k++)
+                        {
+                            var powX = Math.abs(positionsX[k] - topS);
+                            var powY = Math.abs(positionsY[k] - rightS);
+                            var tmp = Math.sqrt((powX*powX) + (powY*powY));
+                            console.log(tmp+ "tmp<br>");
+                            if(tmp < DISTANCE)
+                            {
+                                okay = false;
+                                break;
+                            }
+                        }
+
+                        if(okay)
+                        {
+                            done = false;
+                        }
+                    }
+
+                    //document.write("<br>");
+                    positionsX.push(topS);
+                    positionsY.push(rightS);
+                    types.push(type);
+                }
+
+                for(var i = 1; i <= countButtons; i++)
+                {
+                    document.getElementById(name + i).style.top = (positionsX[i-1] - types[i-1]) + "px";
+                    document.getElementById(name + i).style.right = (positionsY[i-1] - types[i-1]) + "px";
                 }
-                show = 0;
             }
+
+            var countButtons = document.getElementById("canvas").getElementsByTagName('button').length;
+            randomCategoryPos("cat-", countButtons);
         </script>
     @else
         <ul class="list-group">