Skip to content

Commit 50175be

Browse files
SupravisorSupravisor
authored
Merge pull request #192 from Supravisor/project
Refactor daily heading
2 parents 0965f80 + 94fb73e commit 50175be

File tree

3 files changed

+107
-66
lines changed

3 files changed

+107
-66
lines changed

‎index.htm‎

Lines changed: 40 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
<div class="task">
2525

2626
<h3>
27-
<label class="task-label" for="daily-input">Enter ad hoc task</label>
27+
<label class="task-label" for="daily-input">Enter daily task</label>
2828
</h3>
2929

3030
<svg id="close-ad-hoc" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="40px" height="40px"><path fill="red" d="M21.5 4.5H26.501V43.5H21.5z" transform="rotate(45.001 24 24)" /><path fill="red" d="M21.5 4.5H26.5V43.501H21.5z" transform="rotate(135.008 24 24)" /></svg>
@@ -42,7 +42,7 @@ <h3>
4242
<div class="task">
4343

4444
<h3>
45-
<label class="task-label" for="daily-edit">Edit ad hoc task</label>
45+
<label class="task-label" for="daily-edit">Edit daily task</label>
4646
</h3>
4747

4848
<svg id="close-edit-ad-hoc" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="40px" height="40px"><path fill="red" d="M21.5 4.5H26.501V43.5H21.5z" transform="rotate(45.001 24 24)" /><path fill="red" d="M21.5 4.5H26.5V43.501H21.5z" transform="rotate(135.008 24 24)" /></svg>
@@ -65,7 +65,7 @@ <h3>
6565
<div class="task">
6666

6767
<h3>
68-
<label class="task-label" for="daily-modify">Update ad hoc task</label>
68+
<label class="task-label" for="daily-modify">Update daily task</label>
6969
</h3>
7070

7171
<svg id="close-update-ad-hoc" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="40px" height="40px"><path fill="red" d="M21.5 4.5H26.501V43.5H21.5z" transform="rotate(45.001 24 24)" /><path fill="red" d="M21.5 4.5H26.5V43.501H21.5z" transform="rotate(135.008 24 24)" /></svg>
@@ -78,45 +78,55 @@ <h3>
7878

7979
</div>
8080

81-
<div id="all-tasks">
82-
83-
<div>
84-
<h3 id="ad-hoc-title" class="hidden"></h3>
85-
<ul id="ad-hoc-list" class="hidden"></ul>
86-
</div>
87-
81+
<div class="current">
82+
<h3 id="ad-hoc-title" class="hidden"></h3>
83+
<ul id="ad-hoc-list" class="hidden"></ul>
8884
</div>
8985

9086
<!-- weekly tasks -->
9187

9288
<div id="weekly" class="weekly hidden">
9389

94-
<div class="day">
95-
<h2></h2>
90+
<div class="daily">
91+
<div class="day">
92+
<h2></h2>
93+
</div>
9694
</div>
97-
98-
<div class="day">
99-
<h2></h2>
95+
96+
<div class="daily">
97+
<div class="day">
98+
<h2></h2>
99+
</div>
100100
</div>
101-
102-
<div class="day">
103-
<h2></h2>
101+
102+
<div class="daily">
103+
<div class="day">
104+
<h2></h2>
105+
</div>
104106
</div>
105-
106-
<div class="day">
107-
<h2></h2>
107+
108+
<div class="daily">
109+
<div class="day">
110+
<h2></h2>
111+
</div>
108112
</div>
109-
110-
<div class="day">
111-
<h2></h2>
113+
114+
<div class="daily">
115+
<div class="day">
116+
<h2></h2>
117+
</div>
112118
</div>
113-
114-
<div class="day">
115-
<h2></h2>
119+
120+
<div class="daily">
121+
<div class="day">
122+
<h2></h2>
123+
</div>
116124
</div>
117-
118-
<div class="day">
119-
<h2></h2>
125+
126+
<div class="daily">
127+
<div class="day">
128+
<h2></h2>
129+
</div>
120130
</div>
121131

122132
</div>

‎script.js‎

Lines changed: 28 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11

22
let tasks = {
33
"Daily": {
4-
"Ad hoc": ["plan report", "design brief"]
4+
"Ad hoc": []
55
},
66
"Weekly": {
77
"Monday": ["Mexican Monday"],
@@ -128,15 +128,15 @@ let diff = new Date(thisYear, thisMonth, thisDay).getTime();
128128
editWeeklyTask.classList.add("hidden");
129129
}
130130

131-
// ad hoc
132-
adHocTitle.innerHTML = `<h2 class="heading2">${Object.keys(tasks[event.target.innerText])[0]}</h2>`;
133-
adHocList.innerHTML = tasks[event.target.innerText]["Ad hoc"].map(el => `
134-
<input type="checkbox" />
135-
<li>
136-
<label>
137-
${el}
138-
</label>
139-
</li>`).join("");
131+
// ad hoc
132+
adHocTitle.innerHTML = `<h2 class="short-daily">${new Date().toLocaleString("default", { weekday: "short" })} ${new Date().getDate()}</h2>`;
133+
adHocTitle.innerHTML += `<h2 class="long-daily">${new Date().toLocaleString("default", { weekday: "long" })} ${new Date().getDate()}</h2>`;
134+
adHocList.innerHTML = tasks[event.target.innerText]["Ad hoc"].map(el => `
135+
<li>
136+
<label>
137+
${el}
138+
</label>
139+
</li>`).join("");
140140

141141
}
142142

