- redesigned mimries layout for better visuals and usability

- updated delay scroll loading based on new layout to trigger whenever a column's empty space is in view - made mimry title wrap in thumbnail mode and reduced font size - changed default size of page load to 6 - changed body background color - redesigned styles for mimry container - removed cream dust background image since it's no longer used
lhoang29 · Jul 8, 2014 · 190dbbf · 190dbbf
1 parent e783368
commit 190dbbf
Show file tree

Hide file tree

Showing 12 changed files with 120 additions and 24 deletions.
diff --git a/Mimry/Content/Site.css b/Mimry/Content/Site.css
@@ -1,7 +1,7 @@
 body {
     padding-top: 50px;
     padding-bottom: 20px;
-    background: url(/Images/cream_dust.png) repeat 0 0;
+    background-color:#F5F6F7;
 }
 
 /* Set padding to keep content from hitting the edges */
@@ -50,7 +50,7 @@ input[type="checkbox"].input-validation-error {
 }
 
 div.mr-header {
-    font-size:30px;
+    font-size:20px;
     margin-top:10px;
     margin-bottom:10px;
 }
@@ -103,11 +103,19 @@ button.ml-liked {
     top:5px;
 }
 
+div.mimry-container {
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+    padding:5px;
+    position:absolute;
+    background-color:white;
+    border: 1px solid darkgray;
+}
+
 div.mim-container {
     text-align:center;
     padding-top:10px;
     padding-bottom:10px;
-    display:inline-block;
 }
 
 div.mim {
@@ -118,10 +126,12 @@ div.mim {
 
 div.mim-add {
     border-width:1px;
-    border-color:gainsboro;
+    border-color:darkgray;
     border-style:solid;
     -moz-border-radius: 10px;
     border-radius: 10px;
+    padding:10px;
+    background-color:gainsboro;
 }
 
 img.mim-full {
@@ -130,5 +140,9 @@ img.mim-full {
 }
 
 .jumbotron {
-  background: url(/Images/cream_dust.png) repeat 0 0;
+  background-color:#F5F6F7;
+}
+
+#mrMainView {
+    position:relative;
 }
diff --git a/Mimry/Controllers/MimSeqsController.cs b/Mimry/Controllers/MimSeqsController.cs
@@ -19,7 +19,7 @@ namespace Mimry.Controllers
     public class MimSeqsController : Controller
     {
         private IUnitOfWork m_UOW;
-        private const int c_PageSize = 3; // # of mimries to load
+        private const int c_PageSize = 6; // # of mimries to load
 
         public MimSeqsController() : this(UnitOfWork.Current) { }
 

diff --git a/Mimry/Images/cream_dust.png b/Mimry/Images/cream_dust.png
diff --git a/Mimry/Mimry.csproj b/Mimry/Mimry.csproj
@@ -246,7 +246,6 @@
     <Content Include="fonts\glyphicons-halflings-regular.svg" />
     <Content Include="Global.asax" />
     <Content Include="Content\Site.css" />
-    <Content Include="Images\cream_dust.png" />
     <Content Include="Scripts\bootbox.js" />
     <Content Include="Scripts\bootbox.min.js" />
     <Content Include="Scripts\bootstrap.js" />
@@ -315,6 +314,7 @@
   </ItemGroup>
   <ItemGroup>
     <Folder Include="App_Data\" />
+    <Folder Include="Images\" />
   </ItemGroup>
   <ItemGroup>
     <Content Include="fonts\glyphicons-halflings-regular.woff" />

diff --git a/Mimry/Scripts/Site.js b/Mimry/Scripts/Site.js
@@ -162,12 +162,77 @@
         });
     });
 
