Skip to content

Commit 3f1698e

Browse files
adamspdadamspd
authored
Merge pull request #255 from adamspd/design-conflict-in-css
Fix potential conflict in CSS
2 parents 969e74d + 795fcb7 commit 3f1698e

File tree

3 files changed

+104
-61
lines changed

3 files changed

+104
-61
lines changed

‎appointment/static/css/verification_code.css‎

Lines changed: 79 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,114 @@
1-
/* verification_code.css */
2-
body {
3-
background-color: #f4f4f4;
4-
}
5-
6-
.container {
1+
/* verification_code_v2.css */
2+
.vcode-container {
73
display: flex;
84
justify-content: center;
95
align-items: center;
10-
height: 100vh;
6+
min-height: 100vh;
7+
background-color: #f0f2f5;
8+
padding: 20px;
119
}
1210

13-
.verification-container {
14-
background-color: white;
15-
padding: 20px;
16-
border-radius: 10px;
17-
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
11+
.vcode-card {
12+
background-color: #ffffff;
13+
border-radius: 8px;
14+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
15+
padding: 40px;
1816
width: 100%;
1917
max-width: 400px;
2018
}
2119

22-
.verification-title {
20+
.vcode-title {
2321
font-size: 24px;
24-
font-weight: bold;
22+
font-weight: 600;
23+
color: #333;
2524
text-align: center;
2625
margin-bottom: 20px;
2726
}
2827

29-
.verification-instruction {
30-
font-size: 18px;
28+
.vcode-instruction {
29+
font-size: 16px;
30+
color: #666;
3131
text-align: center;
32-
margin-bottom: 20px;
32+
margin-bottom: 30px;
3333
}
3434

35-
.verification-form {
35+
.vcode-form {
3636
display: flex;
3737
flex-direction: column;
38-
align-items: center;
3938
}
4039

41-
.verification-label {
42-
font-size: 16px;
43-
font-weight: bold;
44-
margin-bottom: 10px;
45-
width: 100%;
40+
.vcode-input-group {
41+
margin-bottom: 20px;
4642
}
4743

48-
.verification-input {
44+
.vcode-label {
45+
display: block;
4946
font-size: 14px;
47+
font-weight: 500;
48+
color: #333;
49+
margin-bottom: 8px;
50+
}
51+
52+
.vcode-input {
53+
width: 100%;
5054
padding: 10px;
55+
font-size: 16px;
5156
border: 1px solid #ddd;
52-
border-radius: 5px;
53-
width: 100%;
54-
margin-bottom: 20px;
57+
border-radius: 4px;
58+
transition: border-color 0.3s ease;
59+
}
60+
61+
.vcode-input:focus {
62+
outline: none;
63+
border-color: #4a90e2;
5564
}
5665

57-
.verification-submit {
66+
.vcode-button {
67+
background-color: #4a90e2;
68+
color: #ffffff;
5869
font-size: 16px;
59-
padding: 10px 20px;
60-
background-color: #007BFF;
61-
color: white;
70+
font-weight: 500;
71+
padding: 12px;
6272
border: none;
63-
border-radius: 5px;
73+
border-radius: 4px;
6474
cursor: pointer;
6575
transition: background-color 0.3s ease;
6676
}
6777

68-
.verification-submit:hover {
69-
background-color: #0056b3;
78+
.vcode-button:hover {
79+
background-color: #3a7bc8;
80+
}
81+
82+
.vcode-alert {
83+
margin-top: 20px;
84+
padding: 12px;
85+
border-radius: 4px;
86+
font-size: 14px;
87+
text-align: center;
88+
}
89+
90+
.vcode-alert-error {
91+
background-color: #fde8e8;
92+
color: #9b1c1c;
93+
border: 1px solid #fbd5d5;
94+
}
95+
96+
.vcode-alert-success {
97+
background-color: #e6fffa;
98+
color: #046c4e;
99+
border: 1px solid #b2f5ea;
100+
}
101+
102+
@media (max-width: 480px) {
103+
.vcode-card {
104+
padding: 30px;
105+
}
106+
107+
.vcode-title {
108+
font-size: 22px;
109+
}
110+
111+
.vcode-instruction {
112+
font-size: 14px;
113+
}
70114
}

‎appointment/templates/appointment/enter_verification_code.html‎

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,39 @@
11
{% extends BASE_TEMPLATE %}
22
{% load i18n %}
33
{% load static %}
4+
45
{% block customCSS %}
5-
<link rel="stylesheet" type="text/css" href="{% static 'css/verification_code.css' %}"/>
6-
{% endblock %}
7-
{% block title %}
8-
{% trans 'Enter Verification Code' %}
9-
{% endblock %}
10-
{% block description %}
11-
{% trans 'Enter Verification Code' %}
6+
<link rel="stylesheet" href="{% static 'css/verification_code.css' %}">
127
{% endblock %}
8+
9+
{% block title %}{% trans 'Enter Verification Code' %}{% endblock %}
10+
{% block description %}{% trans 'Enter Verification Code' %}{% endblock %}
11+
1312
{% block body %}
14-
<div class="container">
15-
<div class="main-container">
16-
<div class="body-container">
17-
<h1>{% trans 'Enter Verification Code' %}</h1>
18-
<p>{% trans "We've sent a verification code to your email. Please enter it below" %}:</p>
19-
<form method="post"
20-
action="{% url 'appointment:enter_verification_code' appointment_request_id id_request %}">
21-
{% csrf_token %}
22-
<label>{% trans 'Code' %}:
23-
<input type="text" name="code" placeholder="X1Y2Z3" required>
24-
</label>
25-
<button class="btn btn-primary" type="submit">{% trans 'Submit' %}</button>
26-
</form>
27-
</div>
13+
<div class="vcode-container">
14+
<div class="vcode-card">
15+
<h1 class="vcode-title">{% trans 'Enter Verification Code' %}</h1>
16+
<p class="vcode-instruction">{% trans "We've sent a verification code to your email. Please enter it below" %}:</p>
17+
18+
<form method="post" class="vcode-form">
19+
{% csrf_token %}
20+
<div class="vcode-input-group">
21+
<label for="verification-code" class="vcode-label">{% trans 'Code' %}:</label>
22+
<input type="text" id="verification-code" name="code" class="vcode-input" required>
23+
</div>
24+
<button type="submit" class="vcode-button">{% trans 'Submit' %}</button>
25+
</form>
26+
2827
{% if messages %}
2928
{% for message in messages %}
30-
<div class="alert alert-dismissible {% if message.tags %}alert-{% if message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}danger{% else %}{{ message.tags }}{% endif %}{% endif %}"
31-
role="alert">{{ message }}</div>
29+
<div class="vcode-alert vcode-alert-{% if message.tags %}{{ message.tags }}{% endif %}">
30+
{{ message }}
31+
</div>
3232
{% endfor %}
3333
{% endif %}
3434
</div>
3535
</div>
3636
{% endblock %}
37+
3738
{% block customJS %}
38-
<script src="{% static 'js/js-utils.js' %}"></script>
39-
{% endblock %}
39+
{% endblock %}

‎appointment/templates/error_pages/304_already_submitted.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
<!-- appointment/templates/error_pages/already_submitted.html -->
2-
{% extends BASE_TEMPLATE %}
32
{% load i18n %}
43
{% load static %}
54
{% block customCSS %}

0 commit comments

Comments
 (0)