Merge pull request #29 from MITLibraries/unified-prototyping

Updates to three display types: item detail, item browse, and search results

Author: matt-bernhardt

asset/css/base.css

@@ -1,5 +1,8 @@
 @import "breadcrumbs";
 @import "navigation";
+@import "resource-list";
 @import "search";
+@import "search-results";
 @import "site-page-pagination";
 @import "block-layout/all";
+@import "resource-page/all";

asset/scss/content/_all.scss

@@ -0,0 +1,92 @@
+.browse-controls {
+    align-items: center;
+    background: $gray-l4;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    margin-bottom: 1rem;
+    padding: 1rem;
+
+    .browse-label {
+        margin-right: 1rem;
+    }
+
+    form.sorting {
+        margin: 0;
+    }
+}
+
+.pagination {
+    align-items: center;
+    background: $gray-l4;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    margin: 0;
+    padding: 1rem;
+
+    form {
+        margin: 0;
+        margin-right: 2rem;
+    }
+
+    .row-count {
+        margin-left: 2rem;
+    }
+}
+
+ul.resource-list {
+    list-style-type: none;
+    padding-left: unset;
+
+    .resource {
+        border-top: 1px solid $gray-l3;
+        margin: 0;
+
+        a {
+            display: flow-root;
+            margin: 0;
+            padding: 1rem;
+            text-align: left;
+            text-decoration: none;
+
+            img {
+                border: 1px solid $gray-l3;
+                box-shadow: 0 0 5px $gray-l3;
+                float: right;
+                max-width: 100px;
+                max-height: 200px;
+                padding: 0.5rem;
+            }
+
+            .description {
+                display: -webkit-box;
+                -webkit-line-clamp: 3;
+                -webkit-box-orient: vertical;
+                overflow: hidden;
+            }
+
+            .resource-name {
+                font-size: 1.9rem;
+                font-weight: bold;
+            }
+
+            &:focus,
+            &:hover {
+                background: $gray-l3;
+
+                img {
+                    background: $white;
+                }
+
+                .resource-name {
+                    text-decoration: underline;
+                }
+            }
+        }
+
+        &:last-child {
+            border-bottom: 1px solid $gray-l3;
+        }
+    }
+}

asset/scss/content/_resource-list.scss

@@ -0,0 +1,49 @@
+div.results {
+    margin-bottom: 2rem;
+
+    >ul {
+        border-bottom: 1px solid $gray-l3;
+        list-style-type: none;
+        padding: 0;
+
+        li {
+            border-top: 1px solid $gray-l3;
+            margin: 0;
+            padding: 0;
+
+            a {
+                display: flow-root;
+                padding: 1rem;
+                text-decoration: none;
+
+                img {
+                    border: 1px solid $gray-l3;
+                    box-shadow: 0 0 5px $gray-l3;
+                    float: right;
+                    margin: 0 0 0 1rem;
+                    max-width: 10rem;
+                    max-height: 20rem;
+                    padding: 0.5rem;
+                }
+
+                .resource-name {
+                    font-size: 1.9rem;
+                }
+            }
+        }
+    }
+
+    &.items li a {
+        min-height: 12rem;
+    }
+
+    >ul li a:focus,
+    >ul li a:hover {
+        background: $gray-l4;
+        text-decoration: underline;
+
+        img {
+            background: $white;
+        }
+    }
+}

asset/scss/content/_search-results.scss

@@ -1,7 +1,6 @@
-body .resource {
+body div.resource {
     margin: 1rem;
     padding: 0;
-    text-align: center;
 
     a {
         display: block;

asset/scss/content/block-layout/_resource.scss

@@ -0,0 +1,4 @@
+@import "dl";
+@import "linked-resources";
+@import "map";
+@import "media-embed";

asset/scss/content/resource-page/_all.scss

@@ -0,0 +1,23 @@
+.values-container dl,
+dl.resource-class,
+dl.item-sets,
+dl.site-pages {
+    .property {
+        align-items: start;
+        display: grid;
+        grid-template-columns: 1fr 4fr;
+        gap: 1rem;
+        margin-bottom: 2rem;
+
+        dt {
+            grid-column: 1;
+        }
+
+        dd {
+            align-self: end;
+            grid-column: 2;
+            line-height: 1.2;
+            margin-bottom: 0;
+        }
+    }
+}