nathanmcrae/ternary-graph-generator
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Initial styling

Browse Source 
Change from default increment/decrement buttons to custom ones since
that's easier to style.
This commit is contained in:
Nathan McRae
2025-08-24 13:32:12 -07:00
parent 6541d65f3a
commit da1e6f32a5
4 changed files with 268 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
index.html
View File

@@ -1,59 +1,87 @@
<!doctype html>
<html> <html>
<head> <head>
<meta charset="utf-8">
<title>Ternary Graph Generator</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css"/>
<link rel="stylesheet" href="ternary-graph.css"/>
</head> </head>
<body> <body>
<div> <div id="breadcrumb">
Axis 1 <a id="site-title" href="https://nathanmcrae.name">
<div> <img class="avatar" src="avatar.png"/>
Title NathanMcRae.name
</a>
/
Ternary Graph Generator
</div>
<hr/>
<div class="group">
<h3>Axis 1</h3>
<div class="input">
<p>Title:</p>
<input id="axis-1-title" value="axis 1"/> <input id="axis-1-title" value="axis 1"/>
</div> </div>
<div> <div class="input">
Start Value: <p>Start value:</p>
E<input type="number" id="axis-1-start" value="0"/> E<input type="number" id="axis-1-start" value="0"/>
<button id="axis-1-start-down">▼</button>
<button id="axis-1-start-up">▲</button>
</div> </div>
</div> </div>
<div> <div class="group">
Axis 2 <h3>Axis 2</h3>
<div> <div class="input">
Title <p>Title:</p>
<input id="axis-2-title" value="axis 2"/> <input id="axis-2-title" value="axis 2"/>
</div> </div>
<div> <div class="input">
Start Value: <p>Start value:</p>
E<input type="number" id="axis-2-start" value="0"/> E<input type="number" id="axis-2-start" value="0"/>
<button id="axis-2-start-down">▼</button>
<button id="axis-2-start-up">▲</button>
</div> </div>
</div> </div>
<div> <div class="group">
Axis 3 <h3>Axis 3</h3>
<div> <div class="input">
Title <p>Title:</p>
<input id="axis-3-title" value="axis 3"/> <input id="axis-3-title" value="axis 3"/>
</div> </div>
<div> <div class="input">
Start Value: <p>Start value:</p>
E<input type="number" id="axis-3-start" value="0"/> E<input type="number" id="axis-3-start" value="0"/>
<button id="axis-3-start-down">▼</button>
<button id="axis-3-start-up">▲</button>
</div> </div>
</div> </div>
<div> <div class="input">
axis title text size (px): <p>Axis title text size (px):</p>
<input type="number" id="axis-title-size" value="16"/> <input type="number" id="axis-title-size" value="16"/>
<button id="axis-title-size-down">▼</button>
<button id="axis-title-size-up">▲</button>
</div> </div>
<div> <div class="input">
tick label text size (px): <p>Tick label text size (px):</p>
<input type="number" id="tick-label-size" value="2"/> <input type="number" id="tick-label-size" value="12"/>
<button id="tick-label-size-down">▼</button>
<button id="tick-label-size-up">▲</button>
</div> </div>
</div> <div class="input">
<div> <p>Ticks:</p>
<div>
ticks:
<input type="number" id="ticks" value="10"/> <input type="number" id="ticks" value="10"/>
<button id="ticks-down">▼</button>
<button id="ticks-up">▲</button>
</div> </div>
<div> <div class="input">
tick size (px): <p>Tick size (px):</p>
<input type="number" id="tick-size" value="5"/> <input type="number" id="tick-size" value="5"/>
<button id="tick-size-down">▼</button>
<button id="tick-size-up">▲</button>
</div> </div>
<button onclick="downloadSVG">Download SVG</button>
<div id="svg-container" class="my-class"></div> <div id="svg-container" class="my-class"></div>
</body> </body>
<script src="index.js"></script> <script src="index.js"></script>

40
src/Main.purs
View File

