Revize 34c0b905

Issue #7850 @10h

Vytvoreni stranky kategorii podle navrhu rozlozeni dle umelecke specifikace. Stranka po jejimz nacteni zobrazi bubliny reprezentujici konkretni kategorie artefaktu. Kazda bublina ma tri velikosti, dle rozzareni do tri kategorii podle poctu artefaktu v konkretni kategorii. Bubliny jsou nahodne rozhazene po strance, pricemz by se zadne nemely krizit. Co se tyce fontu Avenir Black, je to momentalne reseno primem nainstalovanim fontu do PC a nactenim pres "font-family".

app/Http/Controllers/CategoriesController.php

@@ +1 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\ArtefactCategory;
+use App\Category;
+use Illuminate\Support\Facades\Auth;
+use App\User;
+
+class CategoriesController extends Controller
+{
+    public function __construct()
+    {
+        $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.
+     *
+     * @return \Illuminate\Http\Response
+     */
+    public function index()
+    {
+        if(isset(Auth::user()->id))
+        {
+            $userId = Auth::user()->id;
+
+            $categoryNames = Category::all();
+            $countCategory = count($categoryNames);
+            $categories = array();
+            for($i = 1; $i <= $countCategory;$i++)
+            {
+                array_push($categories, ArtefactCategory::where('category_id', $i)->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);
+        }
+        else
+        {
+            $data = array(
+                'title' => 'Welcome to the MERLOT page',
+            );
+            return view('pages.index') -> with($data);
+        }
+    }
+}

resources/sass/_custom.scss

@@ -1 +1 @@
 // Ready for custom styling
+
+body
+{
+    background-color: $cusBlack;
+}
+
+.head-title.text-center h1
+{
+    color: $cusWhite;
+    font-family: Avenir;
+    font-size: 60pt;
+    font-weight: bold;
+    letter-spacing: 3px;
+}
+
+.bouton-image:before
+{
+    content: "";
+    width: 100px;
+    height: 100px;
+    display: inline-block;
+    margin-right: 5px;
+    vertical-align: text-top;
+    background-color: transparent;
+    background-position : center center;
+    background-repeat:no-repeat;
+}
+
+.bouton-image
+{
+    background-color: transparent;
+    border-color: transparent;
+}
+
+.monBouton:before
+{
+    background-image : url(../images/Button_Arrow_Small.png);
+}
+
+.monBouton:hover
+{
+    background-color: transparent;
+    border-color: $cusBrown3;
+}
+
+.monBouton:focus
+{
+    background-color: transparent;
+    border-color: $cusBrown3;
+    outline: none !important;
+    box-shadow: none !important;
+}
+
+.monBouton:active
+{
+    background-color: transparent !important;
+    border-color: transparent !important;
+    outline: none !important;
+    box-shadow: none !important;
+}
+
+.content {
+    position: relative;
+}
+
+//Circle style button
+.btn-circle.rounded-circle.btn-sm
+{
+    position: absolute;
+    width: 120px;
+    height: 120px;
+    padding: 6px 0px;
+    border-radius: 15px;
+    font-size: 16px;
+    text-align: center;
+    background-color: $cusBlack;
+    border-color: $cusBrown3;
+    border-width: 5px;
+    color:$cusBrown3;
+    outline: none !important;
+    box-shadow: none !important;
+}
+
+.btn-circle.rounded-circle.btn-sm:active
+{
+    background-color: $cusBrown2;
+    border-color: $cusBrown3;
+    outline: none !important;
+    box-shadow: none !important;
+    color:$cusBlack;
+}
+
+.btn-circle.rounded-circle.btn-dm
+{
+    position: absolute;
+    width: 240px;
+    height: 240px;
+    padding: 6px 0px;
+    border-radius: 15px;
+    font-size: 16px;
+    text-align: center;
+    background-color: $cusBlack;
+    border-color: $cusBrown3;
+    color:$cusBrown3;
+    border-width: 5px;
+    outline: none !important;
+    box-shadow: none !important;
+}
+.btn-circle.rounded-circle.btn-dm:active
+{
+    background-color: $cusBrown2;
+    border-color: $cusBrown3;
+    outline: none !important;
+    box-shadow: none !important;
+    color:$cusBlack;
+}
+
+.btn-circle.rounded-circle.btn-xl
+{
+    position: absolute;
+    width: 360px;
+    height: 360px;
+    padding: 6px 0px;
+    border-radius: 15px;
+    font-size: 16px;
+    text-align: center;
+    background-color: $cusBlack;
+    border-color: $cusBrown3;
+    color:$cusBrown3;
+    border-width: 5px;
+    outline: none !important;
+    box-shadow: none !important;
+}
+.btn-circle.rounded-circle.btn-xl:active
+{
+    background-color: $cusBrown2;
+    border-color: $cusBrown3;
+    outline: none !important;
+    box-shadow: none !important;
+    color:$cusBlack;
+}
+
+@media only screen and (max-width: 540px)
+{
+    .head-title.text-center h1
+    {
+        font-size: 45pt;
+    }
+
+    .btn-circle.rounded-circle.btn-sm
+    {
+        width: 90px;
+        height: 90px;
+    }
+
+    .btn-circle.rounded-circle.btn-dm
+    {
+        width: 130px;
+        height: 130px;
+    }
+
+    .btn-circle.rounded-circle.btn-xl
+    {
+        width: 180px;
+        height: 180px;
+    }
+}

resources/sass/_variables.scss

@@ -17 +17 @@
 $green: #38c172;
 $teal: #4dc0b5;
 $cyan: #6cb2eb;
+
+// Custom colors
+$cusWhite: #ffffff;
+$cusBrown1: #ddd1b9;
+$cusBrown2: #efdab3;
+$cusBrown3: #ead4b0;
+$cusBlack: #272727;
+

resources/sass/app.scss

@@ -6 +6 @@
 
 // Bootstrap
 @import '~bootstrap/scss/bootstrap';
+
+@import 'custom';

resources/views/categories/index.blade.php

@@ +1 @@
+@extends('layouts.art')
+
+@section('title', 'Categories')
+
+@section('content')
+    @if(isset($user))
+        {{--<p><?php dd($categories); ?></p>--}}
+        <div>
+            <button type="button" class="btn btn-primary bouton-image monBouton"></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-primary btn-circle rounded-circle btn-sm" id="cat-{{$k}}">{{$categoryNames[$k-1]->nameEN}}</button>
+                @elseif($categorySizes[$k-1] == 2)
+                        <button type="button" class="btn btn-primary btn-circle rounded-circle btn-dm" id="cat-{{$k}}">{{$categoryNames[$k-1]->nameEN}}</button>
+                @else
+                        <button type="button" class="btn btn-primary btn-circle rounded-circle btn-xl" id="cat-{{$k}}">{{$categoryNames[$k-1]->nameEN}}</button>
+                @endif
+            @endfor
+        </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 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";
+                }
+            }
+
+            var countButtons = document.getElementById("canvas").getElementsByTagName('button').length;
+            randomCategoryPos("cat-", countButtons);
+        </script>
+    @else
+        <ul class="list-group">
+            <li class="list-group-item">
+                <h3>Not found the USER in the database with number id {{$user->id}}!</h3>
+            </li>
+        </ul>
+    @endif
+@endsection