From 8fd79f6632565fe09be041bfc14dc81ad97f849f Mon Sep 17 00:00:00 2001 From: Krzysztof Szumny Date: Fri, 16 Mar 2018 21:04:20 +0100 Subject: [PATCH 1/3] Project status ribbon added to thumbnails of projects. Closes #131 --- package/models.py | 18 ++++ static/scss/new/module/_project-tile.scss | 96 +++++++++++++++++++ templates/package/package.html | 1 - .../package/templatetags/_project_tile.html | 13 ++- 4 files changed, 126 insertions(+), 2 deletions(-) diff --git a/package/models.py b/package/models.py index c0f0596f..413f20a5 100644 --- a/package/models.py +++ b/package/models.py @@ -75,41 +75,49 @@ class Project(BaseModel): { 'id': NONE_STATUS, 'name': '----', + 'short_name': '----', 'description': '', }, { 'id': UNKNOWN, 'name': 'Unknown', + 'short_name': 'Unknown', 'description': 'Unknown project status', }, { 'id': LIVE__RELEASED, 'name': 'Live/Released', + 'short_name': 'Live/Released', 'description': 'Project is ready to use', }, { 'id': WORKING_PROTOTYPE__BETA, 'name': 'Working Prototype/Beta', + 'short_name': 'Prototype/Beta', 'description': 'Project is working however, it still can contain some bugs', }, { 'id': DEMO__ALPHA, 'name': 'Demo/Alpha', + 'short_name': 'Demo/Alpha', 'description': 'Project can be used by people which are not afraid of bugs and has very high pain threshold', }, { 'id': CONCEPT, 'name': 'Concept', + 'short_name': 'Concept', 'description': 'Project which pretends to be a working product', }, { 'id': ABANDONED__BROKEN, 'name': 'Abandoned/Broken', + 'short_name': 'Abandoned', 'description': 'Project is no longer available or it is completely broken', }, { 'id': OUT_OF_DATE__RETIRED, 'name': 'Out of Date/Retired', + 'short_name': 'Retired', 'description': 'Project is no longer needed, because of changes in ecosystem', }, @@ -428,6 +436,16 @@ def status_description(self): ) ) + @property + def short_status_name(self): + return next( + ( + status['short_name'] + for status in Project.STATUSES + if status['id'] == self.status + ) + ) + class TeamMembership(BaseModel): account = models.ForeignKey(Account, default=None, blank=True, null=True) diff --git a/static/scss/new/module/_project-tile.scss b/static/scss/new/module/_project-tile.scss index ba352b23..83be233d 100644 --- a/static/scss/new/module/_project-tile.scss +++ b/static/scss/new/module/_project-tile.scss @@ -13,6 +13,102 @@ $gallery-size: 20; box-shadow: 0 3px 7px rgba(0,0,0,.1); // TODO: adjust EOS color } + &__thumbnail-wrapper { + position: relative; + } + + &__ribbon { + -webkit-transform: rotate(135deg); + -moz-transform: rotate(135deg); + -ms-transform: rotate(135deg); + -o-transform: rotate(135deg); + transform: rotate(45deg); + border: 20px solid transparent; + border-bottom-style: solid; + border-bottom-width: 20px; + position: absolute; + top: 8px; + right: -32px; + padding: 0 10px; + width: 120px; + color: white; + font-family: sans-serif; + size: 11px; + text-align: center; + display: block; + //opacity: 0.7; + + &--unknown { + border-bottom-color: lighten($status-unknown, 10%); + } + + &--live_released { + border-bottom-color: lighten($status-live-released, 10%); + } + + &--workingprototype_beta { + border-bottom-color: lighten($status-working-prototype-beta, 10%); + } + + &--demo_alpha { + border-bottom-color: lighten($status-demo-alpha, 10%); + } + + &--concept { + border-bottom-color: lighten($status-concept, 10%); + } + + &--abandoned_broken { + border-bottom-color: lighten($status-abandoned-broken, 10%); + } + + &--outofdate_retired { + border-bottom-color: lighten($status-out-of-date-retired, 10%); + } + } + + &__thumbnail-wrapper:hover { + .m-project-tile__ribbon { + &--unknown { + border-bottom-color: $status-unknown; + } + + &--live_released { + border-bottom-color: $status-live-released; + } + + &--workingprototype_beta { + border-bottom-color: $status-working-prototype-beta; + } + + &--demo_alpha { + border-bottom-color: $status-demo-alpha; + } + + &--concept { + border-bottom-color: $status-concept; + } + + &--abandoned_broken { + border-bottom-color: $status-abandoned-broken; + } + + &--outofdate_retired { + border-bottom-color: $status-out-of-date-retired; + } + } + position: relative; + top: -4px; + left: -4px; + } + + &__ribbon-text { + color: $m-btn-font-color-hover; + margin-bottom: -20px; + margin-left: -6px; + font-size: 12px; + } + &__details { float: left; padding-left: 30px; diff --git a/templates/package/package.html b/templates/package/package.html index c44dd4cc..bec4e732 100644 --- a/templates/package/package.html +++ b/templates/package/package.html @@ -54,7 +54,6 @@

{{ package.name }}

{% endif %} {% endif %} -
diff --git a/templates/package/templatetags/_project_tile.html b/templates/package/templatetags/_project_tile.html index b5d1d8c2..7f97f6b7 100644 --- a/templates/package/templatetags/_project_tile.html +++ b/templates/package/templatetags/_project_tile.html @@ -3,7 +3,18 @@
{% cache 300 thumbnail package style %} - +
+ {% if style == 'gallery' %} + +
+
+ {{ package.short_status_name }} +
+
+ {% else %} + + {% endif %} +
{% endcache %}

