diff --git a/accounts/static/css/login.css b/accounts/static/css/login.css new file mode 100644 index 0000000..fd09c07 --- /dev/null +++ b/accounts/static/css/login.css @@ -0,0 +1,84 @@ +body { + font-family: "Roboto", sans-serif; + display: flex; + flex-direction: column; + min-height: 100vh; + margin: 0; + background-color: #f8f9fa; +} + +.login-container { + display: flex; + align-items: center; + justify-content: center; + min-height: 100vh; +} + +.login-card { + background-color: #ffffff; + border-radius: 0.5rem; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + padding: 2.5rem; + max-width: 400px; + width: 100%; +} + +.login-title { + text-align: center; + margin-bottom: 2rem; + font-size: 1.5rem; + font-weight: bold; + color: #343a40; +} + +.login-button { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + padding: 0.75rem 1rem; + margin-bottom: 1rem; + font-size: 1rem; + font-weight: 500; + color: #fff; + background-color: #6c757d; + border: none; + border-radius: 0.25rem; + transition: background-color 0.3s ease, transform 0.3s ease; + text-decoration: none; +} + +.login-button:hover { + background-color: #5a6268; + color: #fff; + transform: translateY(-2px); + text-decoration: none; +} + +.login-button:active { + transform: translateY(0); +} + +.login-button i { + margin-right: 0.5rem; + font-size: 1.25rem; +} + +.github { + background-color: #24292e; +} +.github:hover { + background-color: #1b1f23; +} +.google { + background-color: #dd4b39; +} +.google:hover { + background-color: #c23321; +} +.slack { + background-color: #4a154b; +} +.slack:hover { + background-color: #3b1139; +} diff --git a/accounts/templates/accounts/login.html b/accounts/templates/accounts/login.html index c4b9374..f8b6b39 100644 --- a/accounts/templates/accounts/login.html +++ b/accounts/templates/accounts/login.html @@ -1,3 +1,32 @@ -{% for provider in providers %} - Login with {{ provider.name }}
-{% endfor %} \ No newline at end of file +{% load static %} + + + + + + + Login + + + + + + + + + + +
+
+ + {% for provider in providers %} + + {% endfor %} +
+
+ + + \ No newline at end of file diff --git a/courses/models/project.py b/courses/models/project.py index c035eb4..1ac9675 100644 --- a/courses/models/project.py +++ b/courses/models/project.py @@ -22,16 +22,16 @@ class ProjectState(Enum): project_state_names = { ProjectState.CLOSED.value: "Closed", - ProjectState.COLLECTING_SUBMISSIONS.value: "Collecting Submissions", - ProjectState.PEER_REVIEWING.value: "Peer Reviewing", - ProjectState.COMPLETED.value: "Completed", + ProjectState.COLLECTING_SUBMISSIONS.value: "Open", + ProjectState.PEER_REVIEWING.value: "Review", + ProjectState.COMPLETED.value: "Scored", } project_status_badge_classes = { ProjectState.CLOSED.value: "bg-secondary", - ProjectState.COLLECTING_SUBMISSIONS.value: "bg-info", - ProjectState.PEER_REVIEWING.value: "bg-warning", - ProjectState.COMPLETED.value: "bg-success", + ProjectState.COLLECTING_SUBMISSIONS.value: "bg-warning", + ProjectState.PEER_REVIEWING.value: "bg-info", + ProjectState.COMPLETED.value: "bg-secondary", } diff --git a/courses/static/courses.css b/courses/static/courses.css index 4023e88..6891b87 100644 --- a/courses/static/courses.css +++ b/courses/static/courses.css @@ -1,23 +1,32 @@ -/* Apply to the header nav or a div inside the header if it wraps your content */ +body { + font-family: "Roboto", sans-serif; + display: flex; + flex-direction: column; + min-height: 100vh; + margin: 0; +} + +.content-wrapper { + flex: 1; +} + header nav { max-width: 720px; - margin: 0 auto; /* Centers the navigation horizontally */ - padding: 20px 0; /* Vertical padding to match your content block */ + margin: 0 auto; display: flex; - justify-content: space-between; /* This will space your list and logout/login */ - align-items: center; /* This will align the items vertically */ + justify-content: space-between; + align-items: center; } -/* Ensure the lists within the nav take up the appropriate space */ header nav ul { display: flex; - align-items: center; /* Align list items vertically */ + align-items: center; padding: 0; - margin: 0; /* Reset margins to control spacing explicitly */ + margin: 0; } header nav li:not(:last-child) { - margin-right: 1rem; /* Adds margin to the right of each list item except the last */ + margin-right: 1rem; } nav .breadcrumbs ul { @@ -27,23 +36,42 @@ nav .breadcrumbs ul { align-items: center; } -/* Style each list item */ nav .breadcrumbs ul li { - margin-right: 0.25rem; /* Add some space between the breadcrumbs */ + margin-right: 0.25rem; } -/* Add ">" before each li except the first one using a pseudo-element */ nav .breadcrumbs ul li:not(:first-child)::before { - content: "\f105"; /* FontAwesome's right arrow icon */ + content: "\f105"; font-family: "Font Awesome 5 Free"; color: #000; - padding-right: 0.25rem; /* Add some space before the breadcrumb text */ - font-weight: 900; /* Bold */ + padding-right: 0.25rem; + font-weight: 900; +} + +.breadcrumb { + background-color: #e9ecef; + padding: 0.75rem 1rem; + margin-left: 15px; + border-radius: 0.25rem; + margin-left: 15px; } +.breadcrumb-item + .breadcrumb-item::before { + content: "/"; + color: #6c757d; +} + +.breadcrumb-item a { + color: #0088dd; + text-decoration: none; +} + +.breadcrumb-item.active { + color: #6c757d; +} .form-container { - max-width: 720px; + max-width: 720px; margin: 20px auto; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); padding: 20px; @@ -57,46 +85,45 @@ nav .breadcrumbs ul li:not(:first-child)::before { margin-bottom: 0.5rem; } -/* Questions */ .form-check-label { display: block; color: #5f6368; } .form-control { - box-shadow: none; /* Remove Bootstrap's default shadow */ - border-color: #e0e0e0; /* Light grey border color */ - border-radius: 8px; /* Rounded corners */ + box-shadow: none; + border-color: #e0e0e0; + border-radius: 8px; } -/* Focused Inputs */ .form-control:focus { - border-color: #a6c8ff; /* Highlight color when focused */ - box-shadow: 0 0 0 0.2rem rgba(102, 175, 233, .25); + border-color: #80bdff; + box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); } -/* Buttons */ .btn-primary { - background-color: #1a73e8; /* Google's blue */ - border-color: #1a73e8; /* Google's blue */ - box-shadow: none; /* Remove Bootstrap's default shadow */ + background-color: #007bff; + border-color: #007bff; } .btn-primary:hover { - background-color: #1669c7; /* Darker blue on hover */ - border-color: #1669c7; /* Darker blue on hover */ + background-color: #0056b3; + border-color: #0056b3; } -/* Adjustments for smaller screens */ @media (max-width: 576px) { .form-container { max-width: 100%; - padding: 15px; /* Smaller padding on smaller screens */ + padding: 15px; } } -.text-muted a, .text-muted a:visited, .text-muted a:hover, .text-muted a:focus, .text-muted a:active { - color: inherit; /* This makes the link use the color of the parent .text-muted class */ +.text-muted a, +.text-muted a:visited, +.text-muted a:hover, +.text-muted a:focus, +.text-muted a:active { + color: inherit; } #learning-in-public-links .form-control { @@ -107,6 +134,9 @@ nav .breadcrumbs ul li:not(:first-child)::before { margin-bottom: 0; } +.alert { + border-radius: 4px; +} .option-answer-correct { background-color: lightgreen; @@ -117,20 +147,19 @@ nav .breadcrumbs ul li:not(:first-child)::before { } .container .row { - border-bottom: 1px solid #f8f8f8; /* subtle bottom border for each row */ + border-bottom: 1px solid #f8f8f8; } .container .row:last-child { - border-bottom: none; /* remove border for the last row */ + border-bottom: none; } -/* Highlighting for the current student's row */ .bg-info { - background-color: #d1ecf1 !important; /* Adjust color as needed */ + background-color: #d1ecf1 !important; } .tooltip-icon { - margin-left: 4px; /* Adjust as needed */ + margin-left: 4px; } .question .question-image { @@ -139,4 +168,134 @@ nav .breadcrumbs ul li:not(:first-child)::before { height: auto; margin-bottom: 8px; border-radius: 4px; -} \ No newline at end of file +} + +footer { + background-color: #212529; + color: rgba(255, 255, 255, 0.55); + padding: 1.5rem 0; + text-align: center; +} + +.footer-links { + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 1rem; +} + +.footer-links a { + margin: 0 15px; + transition: opacity 0.3s ease; +} + +.footer-links a:hover { + opacity: 0.7; +} + +.footer-icon { + height: 40px; + width: 40px; + font-size: 40px; + color: rgba(255, 255, 255, 0.55); +} + +.course-header { + padding: 0.7rem 0; +} + +.course-title { + color: #343a40; + margin-bottom: 10px; +} + +.course-description { + color: #6c757d; + font-size: 1.1em; + margin-bottom: 20px; +} + +.action-buttons { + margin-bottom: 2rem; +} + +.action-buttons .btn { + margin-right: 10px; +} + +.section-title { + color: #495057; + padding-bottom: 10px; +} + +.homework-item, +.project-item { + padding: .5rem +} + +.item-title { + color: #007bff; +} + +.item-title a { + color: inherit; +} + +.item-title a:hover { + text-decoration: underline; +} + +.item-date { + color: #6c757d; +} + +.badge { + font-size: 85%; + padding: .25em .4em; +} + +.alert-info { + background-color: #e1f5fe; + border-color: #b3e5fc; + color: #01579b; +} + +.homework-container { + /* margin: 0 auto; + padding: 20px; + background-color: #f9f9f9; + border-radius: 8px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */ +} + +.homework-title { + color: #333; + padding-bottom: 10px; + margin-bottom: 20px; +} + +.homework-meta { + padding: 10px; + margin-bottom: 20px; +} + +.question { + /* background-color: #fff; + border: 1px solid #dee2e6; + border-radius: 4px; + padding: 15px; + margin-bottom: 20px; */ +} + +.question-text { + font-weight: bold; + color: #495057; +} + +.form-check { + margin-bottom: 10px; +} + +.text-muted { + font-size: 0.9em; +} diff --git a/courses/static/imgs/default.jpg b/courses/static/imgs/default.jpg new file mode 100644 index 0000000..8924ad8 Binary files /dev/null and b/courses/static/imgs/default.jpg differ diff --git a/courses/templates/courses/course.html b/courses/templates/courses/course.html index 29c08fb..77bdc3f 100644 --- a/courses/templates/courses/course.html +++ b/courses/templates/courses/course.html @@ -1,43 +1,38 @@ {% extends 'base.html' %} {% load tz %} - {% block breadcrumbs %} -
  • {{ course.title }}
    • +
  • {{ course.title }}
    • {% endblock %} {% block content %} -

    {{ course.title }}

    - -
    -

    {{ course.description }}

    +
    +

    {{ course.title }}

    +

    {{ course.description }}

    -
    -

    - {% if course.first_homework_scored %} - Course leaderboard - {% endif %} - {% if is_authenticated %} - Edit course profile - {% endif %} -

    +
    + {% if course.first_homework_scored %} + Course leaderboard + {% endif %} + {% if is_authenticated %} + Edit course profile + {% endif %}
    - {% if is_authenticated and course.first_homework_scored %} {% endif %} {% if homeworks %}
    -

    Homework

    +

    Homeworks

    {% for hw in homeworks %} -
    +
    -
    +
    {% if hw.state == 'CL' %} {{ hw.title }} {% else %} @@ -46,20 +41,20 @@

    Homework

    {% endif %}
    -
    +
    {{ hw.due_date | date:"c" }}
    -
    +
    {% if hw.state == 'CL' %} - Closed + Closed {% elif hw.is_scored and hw.submitted %} - Scored ({{ hw.score }}) + Scored ({{ hw.score }}) {% elif hw.is_scored %} - Scored + Scored {% elif not hw.is_scored and hw.submitted %} - Submitted + Submitted {% else %} - Open + Open {% endif %}
    @@ -70,11 +65,11 @@

    Homework

    {% if projects %}
    -

    Projects

    +

    Projects

    {% for project in projects %} -
    +
    -
    +
    {% if project.state == 'CS' %} {{ project.title }} @@ -91,14 +86,14 @@

    Projects

    {{ project.title }} {% endif %}
    -
    +
    {% if project.state == 'CS' %} {{ project.submission_due_date | date:"c" }} {% else %} {{ project.peer_review_due_date | date:"c" }} {% endif %}
    -
    +
    {{ project.get_project_state_name }}
    @@ -107,18 +102,15 @@

    Projects

    {% endif %} - {% if not homeworks and not projects %} {% endif %} - - {% endblock %} \ No newline at end of file diff --git a/courses/templates/courses/course_list.html b/courses/templates/courses/course_list.html index f4cf6b7..be9c1e7 100644 --- a/courses/templates/courses/course_list.html +++ b/courses/templates/courses/course_list.html @@ -1,10 +1,25 @@ {% extends 'base.html' %} - +{% load static %} {% block content %} -

    Courses

    -     -{% endblock %} \ No newline at end of file +
    +
    +{% endblock %} diff --git a/courses/templates/courses/enrollment.html b/courses/templates/courses/enrollment.html index 77a3ab3..71ed12c 100644 --- a/courses/templates/courses/enrollment.html +++ b/courses/templates/courses/enrollment.html @@ -1,7 +1,7 @@ {% extends 'base.html' %} {% block breadcrumbs %} -
  • {{ course.title }}
    • +
  • {{ course.title }}
    • {% endblock %} {% block content %} diff --git a/courses/templates/courses/leaderboard.html b/courses/templates/courses/leaderboard.html index 5b9f58c..96b3805 100644 --- a/courses/templates/courses/leaderboard.html +++ b/courses/templates/courses/leaderboard.html @@ -1,7 +1,7 @@ {% extends 'base.html' %} {% block breadcrumbs %} -
  • {{ course.title }}
    • +
  • {{ course.title }}
    • {% endblock %} {% block content %} diff --git a/courses/templates/courses/leaderboard_score_breakdown.html b/courses/templates/courses/leaderboard_score_breakdown.html index 5bf8d53..edbb092 100644 --- a/courses/templates/courses/leaderboard_score_breakdown.html +++ b/courses/templates/courses/leaderboard_score_breakdown.html @@ -1,8 +1,8 @@ {% extends 'base.html' %} {% block breadcrumbs %} -
  • {{ enrollment.course.title }}
    • -
  • Leaderboard
    • +
  • {{ enrollment.course.title }}
    • +
  • Leaderboard
    • {% endblock %} {% block content %} diff --git a/courses/templates/homework/homework.html b/courses/templates/homework/homework.html index d3f422a..a45a8d1 100644 --- a/courses/templates/homework/homework.html +++ b/courses/templates/homework/homework.html @@ -3,12 +3,12 @@ {% load static %} {% block breadcrumbs %} -
  • {{ course.title }}
    • +
  • {{ course.title }}
    • {% endblock %} {% block content %} - -

    +
    +

    {{ homework.title }} for {{ course.title }}

    @@ -43,11 +43,8 @@

    {% endif %} {% endif %} -
    +

    {{ homework.description }}

    -
    - -

    Due date: {{ homework.due_date |date:"c" }} (local time)

    @@ -260,5 +257,5 @@

    Questions

    - -{% endblock %} +
    +{% endblock %} \ No newline at end of file diff --git a/courses/templates/projects/eval.html b/courses/templates/projects/eval.html index 6c9b1e4..62e168e 100644 --- a/courses/templates/projects/eval.html +++ b/courses/templates/projects/eval.html @@ -3,8 +3,8 @@ {% load static %} {% block breadcrumbs %} -
  • {{ course.title }}
    • -
  • {{ project.title }}
    • +
  • {{ course.title }}
    • +
  • {{ project.title }}
    • {% endblock %} {% block content %} diff --git a/courses/templates/projects/eval_submit.html b/courses/templates/projects/eval_submit.html index 782a410..405ec3b 100644 --- a/courses/templates/projects/eval_submit.html +++ b/courses/templates/projects/eval_submit.html @@ -3,9 +3,9 @@ {% load static %} {% block breadcrumbs %} -
  • {{ course.title }}
    • -
  • {{ project.title }}
    • -
  • Evaluations
    • +
  • {{ course.title }}
    • +
  • {{ project.title }}
    • +
  • Evaluations
    • {% endblock %} diff --git a/courses/templates/projects/project.html b/courses/templates/projects/project.html index d22a164..522f722 100644 --- a/courses/templates/projects/project.html +++ b/courses/templates/projects/project.html @@ -3,7 +3,7 @@ {% load static %} {% block breadcrumbs %} -
  • {{ course.title }}
    • +
  • {{ course.title }}
    • {% endblock %} {% block content %} diff --git a/courses/templates/projects/results.html b/courses/templates/projects/results.html index beb0e7b..ce276b3 100644 --- a/courses/templates/projects/results.html +++ b/courses/templates/projects/results.html @@ -3,8 +3,8 @@ {% load static %} {% block breadcrumbs %} -
  • {{ course.title }}
    • -
  • {{ project.title }}
    • +
  • {{ course.title }}
    • +
  • {{ project.title }}
    • {% endblock %} {% block content %} diff --git a/templates/base.html b/templates/base.html index c1ca6dd..b22cfd9 100644 --- a/templates/base.html +++ b/templates/base.html @@ -1,66 +1,109 @@ {% load static %} - + + + + + {% block title %}Course Management{% endblock %} - - - - {% block title %}Course Management{% endblock %} + + + + + + + - - - - + +
    +
    +
    + + +
    +
    - - - -
    -
    - -
    -
    - -
    -
    - {% block content %} - - {% endblock %} +
    +
    + {% block content %}{% endblock %} +
    +
    -
    - - - + - \ No newline at end of file + + +