8000 style: bring asset view data into sponsorship overview, reorganize page · python/pythondotorg@e53f422 · GitHub
[go: up one dir, main page]
8000 Skip to content

Commit e53f422

Browse files
JacobCoffeeJacobCoffee
committed
style: bring asset view data into sponsorship overview, reorganize page
1 parent 3f38e85 commit e53f422

File tree

4 files changed

+261
-145
lines changed

4 files changed

+261
-145
lines changed

‎static/sass/style.css

Lines changed: 149 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -4000,25 +4000,157 @@ span.highlighted {
40004000
.hidden {
40014001
display: none; }
40024002

4003+
#sponsorship-detail-container {
4004+
max-width: 1200px;
4005+
margin: 0 auto;
4006+
padding: 2rem;
4007+
}
4008+
40034009
#sponsorship-detail-container .info-cards {
4004-
display: flex;
4005-
width: 100%;
4006-
align-content: center;
4007-
flex-wrap: wrap; }
4010+
display: grid;
4011+
grid-template-columns: repeat(2, 1fr);
4012+
gap: 1.5rem;
4013+
}
4014+
4015+
@media (max-width: 768px) {
4016+
#sponsorship-detail-container .info-cards {
4017+
grid-template-columns: 1fr;
4018+
}
4019+
}
4020+
4021+
40084022
#sponsorship-detail-container .card {
4009-
flex: 1 0 48%; }
4010-
#sponsorship-detail-container .card-info {
4011-
margin: 0.5em 0.5em;
4012-
padding: 1em 1em;
4013-
border: 1px solid #caccce;
4014-
-webkit-border-radius: 6px;
4015-
-moz-border-radius: 6px;
4016-
-ms-border-radius: 6px;
4017-
-o-border-radius: 6px;
4018-
border-radius: 6px;
4019-
background: #e6e8ea; }
4020-
#sponsorship-detail-container .card-info h3 {
4021-
margin: 0; }
4023+
background-color: #fff;
4024+
border-radius: 8px;
4025+
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
4026+
padding: 0.75rem;
4027+
}
4028+
4029+
#sponsorship-detail-container .card h3 {
4030+
margin-top: 0;
4031+
margin-bottom: 1rem;
4032+
}
4033+
4034+
#sponsorship-detail-container .card ul li {
4035+
margin-bottom: 0.5rem;
4036+
}
4037+
4038+
#sponsorship-detail-container .wide-column {
4039+
grid-column: 1 / -1;
4040+
}
4041+
4042+
.assets-list {
4043+
display: grid;
4044+
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
4045+
gap: 1rem;
4046+
margin-top: 1rem;
4047+
}
4048+
4049+
.asset-item {
4050+
background-color: #f8f9fa;
4051+
border: 1px solid #e9ecef;
4052+
border-radius: 6px;
4053+
padding: 1rem;
4054+
}
4055+
4056+
.asset-item h4 {
4057+
margin-top: 0;
4058+
margin-bottom: 0.5rem;
4059+
font-size: 1rem;
4060+
}
4061+
4062+
.asset-item p {
4063+
margin-bottom: 0.75rem;
4064+
font-size: 0.9rem;
4065+
}
4066+
4067+
.asset-item.incomplete {
4068+
border-left: 3px solid #dc3545;
4069+
}
4070+
4071+
.asset-item.fulfilled {
4072+
border-left: 3px solid #28a745;
4073+
}
4074+
4075+
.due-date {
4076+
font-weight: bold;
4077+
color: #dc3545;
4078+
}
4079+
4080+
.btn {
4081+
display: inline-block;
4082+
padding: 0.375rem 0.75rem;
4083+
font-size: 0.9rem;
4084+
text-align: center;
4085+
text-decoration: none;
4086+
border-radius: 4px;
4087+
transition: background-color 0.2s ease;
4088+
}
4089+
4090+
.btn-link {
4091+
color: #007bff;
4092+
}
4093+
4094+
.edit-all-assets {
4095+
margin-top: 1.5rem;
4096+
text-align: right;
4097+
}
4098+
4099+
.benefits-grid {
4100+
display: grid;
4101+
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
4102+
gap: 1rem;
4103+
margin-top: 1rem;
4104+
}
4105+
4106+
.benefit-item {
4107+
display: flex;
4108+
align-items: center;
4109+
background-color: #ffffff;
4110+
border: 1px solid #e9ecef;
4111+
border-radius: 4px;
4112+
padding: 0.75rem;
4113+
transition: background-color 0.2s ease;
4114+
}
4115+
4116+
.benefit-item:hover {
4117+
background-color: #f8f9fa;
4118+
}
4119+
4120+
.benefit-icon {
4121+
flex-shrink: 0;
4122+
margin-right: 0.75rem;
4123+
color: #28a745;
4124+
font-size: 1rem;
4125+
}
4126+
4127+
.benefit-content {
4128+
flex-grow: 1;
4129+
}
4130+
4131+
.benefit-name {
4132+
display: block;
4133+
font-weight: 500;
4134+
font-size: 0.9rem;
4135+
line-height: 1.2;
4136+
}
4137+
4138+
.benefit-description {
4139+
margin-left: 0.25rem;
4140+
color: #6c757d;
4141+
cursor: help;
4142+
font-size: 0.8rem;
4143+
}
4144+
4145+
@media (max-width: 768px) {
4146+
#sponsorship-detail-container {
4147+
padding: 1rem;
4148+
}
4149+
4150+
.assets-list {
4151+
grid-template-columns: 1fr;
4152+
}
4153+
}
40224154

40234155
#update-sponsorship-assets input {
40244156
padding: 0.25em;

‎templates/users/base.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@
1010
{% endblock %}
1111

1212

13-
{% block content_attributes %}with-right-sidebar{% endblock %}
13+
{# This added an unnecessarily large gap on every user/ page. #}
14+
{#{% block content_attributes %}with-right-sidebar{% endblock %}#}
1415

1516

1617
{% block content %}

0 commit comments

Comments
 (0)
0