Skip to content

Commit 9a90fac

Browse files
Alnoor PiraniAlnoor Pirani
Alnoor Pirani
authored and
Alnoor Pirani
committed
update design
2 parents cfccbd1 + 9e16a18 commit 9a90fac

File tree

5 files changed

+200
-113
lines changed

5 files changed

+200
-113
lines changed

‎application/views/csv2json_view.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@
6767
Transpose
6868
</label>
6969
</div>
70-
<br/>
70+
<br/>
7171
<div class="form-check-inline">
7272
<label class="form-check-label me-2">Output:</label>
7373
<input type="radio" id="output-array" name="output" class="form-check-input save" value="array" checked="checked" />

‎application/views/home_view.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
<div class="d-grid gap-2 d-sm-flex justify-content-sm-center py-4">
2222
<a class="btn btn-outline-primary btn-sm px-4 me-sm-3" href="/json_validator" title="Validate and format your JSON.">JSON Validator</a>
2323
<a class="btn btn-outline-primary btn-sm px-4 me-sm-3" href="/json_beautifier" title="Validate, format and beautify your JSON.">JSON Beautifier</a>
24-
<a href="/csvjson2json" class="btn btn-outline-primary btn-sm px-4 me-sm-3" title="Excel and Google Sheets data cleaning and transformation.">Data Janitor <small>BETA</small></a>
24+
<!--<a href="/datajanitor" class="btn btn-outline-primary btn-sm px-4 me-sm-3" title="Excel and Google Sheets data cleaning and transformation.">Data Janitor <small>BETA</small></a>-->
2525
</div>
2626
</div>
2727
</div>

‎application/views/json_beautifier_view.php‎

Lines changed: 136 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -5,51 +5,33 @@
55
<p>To get started, upload or paste your JSON.
66
</div>
77
</div>
8-
9-
<div class="row">
8+
<div class="row gx-5">
109
<div class="col-md-5 more-bottom-margin">
11-
<div class="form-group">
12-
<label>Upload a file</label>
13-
<span class="btn btn-default fileinput-button form-control">
14-
<label>
15-
<i class="glyphicon glyphicon-plus"></i>
16-
<span>Select a file...</span>
17-
</label>
18-
<input id="fileupload" type="file" name="file" />
19-
</span>
10+
<div class="mb-5">
11+
<label class="form-label">Upload a file</label>
12+
<input id="fileupload" type="file" name="file" class="form-control"/>
2013
</div>
2114
<div class="form-group code-group">
22-
<label>Or paste your JSON here</label>
15+
<label class="form-label">Or paste your JSON here</label>
2316
<?php $default = '{"pi": "3.14159265359", "e": "2.7182818284", "prime": [2, 3, 5, 7, 11, 13, 17, 19], "1+6": 7}'; ?>
24-
<textarea id="json" class="form-control input save" rows="18" spellcheck="false"><?=$default?></textarea>
17+
<div class="mb-3">
18+
<textarea id="json" class="form-control input save" rows="18" spellcheck="false"><?=$default?></textarea>
19+
</div>
2520
</div>
2621
<button id="convert" type="submit" class="btn btn-primary action">
27-
<i class="glyphicon glyphicon-chevron-right"></i> Beautify
22+
<i class="bi bi-chevron-right"></i> Beautify
2823
</button>
29-
<button id="clear" type="submit" class="btn">
30-
<i class="glyphicon glyphicon-remove"></i> Clear
24+
<button id="clear" type="submit" class="btn btn-light">
25+
<i class="bi bi-backspace"></i> Clear
3126
</button>
3227
</div>
3328

