From 76014b3f1f13d7629f5478dd1b5b924c07554916 Mon Sep 17 00:00:00 2001 From: 100gle Date: Thu, 2 Nov 2023 21:19:56 +0800 Subject: [PATCH 01/10] feat: improve challenge pages ui and format html content --- templates/challenge.html | 111 +++++++++++++++++++++------------- templates/challenge_list.html | 31 ++++++++-- templates/index.html | 16 ++--- 3 files changed, 99 insertions(+), 59 deletions(-) diff --git a/templates/challenge.html b/templates/challenge.html index c633f76..166f98d 100644 --- a/templates/challenge.html +++ b/templates/challenge.html @@ -1,47 +1,71 @@ - + + +
Challenges -
    - Basic +
      + Basic {% for challenge in challenge_names | selectattr("difficulty", "equalto", "basic") %}
    1. {{ challenge.name }}
      2. {% endfor %}
      - Intermediate + + Intermediate {% for challenge in challenge_names | selectattr("difficulty", "equalto", "intermediate") %}
    2. {{ challenge.name }}
      3. {% endfor %}
      - Advanced + + Advanced {% for challenge in challenge_names | selectattr("difficulty", "equalto", "advanced") %}
    3. {{ challenge.name }}
      4. {% endfor %}
    -
+ \ No newline at end of file diff --git a/templates/index.html b/templates/index.html index 4c49986..99782cc 100644 --- a/templates/index.html +++ b/templates/index.html @@ -3,19 +3,11 @@ html { font-size: 1.5rem; } - #challenge-list { - display: flex; - justify-content: center; - align-items: center; - width: 30%; - margin: auto; - } -
-

Welcome to Python Type Challenges!

-
- {% include 'github_ribbon.html' %} {% include 'challenge_list.html' %} - +

Welcome to Python Type Challenges!

+ {% include 'github_ribbon.html' %} + {% include 'challenge_list.html' %} + \ No newline at end of file From 34d1ec082e52d5a759e26ed75390381fbe4d9260 Mon Sep 17 00:00:00 2001 From: 100gle Date: Thu, 2 Nov 2023 22:16:33 +0800 Subject: [PATCH 02/10] feat: add pico css and adjust template directory structure --- templates/base.html | 17 +++++++++++++++++ templates/{ => components}/challenge_list.html | 0 templates/{ => components}/github_ribbon.html | 0 3 files changed, 17 insertions(+) create mode 100644 templates/base.html rename templates/{ => components}/challenge_list.html (100%) rename templates/{ => components}/github_ribbon.html (100%) diff --git a/templates/base.html b/templates/base.html new file mode 100644 index 0000000..e713e98 --- /dev/null +++ b/templates/base.html @@ -0,0 +1,17 @@ + + + + + + + + {% block head %}{% endblock %} + + + + + {% include 'components/github_ribbon.html' %} + {% block content %}{% endblock %} + + + \ No newline at end of file diff --git a/templates/challenge_list.html b/templates/components/challenge_list.html similarity index 100% rename from templates/challenge_list.html rename to templates/components/challenge_list.html diff --git a/templates/github_ribbon.html b/templates/components/github_ribbon.html similarity index 100% rename from templates/github_ribbon.html rename to templates/components/github_ribbon.html From c0952700415c58919c5d58f595ea91e0d58a20a5 Mon Sep 17 00:00:00 2001 From: 100gle Date: Thu, 2 Nov 2023 22:18:14 +0800 Subject: [PATCH 03/10] refactor: Refactor pages to use jinja's Inheritance template --- templates/challenge.html | 37 ++++++++++++------------------------- templates/index.html | 31 +++++++++++++++++++++---------- 2 files changed, 33 insertions(+), 35 deletions(-) diff --git a/templates/challenge.html b/templates/challenge.html index 166f98d..7424954 100644 --- a/templates/challenge.html +++ b/templates/challenge.html @@ -1,32 +1,23 @@ - - +{% extends "base.html" %} + +{% block head %} + {{ super() }} + - - +{% endblock %} - - {% include 'github_ribbon.html' %} +{% block content %}
- {% include 'challenge_list.html' %} + {% include 'components/challenge_list.html' %}
@@ -156,4 +143,4 @@

