Front-end changes:

- Package details page now lists from latest to oldest version. - OpenGraph tag helper has reduced number of required attributes. - Increased margin below the ID on the package details page. - Increased website responsiveness: - Top navigation bar is now collapsible. - Package details pages and search listing pages have been adjusted for smaller screens. - The package details page tries to break the package ID more nicely. - Package details page does no longer inline icon and ID for small screens.
Emzi0767 · Jul 26, 2019 · 1ab5f61 · 1ab5f61
1 parent a8b8378
commit 1ab5f61
Show file tree

Hide file tree

Showing 8 changed files with 130 additions and 13 deletions.
diff --git a/src/SlimGet/Controllers/GalleryController.cs b/src/SlimGet/Controllers/GalleryController.cs
@@ -232,7 +232,9 @@ private GalleryPackageInfoModel PreparePackage(Package dbpackage, PackageVersion
                 // figure out symbols
                 DependencyGroups = this.PrepareDependencyGroups(dbversion),
                 OwnerId = dbpackage.OwnerId,
-                AllVersions = dbpackage.Versions.Select(x => (x.Version, x.DownloadCount, new DateTimeOffset(x.PublishedAt.Value)))
+                AllVersions = dbpackage.Versions
+                    .Select(x => (x.Version, x.NuGetVersion, x.DownloadCount, new DateTimeOffset(x.PublishedAt.Value)))
+                    .OrderByDescending(x => x.Version)
             };
 
         private IEnumerable<GalleryPackageDependencyGroupModel> PrepareDependencyGroups(PackageVersion dbversion)

diff --git a/src/SlimGet/Filters/OpenGraphTagHelper.cs b/src/SlimGet/Filters/OpenGraphTagHelper.cs
@@ -23,7 +23,9 @@
 
 namespace SlimGet.Filters
 {
-    [HtmlTargetElement("opengraph", Attributes = "og-title,og-type,og-image,og-url,og-description,og-colour-theme,og-site-name")]
+    [HtmlTargetElement("opengraph",
+        Attributes = "og-title,og-site-name",
+        TagStructure = TagStructure.WithoutEndTag)]
     public sealed class OpenGraphTagHelper : TagHelper
     {
         [HtmlAttributeName("og-title")]

diff --git a/src/SlimGet/Models/GalleryModels.cs b/src/SlimGet/Models/GalleryModels.cs
@@ -119,7 +119,7 @@ public sealed class GalleryPackageInfoModel
         //public string SymbolsUrl { get; set; }
         public IEnumerable<GalleryPackageDependencyGroupModel> DependencyGroups { get; set; }
         public string OwnerId { get; set; }
-        public IEnumerable<(string version, long downloads, DateTimeOffset publishedAt)> AllVersions { get; set; }
+        public IEnumerable<(string version, NuGetVersion nugetVersion, long downloads, DateTimeOffset publishedAt)> AllVersions { get; set; }
     }
 
     public sealed class GalleryPackageDependencyGroupModel

diff --git a/src/SlimGet/SlimGet.csproj b/src/SlimGet/SlimGet.csproj
@@ -22,7 +22,7 @@
     <TargetFramework>netcoreapp2.2</TargetFramework>
     <AspNetCoreHostingModel>InProcess</AspNetCoreHostingModel>
     <LangVersion>7.3</LangVersion>
-    <Version>1.1.0</Version>
+    <Version>1.1.1</Version>
     <FileVersion>$(Version).0</FileVersion>
     <ProductVersion>$(Version).0</ProductVersion>
   </PropertyGroup>

diff --git a/src/SlimGet/Views/Gallery/Package.cshtml b/src/SlimGet/Views/Gallery/Package.cshtml
@@ -41,7 +41,7 @@
                 }
             </div>@*
             *@<div class="details-id">
-                <div class="details-id-id">@this.Model.Id</div>
+                <div class="details-id-id">@this.Html.Raw(this.Model.Id.Replace(".", ".<wbr>"))</div>
                 <div class="details-id-version">@this.Model.Version.ToNormalizedString()</div>
                 <div class="details-id-title">@this.Model.Title</div>
             </div>

diff --git a/src/SlimGet/Views/Shared/_Layout.cshtml b/src/SlimGet/Views/Shared/_Layout.cshtml
@@ -53,8 +53,13 @@
     <div class="slimget-header" id="header">
         <div class="slimget-header-inner">
             <a href="@Url.RouteUrl(Routing.GalleryIndexRouteName)" class="slimget"><img src="~/images/slimget-cube-blue.png" class="slimget-logo-mini" /> SlimGet</a>
-            <a href="@Url.RouteUrl(Routing.GalleryListRouteName)" class="nav-link">Packages</a>
-            <a href="@Url.RouteUrl(Routing.GalleryAboutRouteName)" class="nav-link">About</a>
+            <input type="checkbox" id="menu-collapser" class="slimget-header-collapser" />
+            <label for="menu-collapser" class="slimget-header-collapser menu-opened"><i class="fas fa-times"></i> Menu</label>
+            <label for="menu-collapser" class="slimget-header-collapser menu-closed"><i class="fas fa-bars"></i> Menu</label>
+            <div class="slimget-header-menu">
+                <a href="@Url.RouteUrl(Routing.GalleryListRouteName)" class="nav-link">Packages</a>@*
+                *@<a href="@Url.RouteUrl(Routing.GalleryAboutRouteName)" class="nav-link">About</a>
+            </div>
         </div>
     </div>
 