34-
<div class="col-md-7 more-bottom-margin">
35-
<div class="form-group">
36-
<label>Options <small>Hover on option for help</small></label>
37-
<div class="form-check-inline">
38-
<label class="inline">No quotes:</label>
39-
<input type="checkbox" id="drop-quotes-on-keys" name="drop-quotes-on-keys" class="save" />
40-
<label class="inline" title="JSON wraps keys with double quotes by default. JavaScript doesn't need them though. Check this box to drop them. Will make for invalid JSON but valid JavaScript.">
41-
on keys
42-
</label>
43-
</div>
29+
<div class="col-md-7">
30+
<div class="mb-3">
4431
<div class="form-check-inline">
45-
<label class="inline" title="Check this box to parse number values and drop quotes around them.">
46-
<input type="checkbox" id="drop-quotes-on-numbers" name="drop-quotes-on-numbers" class="save" /> on numbers
47-
</label>
48-
</div>
49-
<div class="form-check-inline">
50-
<label class="inline" title="Indentation preference.">
51-
Indent
52-
<select id="space" name="space" class="save">
32+
<label class="form-label" title="Indentation preference.">
33+
<div class="mb-2">Indent</div>
34+
<select id="space" name="space" class="form-select save">
5335
<option value="tab">tab</option>
5436
<option value="1">1 space</option>
5537
<option value="2" selected="selected">2 spaces</option>
@@ -61,31 +43,50 @@
6143
</label>
6244
</div>
6345
<div class="form-check-inline">
64-
<label class="inline" title="Quote type around values">
65-
Quotes
66-
<select id="quote-type" name="quote-type" class="save">
46+
<label class="form-label" title="Quote type around values">
47+
<div class="mb-2">Quotes</div>
48+
<select id="quote-type" name="quote-type" class="form-select save">
6749
<option value="single">Single</option>
6850
<option value="double" selected="selected">Double</option>
6951
</select>
7052
</label>
7153
</div>
7254
<div class="form-check-inline">
73-
<label class="inline" title="Collpase arrays inline if less than the width in characters of the textarea. You can limit the nesting depth where it applies.">
74-
<input type="checkbox" id="inline-short-arrays" name="inline-short-arrays" class="save" />
75-
Inline short arrays
76-
<select id="inline-short-arrays-depth" name="inline-short-arrays-depth" class="save">
77-
<option value="1" selected="selected">1</option>
78-
<option value="2">2</option>
79-
<option value="3">3</option>
80-
<option value="4">4</option>
81-
<option value="5">5</option>
55+
<label class="form-label" title="Collpase arrays inline if less than the width in characters of the textarea. You can limit the nesting depth where it applies.">
56+
<div class="">
57+
<div class="form-check-inline">
58+
<input type="checkbox" id="inline-short-arrays" name="inline-short-arrays" class="form-check-input save" />
59+
<label class="form-label">Inline short arrays</label>
60+
</div>
61+
</div>
62+
<select id="inline-short-arrays-depth" name="inline-short-arrays-depth" class="form-select save">
63+
<option value="1" selected="selected">1 level deep</option>
64+
<option value="2">2 levels deep</option>
65+
<option value="3">3 levels deep</option>
66+
<option value="4">4 levels deep</option>
67+
<option value="5">5 levels deep</option>
8268
</select>
83-
level deep
69+
70+
</label>
71+
</div>
72+
<br/>
73+
<div class="form-check-inline">
74+
<label class="form-check-label me-2">No quotes:</label>
75+
<input type="checkbox" id="drop-quotes-on-keys" name="drop-quotes-on-keys" class="form-check-input save" />
76+
<label class="form-check-label" title="JSON wraps keys with double quotes by default. JavaScript doesn't need them though. Check this box to drop them. Will make for invalid JSON but valid JavaScript.">
77+
on keys
78+
</label>
79+
</div>
80+
<div class="form-check-inline">
81+
<input type="checkbox" id="drop-quotes-on-numbers" name="drop-quotes-on-numbers" class="form-check-input save" />
82+
<label class="form-check-label" title="Check this box to parse number values and drop quotes around them.">
83+
on numbers
8484
</label>
8585
</div>
8686
<div class="form-check-inline">
87-
<label class="inline" title="Minify or compact result by removing spaces and new lines. Warning: this overrides other options.">
88-
<input type="checkbox" id="minify" name="minify" class="save" /> Minify
87+
<input type="checkbox" id="minify" name="minify" class="form-check-input save" />
88+
<label class="form-check-label" title="Minify or compact result by removing spaces and new lines. Warning: this overrides other options.">
89+
Minify
8990
</label>
9091
</div>
9192
</div>
@@ -97,47 +98,92 @@
9798

9899

99100

