Skip to content

Commit 0773a64

Browse files
ankit01-ossankit01-oss
authored
Merge pull request #18 from dhruv-signoz/fix/mock_apis
Replace Failing Mock API Calls & Improve Styling
2 parents f6762fb + 8b63814 commit 0773a64

File tree

4 files changed

+179
-121
lines changed

4 files changed

+179
-121
lines changed

‎app.py‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@
88

99
from opentelemetry.metrics import get_meter_provider
1010

11-
1211
app = Flask(__name__)
1312
title = "TODO sample application with Flask and MongoDB"
1413
heading = "TODO Reminder with Flask and MongoDB"
@@ -37,11 +36,12 @@ def lists ():
3736
#Display the all Tasks
3837
todos_l = todos.find()
3938
a1="active"
39+
# mock API calls
4040
if randrange(10) % 2:
41-
response = requests.get('https://run.mocky.io/v3/b851a5c6-ab54-495a-be04-69834ae0d2a7')
41+
response = requests.get('https://google.com')
4242
response.close()
4343
else:
44-
response = requests.get('https://run.mocky.io/v3/1cb67153-a6ac-4aae-aca6-273ed68b5d9e')
44+
response = requests.get('https://google.com')
4545
response.close()
4646

4747
return render_template('index.html',a1=a1,todos=todos_l,t=title,h=heading), 500

‎static/assets/style.css‎

