From 8b2748282d7d28730eab9b611adcd43d000a9ac2 Mon Sep 17 00:00:00 2001 From: Nafies Luthfi Date: Mon, 10 Jul 2017 09:10:26 +0800 Subject: [PATCH] Added new family tree structure --- public/css/tree.css | 230 ++++++++++++---------------------- public/css/tree2.css | 103 +++++++++++++++ resources/views/users/tree.blade.php | 76 ++++++----- resources/views/users/tree2.blade.php | 63 ++++++++++ 4 files changed, 296 insertions(+), 176 deletions(-) create mode 100644 public/css/tree2.css create mode 100644 resources/views/users/tree2.blade.php diff --git a/public/css/tree.css b/public/css/tree.css index 2133420..dd2f65a 100644 --- a/public/css/tree.css +++ b/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; -} - -.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 :)*/ \ No newline at end of file + top: 50%; + margin-top: -10px; +} \ No newline at end of file diff --git a/public/css/tree2.css b/public/css/tree2.css new file mode 100644 index 0000000..1fc06e0 --- /dev/null +++ b/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 :)*/ \ No newline at end of file diff --git a/resources/views/users/tree.blade.php b/resources/views/users/tree.blade.php index 7b7d072..69bfdae 100644 --- a/resources/views/users/tree.blade.php +++ b/resources/views/users/tree.blade.php @@ -10,34 +10,54 @@ {{ $user->name }} Pohon Keluarga -
- -
+
+ {{ link_to_route('users.tree', $user->name, [$user->id], ['title' => $user->name.' ('.$user->gender.')']) }} + @if ($childsCount = $user->childs->count()) +
+ @foreach($user->childs as $child) +
+ {{ link_to_route('users.tree', $child->name, [$child->id], ['title' => $child->name.' ('.$child->gender.')']) }} + @if ($grandsCount = $child->childs->count()) +
+ @foreach($child->childs as $grand) +
+ {{ link_to_route('users.tree', $grand->name, [$grand->id], ['title' => $grand->name.' ('.$grand->gender.')']) }} + @if ($ggCount = $grand->childs->count()) +
+ @foreach($grand->childs as $gg) +
+ {{ link_to_route('users.tree', $gg->name, [$gg->id], ['title' => $gg->name.' ('.$gg->gender.')']) }} + @if ($ggcCount = $gg->childs->count()) +
+ @foreach($gg->childs as $ggc) +
+ {{ link_to_route('users.tree', $ggc->name, [$ggc->id], ['title' => $ggc->name.' ('.$ggc->gender.')']) }} + @if ($ggccCount = $ggc->childs->count()) +
+ @foreach($ggc->childs as $ggcc) +
+ {{ link_to_route('users.tree', $ggcc->name, [$ggcc->id], ['title' => $ggcc->name.' ('.$ggcc->gender.')']) }} +
+ @endforeach +
+ @endif +
+ @endforeach +
+ @endif +
+ @endforeach +
+ @endif +
+ @endforeach +
+ @endif +
+ @endforeach +
+ @endif +
@endsection diff --git a/resources/views/users/tree2.blade.php b/resources/views/users/tree2.blade.php new file mode 100644 index 0000000..d8089fc --- /dev/null +++ b/resources/views/users/tree2.blade.php @@ -0,0 +1,63 @@ +@extends('layouts.app') + +@section('content') + +
+

+
+ {{ link_to_route('users.show', 'Lihat Profil '.$user->name, [$user->id], ['class' => 'btn btn-default']) }} +
+ {{ $user->name }} Pohon Keluarga +

+ +
+
    +
  • + {{ link_to_route('users.tree', $user->name, [$user->id], ['title' => $user->name.' ('.$user->gender.')']) }} + @if ($user->childs->count()) +
      + @foreach($user->childs as $child) +
    • + {{ link_to_route('users.tree', $child->id, [$child->id], ['title' => $child->name.' ('.$child->gender.')']) }} + @if ($child->childs->count()) +
        + @foreach($child->childs as $grand) +
      • + {{ link_to_route('users.tree', $grand->id, [$grand->id], ['title' => $grand->name.' ('.$grand->gender.')']) }} + @if ($grand->childs->count()) +
          + @foreach($grand->childs as $gg) +
        • + {{ link_to_route('users.tree', $gg->id, [$gg->id], ['title' => $gg->name.' ('.$gg->gender.')']) }} + childs->count()) +
            + @foreach($gg->childs as $ggc) +
          • + {{ link_to_route('users.tree', $ggc->id, [$ggc->id], ['title' => $ggc->name.' ('.$ggc->gender.')']) }} +
            • + @endforeach +
          + @endif + */ ?> +
          • + @endforeach +
        + @endif +
        • + @endforeach +
      + @endif +
      • + @endforeach +
    + @endif +
    • +
+
+
+@endsection + +@section ('ext_css') + +@endsection