+    var highestBottom = -1; // the highest of the mimry bottom locations
+    rearrange = function () {
+        var horSpace = 20;
+        var verSpace = 20;
+
+        var mimryContainers = $('.mimry-container');
+        if (mimryContainers == null || mimryContainers.length == 0) {
+            return;
+        }
+
+        var columnWidth = $(mimryContainers[0]).width() + horSpace;
+        var windowWidth = $(window).width();
+
+        var numColumns = Math.floor(windowWidth / columnWidth);
+        if (numColumns == 0) {
+            return;
+        }
+
+        var cBottoms = new Array(numColumns);
+        var cLefts = new Array(numColumns);
+        for (var i = 0; i < numColumns; i++) {
+            cBottoms[i] = 0;
+            cLefts[i] = i * columnWidth;
+        }
+
+        var iFreeColumn = 0;
+        for (var i = 0; i < mimryContainers.length; i++) {
+            var currentContainer = $(mimryContainers[i]);
+
+            var left = cLefts[iFreeColumn];
+            var top = cBottoms[iFreeColumn] + verSpace;
+
+            currentContainer.css('left', left + 'px');
+            currentContainer.css('top', top + 'px');
+
+            cBottoms[iFreeColumn] = top + currentContainer.height();
+
+            highestBottom = cBottoms[0];
+            iFreeColumn = 0;
+            for (var j = 0; j < numColumns; j++) {
+                if (cBottoms[j] < highestBottom) {
+                    highestBottom = cBottoms[j];
+                    iFreeColumn = j;
+                }
+            }
+        }
+
+        var bottomMost = Math.max.apply(null, cBottoms);
+        $('#footerDiv').css('top', (bottomMost + 20) + 'px');
+    };
+
     $window = $(window);
+    $window.resize(function () {
+        rearrange();
+    });
+
     $window.load(function () {
+
+        // Rearrange the layout
+        rearrange();
+
         var load = true;
         $window.scroll(function () {
             if (load) {
-                if ($window.height() + $window.scrollTop() == $(document).height()) {
+                if ((
+                    highestBottom > -1 &&
+                    highestBottom >= $window.scrollTop() &&
+                    highestBottom <= $window.scrollTop() + $window.height()
+                    ) ||
+                    $window.height() + $window.scrollTop() == $(document).height()) {
+
                     load = false;
                     $anchorMore = $('.infinite-more-link');
                     var getUrl = $anchorMore.attr('href');
@@ -180,6 +245,7 @@
                             success: function (data) {
                                 $anchorMore.remove();
                                 $('#mrMainView').append(data);
+                                rearrange();
                                 load = true;
                             }
                         });

diff --git a/Mimry/ViewModels/MimView.cs b/Mimry/ViewModels/MimView.cs
@@ -38,5 +38,10 @@ public static int GetMaxMimSize(MimViewMode mode)
             }
             return maxSize;
         }
+
+        public static int GetContainerSize(MimViewMode mode)
+        {
+            return MimView.GetMaxMimSize(mode) + MimView.ContainerPadding;
+        }
     }
 }
diff --git a/Mimry/ViewModels/MimryHeader.cs b/Mimry/ViewModels/MimryHeader.cs
@@ -17,5 +17,6 @@ public class MimryHeader
         public bool IsOwner { get; set; }
         public int CommentCount { get; set; }
         public int LikeCount { get; set; }
+        public MimViewMode ViewMode { get; set; }
     }
 }
diff --git a/Mimry/Views/MimSeqs/Details.cshtml b/Mimry/Views/MimSeqs/Details.cshtml
@@ -7,6 +7,7 @@
 
 @if (Model != null)
 {
+    MimViewMode viewMode = Model.MimViews.ElementAt(0).ViewMode;
     <div>
         @{
             var mimryHeader = new Mimry.ViewModels.MimryHeader() 
@@ -17,7 +18,8 @@
                 IsLiked = Model.IsLiked,
                 IsOwner = Model.IsOwner,
                 LikeCount = Model.LikeCount,
-                CommentCount = Model.CommentCount
+                CommentCount = Model.CommentCount,
+                ViewMode = viewMode
             };
         }
         @Html.Partial("MimryHeader", mimryHeader)
