From 7ffb0286e3a8ec21f1a3f268ea7bc58143bf279e Mon Sep 17 00:00:00 2001 From: Simon Busborg Date: Mon, 10 Oct 2016 10:01:35 +0200 Subject: [PATCH] Fixes: OUR-404 Update release pages to have a far more prominent call to action for download and install instructions --- .../src/scss/pages/_release.scss | 359 +++++++++++++----- OurUmbraco.Site/masterpages/Release.master | 277 +++++++------- 2 files changed, 403 insertions(+), 233 deletions(-) diff --git a/OurUmbraco.Client/src/scss/pages/_release.scss b/OurUmbraco.Client/src/scss/pages/_release.scss index 156f8270..48d02aed 100644 --- a/OurUmbraco.Client/src/scss/pages/_release.scss +++ b/OurUmbraco.Client/src/scss/pages/_release.scss @@ -1,39 +1,29 @@ -.download { +.download.latest .dot { + margin-top: 2rem; +} - - .dot.progress { +.download .dot.progress { text-indent: .3rem; text-align: center; line-height: 2.8rem; - - - .counter { - font-size: 1.1rem;; - } - } - - - &.latest { - - - .dot { - margin-top: 2rem; - } - } } +.download .dot.progress .counter { + font-size: 1.1rem; +} .explain { + flex-direction: column; - - .changes { - small { - line-height: .5rem; - } + @media (min-width: 768px) { + flex-direction: row; } } +.explain .changes small { + line-height: .5rem; +} .chart { @@ -41,119 +31,111 @@ top: -4px; left: -8px; z-index: 1; - - - .percentage { - display: inline-block; - position: absolute; - top: 9px; - left: 16px; - font-size: 1.1rem; - color: darken($color-our, 30%); - } - - - canvas { - top: 1px; - position: absolute; - left: 5px; - } - } +.chart .percentage { + display: inline-block; + position: absolute; + top: 9px; + left: 16px; + font-size: 1.1rem; + color: darken($color-our, 30%); +} +.chart canvas { + top: 1px; + position: absolute; + left: 5px; +} -.get-release { - - - i { - font-size: 2.5rem; - line-height: 5rem; - } +.chart { + position: absolute; + top: -4px; + left: -8px; + z-index: 1; } .get-release { line-height: 1.5; - padding: 2.5rem 0; - margin: 2.5rem 0; + padding: 2rem 0; + margin: 0 0 2.5rem ; border-bottom: 1px solid darken(whitesmoke, 5%); - border-top: 1px solid darken(whitesmoke, 5%); +} +.get-release i { + font-size: 2.5rem; + line-height: 5rem; +} - h3 { - font-size: 1.1rem; - margin-bottom: .3rem; - color: $color-headline; +.get-release h3 { + font-size: 1.1rem; + margin-bottom: .3rem; + color: $color-headline; +} +.get-release h3 a { + text-decoration: none; - a { - text-decoration: none; - - - &:hover { - color: $color-our; - } - } - } - - - p { - color: $color-headline; - font-size: .95rem; - line-height: 1.3; - margin-bottom: .5rem; - } - - - small { - font-size: .7rem; - color: $color-text; + &:hover { + color: $color-our; } } +.get-release p { + color: $color-headline; + font-size: .95rem; + line-height: 1.3; + margin-bottom: .5rem; +} + + +.get-release small { + font-size: .8rem; + color: rgba($color-text, .6); +} .release { min-height: 160px; - + &.zip { - + i { color: $color-headline; } } - + &.bin { - + i { color: rgba(#000, .4); font-size: 1.6rem; } - + h4 { font-size: .9rem; margin-bottom: .3rem; color: $color-headline; - + a { text-decoration: none; - + &:hover { color: $color-our; } } } - - + + &.col-sm-5 { padding-top: 18px; } @@ -177,7 +159,7 @@ .explain { - + h4 { font-size: 2.5rem; @@ -199,12 +181,10 @@ // Single release page -.release{ - +.release { .markdown-syntax { - p, li, ul, a { color: $color-headline; font-size: .95rem; @@ -216,7 +196,7 @@ } - a { + a { text-decoration: underline; font-family: $font-family; } @@ -253,12 +233,12 @@ } } } + + .releaseTable { - .col-xs-3 { - &:first-child { .progress { .top { @@ -282,6 +262,7 @@ } } + // Progress page .inprogress { @@ -324,11 +305,12 @@ } } + // Roadmap page .plannedreleases { .dot.big { text-indent: 0; - line-height: 3rem; + line-height: 3rem; } .chart { top: 0px; @@ -342,3 +324,192 @@ } } } + + +.release-page .explain h2 { + margin: 0; + font-size: 2em; + color: rgba(0,0,0,.8); +} + +.release-page .explain small { + margin-bottom: 0; +} + +.release-page .dot { + border: none; +} + +.release-page .dot.big { + position: relative; + text-indent: 0; + margin: 0; +} + +.release-page .chart { + height: 60px; + width: 60px; + top: initial; + left: initial; + text-align: center; +} + +.release-page .chart p { + vertical-align: middle; + line-height: 3.7rem; + display: inline-block; +} + +.release-page .chart canvas { + top: 0px; + left: 0px; +} + +.statuses ul { + list-style-type: none; +} +.statuses ul li { + position: relative; + margin-bottom: 10px; + padding-left: 10px; +} +.statuses li:before { + position: absolute; + top: -4px; + left: -25px; + font-size: 1.5em; +} + + + + +.release-progress-indicator { + flex: 1 1 auto; +} + +.release-progress-action { + flex: 1 1 auto; + + margin-top: 30px; +} + +.release-progress-version { + margin-left: 15px; +} + + + +.release-header { + flex: 0 0 100%; + padding-bottom: 5px; + margin-bottom: 2.5rem; + + border-bottom: 1px solid darken(whitesmoke, 5%); +} + +.release-header h2 { + font-size: 1.6rem; + font-weight: 700; +} + + + +.release-section-group { + flex: 1 1 100%; + padding: 0; + + @media (min-width: 768px) { + flex: 1 1 47%; + padding: 0 3% 0 0; + } +} + +.release-section-group:nth-child(even) { + flex: 1 1 100%; + padding: 0; + + @media (min-width: 768px) { + flex: 1 1 47%; + padding: 0 0 0 3%; + } +} + +.release-section-action { + height: 80px; + + display: flex; + justify-content: flex-start; + align-items: center; + + box-sizing: border-box; +} + +.release-other-files .release { + min-height: auto; + margin-bottom: 30px; +} + +.release-other-files .release a { + display: inline-block; + margin-bottom: 10px; + margin-top: 10px; +} + +.release-other-files .release p { + margin-top: 0; +} + + +.release-section code { + overflow: auto; + + background-color: #333; + background-clip: padding-box; + + color: #fff; + font-size: 12px; + line-height: 1.4em; + text-align: center; + text-decoration: none; + + + padding: 8px 10px 8px 10px; + + width: auto; + border-radius: 5px; + border: none; +} + + +.release-section + .release-section { + margin-top: 30px; +} + +.release-section-group + .release-section-group { + margin-top: 30px; + + @media (min-width: 768px) { + margin-top: 0; + } +} + +.release-section h3 { + font-size: 1.1rem; + font-weight: bold; + margin-bottom: 0; +} + + +.release-other-files { + margin-top: 3rem; +} + +.release-other-files h3 { + font-size: 1.1rem; + margin-bottom: 5px; +} + +.release-other-files small { + font-size: .8rem; + color: rgba($color-text, .5); +} diff --git a/OurUmbraco.Site/masterpages/Release.master b/OurUmbraco.Site/masterpages/Release.master index f844202b..4d7acdde 100644 --- a/OurUmbraco.Site/masterpages/Release.master +++ b/OurUmbraco.Site/masterpages/Release.master @@ -5,22 +5,22 @@ - + @{ if(Request.Params["fromdownload"] != null) { - var downloads = Model.ReleaseDownload.Where("Visible"); + var downloads = Model.ReleaseDownload.Where("Visible"); if(downloads.Any()) { var downloadIds = new List(); foreach (var item in downloads) - { + { downloadIds.Add(item.Id); } Response.Redirect("/ReleaseDownload?id=" + downloadIds.First(), false); } - } + } } <% @@ -29,7 +29,7 @@ var release = allReleases.First(x => x.version == currentPage.Name); var completedIssues = release.issues.Count(x => x.state == "Fixed"); var totalIssues = release.issues.Count(); - var percentComplete = Math.Round(((double) 100/totalIssues)*completedIssues); + var percentComplete = Math.Round(((double)100 / totalIssues) * completedIssues); var releaseDateParsed = DateTime.Now; if (release.releaseDate != string.Empty) { @@ -38,7 +38,7 @@ var releaseDate = release.releaseDate == "" ? "Not yet determined" : releaseDateParsed.ToString("dddd, MMMM d yyyy"); - + var umbracoHelper = new Umbraco.Web.UmbracoHelper(UmbracoContext.Current); var releaseContent = umbracoHelper.TypedContent(umbracoHelper.UmbracoContext.PageId); if (releaseContent != null) @@ -60,7 +60,7 @@
- +
@@ -282,8 +251,10 @@
  • <%= issue.id %> - <%= issue.title %>
    • - - <% } } else { %> + + <% } + } + else { %>

    No items to display

    <% } %>
    @@ -300,18 +271,20 @@
  • <%= issue.id %> - <%= issue.title %>
    • - - <% } } else { %> + + <% } + } + else { %>

    No items to display

    <% } %>
    - + - +

    Getting started

    @@ -327,26 +300,52 @@

    You'll find our über active community working hard to help each other at Our Umbraco: http://our.umbraco.org

    Upgrading from older versions

    Make sure to read the upgrade instructions before you attempt an upgrade.

    - +

    Found a bug?

    We're happy to help you with any problems you encounter, so please report them in the issue tracker and use the “Affected versions” field to set it to @Model.Name.
    Do a search first though, if the issue already exists, give it an extra vote.

    - + @if(Model.HasValue("linkToChangeset")) {

    Source code

    The source for this specific release is available for download from the repository (click the "ZIP" button).

    } - - @if(Model.HasNuGet) { -

    Also available on NuGet

    - -
    - -

    PM> Install-Package UmbracoCms -Version @Model.Name

    -     + + + @{ + var downloads = Model.ReleaseDownload.Where("Visible"); + var countIsOdd = ((downloads.Count() & 1) != 0) ? true : false; + if(downloads.Any()) + { + +
    +

    All files

    + + @foreach (var item in downloads) + { + var background = item.IsFirst() ? "/images/releases/download.png" : "/media/2483095/download.png"; + var width = (item.IsLast() && countIsOdd) ? 895 : 380; + var numberOfDownloads = 0; + int.TryParse(item.NumberOfDownloads, out numberOfDownloads); + numberOfDownloads = numberOfDownloads + OurUmbraco.Our.Utils.GetReleaseDownloadCount(item.Id); + if(item.Name.Contains("WebPI") == false) + { +
    + + @if(item.IsFirst()) + { +

    This is the main Umbraco download, generally you won't need anything else.

    + } + Downloaded @numberOfDownloads times - uploaded @item.UploadDate.ToString("D") +
    + } else { + + } + }
    - - } + + } + } +
    @@ -362,7 +361,7 @@ - +