Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Change in modal UI #208

Merged
merged 7 commits into from
Apr 17, 2021
Merged

Change in modal UI #208

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
cd75e45
change in modal UI
cryptofox17 Mar 30, 2021
de2eb88
made the suggested changes
cryptofox17 Mar 31, 2021
8c9b609
modified the contact section
cryptofox17 Apr 1, 2021
bf77627
changed alignment using grid
cryptofox17 Apr 2, 2021
e424e25
made the changes
cryptofox17 Apr 16, 2021
0717551
fixed the issues
cryptofox17 Apr 17, 2021
ec62b9f
another fix
cryptofox17 Apr 17, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 29 additions & 33 deletions static/home/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -578,6 +578,16 @@ a:hover{
box-shadow: 5px 10px 18px rgba(0, 0, 0, 0.185);
position: relative;
}

.don-modal-contents::-webkit-scrollbar {
display: none;
}

.don-modal-contents {
-ms-overflow-style: none;
scrollbar-width: none;
}

.don-modal-contents .container{
max-width: 90%;
}
Expand Down Expand Up @@ -606,47 +616,34 @@ a:hover{
background-color: rgba(255,255,255,0.1);
}

@media only screen and (max-width: 400px) {
@media only screen and (max-width: 600px) {
.don-modal-contents .close {
font-size: 18px;
font-size: 17px;
height: 24px;
width: 24px;
margin: 15px 1px 15px 2px;
margin: 2px 4px;
border-radius: 50%;
top: 28.5px;
}
}
garg3133 marked this conversation as resolved.
Show resolved Hide resolved

.don-box1{
background-color: rgb(39, 40, 46);
padding: 6px;
border-bottom: 3px solid #ff7b00b9;
}

.don-box1 h1{
margin: 0;
padding: 17px 0 5px;
text-align: center;
font-weight: 600;
color:rgb(255, 140, 0);
text-transform: uppercase;

}

@media only screen and (max-width: 600px) {
@media only screen and (max-width: 400px) {
.don-modal-contents .close {
font-size: 18px;
font-size: 17px;
height: 24px;
width: 24px;
margin: 2px 4px;
margin: 15px 1px 15px 2px;
border-radius: 50%;
top: 17px;
}
}
garg3133 marked this conversation as resolved.
Show resolved Hide resolved

.don-box1{
.don-box1{
background-color: rgb(39, 40, 46);
padding: 6px;
border-bottom: 3px solid #ff7b00b9;
}

.don-box1 h1{
margin: 0;
padding: 17px 0 5px;
Expand Down Expand Up @@ -702,35 +699,34 @@ a:hover{
justify-self: center;
}

.contact-details-div {
.don-box3 .contact-details-div {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;

}

.details-1 {
.details-1, .details-2 {
text-align: center;
max-width: 150px;
margin-bottom: 12px;
margin-top: 12px;

}
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think you didn't understand well what I suggested earlier.

  • As both the classes have some common properties, you can put them in a single class name .contact-details (put this class in both the elements).
  • Now for the different margins of two divs, put a class name .contact-details-left in the left div and class name .contact-details-right in the right div and apply corresponding margins to both the classes.
  • Add .don-box3 before both the classes in CSS, so that these properties only apply to .contact-details, .contact-details-left and contact-details-right classes inside the .don-box3 and not anywhere else if we use the same class name somewhere else. Ex. .don-box3 .contact-details.

.details-1 {
margin-left: 64px;
}

.details-2 {
text-align: center;
max-width: 150px;
margin-bottom: 12px;
margin-top: 12px;
margin-right: 64px;
}
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As the properties for both .details-1 and details-2 are same, it can just be one single class .contact-details.

Also, prefix the class with don-box3 so that it does not conflict with other elements with same class name (if we use this class name at any other place on the page).


.don-box3-p {
.or {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You should write this class as .don-box3 .or, as .or class can appear at other places too, so you must be specific that these properties should only apply to the .or class inside .don-box3 class and not anywhere else.

position: relative;
}

.don-box3-p::before {
.or::before {
content: "";
display: block;
width: 235px;
Expand All @@ -743,7 +739,7 @@ a:hover{

}

.don-box3-p::after {
.or::after {
content: "";
display: block;
width: 235px;
Expand All @@ -758,7 +754,7 @@ a:hover{

@media only screen and (max-width: 670px) {

.contact-details-div {
.don-box3 .contact-details-div {
display: flex;
flex-direction: column;
flex-wrap: wrap;
Expand Down
8 changes: 4 additions & 4 deletions templates/home/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ <h1><span onclick="document.querySelector('.navbar a:first-child').click()"
<a class="nav-link" href="{% url 'accounts:login_signup' %}">Login</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link" onclick="donate_us()">Donate</a>
<a href="javascript:void(0)" class="nav-link" onclick="donate_us()">Donate</a>
</li>
</ul>
</div>
Expand Down Expand Up @@ -386,7 +386,7 @@ <h1 data-aos="fade-up">Donate Us</h1>
<div class="don-modal-contents">
<span class="close" id="don-close"><i class="fas fa-times"> </i></span>
<div class="don-box1">
<h1>DONATE</h1>
<h1>DONATE</h1>
</div>
<div class="container">
<div class="don-box2">
Expand All @@ -401,9 +401,9 @@ <h4>IFSC Code :</h4>

</div>
<div class="don-box3">
<p class="don-box3-p"><span>OR</span></p>
<p class="or"><span>OR</span></p>
<p>You may also donate books, clothes, stationery items or anything else which might be useful to the
kids
kids. Contact:
</p>
<div class="contact-details-div">
<div class="details-1">
Expand Down