diff --git a/flask_project/campaign_manager/styles/_campaigns.scss b/flask_project/campaign_manager/styles/_campaigns.scss index 213ef4d40..311f5bc27 100644 --- a/flask_project/campaign_manager/styles/_campaigns.scss +++ b/flask_project/campaign_manager/styles/_campaigns.scss @@ -19,6 +19,9 @@ &.panel { cursor: pointer; } + .label { + margin: 0 12px; + } a { font-weight: bold; color: $blue-dark; diff --git a/flask_project/campaign_manager/styles/_labels.scss b/flask_project/campaign_manager/styles/_labels.scss new file mode 100644 index 000000000..0b1c86fe8 --- /dev/null +++ b/flask_project/campaign_manager/styles/_labels.scss @@ -0,0 +1,14 @@ +.label { + font-family: 'Archivo', sans-serif; + font-size: 10px; + font-weight: normal; + padding: 7px 8px 6px 8px; + border: none; + svg { + vertical-align: text-bottom; + } + &-warning { + color: $black; + background: $red-light; + } +} \ No newline at end of file diff --git a/flask_project/campaign_manager/styles/index.scss b/flask_project/campaign_manager/styles/index.scss index 67b5ee152..721500280 100644 --- a/flask_project/campaign_manager/styles/index.scss +++ b/flask_project/campaign_manager/styles/index.scss @@ -13,5 +13,6 @@ @import "header"; @import "footer"; @import "buttons"; +@import "labels"; @import "pages"; @import "campaigns"; \ No newline at end of file diff --git a/flask_project/campaign_manager/templates/campaign_index.html b/flask_project/campaign_manager/templates/campaign_index.html index c5c158471..5918ac1da 100644 --- a/flask_project/campaign_manager/templates/campaign_index.html +++ b/flask_project/campaign_manager/templates/campaign_index.html @@ -417,12 +417,20 @@ return hasStarted && !hasEnded; } + function getDaysLeft(campaign) { + var endDate = moment(campaign.end_date, 'YYYY-MM-DD', true); + var now = moment(new Date(), 'YYYY-MM-DD'); + return endDate.diff(now, 'days'); + } + function buildCampaignCard(campaign, user) { var startDate = moment(campaign.start_date, 'YYYY-MM-DD', true).format('YYYY.MM.DD'); var endDate = moment(campaign.end_date, 'YYYY-MM-DD', true).format('YYYY.MM.DD'); var featureCount = Object.keys(campaign.types || {}).length; var completeness = campaignProgress(campaign); var isActive = campaignStatus(campaign); + var daysLeft = getDaysLeft(campaign); + var warning = daysLeft ? `${daysLeft} day${daysLeft > 1 ? 's' : ''} left!` : 'Finished' return `
  • @@ -438,7 +446,17 @@
    -

    ${startDate}—${endDate}

    +

    ${startDate}—${endDate} + ${daysLeft <= 10 ? ` + + + + + + + ${warning} + `: ''} +

    ${completeness}% Attributes completeness

    diff --git a/flask_project/campaign_manager/templates/styleguide.html b/flask_project/campaign_manager/templates/styleguide.html index 5b919f194..58b54d411 100644 --- a/flask_project/campaign_manager/templates/styleguide.html +++ b/flask_project/campaign_manager/templates/styleguide.html @@ -33,6 +33,18 @@

    Special

    View
    +
    +

    Labels

    + + + + + + + + x days left! + +

    Colors