commit d80a647433e1e602b3704a26ff310fb9c9e5c6d8
Author: Jiri Nohac <jnohac@students.zcu.cz>
Date:   Wed Apr 29 14:32:25 2020 +0000

    Revert "Revert "Issue @7957 #4h""
    
    This reverts commit 977060b91a62942235ea39795f4a9821cc89077f

diff --git a/app/Http/Controllers/CategoriesController.php b/app/Http/Controllers/CategoriesController.php
index 3f3b486..0bdebe6 100644
--- a/app/Http/Controllers/CategoriesController.php
+++ b/app/Http/Controllers/CategoriesController.php
@@ -14,34 +14,6 @@ class CategoriesController extends Controller
         $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.
      *
@@ -53,46 +25,13 @@ class CategoriesController extends Controller
         {
             $userId = Auth::user()->id;
 
-            $categoryNames = Category::all();
+            $categoryNames = Category::orderBy('id')->get();
             $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);
diff --git a/resources/sass/_custom.scss b/resources/sass/_custom.scss
index a42b4ba..cbf7819 100644
--- a/resources/sass/_custom.scss
+++ b/resources/sass/_custom.scss
@@ -360,81 +360,77 @@ body {
         }
     }
 
-    .monButton {
-
-        &:before {
-            background-image : url(../images/Button_Arrow_Small.png);
-            //height: 0.9685rem;
-            //width: 0.59055rem;
-        }
-
-        &:hover {
-            background-color: transparent;
-            border-color: $theme-color-four;
-        }
+    .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;
+    }
 
-        &:focus {
-            background-color: transparent;
-            border-color: $theme-color-four;
-            outline: none !important;
-            box-shadow: none !important;
-        }
+    .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;
 
         &:active {
-            background-color: transparent !important;
-            border-color: transparent !important;
+            background-color: $theme-color-three;
+            border-color: $theme-color-four;
             outline: none !important;
             box-shadow: none !important;
+            color: $theme-color-five;
         }
     }
+}
 
-    .content {
-        position: relative;
+    //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;
 
-        //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
+        //FONT
+        font-size: 8mm;
+        word-wrap: break-word;
+
+        //SPACING
+        margin: 10pt 32pt;
+        height: 40mm;
+        width: 86%;
+
+        &:active, &:focus
         {
-            position: absolute;
-            border-width: 5px;
-            background-color: $theme-color-five;
+            background-color: $theme-color-three;
             border-color: $theme-color-four;
-            color:$theme-color-four;
             outline: none !important;
             box-shadow: none !important;
-            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;
+            color: $theme-color-five;
         }
+    }
 
+    //CATEGORIES - enter button
+    .btn.button-square.cat-enter-butt
+    {
+        position: fixed;
+        bottom: 8%;
+        right: 45%;
+        display: none;
     }
 }
 
@@ -515,7 +511,10 @@ body {
 {
     .head-title.text-center h1
     {
-        font-size: 45pt;
+        font-size: 23pt;
+        padding-top: 50pt;
+        margin-left: 36pt;
+        white-space: nowrap;
     }
 
     .btn-circle.rounded-circle.btn-sm
diff --git a/resources/views/categories/index.blade.php b/resources/views/categories/index.blade.php
index a5430ee..84de344 100644
--- a/resources/views/categories/index.blade.php
+++ b/resources/views/categories/index.blade.php
@@ -1,147 +1,48 @@
-@extends('layouts.art')
+@extends('layouts.app')
 
 @section('title', 'Categories')
 
 @section('content')
     @if(isset($user))
         {{--<p><?php dd($categories); ?></p>--}}
-        <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 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>
         <script>
-            function randomCategoryPos(name, countButtons)
-            {
-                var DISTANCE = 360;
-                var MAX_DISTANCE = 3.5 * DISTANCE;
-                var sWidth = screen.width;
-                var positionsX = [];
-                var positionsY = [];
-                var types = [];
-                var offset = 50;
-
-                if(sWidth <= 540)
-                {
-                    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 catId = -1;
+            var show = 0;
 
-                    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);
-                }
+            function showEnterButton(id)
+            {
+                catId = id;
+                show = 1;
+                $(".cat-enter-butt").css('display', "inline");
+            }
 
-                for(var i = 1; i <= countButtons; i++)
+            function resetEnter()
+            {
+                if(show == 0)
                 {
-                    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";
+                    catId = -1;
+                    $(".cat-enter-butt").css('display', "none");
                 }
+                show = 0;
             }
-
-            var countButtons = document.getElementById("canvas").getElementsByTagName('button').length;
-            randomCategoryPos("cat-", countButtons);
         </script>
     @else
         <ul class="list-group">
