Merge branch 'beta'

# Conflicts: # README.md
l0drex · May 5, 2022 · 005788e · 005788e
2 parents 25be220 + d44edb0
commit 005788e
Show file tree

Hide file tree

Showing 23 changed files with 1,675 additions and 772 deletions.
diff --git a/README.md b/README.md
@@ -1,46 +1,17 @@
 # About
 
 This project allows displaying family tree data stored in csv tables as graphs on a website.
-It uses Cola.js and d3.js.
+It uses Cola.js, d3.js and gedcomx-js.
 The documentation can be found in the wiki.
 
-Supported languages: 🇺🇲/🇬🇧¹² 🇩🇪
+Supported languages[^1]: 🇺🇲/🇬🇧[^2] 🇩🇪
 
 <!-- TODO add wiki page on how to add language support and then link it here -->
 
----
-1. Default, therefore used while loading and fallback if local language is not supported
-2. No differentiation yet between country specific differences
+[^1]: No differentiation yet between country specific differences
+[^2]: Default, therefore used while loading and fallback if local language is not supported
 
 
 # 🌳 Usage
 
-> ⚠️ I am currently working on support for gedcomx files. Once this is completed, the spreadsheets need to be converted to that format.
-
-The family data is represented in two csv-tables that the user can upload on the page:
-- one for all the people:
-
- > ⚠️ The ID `0` is reserved️ for the unknown person. It can be used in families with unknown partners️
-
-| ID  | full_name  | born  | named | gender | child_of | birthday   | place_of_birth | day_of_death | age | profession             | religion                 |
-|-----|------------|-------|-------|--------|----------|------------|----------------|--------------|-----|------------------------|--------------------------|
-| 0   | unknown    |       |       |        |          |            |                |              |     |                        |                          |
-| 1   | John Doe   | Smith |       | male   |          | 01.09.1919 | Dirmingcan     | 10.10.2010   | 91  | professional describer | flying spaghetti monster |
-| 2   | Miriam Doe |       |       | female |          | 02.02.1902 | Ohoho          | 03.03.2003   | 101 | example giver          | -                        |
-| 3   | Kim Doe    |       |       | divers | 1        | 01.02.2001 |                |              | 20  |                        |                          |
-
-- one for all the families:
-
-| ID  | partner1 | partner2 |
-|-----|----------|----------|
-| 0   | 1        | 2        |
-
-
----
-### 💡 Inspiration
-
-This project was build using d3 and web cola. During development, I took inspiration from the following examples:
-
-- https://marvl.infotech.monash.edu/webcola/examples/onlinebrowse.html
-- https://marvl.infotech.monash.edu/webcola/examples/downwardedges.html
-- https://marvl.infotech.monash.edu/webcola/examples/smallgroups.html
+Upload a valid gedcomx-file on the home page. On submit, the family view should open and display the graph.
diff --git a/css/familyTree.css b/css/familyTree.css
@@ -0,0 +1,235 @@
+/* things surrounding the graph view  */
+body {
+  grid-template-areas:
+    "header"
+    "sidebar"
+    "main"
+    "footer";
+  grid-template-rows: auto auto 1fr auto;
+  background: var(--background);
+}
+
+header form > * {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+main #family-tree {
+  width: 100%;
+  height: 100%;
+}
+
+.id::before {
+  content: "#";
+}
+
+.id {
+  color: var(--foreground-secondary);
+  text-align: right;
+  margin: 0;
+  float: right;
+}
+
+#info-panel h2 {
+  font-weight: normal;
+}
+
+#info-panel form {
+  margin: 0 auto;
+  width: fit-content;
+}
+
+#info-panel input[type=search] {
+  color: var(--foreground);
+  border-bottom: solid transparent;
+  font-size: 2em;
+  font-weight: bold;
+  text-align: center;
+}
+
+#info-panel input[type=search]:focus {
+  border-bottom: solid var(--foreground);
+}
+
+#info-panel #factView {
+  background: var(--background);
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  padding-right: 1rem;
+  border-radius: 1rem;
+  box-shadow: inset 0 .25rem .25rem rgba(0, 0, 0, .33);
+}
+
+#info-panel #factView li:not(:last-child) {
+  margin-bottom: .5rem;
+}
+
+footer {
+  background: inherit;
+  border-top: solid var(--foreground-secondary) .1rem;
+  text-align: left;
+  grid-area: footer;
+}
+
+#family-path {
+  margin: 0;
+  padding-left: 0;
+}
+
+#family-path li {
+  display: inline;
+}
+
+#family-path li:not(:last-child):after {
+  content: " > ";
+  font-weight: normal !important;
+}
+
+#family-path li.focusPerson {
+  font-weight: bold;
+}
+
+/* graph view */
+
+#family-tree {
+  --male: #9bcfec;
+  --female: #ff9494;
+  --divers: #d5a3ee;
+  --grid-size: 16px;
+  margin: 0;
+  border-radius: 0;
+  grid-area: main;
+}
+
+#family-tree:hover {
+  cursor: grab;
+}
+
+#family-tree:active {
+  cursor: grabbing;
+}
+
+#family-tree text {
+  fill: var(--foreground);
+  font-size: var(--grid-size);
+  text-anchor: middle;
+  stroke: none;
+}
+
+.link {
+  fill: none;
+  stroke: var(--foreground);
+  stroke-width: .2rem;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.etc, .partnerNode circle {
+  fill: var(--background-higher);
+  text-anchor: middle;
+  cursor: pointer;
+}
+
+.partnerNode.locked circle {
+  cursor: not-allowed;
+}
+
+#family-tree .partnerNode text {
+  text-anchor: end;
+}
+
+.infoBackground {
+  fill: var(--background);
+}
+
+#background {
+  fill: transparent;
+  stroke: none;
+}
+
+/* stuff for the html nodes */
+
+.person {
+  color: var(--foreground);
+  overflow: visible;
+  cursor: pointer;
+  font-size: var(--grid-size);
+}
+
+.person:active {
+  cursor: grabbing;
+}
+
+.person p {
+  margin: 0;
+  text-align: center;
+  line-height: 1.25;
+}
+
+.person .bg {
+  border-radius: 1rem;
+  border-width: .2rem;
+  padding: .5rem .75rem;
+  border-color: var(--background-higher);
+  background-color: var(--background-higher);
+}
+
+.person.female .bg {
+  background-color: var(--female);
+  border-color: var(--female);
+}
+
+.person.female .bg.focused {
+  box-shadow: 0 0 1rem var(--female);
+}
+
+.person.male .bg {
+  background-color: var(--male);
+  border-color: var(--male);
+}
+
+.person.male .bg.focused {
+  box-shadow: 0 0 1rem var(--male);
+}
+
+.person.divers .bg {
+  background-color: var(--divers);
+  border-color: var(--divers);
+}
+
+.person.divers .bg.focused {
+  box-shadow: 0 0 1rem var(--divers);
+}
+
+.person.dead .bg {
+  border-style: solid;
+  background-color: var(--background);
+}
+
+@media (prefers-color-scheme: light) {
+  #family-tree {
+    --male: #9bcfec;
+    --female: #ff9494;
+    --divers: #d5a3ee;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  #family-tree {
+    --male: #254579;
+    --female: #911c1c;
+    --divers: #8d53a4;
+    background: black;
+  }
+}
+
+@media (orientation: landscape) {
+  body {
+    grid-template-rows: auto 1fr auto;
+    grid-template-columns: 2fr 1fr;
+    grid-template-areas:
+      "header header"
+      "main sidebar"
+      "footer sidebar";
+  }
+}