Skip to content

Commit f984849

Browse files
mostafanasser2000mostafanasser2000
committed
enhance the style of some platform pages
1 parent 89242cb commit f984849

File tree

12 files changed

+495
-231
lines changed

12 files changed

+495
-231
lines changed

‎accounts/templates/accounts/login.html‎

Lines changed: 116 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,116 @@
1-
{% for provider in providers %}
2-
<a href="{{ provider.login_url }}">Login with {{ provider.name }}</a><br>
3-
{% endfor %}
1+
{% load static %}
2+
3+
<!DOCTYPE html>
4+
<html lang="en">
5+
<head>
6+
<meta charset="utf-8" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1" />
8+
<title>Login</title>
9+
10+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
11+
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
12+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
13+
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet">
14+
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
15+
<link rel="stylesheet" href="{% static 'courses.css' %}">
16+
17+
<style>
18+
body {
19+
font-family: 'Roboto', sans-serif;
20+
display: flex;
21+
flex-direction: column;
22+
min-height: 100vh;
23+
margin: 0;
24+
background-color: #f8f9fa;
25+
}
26+
27+
.login-container {
28+
display: flex;
29+
align-items: center;
30+
justify-content: center;
31+
min-height: 100vh;
32+
}
33+
34+
.login-card {
35+
background-color: #ffffff;
36+
border-radius: 0.5rem;
37+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
38+
padding: 2.5rem;
39+
max-width: 400px;
40+
width: 100%;
41+
}
42+
43+
.login-title {
44+
text-align: center;
45+
margin-bottom: 2rem;
46+
font-size: 1.5rem;
47+
font-weight: bold;
48+
color: #343a40;
49+
}
50+
51+
.login-button {
52+
display: flex;
53+
align-items: center;
54+
justify-content: center;
55+
width: 100%;
56+
padding: 0.75rem 1rem;
57+
margin-bottom: 1rem;
58+
font-size: 1rem;
59+
font-weight: 500;
60+
color: #fff;
61+
background-color: #6c757d;
62+
border: none;
63+
border-radius: 0.25rem;
64+
transition: background-color 0.3s ease, transform 0.3s ease;
65+
text-decoration: none;
66+
}
67+
68+
.login-button:hover {
69+
background-color: #5a6268;
70+
color: #fff;
71+
transform: translateY(-2px);
72+
text-decoration: none;
73+
}
74+
75+
.login-button:active {
76+
transform: translateY(0);
77+
}
78+
79+
.login-button i {
80+
margin-right: 0.5rem;
81+
font-size: 1.25rem;
82+
}
83+
84+
.github { background-color: #24292e; }
85+
.github:hover { background-color: #1b1f23; }
86+
.google { background-color: #dd4b39; }
87+
.google:hover { background-color: #c23321; }
88+
.slack { background-color: #4A154B; }
89+
.slack:hover { background-color: #3b1139; }
90+
</style>
91+
</head>
92+
93+
<body>
94+
<div class="login-container">
95+
<div class="login-card">
96+
<h2 class="login-title">Continue with Your Account</h2>
97+
{% for provider in providers %}
98+
<a href="{{ provider.login_url }}" class="login-button {{ provider.name|lower }}">
99+
<i class="fab fa-{{ provider.name|lower }}"></i>
100+
Continue with {{ provider.name }}
101+
</a>
102+
{% endfor %}
103+
<a href="#" class="login-button github">
104+
<i class="fab fa-github"></i>
105+
Continue with GitHub
106+
</a>
107+
<a href="#" class="login-button slack">
108+
<i class="fab fa-slack"></i>
109+
Continue with Slack
110+
</a>
111+
</div>
112+
</div>
113+
114+
<script src="{% static 'local_date.js' %}"></script>
115+
</body>
116+
</html>

‎courses/templates/courses/course.html‎

Lines changed: 108 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,119 @@
11
{% extends 'base.html' %}
22
{% load tz %}
33

4+
{% block styles %}
5+
<style>
6+
.course-header {
7+
background-color: #f8f9fa;
8+
border-bottom: 2px solid #e9ecef;
9+
padding: 20px 0;
10+
margin-bottom: 30px;
11+
}
12+
13+
.course-title {
14+
color: #343a40;
15+
margin-bottom: 10px;
16+
}
17+
18+
.course-description {
19+
color: #6c757d;
20+
font-size: 1.1em;
21+
margin-bottom: 20px;
22+
}
23+
24+
.action-buttons {
25+
margin-bottom: 30px;
26+
}
27+
28+
.action-buttons .btn {
29+
margin-right: 10px;
30+
}
31+
32+
.section-title {
33+
color: #495057;
34+
border-bottom: 2px solid #dee2e6;
35+
padding-bottom: 10px;
36+
margin-bottom: 20px;
37+
}
38+
39+
.homework-item, .project-item {
40+
background-color: #fff;
41+
border: 1px solid #dee2e6;
42+
border-radius: 5px;
43+
padding: 15px;
44+
margin-bottom: 15px;
45+
transition: all 0.3s ease;
46+
}
47+
48+
.homework-item:hover, .project-item:hover {
49+
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
50+
}
51+
52+
.item-title {
53+
font-weight: bold;
54+
color: #007bff;
55+
}
56+
57+
.item-title a {
58+
color: inherit;
59+
text-decoration: none;
60+
}
61+
62+
.item-title a:hover {
63+
text-decoration: underline;
64+
}
65+
66+
.item-date {
67+
font-style: italic;
68+
color: #6c757d;
69+
}
70+
71+
.badge {
72+
font-size: 0.9em;
73+
padding: 5px 10px;
74+
}
75+
76+
.alert-info {
77+
background-color: #e1f5fe;
78+
border-color: #b3e5fc;
79+
color: #01579b;
80+
}
81+
</style>
82+
{% endblock %}
83+
484
{% block breadcrumbs %}
5-
<li><a href="{% url 'course' course.slug %}">{{ course.title }}</a></li>
85+
<li class="breadcrumb-item active" aria-current="page"><a href="{% url 'course' course.slug %}">{{ course.title }}</a></li>
686
{% endblock %}
787

888
{% block content %}
9-
<h2>{{ course.title }}</h2>
10-
11-
<div>
12-
<p>{{ course.description }}</p>
89+
<div class="course-header">
90+
<h2 class="course-title">{{ course.title }}</h2>
91+
<p class="course-description">{{ course.description }}</p>
1392
</div>
1493

15-
<div>
16-
<p>
17-
{% if course.first_homework_scored %}
18-
<a class="btn btn-primary" href="{% url 'leaderboard' course.slug %}" role="button">Course leaderboard</a>
19-
{% endif %}
20-
{% if is_authenticated %}
21-
<a class="btn btn-info" href="{% url 'enrollment' course.slug %}" role="button">Edit course profile</a>
22-
{% endif %}
23-
</p>
94+
<div class="action-buttons">
95+
{% if course.first_homework_scored %}
96+
<a class="btn btn-primary" href="{% url 'leaderboard' course.slug %}" role="button">Course leaderboard</a>
97+
{% endif %}
98+
{% if is_authenticated %}
99+
<a class="btn btn-info" href="{% url 'enrollment' course.slug %}" role="button">Edit course profile</a>
100+
{% endif %}
24101
</div>
25102

26-
27103
{% if is_authenticated and course.first_homework_scored %}
28104
<div class="alert alert-info" role="alert">
29-
<p>Total score: {{ total_score }}</p>
105+
<p class="mb-0">Total score: {{ total_score }}</p>
30106
</div>
31107
{% endif %}
32108

33109
{% if homeworks %}
34110
<div class="pb-3">
35-
<h2>Homework</h2>
111+
<h3 class="section-title">Homeworks</h3>
36112

37113
{% for hw in homeworks %}
38-
<div class="p-2 {% cycle 'bg-white' '' %}">
114+
<div class="homework-item">
39115
<div class="row align-items-center">
40-
<div class="col-5">
116+
<div class="col-md-5 item-title">
41117
{% if hw.state == 'CL' %}
42118
{{ hw.title }}
43119
{% else %}
@@ -46,20 +122,20 @@ <h2>Homework</h2>
46122
</a>
47123
{% endif %}
48124
</div>
49-
<div class="col-4 text-md-right" data-toggle="tooltip" data-placement="right" title="{{ hw.days_until_due }} days left">
125+
<div class="col-md-4 text-md-right item-date" data-toggle="tooltip" data-placement="right" title="{{ hw.days_until_due }} days left">
50126
<span class="local-date">{{ hw.due_date | date:"c" }}</span>
51127
</div>
52-
<div class="col-3 text-md-right">
128+
<div class="col-md-3 text-md-right">
53129
{% if hw.state == 'CL' %}
54-
<span class="badge bg-secondary">Closed</span>
130+
<span class="badge badge-secondary">Closed</span>
55131
{% elif hw.is_scored and hw.submitted %}
56-
<span class="badge bg-success">Scored ({{ hw.score }})</span>
132+
<span class="badge badge-success">Scored ({{ hw.score }})</span>
57133
{% elif hw.is_scored %}
58-
<span class="badge bg-secondary">Scored</span>
134+
<span class="badge badge-secondary">Scored</span>
59135
{% elif not hw.is_scored and hw.submitted %}
60-
<span class="badge bg-info">Submitted</span>
136+
<span class="badge badge-info">Submitted</span>
61137
{% else %}
62-
<span class="badge bg-warning">Open</span>
138+
<span class="badge badge-warning">Open</span>
63139
{% endif %}
64140
</div>
65141
</div>
@@ -70,11 +146,11 @@ <h2>Homework</h2>
70146

71147
{% if projects %}
72148
<div class="pb-3">
73-
<h2>Projects</h2>
149+
<h3 class="section-title">Projects</h3>
74150
{% for project in projects %}
75-
<div class="p-2 {% cycle 'bg-white' '' %}">
151+
<div class="project-item">
76152
<div class="row align-items-center">
77-
<div class="col-5">
153+
<div class="col-md-5 item-title">
78154
{% if project.state == 'CS' %}
79155
<a href="{% url 'project' course_slug=course.slug project_slug=project.slug %}">
80156
{{ project.title }}
@@ -91,14 +167,14 @@ <h2>Projects</h2>
91167
{{ project.title }}
92168
{% endif %}
93169
</div>
94-
<div class="col-4 text-md-right" data-toggle="tooltip" data-placement="right" title="{{ project.days_until_due }} days left">
170+
<div class="col-md-4 text-md-right item-date" data-toggle="tooltip" data-placement="right" title="{{ project.days_until_due }} days left">
95171
{% if project.state == 'CS' %}
96172
<span class="local-date">{{ project.submission_due_date | date:"c" }}</span>
97173
{% else %}
98174
<span class="local-date">{{ project.peer_review_due_date | date:"c" }}</span>
99175
{% endif %}
100176
</div>
101-
<div class="col-3 text-md-right">
177+
<div class="col-md-3 text-md-right">
102178
<span class="badge {{ project.status_badge_class }}">{{ project.get_project_state_name }}</span>
103179
</div>
104180
</div>
@@ -107,18 +183,15 @@ <h2>Projects</h2>
107183
</div>
108184
{% endif %}
109185

110-
111186
{% if not homeworks and not projects %}
112187
<div class="alert alert-info" role="alert">
113-
<p>There are no homeworks or projects available for this course yet. Come back later.</p>
188+
<p class="mb-0">There are no homeworks or projects available for this course yet. Come back later.</p>
114189
</div>
115190
{% endif %}
116191

117-
118192
<script>
119193
$(function() {
120194
$('[data-toggle="tooltip"]').tooltip()
121195
})
122196
</script>
123-
124197
{% endblock %}

‎courses/templates/courses/course_list.html‎

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,25 @@
11
{% extends 'base.html' %}
22

33
{% block content %}
4-
<h2>Courses</h2>
5-
<ul>
4+
<div class="container-fluid px-4">
5+
<h2 class="my-5 text-center">Courses</h2>
6+
<div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-4">
67
{% for course in courses %}
7-
<li><a href="{% url 'course' course.slug %}">{{ course.title }}</a></li>
8+
<div class="col mb-4">
9+
<div class="card h-100 shadow hover-effect">
10+
<img src="https://via.placeholder.com/400x250/1E448B/FFF?text={{ course.title|urlencode }}" class="card-img-top" alt="{{ course.title }}" decoding="async">
11+
<div class="card-body d-flex flex-column">
12+
<h5 class="card-title fs-4">{{ course.title }}</h5>
13+
<div class="d-flex justify-content-between align-items-center mt-3">
14+
<a href="{% url 'course' course.slug %}" class="btn btn-primary">View Course</a>
15+
<div class="student-enrollment">
16+
<i class="fas fa-users me-1"></i> {{ course.students.count }}
17+
</div>
18+
</div>
19+
</div>
20+
</div>
21+
</div>
822
{% endfor %}
9-
</ul>
10-
{% endblock %}
23+
</div>
24+
</div>
25+
{% endblock %}

‎courses/templates/courses/enrollment.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{% extends 'base.html' %}
22

33
{% block breadcrumbs %}
4-
<li><a href="{% url 'course' course.slug %}">{{ course.title }}</a></li>
4+
<li class="breadcrumb-item active" aria-current="page"><a href="{% url 'course' course.slug %}">{{ course.title }}</a></li>
55
{% endblock %}
66

77
{% block content %}

‎courses/templates/courses/leaderboard.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{% extends 'base.html' %}
22

33
{% block breadcrumbs %}
4-
<li><a href="{% url 'course' course.slug %}">{{ course.title }}</a></li>
4+
<li class="breadcrumb-item active" aria-current="page"><a href="{% url 'course' course.slug %}">{{ course.title }}</a></li>
55
{% endblock %}
66

77
{% block content %}

0 commit comments

Comments
 (0)