100-
<div class="row">
101-
<div class="col-md-8 about">
102-
<h4>Node.js</h4>
103-
<p>This function is available as a <a href="https://www.npmjs.com/package/csvjson-json_beautifier" target="_blank">npm package</a>.</p>
104-
<h4>About JSON</h4>
105-
<ul>
106-
<li>JSON stands for <strong>JavaScript Object Notation</strong>. It is a lightweight data-interchange format and fully described on <a href="http://www.json.org" target="_blank">www.json.org</a>.</li>
107-
<li>
108-
JSON is based on JavaScript but the format is stricter. JSON requires double quotes around keys whereas JavaScript does not. For example, this is valid JavaScript:<br/>
109-
<pre>{pi: 3.14159265359, e: 2.7182818284, prime: [2, 3, 5, 7, 11, 13, 17, 19]}</pre>
110-
However the above is not valid JSON. Double quotes must be placed around pi, e and prime.
111-
<pre>{"pi": 3.14159265359, "e": 2.7182818284, "prime": [2, 3, 5, 7, 11, 13, 17, 19]}</pre>
112-
CSVJSON's JSON Beautifier has a toggle to drop quotes on keys. It can do so if JavaScript allows it. For example, we cannot drop quotes around key <code>"1+6"</code>.
113-
CSVJSON also has a toggle to use single quotes to wrap keys and values.
114-
</li>
115-
<li>Modern browsers have a built-in global object <code>JSON</code> with encoding and decoding functions. These are:
101+
102+
<div class="container px-4 py-5" id="about-flatfile">
103+
104+
<h2 class="pb-2 border-bottom">Need help cleaning data?</h2>
105+
106+
<div class="row row-cols-1 row-cols-sm-1 row-cols-md-12 row-cols-lg-12 g-4 py-5">
107+
<div class="col d-flex align-items-start">
108+
<div>
109+
<p>
110+
Embed all the functionality of csv<strong>json</strong> in any web application with <a href="https://flatfile.com/get-started?utm_source=csvjson-tools&amp;utm_medium=header&amp;utm_campaign=q1-2022-csvjson-redesign&amp;ajs_event=came_from_csvjson&amp;ajs_prop_ccf_id=b8cdef6a-602c-4993-890c-752924b5ac2a&amp;__hstc=191284213.17efec156b05b5f65379d478482fed10.1642435230343.1643637413336.1644345002104.7&amp;__hssc=191284213.2.1644345002104&amp;__hsfp=668737353">Flatfile</a>. Auto-match columns, validate data fields, and provide an intuitive CSV import experience.
111+
</p>
112+
</div>
113+
</div>
114+
</div>
115+
116+
</div>
117+
118+
<div class="container px-4 py-5" id="about-csvjson">
119+
120+
<h2 class="pb-2 border-bottom">More Details</h2>
121+
122+
<div class="row row-cols-1 row-cols-sm-1 row-cols-md-12 row-cols-lg-12 g-4 py-5">
123+
<div class="col d-flex align-items-start">
124+
<div>
116125
<ul>
117-
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify" target="_blank">JSON.stringify</a> to encode a JavaScript object into a JSON string; and</li>
118-
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse" target="_blank">JSON.parse</a> to parse a JSON string and convert it to a JavaScript object.</li>
126+
<li>
127+
This function is available as a <a href="https://www.npmjs.com/package/csvjson-json_beautifier" target="_blank">npm package</a>.
128+
</li>
129+
<li>JSON stands for <strong>JavaScript Object Notation</strong>. It is a lightweight data-interchange format and fully described on <a href="http://www.json.org" target="_blank">www.json.org</a>.</li>
130+
<li>
131+
JSON is based on JavaScript but the format is stricter. JSON requires double quotes around keys whereas JavaScript does not. For example, this is valid JavaScript:<br/>
132+
<pre>{pi: 3.14159265359, e: 2.7182818284, prime: [2, 3, 5, 7, 11, 13, 17, 19]}</pre>
133+
However the above is not valid JSON. Double quotes must be placed around pi, e and prime.
134+
<pre>{"pi": 3.14159265359, "e": 2.7182818284, "prime": [2, 3, 5, 7, 11, 13, 17, 19]}</pre>
135+
CSVJSON's JSON Beautifier has a toggle to drop quotes on keys. It can do so if JavaScript allows it. For example, we cannot drop quotes around key <code>"1+6"</code>.
136+
CSVJSON also has a toggle to use single quotes to wrap keys and values.
137+
</li>
138+
<li>Modern browsers have a built-in global object <code>JSON</code> with encoding and decoding functions. These are:
139+
<ul>
140+
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify" target="_blank">JSON.stringify</a> to encode a JavaScript object into a JSON string; and</li>
141+
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse" target="_blank">JSON.parse</a> to parse a JSON string and convert it to a JavaScript object.</li>
142+
</ul>
143+
To support older browsers, use <a href="https://github.com/douglascrockford/JSON-js" target="_blank">JSON2</a> written by Douglas Crockford as polyfill.
144+
</li>
145+
<li>CSVJON uses a <a href="https://github.com/FlatFilers/csvjson-app/blob/master/js/csvjson/json2-mod.js" target="_blank">modified version of JSON2</a> which adds formatting options to drop quotes on keys, and sepcify the quote type. Anyone is free to use and extend it by forking the <a href="https://github.com/FlatFilers/csvjson-app" target="_blank">CSVJSON GitHub repo</a>.</li>
119146
</ul>
120-
To support older browsers, use <a href="https://github.com/douglascrockford/JSON-js" target="_blank">JSON2</a> written by Douglas Crockford as polyfill.
121-
</li>
122-
<li>CSVJON uses a <a href="https://github.com/FlatFilers/csvjson-app/blob/master/js/csvjson/json2-mod.js" target="_blank">modified version of JSON2</a> which adds formatting options to drop quotes on keys, and sepcify the quote type. Anyone is free to use and extend it by forking the <a href="https://github.com/FlatFilers/csvjson-app" target="_blank">CSVJSON GitHub repo</a>.</li>
123-
</ul>
124-
<br/>
125-
<h4>Change Log</h4>
126-
<ul>
127-
<li><strong>Jun 25, 2019</strong> Adjustable width for inling short arrays. Fix for <a href="https://github.com/FlatFilers/csvjson-app/issues/76">issue #76</a>.</li>
128-
<li><strong>Feb 3, 2019</strong> Refactored and published <a href="https://www.npmjs.com/package/csvjson-json_beautifier" target="_blank">npm package json_beautifier</a>.</li>
129-
<li><strong>Jan 26, 2019</strong> Improvement: Removed 64k limit on download button.</li>
130-
<li><strong>Dec 18, 2017</strong> Improvement: Added option to minify or compact JSON. <a href="https://github.com/FlatFilers/csvjson-app/issues/21">GitHub issue #21</a></li>
131-
<li><strong>Oct 7, 2017</strong> Improvement: <a href="https://github.com/hisabimbola" target="_blank">Abimbola Idowu</a> added single quote option. <a href="https://github.com/FlatFilers/csvjson-app/issues/23" target="_blank">GitHub issue #23</a></li>
132-
<li><strong>Sep 27, 2016</strong> Bug fix: Inline short arrays bug fix and improvement. Added nesting depth option. <a href="https://github.com/FlatFilers/csvjson-app/issues/12" target="_blank">GitHub issue #12</a></li>
133-
<li><strong>Aug 22, 2016</strong> Bug fix: Inline short arrays was not working properly. <a href="https://github.com/FlatFilers/csvjson-app/issues/9" target="_blank">GitHub issue #9</a></li>
134-
<li><strong>Dec 30, 2015</strong> Bug fix: drop quotes on keys of nested objects.</li>
135-
<li><strong>Jun 1, 2015</strong> Bug fix: proper support of commas inside quotes.</li>
136-
<li><strong>Jan 12, 2014</strong> Initial release.</li>
137-
</ul>
138-
<br/>
139-
</div>
140-
<div class="col-md-4">
141-
<?php //$this->load->view('carbonads'); ?>
142-
</div>
147+
<p>
148+
<a class="btn btn-light" data-bs-toggle="collapse" href="#collapseOne" role="button" aria-expanded="false" aria-controls="collapseExample">
149+
View Change Log
150+
</a>
151+
</p>
152+
</div>
153+
</div>
154+
155+
156+
<div id="collapseOne" class="accordion-collapse collapse showclass row row-cols-1 row-cols-sm-1 row-cols-md-12 row-cols-lg-12 g-4">
157+
<div class="col d-flex align-items-start">
158+
<div>
159+
<h5>Mar 20, 2019</h5><p> Bug fix: Detect duplicate column headers and make them unique. <a href="https://github.com/FlatFilers/csvjson-app/issues/71">GitHub issue #71</a>.</p>
160+
<h5>Feb 2, 2019</h5><p> Refactored and published <a href="https://www.npmjs.com/package/csvjson-csv2json" target="_blank">npm package csv2json</a>. Fix for <a href="https://github.com/FlatFilers/csvjson-app/issues/70">GitHub issue #70</a>.</p>
161+
<h5>Jan 26, 2019</h5><p> Improvement: Removed 64k limit on download button. Also fixed issue #68 'Cannot work functional with special letters'.</p>
162+
<h5>Mar 31, 2018</h5><p> Improvement: Added option to parse JSON values.</p>
163+
<h5>Dec 18, 2017</h5><p> Improvement: Added option to minify or compact JSON. <a href="https://github.com/FlatFilers/csvjson-app/issues/21">GitHub issue #21</a></p>
164+
<h5>Oct 7, 2016</h5><p> Improvement: Added option to parse number values or not to retain original number formatting. <a href="https://github.com/FlatFilers/csvjson-app/issues/13">GitHub issue #13</a></p>
165+
<h5>Jul 09, 2016</h5><p> Fixed bug : If no text is present in a csv field, it was assigned 0 (zero) by default.</p>
166+
<h5>Jun 20, 2016</h5><p> Bug fix: strings containing quotes and commas were prematurely cut.</p>
167+
<h5>Dec 30, 2015</h5><p> Bug fix: drop quotes on keys of nested objects.</p>
168+
<h5>Nov 26, 2015</h5><p> Improvement: Added options to transpose and output object instead of array.</p>
169+
<h5>Jan 30, 2014</h5><p> Bug fix: Pasting Excel data into Textarea would cause an upload.</p>
170+
<h5>Jan 12, 2014</h5><p> Initial release.</p>
171+
172+
<h5>Jun 25, 2019</h5><p> Adjustable width for inling short arrays. Fix for <a href="https://github.com/FlatFilers/csvjson-app/issues/76">issue #76</a>.</p>
173+
<h5>Feb 3, 2019</h5> <p>Refactored and published <a href="https://www.npmjs.com/package/csvjson-json_beautifier" target="_blank">npm package json_beautifier</a>.</p>
174+
<h5>Jan 26, 2019</h5><p> Improvement: Removed 64k limit on download button.</p>
175+
<h5>Dec 18, 2017</h5><p> Improvement: Added option to minify or compact JSON. <a href="https://github.com/FlatFilers/csvjson-app/issues/21">GitHub issue #21</a></p>
176+
<h5>Oct 7, 2017</h5> <p>Improvement: <a href="https://github.com/hisabimbola" target="_blank">Abimbola Idowu</a> added single quote option. <a href="https://github.com/FlatFilers/csvjson-app/issues/23" target="_blank">GitHub issue #23</a></p>
177+
<h5>Sep 27, 2016</h5><p> Bug fix: Inline short arrays bug fix and improvement. Added nesting depth option. <a href="https://github.com/FlatFilers/csvjson-app/issues/12" target="_blank">GitHub issue #12</a></p>
178+
<h5>Aug 22, 2016</h5><p> Bug fix: Inline short arrays was not working properly. <a href="https://github.com/FlatFilers/csvjson-app/issues/9" target="_blank">GitHub issue #9</a></p>
179+
<h5>Dec 30, 2015</h5><p> Bug fix: drop quotes on keys of nested objects.</p>
180+
<h5>Jun 1, 2015</h5><p> Bug fix: proper support of commas inside quotes.</p>
181+
<h5>Jan 12, 2014</h5><p> Initial release.</p>
182+
</div>
183+
184+
</div>
185+
</div>
186+
187+
</div>
188+
143189
</div>

0 commit comments

Comments
 (0)