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

Fix some alignment

Browse Source
This commit is contained in:
Nathan McRae
2025-09-02 21:36:48 -07:00
committed by Nathan McRae
parent 6a4a0f5719
commit 62fefb0cb1
3 changed files with 60 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
index.html
View File

@@ -19,46 +19,6 @@
<hr/> <hr/>
<div id="main-content"> <div id="main-content">
<div id="controls"> <div id="controls">
<div class="group">
<h3>Axis 1</h3>
<div class="input">
<p>Title:</p>
<input id="axis-1-title" value="axis 1"/>
</div>
<div class="input">
<p>Start value:</p>
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 class="group">
<h3>Axis 2</h3>
<div class="input">
<p>Title:</p>
<input id="axis-2-title" value="axis 2"/>
</div>
<div class="input">
<p>Start value:</p>
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 class="group">
<h3>Axis 3</h3>
<div class="input">
<p>Title:</p>
<input id="axis-3-title" value="axis 3"/>
</div>
<div class="input">
<p>Start value:</p>
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 class="input"> <div class="input">
<p>Axis title text size (px):</p> <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"/>
@@ -73,7 +33,7 @@
</div> </div>
<div class="input"> <div class="input">
<p>Ticks:</p> <p>Ticks:</p>
<input type="number" id="ticks" value="10"/> <input type="number" id="ticks" value="9"/>
<button id="ticks-down">▼</button> <button id="ticks-down">▼</button>
<button id="ticks-up">▲</button> <button id="ticks-up">▲</button>
</div> </div>
@@ -83,6 +43,49 @@
<button id="tick-size-down">▼</button> <button id="tick-size-down">▼</button>
<button id="tick-size-up">▲</button> <button id="tick-size-up">▲</button>
</div> </div>
<div class="group">
<h3>Axis 1</h3>
<div class="input">
<p>Title:</p>
<input id="axis-1-title" value="Axis 1"/>
</div>
<div class="input">
<p>Start value:</p>
<p>E</p>
<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 class="group">
<h3>Axis 2</h3>
<div class="input">
<p>Title:</p>
<input id="axis-2-title" value="Axis 2"/>
</div>
<div class="input">
<p>Start value:</p>
<p>E</p>
<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 class="group">
<h3>Axis 3</h3>
<div class="input">
<p>Title:</p>
<input id="axis-3-title" value="Axis 3"/>
</div>
<div class="input">
<p>Start value:</p>
<p>E</p>
<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>
<a id="download-button"> <a id="download-button">
<button>Download SVG</button> <button>Download SVG</button>
</a> </a>

6
src/TernaryGraph.purs
View File

@@ -137,9 +137,9 @@ unfragment (XMLFragment frag) = frag
ternaryGraphSvg :: Array XMLFragment -> String ternaryGraphSvg :: Array XMLFragment -> String
ternaryGraphSvg fragments = """<?xml version="1.0" encoding="UTF-8"?> ternaryGraphSvg fragments = """<?xml version="1.0" encoding="UTF-8"?>
<svg <svg
width="150mm" width="110mm"
height="120mm" height="80mm"
viewBox="-50 -50 200 250" viewBox="-75 -50 250 220"
version="1.1" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"

10
ternary-graph.css
View File

@@ -4,6 +4,7 @@ button {
border-right-color: #B3B3B3; border-right-color: #B3B3B3;
border-left-color: #E3E3E3; border-left-color: #E3E3E3;
border-top-color: #E3E3E3; border-top-color: #E3E3E3;
height: 2em;
} }
#controls { #controls {
@@ -23,6 +24,8 @@ input {
border-right-color: #E3E3E3; border-right-color: #E3E3E3;
border-left-color: #B3B3B3; border-left-color: #B3B3B3;
border-top-color: #B3B3B3; border-top-color: #B3B3B3;
height: 2em;
box-sizing: border-box;
} }
input[type="number"] { input[type="number"] {
@@ -35,12 +38,13 @@ input[type="number"] {
.input { .input {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
height: 1.5em;
margin-bottom: 0.4em; margin-bottom: 0.4em;
width: auto;
} }
#main-content { #main-content {
flex-direction: row; flex-direction: row;
flex-wrap: wrap;
} }
p { p {
@@ -51,3 +55,7 @@ p {
#svg-container { #svg-container {
margin: auto; margin: auto;
} }
svg {
width: 100%
}