Test cases

checkWidth(); // Check the width initially window.addEventListener('resize', checkWidth); - \ No newline at end of file +{% endblock %} \ No newline at end of file diff --git a/templates/index.html b/templates/index.html index 99782cc..18a6e9a 100644 --- a/templates/index.html +++ b/templates/index.html @@ -1,13 +1,24 @@ - - - +{% endblock %} - -

Welcome to Python Type Challenges!

- {% include 'github_ribbon.html' %} - {% include 'challenge_list.html' %} - \ No newline at end of file +{% block content %} +
+

Welcome to Python Type Challenges!

+ {% include 'components/challenge_list.html' %} +
+{% endblock%} \ No newline at end of file From fa0b52ea5fec5c1b4255f91317c4b38649c164ca Mon Sep 17 00:00:00 2001 From: 100gle Date: Fri, 3 Nov 2023 09:41:11 +0800 Subject: [PATCH 04/10] feat: Add button spinner to run button --- templates/challenge.html | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/templates/challenge.html b/templates/challenge.html index 7424954..9719cd2 100644 --- a/templates/challenge.html +++ b/templates/challenge.html @@ -118,7 +118,13 @@

Test cases

...codeMirrorShared, }); - document.getElementById('run-button').onclick = function () { + let runButton = document.getElementById('run-button') + runButton.onclick = function () { + // set button spinner + let rawInnerText = runButton.innerText; + runButton.ariaBusy = true; + runButton.innerText = "" + let code = myCodeMirror.getValue(); fetch('/run/{{name}}', { method: 'POST', @@ -128,6 +134,11 @@

Test cases

.then(result => document.getElementById("result").innerHTML = result) .catch((error) => { console.error('Error:', error); + }) + .finally(() => { + // reset button spinner + runButton.ariaBusy = false; + runButton.innerText = rawInnerText; }); }; From 31b6a660d7a2a11a14bcec2b538d13f41c4dbeac Mon Sep 17 00:00:00 2001 From: 100gle Date: Sun, 5 Nov 2023 10:48:21 +0800 Subject: [PATCH 05/10] refactor: Add sidebar with challenge list and dark mode toggle --- templates/challenge.html | 32 +++++++++-- templates/components/challenge_list.html | 3 ++ templates/components/darkmode.html | 67 ++++++++++++++++++++++++ 3 files changed, 97 insertions(+), 5 deletions(-) create mode 100644 templates/components/darkmode.html diff --git a/templates/challenge.html b/templates/challenge.html index e0deab6..4f9fac4 100644 --- a/templates/challenge.html +++ b/templates/challenge.html @@ -18,11 +18,27 @@ max-width: calc(100% * 11/12); } - .navigation-container { - max-width: fit-content; + .sidebar-container { + display: flex; + flex-direction: column; margin-right: 2rem; } + .sidebar-container .sidebar-challenge-list { + overflow-y: auto; + height: 100%; + max-width: fit-content; + } + + .sidebar-container .sidebar-actions { + display: flex; + justify-content: center; + align-items: center; + margin-top: 8px; + padding-top: 8px; + border-top: 1px solid hsl(205, 20%, 94%); + } + .challenge-area { display: flex; flex-direction: column; @@ -55,7 +71,7 @@ align-items: center; } - .navigation-container { + .sidebar-container { margin-right: 0; margin-bottom: 2rem; } @@ -75,8 +91,14 @@ {% block content %}
-
- {% include 'components/challenge_list.html' %} + +
+
+ {% include 'components/challenge_list.html' %} +
+
+ {% include 'components/darkmode.html' %} +
diff --git a/templates/components/challenge_list.html b/templates/components/challenge_list.html index dd38e82..8f3c56b 100644 --- a/templates/components/challenge_list.html +++ b/templates/components/challenge_list.html @@ -3,6 +3,9 @@ display: flex; justify-content: center; align-items: center; + margin-bottom: 0; + padding-bottom: 0; + border-bottom: 0; } #challenge-list ol { diff --git a/templates/components/darkmode.html b/templates/components/darkmode.html new file mode 100644 index 0000000..e731443 --- /dev/null +++ b/templates/components/darkmode.html @@ -0,0 +1,67 @@ + + + + +
+ + + + + +
\ No newline at end of file From a94941052d512907a19f1da259964951b260d91d Mon Sep 17 00:00:00 2001 From: 100gle Date: Sun, 5 Nov 2023 11:20:05 +0800 Subject: [PATCH 06/10] Add header to challenge area --- templates/challenge.html | 25 ++++++++++++++++--------- 1 file changed, 16 insertions(+), 9 deletions(-) diff --git a/templates/challenge.html b/templates/challenge.html index 4f9fac4..cf51560 100644 --- a/templates/challenge.html +++ b/templates/challenge.html @@ -39,12 +39,25 @@ border-top: 1px solid hsl(205, 20%, 94%); } + /* Challenge Area */ .challenge-area { display: flex; flex-direction: column; max-width: 50%; } + .challenge-area-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 1rem; + } + + .challenge-area-header > span:nth-child(1) { + font-size: 30px; + font-weight: bold; + } + .codemirror-container { display: flex; flex-direction: column; @@ -102,15 +115,9 @@
-
-

Challenge - {{name}}

-

Python version: {{ python_info }}

+
+ Challenge - {{name}} + Python version: {{ python_info }}

Complete code following the instructions below, so that there are no type errors From 484d8b46368275a4bdb29138d3c07103ddfc0c64 Mon Sep 17 00:00:00 2001 From: 100gle Date: Sun, 5 Nov 2023 11:26:40 +0800 Subject: [PATCH 07/10] chore: simplify class name for challenge header --- templates/challenge.html | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/templates/challenge.html b/templates/challenge.html index cf51560..4623720 100644 --- a/templates/challenge.html +++ b/templates/challenge.html @@ -46,14 +46,14 @@ max-width: 50%; } - .challenge-area-header { + .challenge-header__title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } - .challenge-area-header > span:nth-child(1) { + .challenge-header__title > span:nth-child(1) { font-size: 30px; font-weight: bold; } @@ -115,11 +115,13 @@

-
+ +
+
Challenge - {{name}} Python version: {{ python_info }}
-

+

Complete code following the instructions below, so that there are no type errors throughout the test code except for those lines followed by a # expect-type-error comment. You don't need to implement the function, just add type annotations. From e285686ee48a69f5e90271603ae809dfb2dbb7cd Mon Sep 17 00:00:00 2001 From: 100gle Date: Sun, 5 Nov 2023 15:09:39 +0800 Subject: [PATCH 08/10] Update challenge template layout and styles --- templates/base.html | 1 - templates/challenge.html | 98 ++++++++++++++++++------ templates/components/challenge_list.html | 2 +- views/views.py | 4 +- 4 files changed, 78 insertions(+), 27 deletions(-) diff --git a/templates/base.html b/templates/base.html index e713e98..c047fe0 100644 --- a/templates/base.html +++ b/templates/base.html @@ -6,7 +6,6 @@ {% block head %}{% endblock %} - diff --git a/templates/challenge.html b/templates/challenge.html index 4623720..8f864d1 100644 --- a/templates/challenge.html +++ b/templates/challenge.html @@ -9,30 +9,32 @@ Python Type Challenge - {{ name }} + + + +

+ + + + {{ python_info }} +
\ No newline at end of file