@@ -210,6 +210,8 @@ let diff = new Date(thisYear, thisMonth, thisDay).getTime();
210210
addDaily.classList.toggle("hidden");
211211
insertDailyTask.classList.toggle("hidden");
212212
editDaily.classList.toggle("hidden");
213+
adHocTitle.classList.toggle("hidden");
214+
adHocList.classList.toggle("hidden");
213215
});
214216

215217
// insert ad hoc
@@ -222,14 +224,14 @@ let diff = new Date(thisYear, thisMonth, thisDay).getTime();
222224
dailyInput.value = "";
223225

224226
// ad hoc
225-
adHocTitle.innerHTML = `<h2 class="heading2">${Object.keys(tasks["Daily"])[0]}</h2>`;
227+
adHocTitle.innerHTML = `<h2 class="short-daily">${new Date().toLocaleString("default", { weekday: "short" })} ${new Date().getDate()}</h2>`;
228+
adHocTitle.innerHTML += `<h2 class="long-daily">${new Date().toLocaleString("default", { weekday: "long" })} ${new Date().getDate()}</h2>`;
226229
adHocList.innerHTML = tasks["Daily"]["Ad hoc"].map(el => `
227-
<input type="checkbox" />
228-
<li>
229-
<label>
230-
${el}
231-
</label>
232-
</li>`).join("");
230+
<li>
231+
<label>
232+
${el}
233+
</label>
234+
</li>`).join("");
233235

234236
addDaily.classList.toggle("hidden");
235237
insertDailyTask.classList.toggle("hidden");
@@ -299,15 +301,15 @@ let diff = new Date(thisYear, thisMonth, thisDay).getTime();
299301
adHocTitle.classList.remove("hidden");
300302
adHocList.classList.remove("hidden");
301303

302-
// ad hoc
303-
adHocTitle.innerHTML = `<h2 class="heading2">${Object.keys(tasks["Daily"])[0]}</h2>`;
304-
adHocList.innerHTML = tasks["Daily"]["Ad hoc"].map(el => `
305-
<input type="checkbox" />
306-
<li>
307-
<label>
308-
${el}
309-
</label>
310-
</li>`).join("");
304+
// ad hoc
305+
adHocTitle.innerHTML = `<h2 class="short-daily">${new Date().toLocaleString("default", { weekday: "short" })} ${new Date().getDate()}</h2>`;
306+
adHocTitle.innerHTML += `<h2 class="long-daily">${new Date().toLocaleString("default", { weekday: "long" })} ${new Date().getDate()}</h2>`;
307+
adHocList.innerHTML = tasks["Daily"]["Ad hoc"].map(el => `
308+
<li>
309+
<label>
310+
${el}
311+
</label>
312+
</li>`).join("");
311313

312314
});
313315

‎styles.css‎

Lines changed: 39 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,21 @@ h3 {
7979
max-width: 500px;
8080
}
8181

82+
.daily {
83+
margin: auto;
84+
}
85+
86+
.daily {
87+
min-width: 300px;
88+
max-width: 500px;
89+
}
90+
91+
.current {
92+
min-width: 0px;
93+
max-width: 500px;
94+
margin: auto;
95+
}
96+
8297
.buttons {
8398
display: flex;
8499
justify-content: space-around;
@@ -103,12 +118,21 @@ h2, h3 {
103118
font-family: Tahoma;
104119
}
105120

106-
#task-list li, #ad-hoc-list li, #edit-daily-task li, #select-weekly-task-list li, #edit-weekly-task-list li {
121+
h3 {
122+
font-size: 1.17em;
123+
}
124+
125+
#task-list li, #edit-daily-task li, #select-weekly-task-list li, #edit-weekly-task-list li {
107126
padding-bottom: 1em;
108127
margin-top: -2.2em;
109128
margin-left: 4em;
110129
}
111130

131+
#ad-hoc-list li {
132+
padding-bottom: 1em;
133+
margin-left: -1.75em;
134+
}
135+
112136
#edit-daily-task, #delete-daily-task, #select-weekly-task-list, #edit-weekly-task-list {
113137
margin-left: 15%;
114138
margin-top: 1em;
@@ -124,13 +148,9 @@ input {
124148
width: 44px;
125149
}
126150

127-
label {
128-
margin-top: -1.35em;
129-
}
130-
131151
/* Weekly */
132152

133-
#weekly h2 {
153+
h2 {
134154
text-align: center;
135155
border: 2px solid black;
136156
border-radius: 6px;
@@ -152,11 +172,11 @@ label {
152172

153173
@media (min-width: 0px) {
154174

155-
.short {
175+
.short, .short-daily {
156176
display: block;
157177
}
158178

159-
.long {
179+
.long, .long-daily {
160180
display: none;
161181
}
162182

@@ -204,6 +224,14 @@ label {
204224
margin: 8px 32px 8px;
205225
}
206226

227+
.short-daily {
228+
display: none;
229+
}
230+
231+
.long-daily {
232+
display: block;
233+
}
234+
207235
}
208236

209237
@media (min-width: 390px) {
@@ -228,8 +256,9 @@ label {
228256
display: flex;
229257
}
230258

231-
.day {
232-
width: calc(100vw/7);
259+
.daily {
260+
margin: unset;
261+
min-width: calc(100vw/7 - 4px);
233262
}
234263

235264
}

0 commit comments

Comments
 (0)