Skip to content

Commit

Permalink
Created template to edit user's interests
Browse files Browse the repository at this point in the history
  • Loading branch information
@sidarragac
sidarragac committed Nov 8, 2024
1 parent cc3912f commit 30b7b47
Show file tree
Hide file tree
Showing 3 changed files with 160 additions and 12 deletions.
146 changes: 146 additions & 0 deletions accounts/static/styles/editInterestSelection.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,146 @@
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

*{
font-family: "Montserrat", sans-serif;
}

header {
font-size: 20px;
font-weight: 700;
margin-bottom: 20px;
}

.main{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}

.content{
display: flex;
align-items: center;
flex-direction: column;
width: 45%;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 20px;
height: auto;
margin: 100px auto;
}

.titleContainer{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #1B263B;
border-radius: 20px 20px 0px 0px;
text-align: center;
}

.titleContainer h1{
color: #fff;
margin: 50px 0px;
font-weight: 600;
width: 90%;
}

.description{
width: 100%;
margin: 0px auto 50px auto;
text-align: center;
}

.description h6 {
color: #40414a;
font-weight: 300;
font-size: 16px;
}

.form-select {
width: 100%;
height: 45px;
background: transparent;
border: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
outline: none;
margin-bottom: 20px;
color: #40414a;
}

.input-box{
position: relative;
margin: 50px auto;
width: 80%;
height: 70%;
}

.interestLabel{
font-weight: 500;
}

.input-field{
display: flex;
flex-direction: column;
position: relative;
padding: 0 10px 0 10px;
}

.input{
height: 45px;
width: 100%;
background: transparent;
border: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
outline: none;
margin-bottom: 20px;
color: #40414a;
}
.input-box .input-field label{
position: absolute;
top: 10px;
left: 10px;
pointer-events: none;
transition: .5s;
}
.input-field input:focus ~ label{
top: -10px;
font-size: 13px;
}
.input-field input:valid ~ label{
top: -10px;
font-size: 13px;
color: #5d5076;
}

.input-field .input:focus, .input-field .input:valid{
border-bottom: 1px solid #743ae1;
}

.buttonPersonalize{
width: 50%;
margin: auto;
}

.submit:hover{
background: rgba(37, 95, 156, 0.937);
color: #fff;
}

@media (max-width: 1200px){
.content{
width: 60%;
}
}

@media (max-width: 992px){
.content{
width: 70%;
}
}

@media (max-width: 568px){
.content{
width: 90%;
}
}
15 changes: 8 additions & 7 deletions accounts/templates/editInterestSelection.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{% block styles %}
<link rel="stylesheet" href="{% static 'styles/interestSelection.css' %}">
<link rel="stylesheet" href="{% static 'styles/editInterestSelection.css' %}">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
{% endblock styles %}
<title>{% block title %} Interest Selection {% endblock title %}</title>
Expand All @@ -27,10 +27,10 @@ <h6>Change your interests according to your new focus</h6>
<!-- First interest -->
<div>
<label for="interest1" class="interestLabel">Interest 1</label>
<select name="interest1" class="form-select">
<select name="interest1" class="form-select interestOption" onchange="updateOptions()">
<option value=""></option>
{% for interest in interests %}
{% if interest.id == userInterests.0.id %}
{% if interest.id == userInterests.0 %}
<option value="{{ interest.id }}" selected>{{ interest.name }}</option>
{% else %}
<option value="{{ interest.id }}">{{ interest.name }}</option>
Expand All @@ -41,10 +41,10 @@ <h6>Change your interests according to your new focus</h6>
<!-- Second interest -->
<div>
<label for="interest2" class="interestLabel">Interest 2</label>
<select name="interest2" class="form-select">
<select name="interest2" class="form-select interestOption" onchange="updateOptions()">
<option value=""></option>
{% for interest in interests %}
{% if interest.id == userInterests.1.id %}
{% if interest.id == userInterests.1 %}
<option value="{{ interest.id }}" selected>{{ interest.name }}</option>
{% else %}
<option value="{{ interest.id }}">{{ interest.name }}</option>
Expand All @@ -55,10 +55,10 @@ <h6>Change your interests according to your new focus</h6>
<!-- Third interest -->
<div>
<label for="interest3" class="interestLabel">Interest 3</label>
<select name="interest3" class="form-select">
<select name="interest3" class="form-select interestOption" onchange="updateOptions()">
<option value=""></option>
{% for interest in interests %}
{% if interest.id == userInterests.2.id %}
{% if interest.id == userInterests.2 %}
<option value="{{ interest.id }}" selected>{{ interest.name }}</option>
{% else %}
<option value="{{ interest.id }}">{{ interest.name }}</option>
Expand All @@ -73,6 +73,7 @@ <h6>Change your interests according to your new focus</h6>
</div>
</div>
</div>
<script src="{% static 'scripts/editInterestSelection.js' %}"></script>
{% endblock content %}
</body>
</html>
11 changes: 6 additions & 5 deletions accounts/templates/interestSelection.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,12 +22,12 @@ <h1>Select Your Interests</h1>
<form action="{% url 'interestSelection' %}" method="POST">
{% csrf_token %}
<div class="description">
<h6>Select up to 3 interests that will be used to recommend community’s roadmaps. You can always change them or set the up later in your profile.</h6>
<h6>Select up to 3 interests that will be used to recommend community's roadmaps. You can always change them or set the up later in your profile.</h6>
</div>
<!-- First interest -->
<div>
<label for="interest1" class="interestLabel">Interest 1</label>
<select name="interest1" class="form-select">
<select name="interest1" class="form-select interestOption" onchange="updateOptions()">
<option value=""></option>
{% for interest in interests %}
<option value="{{ interest.id }}">{{ interest.name }}</option>
Expand All @@ -37,7 +37,7 @@ <h6>Select up to 3 interests that will be used to recommend community’s roadma
<!-- Second interest -->
<div>
<label for="interest2" class="interestLabel">Interest 2</label>
<select name="interest2" class="form-select">
<select name="interest2" class="form-select interestOption" onchange="updateOptions()">
<option value=""></option>
{% for interest in interests %}
<option value="{{ interest.id }}">{{ interest.name }}</option>
Expand All @@ -47,20 +47,21 @@ <h6>Select up to 3 interests that will be used to recommend community’s roadma
<!-- Third interest -->
<div>
<label for="interest3" class="interestLabel">Interest 3</label>
<select name="interest3" class="form-select">
<select name="interest3" class="form-select interestOption" onchange="updateOptions()">
<option value=""></option>
{% for interest in interests %}
<option value="{{ interest.id }}">{{ interest.name }}</option>
{% endfor %}
</select>
</div>
<div class="button-1 buttonPersonalize">
<input type="submit" class="button" value="Apply Changes">
<input type="submit" class="button" value="Apply">
</div>
</form>
</div>
</div>
</div>
<script src="{% static 'scripts/interestSelection.js' %}"></script>
{% endblock content %}
</body>
</html>

0 comments on commit 30b7b47

Please sign in to comment.