{{ package.name }}

From 8172e70fd805f7687c0789c9243bd89f6cc0460f Mon Sep 17 00:00:00 2001 From: Krzysztof Szumny Date: Tue, 20 Mar 2018 15:23:32 +0100 Subject: [PATCH 2/3] Implementation of option 4 --- static/scss/new/module/_project-tile.scss | 87 ++++--------------- .../package/templatetags/_project_tile.html | 6 +- 2 files changed, 21 insertions(+), 72 deletions(-) diff --git a/static/scss/new/module/_project-tile.scss b/static/scss/new/module/_project-tile.scss index 83be233d..04dbe105 100644 --- a/static/scss/new/module/_project-tile.scss +++ b/static/scss/new/module/_project-tile.scss @@ -1,3 +1,4 @@ +@import "../base/variables"; $gallery-size: 20; @@ -17,98 +18,48 @@ $gallery-size: 20; position: relative; } - &__ribbon { - -webkit-transform: rotate(135deg); - -moz-transform: rotate(135deg); - -ms-transform: rotate(135deg); - -o-transform: rotate(135deg); - transform: rotate(45deg); - border: 20px solid transparent; - border-bottom-style: solid; - border-bottom-width: 20px; - position: absolute; - top: 8px; - right: -32px; - padding: 0 10px; - width: 120px; - color: white; - font-family: sans-serif; - size: 11px; + &__status { + background-color: black; + opacity: 0.7; + color: $m-btn-font-color-hover; + position: relative; + bottom: 20px; + float: left; + height: 20px; + width: 100%; text-align: center; - display: block; - //opacity: 0.7; + border-bottom-style: solid; + border-bottom-width: 2px; &--unknown { - border-bottom-color: lighten($status-unknown, 10%); + border-bottom-color: $status-unknown; } &--live_released { - border-bottom-color: lighten($status-live-released, 10%); + border-bottom-color: $status-live-released; } &--workingprototype_beta { - border-bottom-color: lighten($status-working-prototype-beta, 10%); + border-bottom-color: $status-working-prototype-beta; } &--demo_alpha { - border-bottom-color: lighten($status-demo-alpha, 10%); + border-bottom-color: $status-demo-alpha; } &--concept { - border-bottom-color: lighten($status-concept, 10%); + border-bottom-color: $status-concept; } &--abandoned_broken { - border-bottom-color: lighten($status-abandoned-broken, 10%); + border-bottom-color: $status-abandoned-broken; } &--outofdate_retired { - border-bottom-color: lighten($status-out-of-date-retired, 10%); + border-bottom-color: $status-out-of-date-retired; } } - &__thumbnail-wrapper:hover { - .m-project-tile__ribbon { - &--unknown { - border-bottom-color: $status-unknown; - } - - &--live_released { - border-bottom-color: $status-live-released; - } - - &--workingprototype_beta { - border-bottom-color: $status-working-prototype-beta; - } - - &--demo_alpha { - border-bottom-color: $status-demo-alpha; - } - - &--concept { - border-bottom-color: $status-concept; - } - - &--abandoned_broken { - border-bottom-color: $status-abandoned-broken; - } - - &--outofdate_retired { - border-bottom-color: $status-out-of-date-retired; - } - } - position: relative; - top: -4px; - left: -4px; - } - - &__ribbon-text { - color: $m-btn-font-color-hover; - margin-bottom: -20px; - margin-left: -6px; - font-size: 12px; - } - &__details { float: left; padding-left: 30px; diff --git a/templates/package/templatetags/_project_tile.html b/templates/package/templatetags/_project_tile.html index 7f97f6b7..6b091f75 100644 --- a/templates/package/templatetags/_project_tile.html +++ b/templates/package/templatetags/_project_tile.html @@ -6,10 +6,8 @@
{% if style == 'gallery' %} -
-
- {{ package.short_status_name }} -
+
+ {{ package.get_status_display }}
{% else %} From 59ab550c6e0641353a5d60d84a1474bc660a8099 Mon Sep 17 00:00:00 2001 From: Krzysztof Szumny Date: Tue, 20 Mar 2018 15:30:04 +0100 Subject: [PATCH 3/3] cleanning --- static/scss/new/module/_project-tile.scss | 7 ++----- .../package/templatetags/_project_tile.html | 18 ++++++++---------- 2 files changed, 10 insertions(+), 15 deletions(-) diff --git a/static/scss/new/module/_project-tile.scss b/static/scss/new/module/_project-tile.scss index 04dbe105..c6066e29 100644 --- a/static/scss/new/module/_project-tile.scss +++ b/static/scss/new/module/_project-tile.scss @@ -14,18 +14,15 @@ $gallery-size: 20; box-shadow: 0 3px 7px rgba(0,0,0,.1); // TODO: adjust EOS color } - &__thumbnail-wrapper { - position: relative; - } - &__status { background-color: black; opacity: 0.7; color: $m-btn-font-color-hover; position: relative; + height: 20px; bottom: 20px; + margin-bottom: -20px; float: left; - height: 20px; width: 100%; text-align: center; border-bottom-style: solid; diff --git a/templates/package/templatetags/_project_tile.html b/templates/package/templatetags/_project_tile.html index 6b091f75..131a0072 100644 --- a/templates/package/templatetags/_project_tile.html +++ b/templates/package/templatetags/_project_tile.html @@ -3,16 +3,14 @@
{% cache 300 thumbnail package style %} -
- {% if style == 'gallery' %} - -
- {{ package.get_status_display }} -
- {% else %} - - {% endif %} -
+ {% if style == 'gallery' %} + +
+ {{ package.get_status_display }} +
+ {% else %} + + {% endif %} {% endcache %}

{{ package.name }}