Nafies Luthfi
9 years ago
8 changed files with 320 additions and 58 deletions
-
5app/Http/Controllers/UsersController.php
-
173public/css/tree.css
-
8resources/views/layouts/app.blade.php
-
93resources/views/users/chart.blade.php
-
27resources/views/users/partials/chart-sibling.blade.php
-
9resources/views/users/show.blade.php
-
46resources/views/users/tree.blade.php
-
1routes/web.php
@ -0,0 +1,173 @@ |
|||
/*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 ul.branch-2 { |
|||
padding-top: 0; |
|||
left: 10%; |
|||
border-left: 1px solid #ccc; |
|||
} |
|||
|
|||
.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; |
|||
} |
|||
|
|||
.tree .branch-1 > li { |
|||
text-align: left; |
|||
/*border-left: 1px solid #ccc;*/ |
|||
} |
|||
|
|||
.tree .branch-2 li { |
|||
float: none; |
|||
text-align: left; |
|||
padding-left: 10px; |
|||
} |
|||
|
|||
/*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; |
|||
} |
|||
|
|||
.tree .branch-2 li::after{ |
|||
border-left: none; |
|||
} |
|||
|
|||
.tree .branch-2 li::before, .tree .branch-2 li::after{ |
|||
content: ''; |
|||
position: absolute; |
|||
top: 30px; |
|||
right: 50%; |
|||
border-bottom: 1px solid #ccc; |
|||
border-top: none; |
|||
width: 10px; |
|||
height: 5px; |
|||
} |
|||
|
|||
.tree .branch-2 li::before { |
|||
display: none; |
|||
} |
|||
|
|||
.tree .branch-2 li::after{ |
|||
right: auto; |
|||
left: 0%; |
|||
/*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: block; |
|||
} |
|||
|
|||
/*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; |
|||
} |
|||
|
|||
.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; |
|||
} |
|||
|
|||
/*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; |
|||
} |
|||
|
|||
/*.tree .branch-2 li:first-child::after{ |
|||
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{ |
|||
left: 0; |
|||
} |
|||
|
|||
.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 :)*/ |
|||
@ -0,0 +1,27 @@ |
|||
<div class="panel panel-default table-responsive"> |
|||
<table class="table table-bordered table-striped"> |
|||
<tbody> |
|||
<tr> |
|||
<th style="width: 35%">Saudara</th> |
|||
<th class="text-center" colspan="{{ $sibling->childs->count() }}">{{ $sibling->profileLink('chart') }} ({{ $sibling->gender }})</th> |
|||
</tr> |
|||
<tr> |
|||
<th>Keponakan & Cucu-Cucu</th> |
|||
<td> |
|||
<ol style="padding-left: 15px"> |
|||
@foreach($sibling->childs as $child) |
|||
<li style="margin-top: 10px;"> |
|||
{{ $child->profileLink('chart') }} ({{ $child->gender }}) |
|||
<ul style="padding-left: 18px"> |
|||
@foreach($child->childs as $grand) |
|||
<li>{{ $grand->profileLink('chart') }} ({{ $grand->gender }})</li> |
|||
@endforeach |
|||
</ul> |
|||
</li> |
|||
@endforeach |
|||
</ol> |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
@ -0,0 +1,46 @@ |
|||
@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 class="branch-0"> |
|||
<li> |
|||
{{ $user->profileLink() }} |
|||
<ul class="branch-1"> |
|||
@foreach($user->childs as $child) |
|||
<li> |
|||
{{ $child->profileLink() }} |
|||
<ul class="branch-2"> |
|||
@foreach($child->childs as $grand) |
|||
<li> |
|||
{{ $grand->profileLink() }} |
|||
<ul class="branch-2"> |
|||
@foreach($grand->childs as $gg) |
|||
<li> |
|||
{{ $gg->profileLink() }} |
|||
</li> |
|||
@endforeach |
|||
</ul> |
|||
</li> |
|||
@endforeach |
|||
</ul> |
|||
</li> |
|||
@endforeach |
|||
</ul> |
|||
</li> |
|||
</ul> |
|||
<div class="clearfix"></div> |
|||
</div> |
|||
@endsection |
|||
|
|||
@section ('ext_css') |
|||
<link rel="stylesheet" href="{{ asset('css/tree.css') }}"> |
|||
@endsection |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue