index.html
fileHTML markup (with CSS styling) should produce a page with 4 parts:
article
and aside
should be grouped together in a main, each one wrapped in a section. With vertical splitter between them, splitting the space 50/50.
The header
should have 4 elements (left to right):
Search input should take up most of the width, leave some space for the title to take.
If page width is too small, elements should wrap to the next line, but first pair should stay together, as well as the second pair. Also second pair should be at the top in that case.
header
should also include a hidden invisible datalist of the node names for the search input.
Normally article
should present one node at a time, that node considered “current”. There should be a heading with the node name and a description below. Floating to the right there should be a vertical group of three buttons: “Edit Node”, “Delete Node” and “Add Link”.
Below the description there should be a list of links to other nodes. Each link should be represented by a button (label with hidden radio button) with the node name prefixed with direction (incoming/outgoing/two-way) shown with arrows. Arrows should be added based on the corresponding class (incoming
, outgoing
, two-way
) Buttons should be placed next to each other, but should wrap to the next line if there is not enough space. They should be aligned to the right. If there are no linked nodes at the moment there should be a paragraph with a message “No links to other nodes yet”. List/paragraph display mode should be controlled with a hidden invisible checkbox before it.
Alternatively (if no node is currently selected) there should be a vertical list of nodes represented with list items holding a header with the node name, followed by a description. Each node item should have a vertically stacked block floating to the right with a “Go to Node” button and counters for incoming/outgoing links shown with arrows next to the numbers.
Lastly (if there’s no nodes at all) article
should show a paragraph with a message “No nodes in the graph. Add some using the ‘Add Node’ button in the top left corner”.
Article display mode should be controlled with the hidden invisible radio buttons before it, and there should be three modes: current
, many
, message
.
Normally aside
should present a list of all links to and from the current node. Each link should be represented by a list item with a heading with the linked node name (prefixed with direction shown with an arrow based on the class incoming
or outgoing
), a link description and a vertically stacked button group floating to the right with “Edit Link” and “Delete Link” buttons.
Heading, paragraph and button group should be wrapped in a summary element with details showing the linked node description paragraph if expanded. There also should be a “Go to Node” button floating to the left of that paragraph.
Alternatively (if no node is currently selected) there should be a list of all the links. Each link should be represented by a list item with a heading with “From” node name, an arrow right and “To” node name. Every link item should have outgoing
class. There should also be a paragraph
with the link description below with a button “Go to Link” floating to the right of that paragraph
.
Alternatively (if there’s no links to show) aside
should show a paragraph
with a message “No links” or “No links from/to the current node yet. Add some with the ‘Add Link’ button on the left”. The last one should appear is a node is currently selected and there is at least one other node existing in the graph. Which one is to be decided by the hidden invisible checkbox before it.
Aside display mode should be controlled with the hidden invisible radio buttons before it, and there should be three modes: related
, unrelated
, message
.
There should be dialogs for:
All dialogs should be positioned in the middle of the page, have width set as minimum of 1000px and 85vw, have height set as 70vh (with exceptions: splash screen, delete dialogs, and informer should have height max-content), be scrollable if needed, have a heading with the dialog title, buttons grouped horizontally at the bottom, and have a gray semi-transparent bluring backdrop.
Dialog should have a title “New Node” and a form with the following fields:
and buttons “Add” and “Cancel” (class “close
”).
Dialog should have a title “New Link” and a form with the following fields:
and buttons “Add” and “Cancel” (class “close
”).
There also should be a switch direction button positioned between the inputs, with two-way arrows.
Dialog should have a title “Edit Node” and a form with the following fields:
and buttons “Save” and “Cancel” (class “close
”).
Dialog should have a title “Edit Link” and a form with the following fields:
and buttons “Save” and “Cancel” (class “close
”).
There also should be a switch direction button positioned between the inputs, with two-way arrows.
Dialog should have a title “Delete Node” and a form with a paragraph warning about the non-recoverable deletion of the node and all of its links. Node name and the number of links should be shown with output elements in bold.
Buttons should be “Delete” and “Cancel” (class “close
”).
Dialog should have a title “Delete Link” and a form with a paragraph warning about the non-recoverable deletion of the link. From-node name, and To-node name should be shown with output element in bold.
Buttons should be “Delete” and “Cancel” (class “close
”).
Dialog should have a title and a paragraph (both will be provided elsewhere).
Single “OK” button (class “close
”).
Dialog should have a vertical list of buttons with the menu items:
“About”
Single “Cancel” button (class “close
”).
Dialog should have a title “Stats” and a table with two columns:
Stat rows should be:
Single “OK” button (class “close
”).
Splash screen should have a logo of GRAPH app, version numbers, and copyright notice.
Single “Continue” button (class “close
”).