Skip to content

Commit 8fd79f6

Browse files
noisynoisy
committed
Project status ribbon added to thumbnails of projects. Closes #131 
1 parent 7e636e2 commit 8fd79f6

4 files changed

Lines changed: 126 additions & 2 deletions

File tree

‎package/models.py‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,41 +75,49 @@ class Project(BaseModel):
7575
{
7676
'id': NONE_STATUS,
7777
'name': '----',
78+
'short_name': '----',
7879
'description': '',
7980
},
8081
{
8182
'id': UNKNOWN,
8283
'name': 'Unknown',
84+
'short_name': 'Unknown',
8385
'description': 'Unknown project status',
8486
},
8587
{
8688
'id': LIVE__RELEASED,
8789
'name': 'Live/Released',
90+
'short_name': 'Live/Released',
8891
'description': 'Project is ready to use',
8992
},
9093
{
9194
'id': WORKING_PROTOTYPE__BETA,
9295
'name': 'Working Prototype/Beta',
96+
'short_name': 'Prototype/Beta',
9397
'description': 'Project is working however, it still can contain some bugs',
9498
},
9599
{
96100
'id': DEMO__ALPHA,
97101
'name': 'Demo/Alpha',
102+
'short_name': 'Demo/Alpha',
98103
'description': 'Project can be used by people which are not afraid of bugs and has very high pain threshold',
99104
},
100105
{
101106
'id': CONCEPT,
102107
'name': 'Concept',
108+
'short_name': 'Concept',
103109
'description': 'Project which pretends to be a working product',
104110
},
105111
{
106112
'id': ABANDONED__BROKEN,
107113
'name': 'Abandoned/Broken',
114+
'short_name': 'Abandoned',
108115
'description': 'Project is no longer available or it is completely broken',
109116
},
110117
{
111118
'id': OUT_OF_DATE__RETIRED,
112119
'name': 'Out of Date/Retired',
120+
'short_name': 'Retired',
113121
'description': 'Project is no longer needed, because of changes in ecosystem',
114122
},
115123

@@ -428,6 +436,16 @@ def status_description(self):
428436
)
429437
)
430438

439+
@property
440+
def short_status_name(self):
441+
return next(
442+
(
443+
status['short_name']
444+
for status in Project.STATUSES
445+
if status['id'] == self.status
446+
)
447+
)
448+
431449

432450
class TeamMembership(BaseModel):
433451
account = models.ForeignKey(Account, default=None, blank=True, null=True)

‎static/scss/new/module/_project-tile.scss‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,102 @@ $gallery-size: 20;
1313
box-shadow: 0 3px 7px rgba(0,0,0,.1); // TODO: adjust EOS color
1414
}
1515

16+
&__thumbnail-wrapper {
17+
position: relative;
18+
}
19+
20+
&__ribbon {
21+
-webkit-transform: rotate(135deg);
22+
-moz-transform: rotate(135deg);
23+
-ms-transform: rotate(135deg);
24+
-o-transform: rotate(135deg);
25+
transform: rotate(45deg);
26+
border: 20px solid transparent;
27+
border-bottom-style: solid;
28+
border-bottom-width: 20px;
29+
position: absolute;
30+
top: 8px;
31+
right: -32px;
32+
padding: 0 10px;
33+
width: 120px;
34+
color: white;
35+
font-family: sans-serif;
36+
size: 11px;
37+
text-align: center;
38+
display: block;
39+
//opacity: 0.7;
40+
41+
&--unknown {
42+
border-bottom-color: lighten($status-unknown, 10%);
43+
}
44+
45+
&--live_released {
46+
border-bottom-color: lighten($status-live-released, 10%);
47+
}
48+
49+
&--workingprototype_beta {
50+
border-bottom-color: lighten($status-working-prototype-beta, 10%);
51+
}
52+
53+
&--demo_alpha {
54+
border-bottom-color: lighten($status-demo-alpha, 10%);
55+
}
56+
57+
&--concept {
58+
border-bottom-color: lighten($status-concept, 10%);
59+
}
60+
61+
&--abandoned_broken {
62+
border-bottom-color: lighten($status-abandoned-broken, 10%);
63+
}
64+
65+
&--outofdate_retired {
66+
border-bottom-color: lighten($status-out-of-date-retired, 10%);
67+
}
68+
}
69+
70+
&__thumbnail-wrapper:hover {
71+
.m-project-tile__ribbon {
72+
&--unknown {
73+
border-bottom-color: $status-unknown;
74+
}
75+
76+
&--live_released {
77+
border-bottom-color: $status-live-released;
78+
}
79+
80+
&--workingprototype_beta {
81+
border-bottom-color: $status-working-prototype-beta;
82+
}
83+
84+
&--demo_alpha {
85+
border-bottom-color: $status-demo-alpha;
86+
}
87+
88+
&--concept {
89+
border-bottom-color: $status-concept;
90+
}
91+
92+
&--abandoned_broken {
93+
border-bottom-color: $status-abandoned-broken;
94+
}
95+
96+
&--outofdate_retired {
97+
border-bottom-color: $status-out-of-date-retired;
98+
}
99+
}
100+
position: relative;
101+
top: -4px;
102+
left: -4px;
103+
}
104+
105+
&__ribbon-text {
106+
color: $m-btn-font-color-hover;
107+
margin-bottom: -20px;
108+
margin-left: -6px;
109+
font-size: 12px;
110+
}
111+
16112
&__details {
17113
float: left;
18114
padding-left: 30px;

‎templates/package/package.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,6 @@ <h1 class="m-title-panel__title">{{ package.name }}</h1>
5454
{% endif %}
5555
{% endif %}
5656
</div>
57-
5857
</div>
5958
<div class="row">
6059
<div class="col-sm-6 col-lg-4">

‎templates/package/templatetags/_project_tile.html‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,18 @@
33
<div class="m-project-tile {% if style %}m-project-tile--{{style}}{% endif %}">
44
<a href="{{ package.get_absolute_url }}">
55
{% cache 300 thumbnail package style %}
6-
<img class="m-project-tile__thumbnail" src="{% if style == 'gallery' %}{{ package.img|thumb:320 }}{% else %}{{ package.img|thumb:128 }}{% endif %}">
6+
<div class="m-project-tile__thumbnail-wrapper">
7+
{% if style == 'gallery' %}
8+
<img class="m-project-tile__thumbnail" src="{{ package.img|thumb:320 }}">
9+
<div class="m-project-tile__ribbon m-project-tile__ribbon--{{ package.status|lower }}">
10+
<div class="m-project-tile__ribbon-text">
11+
{{ package.short_status_name }}
12+
</div>
13+
</div>
14+
{% else %}
15+
<img class="m-project-tile__thumbnail" src="{{ package.img|thumb:128 }}">
16+
{% endif %}
17+
</div>
718
{% endcache %}
819
<div class="project-details m-project-tile__details">
920
<h3 class="m-project-tile__project-name">{{ package.name }}</h3>

0 commit comments

Comments
 (0)