diff --git a/src/SlimGet/Views/_ViewImports.cshtml b/src/SlimGet/Views/_ViewImports.cshtml
@@ -17,8 +17,8 @@
 *@
 
 @using SlimGet
-@using SlimGet.Filters
 @using SlimGet.Models
 @using Microsoft.AspNetCore.Mvc
 @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
 @addTagHelper *, SlimGet
+@addTagHelper *, SlimGet.Filters
diff --git a/src/SlimGet/wwwroot/css/slimget.css b/src/SlimGet/wwwroot/css/slimget.css
@@ -47,6 +47,7 @@ body
 {
     display: flex;
     flex-direction: column;
+    overflow-x: hidden;
 }
 
 .slimget-header
@@ -81,6 +82,11 @@ body
     margin-right: 12px !important;
 }
 
+.slimget-header > .slimget-header-inner > .slimget-header-collapser
+{
+    display: none;
+}
+
 .slimget-header > .slimget-header-inner > .slimget > img.slimget-logo-mini
 {
     height: 32pt; width: 32pt;
@@ -89,15 +95,24 @@ body
     display: inline-block;
 }
 
-.slimget-header > .slimget-header-inner > a.nav-link
+.slimget-header > .slimget-header-inner > .slimget-header-menu
+{
+    height: 100%;
+    margin: 0; padding: 0;
+
+    display: inline-block;
+    vertical-align: top;
+}
+
+.slimget-header > .slimget-header-inner > .slimget-header-menu > a.nav-link
 {
     padding: 0 12px !important;
     font-size: 14pt;
     vertical-align: top;
 }
 
-.slimget-header > .slimget-header-inner > a:link,
-.slimget-header > .slimget-header-inner > a:visited
+.slimget-header > .slimget-header-inner a:link,
+.slimget-header > .slimget-header-inner a:visited
 {
     margin: 0; padding: 0;
     line-height: 42pt;
@@ -109,7 +124,7 @@ body
     text-decoration: none;
 }
 
-.slimget-header > .slimget-header-inner > a.nav-link:hover
+.slimget-header > .slimget-header-inner > .slimget-header-menu > a.nav-link:hover
 {
     background: #2C609A;
 }
@@ -359,13 +374,16 @@ p.navigation > .navigation-pipe
 
 .details-outer > .details-inner-left > .details-header > .details-id
 {
+    width: calc(100% - 142px);
     margin-left: 12px;
+    margin-bottom: 18px;
     display: inline-block;
     vertical-align: middle;
 }
 
 .details-outer > .details-inner-left > .details-header > .details-id > .details-id-id
 {
+    width: 100%;
     display: inline-block;
     font-size: 28pt;
     font-weight: 700;
@@ -607,12 +625,102 @@ img.no-icon
     opacity: 0.3;
 }
 
-@media (max-width: 959px)
+@media (max-width: 1200px)
 {
     .slimget-header > .slimget-header-inner,
     .slimget-footer > .slimget-footer-inner,
     .slimget-content > .slimget-content-inner
     {
         width: calc(100% - 32px);
     }
+
+    .details-outer
+    {
+        display: block;
+    }
+
+    .details-outer > .details-inner-left,
+    .details-outer > .details-inner-right
+    {
+        display: block;
+        width: 100%;
+    }
+
+    .slimget-header
+    {
+        flex-shrink: 0;
+        display: block;
+        height: auto;
+        min-height: 42pt;
+        max-height: 100%;
+        overflow: hidden;
+    }
+
+    .slimget-header > .slimget-header-inner
+    {
+        width: 100%; height: 100%;
+        margin: 0;
+    }
+
+    .slimget-header > .slimget-header-inner > .slimget-header-menu
+    {
+        width: 100%; height: 0;
+        margin: 0; padding: 0;
+
+        display: block;
+
+        transition: all 0.33s;
+    }
+
+    .slimget-header > .slimget-header-inner > a.slimget
+    {
+        margin-right: 0 !important; padding: 0 12px;
+    }
+
+    .slimget-header > .slimget-header-inner > label.slimget-header-collapser
+    {
+        margin-top: -42pt;
+        display: none;
+        text-align: right;
+        line-height: 42pt;
+        padding: 0 12px;
+    }
+
+    .slimget-header > .slimget-header-inner > input.slimget-header-collapser:checked ~ label.menu-opened,
+    .slimget-header > .slimget-header-inner > input.slimget-header-collapser:not(:checked) ~ label.menu-closed
+    {
+        display: block;
+    }
+
+    .slimget-header > .slimget-header-inner > input.slimget-header-collapser:checked ~ .slimget-header-menu
+    {
+        height: auto;
+    }
+
+    .slimget-header > .slimget-header-inner > a.slimget,
+    .slimget-header > .slimget-header-inner > .slimget-header-menu > a.nav-link
+    {
+        display: block;
+        margin: 0;
+    }
+
+    .details-outer > .details-inner-left > .details-header > .details-icon,
+    .details-outer > .details-inner-left > .details-header > .details-id,
+    .details-outer > .details-inner-left > .details-header > .details-id > div
+    {
+        width: 100%;
+        display: block;
+        text-align: center;
+        word-break: break-all;
+    }
+
+    .details-outer > .details-inner-left > .details-header > .details-id
+    {
+        margin-left: 0;
+    }
+
+    .package-listing > .package-data > .package-tagline > .package-id
+    {
+        word-break: break-all;
+    }
 }