Lines changed: 135 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,90 +1,146 @@
1-
h1{
2-
/* font-family:"Arial Black", Gadget, sans-serif;*/
3-
font-family:"Times New Romans", Gadget, sans-serif;
1+
:root{
2+
--bg: #f7f8fb;
3+
--card: #ffffff;
4+
--muted: #6b7280;
5+
--primary: #4CAF50;
6+
--danger: #f44336;
7+
--border: #e6e9ee;
48
}
9+
10+
*{box-sizing:border-box}
11+
512
body{
6-
color:black;
7-
background-color:white;
8-
left-margin:10px;
9-
right-margin:10px;
10-
}
11-
table{
12-
width:95%;
13-
border-collapse:collapse;
14-
table-layout:fixed;
15-
}
16-
td
17-
{
18-
border: rgba(224, 119, 70, 1) 2px solid;
19-
word-wrap:break-word;
13+
margin:18px;
14+
color:#0f1724;
15+
background:var(--bg);
16+
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
17+
-webkit-font-smoothing:antialiased;
2018
}
21-
table#close{
2219

23-
table-layout:default;
24-
border-collapse:seperate;
25-
border-spacing: 5px 5px;
26-
border:none;
27-
vertical-align:top;
28-
}
29-
table.none
30-
{
31-
border:none;
32-
vertical-align:top;
33-
}
34-
table.none td
35-
{
36-
border: none;
37-
}
38-
tr.row td{
39-
text-decoration:italic;
40-
}
41-
th.status{
42-
width:5%;
43-
}
44-
th.name{
45-
width:20%;
46-
}
47-
th.des{
48-
width:40%;
49-
padding:5px 5px 5px 5px;
50-
}
51-
th.date{
52-
width:8%;
53-
}
54-
th.pr{
55-
width:7%;
56-
}
57-
th.func1{
58-
width:6%;
59-
}
60-
th.func2{
61-
width:5%;
62-
}
63-
input[type=submit] {
64-
width: 20em; height: 2em;
20+
h1{
21+
font-family: "Times New Roman", Times, serif;
22+
font-size:1.9rem;
23+
margin:0 0 12px;
24+
text-align:center;
25+
color:#0b1220;
6526
}
66-
ul {
67-
list-style-type: none;
68-
margin: 0;
69-
padding: 0;
70-
overflow: hidden;
71-
background-color: #333;
27+
28+
/* Navigation */
29+
ul{
30+
list-style:none;
31+
margin:0 0 14px 0;
32+
padding:8px;
33+
display:flex;
34+
gap:8px;
35+
justify-content:center;
36+
}
37+
li{display:block}
38+
li a{
39+
display:block;
40+
color:#fff;
41+
padding:10px 14px;
42+
text-decoration:none;
43+
border-radius:8px;
44+
background:#333;
45+
transition:background .12s, transform .08s;
46+
}
47+
li a:hover{background:#111}
48+
a.active{background:var(--primary)}
49+
50+
/* Tables */
51+
table{
52+
width:95%;
53+
margin:12px auto;
54+
border-collapse:separate;
55+
border-spacing:0;
56+
background:var(--card);
57+
border-radius:10px;
58+
overflow:hidden;
59+
box-shadow:0 6px 18px rgba(15,23,42,0.06);
7260
}
73-
li {
74-
float: left;
61+
62+
/* Header cells */
63+
th{
64+
text-align:left;
65+
padding:12px 14px;
66+
background:#f8fafc;
67+
color:#374151;
68+
font-weight:600;
69+
border-bottom:1px solid var(--border);
7570
}
76-
li a {
77-
display: block;
78-
color: white;
79-
text-align: center;
80-
padding: 14px 16px;
81-
text-decoration: none;
71+
72+
td{
73+
padding:12px 14px;
74+
vertical-align:middle;
75+
border-bottom:1px solid var(--border);
76+
color:#0f1724;
77+
word-wrap:break-word;
8278
}
83-
a.active {
84-
background-color: #4CAF50;
79+
80+
tr.datas:nth-child(odd){background:#ffffff}
81+
tr.datas:nth-child(even){background:#fbfbfd}
82+
tr.datas:hover{background:#f3f4f6}
83+
84+
/* Column widths (kept from original sizes) */
85+
th.status{width:6%}
86+
th.name{width:20%}
87+
th.des{width:40%; padding:5px}
88+
th.date{width:10%}
89+
th.pr{width:8%}
90+
th.func1{width:6%}
91+
th.func2{width:4%}
92+
93+
/* Inputs, selects, textarea */
94+
input[type=text], textarea, select{
95+
padding:8px 10px;
96+
border:1px solid #d1d5db;
97+
border-radius:8px;
98+
font-size:0.95rem;
99+
}
100+
textarea{resize:vertical}
101+
input:focus, textarea:focus, select:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 6px rgba(76,175,80,0.06)}
102+
103+
/* Buttons */
104+
button{cursor:pointer}
105+
button[type=submit], input[type=submit]{
106+
color:white;
107+
border:none;
108+
padding:8px 12px;
109+
border-radius:8px;
110+
font-weight:600;
111+
}
112+
/* Default green button */
113+
button[type=submit]:not([style]), input[type=submit]:not([style]){
114+
background:linear-gradient(180deg,var(--primary),#3aa14a);
115+
}
116+
/* Respect inline styles */
117+
button[style], input[style]{
118+
background-color: inherit;
119+
}
120+
/* Danger / Delete */
121+
.func1 button{background:var(--danger)}
122+
.func1 button:hover{background:#d32f2f}
123+
.func2 button{background:#3b82f6}
124+
.func2 button:hover{background:#2563eb}
125+
126+
/* Small image icon used for status */
127+
input[type="image"]{width:26px;height:26px;border:0;padding:0}
128+
129+
/* Special tables used for forms */
130+
table#close{table-layout:auto;border-spacing:5px;border:none;vertical-align:top}
131+
table.none{border:none;vertical-align:top}
132+
table.none td{border:none;padding:6px}
133+
134+
/* Responsive */
135+
@media (max-width:800px){
136+
table{width:100%}
137+
th, td{padding:10px}
138+
h1{font-size:1.5rem}
139+
ul{flex-wrap:wrap}
85140
}
86-
/* Change the link color to #111 (black) on hover */
87-
li a:hover {
88-
background-color: #111;
141+
142+
@media (max-width:480px){
143+
th, td{font-size:0.95rem;padding:8px}
144+
input[type=text], textarea{font-size:0.95rem}
89145
}
90146

‎templates/searchlist.html‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,16 @@
77
<h1>{{h}}</h1>
88
<hr>
99
{% if todos[0] %}
10-
<h3>Result of the Search : ToDO List</h3>
10+
<h3>Search Results</h3>
1111
<table>
1212
<tr id="row">
13-
<td class="status">Status</td>
14-
<td class="name">Task Name</td>
15-
<td class="desc">Task Description</td>
16-
<td class="date">Date</td>
17-
<td class="pr">Project</td>
18-
<td class="func">Delete</td>
19-
<td class="func">Modify</td>
13+
<th class="status">Status</th>
14+
<th class="name">Task Name</th>
15+
<th class="desc">Description</th>
16+
<th class="date">Date</th>
17+
<th class="pr">Priority</th>
18+
<th class="func1">Remove</th>
19+
<th class="func2">Modify</th>
2020
</tr>
2121
{% for todo in todos %}
2222
<tr class="datas">
@@ -29,10 +29,12 @@ <h3>Result of the Search : ToDO List</h3>
2929
<td class="func1"><a href="./update?_id={{ todo['_id'] }}"><button type="submit">EDIT</button></a></td>
3030
</tr>
3131
{% endfor %}
32+
</table>
3233
{% else %}
33-
<h4>No Result Found !!</h4>
34+
<h4>No Results Found</h4>
3435
{% endif %}
35-
</table>
36-
<a href="/">Return to TaskList</a>
36+
<div style="text-align:center;margin-top:16px">
37+
<a href="/" style="color:#4CAF50;text-decoration:none;font-weight:600">← Return to TaskList</a>
38+
</div>
3739
</body>
3840
</html>

‎templates/update.html‎

Lines changed: 28 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,42 @@
11
<html>
22
<head>
33
<title>{{t}}</title>
4+
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='assets/style.css')}}" >
45
</head>
5-
<style>
6-
h1{
7-
font-family:"Arial Black", Gadget, sans-serif;
8-
}
9-
body{
10-
background-color:white;
11-
}
12-
</style>
136
<body>
147
<h1>{{h}}</h1>
158
<hr>
16-
<h3>Update tasks with a reference</h3>
9+
<h3>Update Task</h3>
1710
<form action="/action3" method="POST">
1811
{% for task in tasks %}
19-
Unique Object ID : {{ task['_id'] }}<br/>
20-
<input type="text" name="_id" value="{{ task['_id'] }}" hidden>
12+
<p><strong>Unique Object ID:</strong> {{ task['_id'] }}</p>
13+
<input type="text" name="_id" value="{{ task['_id'] }}" hidden>
2114

22-
<table>
23-
<tr>
24-
<td>Task Name</td><td> : </td><td><input type="text" name="name" value="{{ task['name'] }}" placeholder="{{ task['name'] }}"></td>
25-
</tr>
26-
<tr>
27-
<td>Description</td><td> : </td><td><textarea type="text" name="desc" rows=3 cols=30 placeholder="{{ task['desc'] }}"> {{ task['desc'] }} </textarea></td>
28-
</tr>
29-
<tr>
30-
<td>Date</td><td> : </td><td><input type="text" name="date" value="{{ task['date'] }}" placeholder="{{ task['date'] }}"></td>
31-
</tr>
32-
<tr>
33-
<td>Priority</td><td> : </td><td><input type="text" name="pr" value="{{ task['pr'] }}" placeholder="{{ task['pr'] }}"></td>
34-
</tr>
35-
</table>
15+
<table class="none">
16+
<tr>
17+
<td><label>Task Name</label></td>
18+
<td><input type="text" name="name" value="{{ task['name'] }}" placeholder="{{ task['name'] }}"></td>
19+
</tr>
20+
<tr>
21+
<td><label>Description</label></td>
22+
<td><textarea name="desc" rows="3" cols="30" placeholder="{{ task['desc'] }}">{{ task['desc'] }}</textarea></td>
23+
</tr>
24+
<tr>
25+
<td><label>Date</label></td>
26+
<td><input type="text" name="date" value="{{ task['date'] }}" placeholder="{{ task['date'] }}"></td>
27+
</tr>
28+
<tr>
29+
<td><label>Priority</label></td>
30+
<td><input type="text" name="pr" value="{{ task['pr'] }}" placeholder="{{ task['pr'] }}"></td>
31+
</tr>
32+
</table>
3633
{% endfor %}
37-
<button type="submit"> Update Task </button>
38-
<br/>
34+
<div style="text-align:center;margin-top:16px">
35+
<button type="submit">Update Task</button>
36+
</div>
3937
</form>
40-
<a href="/">Return to TaskList</a>
38+
<div style="text-align:center;margin-top:16px">
39+
<a href="/" style="color:#4CAF50;text-decoration:none;font-weight:600">← Return to TaskList</a>
40+
</div>
4141
</body>
4242
</html>

0 commit comments

Comments
 (0)