Added new family tree structure

public/css/tree.css

@@ -1,173 +1,107 @@
-/*Now the CSS*/
-* {margin: 0; padding: 0;}
-
-.tree ul {
-    padding-top: 20px; position: relative;
-
-    transition: all 0.2s;
-    -webkit-transition: all 0.2s;
-    -moz-transition: all 0.2s;
+*, *:before, *:after {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
 }
 
-.tree ul.branch-2 {
-    padding-top: 0;
-    left: 10%;
-    border-left: 1px solid #ccc;
+body {
+    padding-bottom: 50px;
 }
 
-.tree li {
-    float: left; text-align: center;
-    list-style-type: none;
+#wrapper {
     position: relative;
-    padding: 20px 5px 0 5px;
-
-    transition: all 0.2s;
-    -webkit-transition: all 0.2s;
-    -moz-transition: all 0.2s;
 }
 
-.tree .branch-1 > li {
-    text-align: left;
-    /*border-left: 1px solid #ccc;*/
+.branch {
+    position: relative;
+    margin-left: 230px;
 }
-
-.tree .branch-2 li {
-    float: none;
-    text-align: left;
-    padding-left: 10px;
+/*.branch .lv3 {
+    margin-left: 150px;
 }
-
-/*We will use ::before and ::after to draw the connectors*/
-
-.tree li::before, .tree li::after{
-    content: '';
-    position: absolute; top: 0; right: 50%;
-    border-top: 1px solid #ccc;
-    width: 50%; height: 20px;
+.branch .lv4 {
+    margin-left: 150px;
 }
-
-.tree li::after{
-    right: auto; left: 50%;
-    border-left: 1px solid #ccc;
+#wrapper .branch .lv2 span.label {
+    width: 30px;
+}*/
+.branch:before {
+    content: "";
+    width: 30px;
+    border-top: 2px solid #ccc;
+    position: absolute;
+    left: -60px;
+    top: 50%;
+    margin-top: 1px;
 }
 
-.tree .branch-2 li::after{
-    border-left: none;
+.entry {
+    position: relative;
+    min-height: 30px;
 }
-
-.tree .branch-2 li::before, .tree .branch-2 li::after{
-    content: '';
+.entry:before {
+    content: "";
+    height: 100%;
+    border-left: 2px solid #ccc;
     position: absolute;
-    top: 30px;
-    right: 50%;
-    border-bottom: 1px solid #ccc;
-    border-top: none;
-    width: 10px;
-    height: 5px;
+    left: -30px;
 }
-
-.tree .branch-2 li::before {
-    display: none;
+.entry:after {
+    content: "";
+    width: 30px;
+    border-top: 2px solid #ccc;
+    position: absolute;
+    left: -30px;
+    top: 50%;
+    margin-top: 1px;
 }
-
-.tree .branch-2 li::after{
-    right: auto;
-    left: 0%;
-    /*border-left: 1px solid #ccc;*/
+.entry:first-child:before {
+    width: 10px;
+    height: 50%;
+    top: 50%;
+    margin-top: 2px;
+    border-radius: 10px 0 0 0;
 }
-
-/*We need to remove left-right connectors from elements without any siblings*/
-.tree li:only-child::after, .tree li:only-child::before {
-    display: block;
+.entry:first-child:after {
+    height: 10px;
+    border-radius: 10px 0 0 0;
 }
-
-/*Remove space from the top of single children*/
-.tree .branch-0 > li:only-child{ padding-top: 0; }
-
-/*Remove left connector from first child and right connector from last child*/
-.tree li:first-child::before, .tree li:last-child::after{
-    border: 0 none;
+.entry:last-child:before {
+    width: 10px;
+    height: 50%;
+    border-radius: 0 0 0 10px;
 }
-
-.tree .branch-2 li:first-child::before, .tree .branch-2 li:last-child::after {
-    right: auto;
-    left: 0%;
-    /*border-left: 1px solid #ccc;*/
-    border-bottom: 1px solid #ccc;
+.entry:last-child:after {
+    height: 10px;
+    border-top: none;
+    border-bottom: 2px solid #ccc;
+    border-radius: 0 0 0 10px;
+    margin-top: -9px;
 }
-
-/*Adding back the vertical connector to the last nodes*/
-.tree .branch-1 li:last-child::before{
-    border-right: 1px solid #ccc;
-    border-radius: 0 5px 0 0;
-    -webkit-border-radius: 0 5px 0 0;
-    -moz-border-radius: 0 5px 0 0;
-}
-.tree li:first-child::after{
-    border-radius: 5px 0 0 0;
-    -webkit-border-radius: 5px 0 0 0;
-    -moz-border-radius: 5px 0 0 0;
+.entry.sole:before {
+    display: none;
 }
-
-/*.tree .branch-2 li:first-child::after{
+.entry.sole:after {
+    width: 30px;
+    height: 0;
+    margin-top: 1px;
     border-radius: 0;
-    top: 0;
-    height: 35px;
-}
-
-.tree .branch-2 li:last-child::after{
-    border-radius: 0 0 0 5px;
-    -webkit-border-radius: 0 0 0 5px;
-    -moz-border-radius: 0 0 0 5px;
-}*/
-
-/*Time to add downward connectors from parents*/
-.tree ul ul::before{
-    content: '';
-    position: absolute; top: 0; left: 50%;
-    /*border-left: 1px solid #ccc;*/
-    width: 0; height: 20px;
 }
 
-.tree ul.branch-1::before{
-    border-left: 1px solid #ccc;
-}
-
-.tree ul ul.branch-2::before{
+#wrapper span.label {
+    display: block;
+    font-size: 12px;
+    /*min-width: 150px;*/
+    width: 170px;
+    overflow-x: hidden;
+    padding: 4px 8px;
+    line-height: 14px;
+    text-align: center;
+    border: 2px solid #ccc;
+    /*border: 1px solid #2e6ba7;*/
+    border-radius: 6px;
+    position: absolute;
     left: 0;
+    top: 50%;
+    margin-top: -10px;
 }
-
-.tree li a {
-    min-width: 100px;
-    border: 1px solid #ccc;
-    padding: 5px 10px;
-    text-decoration: none;
-    color: #666;
-    font-family: arial, verdana, tahoma;
-    font-size: 11px;
-    display: inline-block;
-
-    border-radius: 5px;
-    -webkit-border-radius: 5px;
-    -moz-border-radius: 5px;
-
-    transition: all 0.2s;
-    -webkit-transition: all 0.2s;
-    -moz-transition: all 0.2s;
-}
-
-/*Time for some hover effects*/
-/*We will apply the hover effect the the lineage of the element also*/
-.tree li a:hover, .tree li a:hover+ul li a {
-    background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
-}
-/*Connector styles on hover*/
-.tree li a:hover+ul li::after,
-.tree li a:hover+ul li::before,
-.tree li a:hover+ul::before,
-.tree li a:hover+ul ul::before{
-    border-color:  #94a0b4;
-}
-
-/*Thats all. I hope you enjoyed it.
-Thanks :)*/

public/css/tree2.css

@@ -0,0 +1,103 @@
+/*Now the CSS*/
+* {margin: 0; padding: 0;}
+
+.tree ul {
+    padding-top: 20px; position: relative;
+
+    transition: all 0.2s;
+    -webkit-transition: all 0.2s;
+    -moz-transition: all 0.2s;
+}
+
+.tree li {
+    float: left; text-align: center;
+    list-style-type: none;
+    position: relative;
+    padding: 20px 5px 0 5px;
+
+    transition: all 0.2s;
+    -webkit-transition: all 0.2s;
+    -moz-transition: all 0.2s;
+}
+
+/*We will use ::before and ::after to draw the connectors*/
+
+.tree li::before, .tree li::after{
+    content: '';
+    position: absolute; top: 0; right: 50%;
+    border-top: 1px solid #ccc;
+    width: 50%; height: 20px;
+}
+.tree li::after{
+    right: auto; left: 50%;
+    border-left: 1px solid #ccc;
+}
+
+/*We need to remove left-right connectors from elements without
+any siblings*/
+.tree li:only-child::after, .tree li:only-child::before {
+    display: none;
+}
+
+/*Remove space from the top of single children*/
+.tree li:only-child{ padding-top: 0;}
+
+/*Remove left connector from first child and
+right connector from last child*/
+.tree li:first-child::before, .tree li:last-child::after{
+    border: 0 none;
+}
+/*Adding back the vertical connector to the last nodes*/
+.tree li:last-child::before{
+    border-right: 1px solid #ccc;
+    border-radius: 0 5px 0 0;
+    -webkit-border-radius: 0 5px 0 0;
+    -moz-border-radius: 0 5px 0 0;
+}
+.tree li:first-child::after{
+    border-radius: 5px 0 0 0;
+    -webkit-border-radius: 5px 0 0 0;
+    -moz-border-radius: 5px 0 0 0;
+}
+
+/*Time to add downward connectors from parents*/
+.tree ul ul::before{
+    content: '';
+    position: absolute; top: 0; left: 50%;
+    border-left: 1px solid #ccc;
+    width: 0; height: 20px;
+}
+
+.tree li a{
+    border: 1px solid #ccc;
+    padding: 4px 6px;
+    text-decoration: none;
+    color: #666;
+    font-family: arial, verdana, tahoma;
+    font-size: 11px;
+    display: inline-block;
+
+    border-radius: 5px;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+
+    transition: all 0.2s;
+    -webkit-transition: all 0.2s;
+    -moz-transition: all 0.2s;
+}
+
+/*Time for some hover effects*/
+/*We will apply the hover effect the the lineage of the element also*/
+.tree li a:hover, .tree li a:hover+ul li a {
+    background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
+}
+/*Connector styles on hover*/
+.tree li a:hover+ul li::after,
+.tree li a:hover+ul li::before,
+.tree li a:hover+ul::before,
+.tree li a:hover+ul ul::before{
+    border-color:  #94a0b4;
+}
+
+/*Thats all. I hope you enjoyed it.
+Thanks :)*/

resources/views/users/tree.blade.php

@@ -10,34 +10,54 @@
     {{ $user->name }} <small>Pohon Keluarga</small>
 </h1>
 
-<div class="tree">
-    <ul class="branch-0">
-        <li>
-            {{ $user->profileLink() }}
-            <ul class="branch-1">
+<div id="wrapper">
+    <span class="label">{{ link_to_route('users.tree', $user->name, [$user->id], ['title' => $user->name.' ('.$user->gender.')']) }}</span>
+        @if ($childsCount = $user->childs->count())
+        <div class="branch lv1">
             @foreach($user->childs as $child)
-                <li>
-                    {{ $child->profileLink() }}
-                    <ul class="branch-2">
+            <div class="entry {{ $childsCount == 1 ? 'sole' : '' }}">
+                <span class="label">{{ link_to_route('users.tree', $child->name, [$child->id], ['title' => $child->name.' ('.$child->gender.')']) }}</span>
+                @if ($grandsCount = $child->childs->count())
+                <div class="branch lv2">
                     @foreach($child->childs as $grand)
-                        <li>
-                            {{ $grand->profileLink() }}
-                            <ul class="branch-2">
+                    <div class="entry {{ $grandsCount == 1 ? 'sole' : '' }}">
+                        <span class="label">{{ link_to_route('users.tree', $grand->name, [$grand->id], ['title' => $grand->name.' ('.$grand->gender.')']) }}</span>
+                        @if ($ggCount = $grand->childs->count())
+                        <div class="branch lv3">
                             @foreach($grand->childs as $gg)
-                                <li>
-                                    {{ $gg->profileLink() }}
-                                </li>
+                            <div class="entry {{ $ggCount == 1 ? 'sole' : '' }}">
+                                <span class="label">{{ link_to_route('users.tree', $gg->name, [$gg->id], ['title' => $gg->name.' ('.$gg->gender.')']) }}</span>
+                                @if ($ggcCount = $gg->childs->count())
+                                <div class="branch lv4">
+                                    @foreach($gg->childs as $ggc)
+                                    <div class="entry {{ $ggcCount == 1 ? 'sole' : '' }}">
+                                        <span class="label">{{ link_to_route('users.tree', $ggc->name, [$ggc->id], ['title' => $ggc->name.' ('.$ggc->gender.')']) }}</span>
+                                        @if ($ggccCount = $ggc->childs->count())
+                                        <div class="branch lv5">
+                                            @foreach($ggc->childs as $ggcc)
+                                            <div class="entry {{ $ggccCount == 1 ? 'sole' : '' }}">
+                                                <span class="label">{{ link_to_route('users.tree', $ggcc->name, [$ggcc->id], ['title' => $ggcc->name.' ('.$ggcc->gender.')']) }}</span>
+                                            </div>
                                             @endforeach
-                            </ul>
-                        </li>
+                                        </div>
+                                        @endif
+                                    </div>
                                     @endforeach
-                    </ul>
-                </li>
+                                </div>
+                                @endif
+                            </div>
                             @endforeach
-            </ul>
-        </li>
-    </ul>
-    <div class="clearfix"></div>
+                        </div>
+                        @endif
+                    </div>
+                    @endforeach
+                </div>
+                @endif
+            </div>
+            @endforeach
+        </div>
+        @endif
+    </div>
 </div>
 @endsection
 

resources/views/users/tree2.blade.php

@@ -0,0 +1,63 @@
+@extends('layouts.app')
+
+@section('content')
+</div>
+<div class="container-fluid">
+<h1 class="page-header">
+    <div class="pull-right">
+        {{ link_to_route('users.show', 'Lihat Profil '.$user->name, [$user->id], ['class' => 'btn btn-default']) }}
+    </div>
+    {{ $user->name }} <small>Pohon Keluarga</small>
+</h1>
+
+<div class="tree">
+    <ul>
+        <li>
+            {{ link_to_route('users.tree', $user->name, [$user->id], ['title' => $user->name.' ('.$user->gender.')']) }}
+            @if ($user->childs->count())
+            <ul>
+                @foreach($user->childs as $child)
+                <li>
+                    {{ link_to_route('users.tree', $child->id, [$child->id], ['title' => $child->name.' ('.$child->gender.')']) }}
+                    @if ($child->childs->count())
+                    <ul>
+                        @foreach($child->childs as $grand)
+                        <li>
+                            {{ link_to_route('users.tree', $grand->id, [$grand->id], ['title' => $grand->name.' ('.$grand->gender.')']) }}
+                            @if ($grand->childs->count())
+                            <ul>
+                                @foreach($grand->childs as $gg)
+                                <li>
+                                    {{ link_to_route('users.tree', $gg->id, [$gg->id], ['title' => $gg->name.' ('.$gg->gender.')']) }}
+                                    <?php /*
+                                    @if ($gg->childs->count())
+                                    <ul>
+                                        @foreach($gg->childs as $ggc)
+                                        <li>
+                                            {{ link_to_route('users.tree', $ggc->id, [$ggc->id], ['title' => $ggc->name.' ('.$ggc->gender.')']) }}
+                                        </li>
+                                        @endforeach
+                                    </ul>
+                                    @endif
+                                    */ ?>
+                                </li>
+                                @endforeach
+                            </ul>
+                            @endif
+                        </li>
+                        @endforeach
+                    </ul>
+                    @endif
+                </li>
+                @endforeach
+            </ul>
+            @endif
+        </li>
+    </ul>
+    <div class="clearfix"></div>
+</div>
+@endsection
+
+@section ('ext_css')
+<link rel="stylesheet" href="{{ asset('css/tree2.css') }}">
+@endsection