@@ -234,6 +234,25 @@ addUpdateListener doc id = do
element <- myGetElementById doc id element <- myGetElementById doc id
addEventListener (EventType "input") listener true (Element.toEventTarget element) addEventListener (EventType "input") listener true (Element.toEventTarget element)
incrementInput :: HTMLInput.HTMLInputElement -> Number -> Event -> Effect Unit
incrementInput input inc _ = do
currentVal <- HTMLInput.valueAsNumber input
HTMLInput.setValueAsNumber (currentVal + inc) input
update
registerInputIncButton :: Document -> String -> String -> Number -> Effect Unit
registerInputIncButton doc inputID buttonID inc = do
inputElMay <- myGetElementById doc inputID
inputEl <- case HTMLInput.fromElement inputElMay of
Nothing -> throw $ "'" <> inputID <> "' element is not an input tag"
Just e -> pure e
listener <- eventListener $ incrementInput inputEl inc
element <- myGetElementById doc buttonID
addEventListener (EventType "click") listener true (Element.toEventTarget element)
main :: Effect Unit main :: Effect Unit
main = do main = do
w <- window w <- window
@@ -253,4 +272,25 @@ main = do
addUpdateListener dd "ticks" addUpdateListener dd "ticks"
addUpdateListener dd "tick-size" addUpdateListener dd "tick-size"
registerInputIncButton dd "axis-1-start" "axis-1-start-up" 1.0
registerInputIncButton dd "axis-1-start" "axis-1-start-down" (-1.0)
registerInputIncButton dd "axis-2-start" "axis-2-start-up" 1.0
registerInputIncButton dd "axis-2-start" "axis-2-start-down" (-1.0)
registerInputIncButton dd "axis-3-start" "axis-3-start-up" 1.0
registerInputIncButton dd "axis-3-start" "axis-3-start-down" (-1.0)
registerInputIncButton dd "axis-title-size" "axis-title-size-up" 1.0
registerInputIncButton dd "axis-title-size" "axis-title-size-down" (-1.0)
registerInputIncButton dd "tick-label-size" "tick-label-size-up" 1.0
registerInputIncButton dd "tick-label-size" "tick-label-size-down" (-1.0)
registerInputIncButton dd "ticks" "ticks-up" 1.0
registerInputIncButton dd "ticks" "ticks-down" (-1.0)
registerInputIncButton dd "tick-size" "tick-size-up" 1.0
registerInputIncButton dd "tick-size" "tick-size-down" (-1.0)
update update

129
style.css Normal file
View File

@@ -0,0 +1,129 @@
.avatar {
width: 2em;
margin-right: 0.2em;
}
body {
font-family: Liberation sans, sans-serif;
display: flex;
flex-direction: column;
border-style: solid;
border-width: 3px;
border-color: #f97200;
width: 80%;
max-width: 800px;
margin: auto auto;
padding-left: 1em;
padding-right: 1em;
}
#main-content {
padding: 0em 1em 1em 1em;
flex-direction: column;
max-width: 100%;
width: auto;
}
div {
width: fit-content;
display: flex;
flex-direction: row;
}
h1 {
text-align: center;
margin: 0.1em;
width: 100%;
}
h2 {
text-align: center;
margin: 0.1em;
color: #707070;
}
hr {
border: 0;
border-top: 3px solid #c0c0c0;
width: 100%;
}
table {
border-collapse: collapse;
text-align: center;
vertical-align: center;
margin: 1em;
}
table th, table td {
border-style: solid;
border-color: #c0c0c0;
border-width: 3px;
padding: 0.5em;
}
table tr:nth-child(odd) {
background-color: #fff;
}
table tr:nth-child(odd) {
background-color: #f5f5f5;
}
.button-wrapper {
height: 3em;
width: 5em;
border-style: solid;
border-color: black;
border-width: 1px;
margin: 1em;
}
.button-wrapper:hover {
border-color: #3C7FB1;
}
button {
border-width: 3px;
}
.label {
margin: 10px;
font-weight: bold;
font-size: x-large;
}
#breadcrumb {
align-items: center;
width: 100%;
font-weight: bold;
margin-bottom: 0.5em;
margin-top: 0.5em;
flex-wrap: wrap;
}
#breadcrumb a {
margin-left: 1em;
margin-right: 1em;
color: gray;
}
#breadcrumb a :hover {
text-decoration: underline;
}
.underlined {
text-decoration-line: underline;
text-decoration-style: dotted;
}
.image-container {
width: 100%;
flex-direction: column;
align-items: center;
}
#site-title {
display: flex;
align-items: center;
}

42
ternary-graph.css Normal file
View File

@@ -0,0 +1,42 @@
button {
border-width: 3px;
border-bottom-color: #B3B3B3;
border-right-color: #B3B3B3;
border-left-color: #E3E3E3;
border-top-color: #E3E3E3;
}
.group {
display: flex;
flex-direction: column;
margin-bottom: 1em;
}
input {
border-width: 3px;
border-bottom-color: #E3E3E3;
border-right-color: #E3E3E3;
border-left-color: #B3B3B3;
border-top-color: #B3B3B3;
}
input[type="number"] {
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
width: 3em;
}
.input {
height: 1.5em;
margin-bottom: 0.4em;
}
p {
margin: auto;
margin-right: 0.5em;
}
#svg-container {
margin: auto;
}