Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Vertical Option in Family Tree View #119

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Vertical Option in Family Tree View #119

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 14 additions & 3 deletions app/Http/Controllers/UsersController.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,14 +89,25 @@ public function chart(User $user)
}

/**
* Show user family tree.
* Show user family tree vertically.
*
* @param \App\User $user
* @return \Illuminate\View\View
*/
public function tree(User $user)
public function treeVertical(User $user)
{
return view('users.tree', compact('user'));
return view('users.tree-vertical', compact('user'));
}

/**
* Show user family tree horizontally.
*
* @param \App\User $user
* @return \Illuminate\View\View
*/
public function treeHorizontal(User $user)
{
return view('users.tree-horizontal', compact('user'));
}

/**
Expand Down
0 public/css/tree.css → public/css/tree-horizontal.css
View file
Open in desktop
File renamed without changes.
103 changes: 103 additions & 0 deletions public/css/tree-vertical.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
/*Now the CSS*/
* {margin: 0; padding: 0;}

.tree ul {
padding-top: 20px; position: relative;

transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}

.tree li {
float: left; text-align: center;
list-style-type: none;
position: relative;
padding: 20px 5px 0 5px;

transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}

/*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: 2px solid #ccc;
width: 50%; height: 20px;
}
.tree li::after{
right: auto; left: 50%;
border-left: 2px 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; float: none;}

/*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: 2px 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: 2px solid #ccc;
width: 0; height: 20px;
}

.tree li a{
border: 2px solid #ccc;
font-size: 12px;
font-weight: bold;
padding: 5px 10px;
text-decoration: none;
font-family: arial, verdana, tahoma;
display: inline-block;

border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;

transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}

/*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: 2px 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 changes: 0 additions & 103 deletions public/css/tree2.css
View file
Open in desktop

This file was deleted.

2 changes: 2 additions & 0 deletions resources/lang/en/app.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,8 @@
'show_profile' => 'Show Profile',
'show_family_chart' => 'Show Family Chart',
'show_family_tree' => 'Show Family Tree',
'horizontal' => 'Horizontal',
'vertical' => 'Vertical',
'show_marriages' => 'Show Marriages',
'enter_new_name' => 'Enter new Name...',
'select_from_existing_males' => 'Select from Existing Males',
Expand Down
3 changes: 2 additions & 1 deletion resources/lang/id/app.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,9 @@
'edit' => 'Edit',
'update' => 'Update',
'show_profile' => 'Lihat Profil',
'show_family_chart' => 'Lihat Bagan Keluarga',
'show_family_tree' => 'Lihat Pohon Keluarga',
'horizontal' => 'Horisontal',
'vertical' => 'Vertikal',
'show_marriages' => 'Lihat Pernikahan',
'enter_new_name' => 'Input Nama Baru...',
'select_from_existing_males' => 'Pilih dari Pria terdaftar',
Expand Down
2 changes: 2 additions & 0 deletions resources/lang/ur/app.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,8 @@
'show_profile' => 'پروفائل دیکھیں',
'show_family_chart' => 'خاندان کا چارٹ دیکھیں',
'show_family_tree' => 'شجرہ نصب دیکھیں',
'horizontal' => 'أفقياً',
'vertical' => 'عموديًا',
'show_marriages' => 'شادیاں دیکھیں',
'enter_new_name' => 'نیا نام درج کریں۔۔۔',
'select_from_existing_males' => 'موجودہ مردوں میں سے منتخب کریں',
Expand Down
10 changes: 10 additions & 0 deletions resources/views/layouts/family-tree.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
@extends('layouts.user-profile-wide')

@section('subtitle', trans('app.family_tree'))

@section('user-content')
@include('users.partials.family-tree-buttons', ['user' => $user])
<div style="margin-top: 20px; clear: both;">
@yield('family-tree-content')
</div>
@endsection
2 changes: 1 addition & 1 deletion resources/views/users/partials/action-buttons.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
@endcan
{{ link_to_route('users.show', trans('app.show_profile').' '.$user->name, [$user->id], ['class' => Request::segment(3) == null ? 'btn btn-default active' : 'btn btn-default']) }}
{{ link_to_route('users.chart', trans('app.show_family_chart'), [$user->id], ['class' => Request::segment(3) == 'chart' ? 'btn btn-default active' : 'btn btn-default']) }}
{{ link_to_route('users.tree', trans('app.show_family_tree'), [$user->id], ['class' => Request::segment(3) == 'tree' ? 'btn btn-default active' : 'btn btn-default']) }}
{{ link_to_route(Request::segment(4) == 'vertical' ? 'users.tree-vertical' : 'users.tree-horizontal', trans('app.show_family_tree'), [$user->id], ['class' => Request::segment(3) == 'tree' ? 'btn btn-default active' : 'btn btn-default']) }}
{{ link_to_route('users.marriages', trans('app.show_marriages'), [$user->id], ['class' => Request::segment(3) == 'marriages' ? 'btn btn-default active' : 'btn btn-default']) }}
@if ($user->yod)
{{ link_to_route('users.death', trans('user.death'), [$user->id], ['class' => Request::segment(3) == 'death' ? 'btn btn-default active' : 'btn btn-default']) }}
Expand Down
4 changes: 4 additions & 0 deletions resources/views/users/partials/family-tree-buttons.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
<div class="pull-right btn-group" role="group">
{{ link_to_route('users.tree-horizontal', trans('app.horizontal'), [$user->id], ['class' => Request::segment(3) == 'tree' && Request::segment(4) == 'horizontal' ? 'btn btn-default active' : 'btn btn-default']) }}
{{ link_to_route('users.tree-vertical', trans('app.vertical'), [$user->id], ['class' => Request::segment(3) == 'tree' && Request::segment(4) == 'vertical' ? 'btn btn-default active' : 'btn btn-default']) }}
</div>
23 changes: 10 additions & 13 deletions resources/views/users/tree.blade.php → ...ces/views/users/tree-horizontal.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,6 @@
@extends('layouts.user-profile-wide')

@section('subtitle', trans('app.family_tree'))

@section('user-content')
@extends('layouts.family-tree')

@section('family-tree-content')
<?php
$childsTotal = 0;
$grandChildsTotal = 0;
Expand All @@ -14,43 +11,43 @@
?>

<div id="wrapper">
<span class="label">{{ link_to_route('users.tree', $user->name, [$user->id], ['title' => $user->name.' ('.$user->gender.')']) }}</span>
<span class="label">{{ link_to_route('users.tree-horizontal', $user->name, [$user->id], ['title' => $user->name.' ('.$user->gender.')']) }}</span>
@if ($childsCount = $user->childs->count())
<?php $childsTotal += $childsCount ?>
<div class="branch lv1">
@foreach($user->childs as $child)
<div class="entry {{ $childsCount == 1 ? 'sole' : '' }}">
<span class="label">{{ link_to_route('users.tree', $child->name, [$child->id], ['title' => $child->name.' ('.$child->gender.')']) }}</span>
<span class="label">{{ link_to_route('users.tree-horizontal', $child->name, [$child->id], ['title' => $child->name.' ('.$child->gender.')']) }}</span>
@if ($grandsCount = $child->childs->count())
<?php $grandChildsTotal += $grandsCount ?>
<div class="branch lv2">
@foreach($child->childs as $grand)
<div class="entry {{ $grandsCount == 1 ? 'sole' : '' }}">
<span class="label">{{ link_to_route('users.tree', $grand->name, [$grand->id], ['title' => $grand->name.' ('.$grand->gender.')']) }}</span>
<span class="label">{{ link_to_route('users.tree-horizontal', $grand->name, [$grand->id], ['title' => $grand->name.' ('.$grand->gender.')']) }}</span>
@if ($ggCount = $grand->childs->count())
<?php $ggTotal += $ggCount ?>
<div class="branch lv3">
@foreach($grand->childs as $gg)
<div class="entry {{ $ggCount == 1 ? 'sole' : '' }}">
<span class="label">{{ link_to_route('users.tree', $gg->name, [$gg->id], ['title' => $gg->name.' ('.$gg->gender.')']) }}</span>
<span class="label">{{ link_to_route('users.tree-horizontal', $gg->name, [$gg->id], ['title' => $gg->name.' ('.$gg->gender.')']) }}</span>
@if ($ggcCount = $gg->childs->count())
<?php $ggcTotal += $ggcCount ?>
<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>
<span class="label">{{ link_to_route('users.tree-horizontal', $ggc->name, [$ggc->id], ['title' => $ggc->name.' ('.$ggc->gender.')']) }}</span>
@if ($ggccCount = $ggc->childs->count())
<?php $ggccTotal += $ggccCount ?>
<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>
<span class="label">{{ link_to_route('users.tree-horizontal', $ggcc->name, [$ggcc->id], ['title' => $ggcc->name.' ('.$ggcc->gender.')']) }}</span>
@if ($udhegCount = $ggcc->childs->count())
<?php $udhegTotal += $udhegCount ?>
<div class="branch lv6">
@foreach($ggcc->childs as $udheg)
<div class="entry {{ $udhegCount == 1 ? 'sole' : '' }}">
<span class="label">{{ link_to_route('users.tree', $udheg->name, [$udheg->id], ['title' => $udheg->name.' ('.$udheg->gender.')']) }}</span>
<span class="label">{{ link_to_route('users.tree-horizontal', $udheg->name, [$udheg->id], ['title' => $udheg->name.' ('.$udheg->gender.')']) }}</span>
</div>
@endforeach
</div>
Expand Down Expand Up @@ -107,5 +104,5 @@
@endsection

@section ('ext_css')
<link rel="stylesheet" href="{{ asset('css/tree.css') }}">
<link rel="stylesheet" href="{{ asset('css/tree-horizontal.css') }}">
@endsection
Loading