Skip to content

Commit 0610d66

Browse files
timendumtimendum
committed
Migrate to tailwind
1 parent 5571763 commit 0610d66

File tree

4 files changed

+80
-64
lines changed

4 files changed

+80
-64
lines changed

‎index.html

+67-64
Original file line numberDiff line numberDiff line change
@@ -8,90 +8,93 @@
88
<meta content="" name="description"/>
99
<meta content="Timendum" name="author"/>
1010
<title> Reddit commented thread </title>
11-
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
12-
crossorigin="anonymous" />
13-
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
14-
crossorigin="anonymous"/>
11+
<link rel="stylesheet" href="./output.css" />
1512
</head>
1613

17-
<body>
18-
<div class="bs-docs-header" id="content" tabindex=-1>
19-
<div class="container">
20-
<h1>Reddit most commented threads</h1>
21-
<p>Input a subreddit or a multi-subreddit and this tool will generate a chart of the most commented threads.</p>
14+
<body class="font-sans">
15+
<div class="my-4" id="content" tabindex=-1>
16+
<div class="container mx-auto">
17+
<h1 class="text-4xl">Reddit most commented threads</h1>
18+
<p class="my-2">Input a subreddit or a multi-subreddit and this tool will generate a chart of the most commented threads.</p>
2219
</div>
2320
</div>
24-
<div class="container">
25-
<div class="alert alert-warning hidden" id="url-error-message"></div>
21+
<div class="container mx-auto">
22+
<div class="p-4 mb-4 rounded-lg bg-orange-200 bg-gradient-to-b from-amber-200 border-red-200 border-2" id="url-error-message">Error message</div>
2623
</div>
27-
<div class="container">
28-
<form class="form-horizontal" id="main-form">
29-
<div class="form-group">
30-
<div class="col-md-8">
31-
<input type="text" class="form-control" id="reddit-url" placeholder="https://www.reddit.com/...">
24+
<div class="container mx-auto">
25+
<form id="main-form">
26+
<div class="flex">
27+
<div class="grow mr-2">
28+
<input type="text" class="border border-slate-200 px-2 py-1 w-full rounded" id="reddit-url" placeholder="https://www.reddit.com/...">
3229
</div>
33-
<div class="col-md-2 form-inline">
34-
<button class="btn btn-primary" type="submit" id="submit" data-original-text="Submit" data-loading-text="Loading...">Submit</button>
30+
<div class="xl:w-32 w-28 mr-2">
31+
<button class="text-white bg-blue-600 hover:bg-blue-800 focus:ring-2 focus:ring-blue-200 font-medium rounded-lg text-sm px-3 py-1.5 focus:ring-blue-800 shadow shadow-cyan-800 bg-gradient-to-br from-blue-400 hover:from-blue-600" type="submit" id="submit" data-original-text="Submit" data-loading-text="Loading...">Submit</button>
3532
</div>
36-
<div class="col-md-2 form-inline">
37-
<label for="advanced-form" class="control-label">Advanced</label>
38-
<input type="checkbox" class="form-control" id="advanced-form">
33+
<div class="xl:w-32 w-28 mr-2 content-center">
34+
<label for="advanced-form" class="">Advanced</label>
35+
<input type="checkbox" class="" id="advanced-form">
3936
</div>
4037
</div>
41-
<div class="form-group form-advanced" hidden="">
42-
<div class="col-md-5 form-inline">
43-
<label for="pieComments" class="control-label" title="How many comments should be fetched from Reddit">
44-
Comments to get
45-
<span class="glyphicon glyphicon-info-sign"></span>
46-
</label>
47-
<input type="number" class="form-control" id="pieComments" value="200" min="100" step="100">
38+
<div class="form-advanced" hidden>
39+
<div class="flex flex-wrap my-2">
40+
<div class="basis-1/3">
41+
<label for="pieComments" class="basis-auto" title="How many comments should be fetched from Reddit">
42+
Comments to get
43+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="inline-block" fill="currentColor" viewBox="0 0 16 16">
44+
<path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2"/>
45+
</svg>
46+
</label>
47+
<input type="number" class="w-16 border border-slate-200 px-2 py-1 rounded" id="pieComments" value="200" min="100" step="100">
48+
</div>
49+
<div class="basis-1/3">
50+
<label for="scatterSubmissions" class="" title="How many submissions should be fetched from Reddit">
51+
Submissions to get
52+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="inline-block" fill="currentColor" viewBox="0 0 16 16">
53+
<path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2"/>
54+
</svg>
55+
</label>
56+
<input type="number" class="w-16 border border-slate-200 px-2 py-1 rounded" id="scatterSubmissions" value="100" min="100" step="100">
57+
</div>
58+
<div class="basis-1/3 content-center">
59+
<label for="filter-multireddit" class="" title="Remove lowest submission by subreddit">
60+
Filter multireddit
61+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="inline-block" fill="currentColor" viewBox="0 0 16 16">
62+
<path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2"/>
63+
</svg>
64+
<span class="glyphicon glyphicon-info-sign"></span>
65+
</label>
66+
<input type="checkbox" class="align-middle" id="filter-multireddit" value="on">
67+
</div>
4868
</div>
49-
<div class="col-md-5 form-inline">
50-
<label for="scatterSubmissions" class="control-label" title="How many submissions should be fetched from Reddit">
51-
Submissions to get
52-
<span class="glyphicon glyphicon-info-sign"></span>
53-
</label>
54-
<input type="number" class="form-control" id="scatterSubmissions" value="100" min="100" step="100">
55-
</div>
56-
<div class="col-md-2 form-inline">
57-
<label for="filter-multireddit" class="control-label" title="Remove lowest submission by subreddit">
58-
Filter multireddit
59-
<span class="glyphicon glyphicon-info-sign"></span>
60-
</label>
61-
<input type="checkbox" class="form-control" id="filter-multireddit" value="on">
62-
</div>
63-
</div>
64-
<div class="form-group form-advanced" hidden="">
65-
<div class="col-md-3 form-inline"><label class="control-label">Scatter chart:</label></div>
66-
<div class="col-md-3 form-inline">
67-
<label for="scatterMaxX" class="control-label">Max x</label>
68-
<input type="number" class="form-control" id="scatterMaxX" value="0" min="0">
69-
</div>
70-
<div class="col-md-3 form-inline">
71-
<label for="scatterMaxY" class="control-label">Max y</label>
72-
<input type="number" class="form-control" id="scatterMaxY" value="0" min="0">
73-
</div>
74-
<div class="col-md-3 form-inline">
75-
<label for="logaritmic" class="control-label">Log scale</label>
76-
<input type="checkbox" class="form-control" id="logaritmic" value="on">
69+
<div class="flex flex-wrap">
70+
<div class="basis-1/4"><label class="">Scatter chart:</label></div>
71+
<div class="basis-1/4">
72+
<label for="scatterMaxX" class="">Max x</label>
73+
<input type="number" class="w-20 border border-slate-200 px-2 py-1 rounded" id="scatterMaxX" value="0" min="0">
74+
</div>
75+
<div class="basis-1/4">
76+
<label for="scatterMaxY" class="">Max y</label>
77+
<input type="number" class="w-20 border border-slate-200 px-2 py-1 rounded" id="scatterMaxY" value="0" min="0">
78+
</div>
79+
<div class="basis-1/4 content-center">
80+
<label for="logaritmic" class="">Log scale</label>
81+
<input type="checkbox" class="align-middle" id="logaritmic" value="on">
82+
</div>
7783
</div>
7884
</div>
7985
</form>
8086
</div>
81-
<div class="container" style="margin-top: 20px;">
82-
<div class="row">
83-
<div class="col-md-6">
87+
<div class="container mx-auto mt-5">
88+
<div class="flex flex-wrap">
89+
<div class="w-1/2">
8490
<div id="pie_div"></div>
8591
</div>
86-
<div class="col-md-6">
92+
<div class="w-1/2">
8793
<div id="points_div"></div>
8894
</div>
8995
</div>
9096
</div>
91-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
92-
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
93-
crossorigin="anonymous"></script>
94-
<script src="https://code.highcharts.com/highcharts.js"></script>
97+
<script src="https://code.highcharts.com/12/highcharts.js"></script>
9598
<script src="snoowrap-v1.min.js"></script>
9699
<script src="comments.js"></script>
97100
</body>

‎input.css

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;

‎output.css

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎tailwind.config.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
/** @type {import('tailwindcss').Config} */
2+
module.exports = {
3+
content: ["./index.html"],
4+
theme: {
5+
extend: {},
6+
},
7+
plugins: [],
8+
}
9+

0 commit comments

Comments
 (0)