@@ -26,10 +28,8 @@
             <div class="row">
                 <div class="col-md-6">
                     @{
-                        var viewMode = MimViewMode.Thumbnail;
                         foreach (var mim in Model.MimViews)
                         {
-                            viewMode = mim.ViewMode;
                             <div style="text-align:center">
                                 @Html.Partial("Mim", mim)
                             </div>

diff --git a/Mimry/Views/Shared/Mim.cshtml b/Mimry/Views/Shared/Mim.cshtml
@@ -3,7 +3,7 @@
 
 @{
     int maxSize = MimView.GetMaxMimSize(Model.ViewMode);
-    double containerWidth = maxSize + MimView.ContainerPadding;
+    double containerWidth = MimView.GetContainerSize(Model.ViewMode);
 
     var mimClass = String.Empty;
     var imageStyle = String.Empty;
@@ -47,11 +47,11 @@
     else
     {
         string addUrl = Url.Action("Add", "MimSeqs", new { id = Model.MimSeqID });
-        string addSizeStyle = MimView.AddViewSize + "px";
+        string addSizeStyle = maxSize + "px";
         <div class="mim-container" style="width:@containerWidthStyle;">
             <a class="ml acc_mimry_add_box" href="@addUrl">
-                <div class="mim mim-add" style="width:@addSizeStyle; line-height:@addSizeStyle">
-                    <span style="font-size:larger;">ADD NEW</span>
+                <div class="mim mim-add" style="width:@addSizeStyle;">
+                    <span style="font-size:larger;"><i class="fa fa-plus"></i> Add New</span>
                 </div>
             </a>
         </div>

diff --git a/Mimry/Views/Shared/MimryHeader.cshtml b/Mimry/Views/Shared/MimryHeader.cshtml
@@ -1,7 +1,15 @@
 @using Mimry.ViewModels
 @model MimryHeader
 
-<div class="mr-header">
+@{
+    string divContainerStyle = String.Empty;
+    if (Model.ViewMode == MimViewMode.Thumbnail)
+    {
+        divContainerStyle = "width:" + MimView.GetContainerSize(Model.ViewMode) + "px;";
+    }
+}
+
+<div class="mr-header" style="@divContainerStyle">
     <a class="ml" href="/MimSeqs/Details/@Model.MimSeqID" title="View">
         @Model.Title
     </a>

diff --git a/Mimry/Views/Shared/MimryIndexContent.cshtml b/Mimry/Views/Shared/MimryIndexContent.cshtml
@@ -6,6 +6,7 @@
     var nextPageUrl = Url.Action("Index", new { page = Model.PageIndex });
     foreach (var msv in Model.MimSeqViews)
     {
+        @:<div class="mimry-container">
         var mimryHeader = new Mimry.ViewModels.MimryHeader()
         {
             MimSeqID = msv.MimSeqID,
@@ -14,22 +15,21 @@
             IsLiked = msv.IsLiked,
             IsOwner = msv.IsOwner,
             LikeCount = msv.LikeCount,
-            CommentCount = msv.CommentCount
+            CommentCount = msv.CommentCount,
+            ViewMode = msv.MimViews.ElementAt(0).ViewMode
         };
         @Html.Partial("MimryHeader", mimryHeader)
 
-        var viewMode = MimViewMode.Thumbnail;
         foreach (var mimView in msv.MimViews)
         {
-            viewMode = mimView.ViewMode;
             @Html.Partial("Mim", mimView)
         }
         @Html.Partial("Mim", new MimView() {
             MimSeqID = msv.MimSeqID,
             MimID = Guid.Empty,
             ViewMode = MimViewMode.Thumbnail,
         })
-        <hr />
+        @:</div>
     }
 
     <a class="infinite-more-link" href="@nextPageUrl"></a>

diff --git a/Mimry/Views/Shared/_Layout.cshtml b/Mimry/Views/Shared/_Layout.cshtml
@@ -31,10 +31,12 @@
     </div>
     <div class="body-content">
         @RenderBody()
-        <hr />
-        <footer>
-            <p>&copy; @DateTime.Now.Year - Mimry</p>
-        </footer>
+        <div id="footerDiv" style="position:relative;">
+            <hr />
+            <footer>
+                <p>&copy; @DateTime.Now.Year - Mimry</p>
+            </footer>
+        </div>
     </div>
 
     @Scripts.Render("~/bundles/jquery")