odon
/
silsilah
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Added new family tree structure

pull/3/head
Nafies Luthfi 9 years ago
parent
2e86a311cd
commit
8b2748282d
4 changed files with 296 additions and 176 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 228
      public/css/tree.css
  2. 103
      public/css/tree2.css
  3. 64
      resources/views/users/tree.blade.php
  4. 63
      resources/views/users/tree2.blade.php

228
public/css/tree.css
View File

@ -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; 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; 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; 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; 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 :)*/

103
public/css/tree2.css
View File

@ -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 :)*/

64
resources/views/users/tree.blade.php
View File

@ -10,34 +10,54 @@
{{ $user->name }} <small>Pohon Keluarga</small> {{ $user->name }} <small>Pohon Keluarga</small>
</h1> </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) @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) @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) @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 @endforeach
</ul>
</li>
</div>
@endif
</div>
@endforeach @endforeach
</ul>
</li>
</div>
@endif
</div>
@endforeach @endforeach
</ul>
</li>
</ul>
<div class="clearfix"></div>
</div>
@endif
</div>
@endforeach
</div>
@endif
</div>
@endforeach
</div>
@endif
</div>
</div> </div>
@endsection @endsection

63
resources/views/users/tree2.blade.php
View File

@ -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
Write Preview
Loading…
Cancel
Save