data reports pages ui

components/01-atoms/buttons/_buttons.scss

@@ -30,6 +30,35 @@ $button-colors: (
 // Mixin to define colors for one or more schemes.
 // Simply pass the color scheme to the mixin to get the colors defined in the map.
 // e.g. @include buttonColors(default) will get all of the colors defined in the "default" section.
+@mixin flag_fav_base {
+  content: '';
+  display: inline-block;
+  height: 20px;
+  width: 22px;
+  margin-bottom: -5px;
+  background-color: $green;
+  -webkit-mask-size: cover;
+  mask-size: cover;
+}
+
+@mixin flag_favorite {
+  &:before {
+    @include flag_fav_base;
+    --webkit-mask: url('../images/icons/oda_fav_outline.svg') 50% 50% no-repeat;
+    mask: url('../images/icons/oda_fav_outline.svg') 50% 50% no-repeat;
+    margin-right: .5em;
+  }
+}
+
+@mixin flag_unfavorite {
+  &:before {
+    @include flag_fav_base;
+    --webkit-mask: url('../images/icons/oda_unfav.svg') 50% 50% no-repeat;
+    mask: url('../images/icons/oda_unfav.svg') 50% 50% no-repeat;
+    margin-right: .5em;
+  }
+}
+
 @mixin buttonColors(
   $scheme,
   $pallate: map-get($button-colors, $scheme),

components/01-atoms/links/link/_link.scss

@@ -132,6 +132,11 @@ h1, h2, h3, h4, h5, h6 {
   }
 }
 
+.oda-left-ext {
+  padding-left: 1.8em;
+  background: url(../images/icons/oda_external.svg) top left no-repeat;
+}
+
 .oda-right-ext {
   padding-right: 1.8em;
   background: url(../images/icons/oda_external.svg) top right no-repeat;

components/01-atoms/text/text/_text.scss

@@ -27,20 +27,31 @@
   font-family: 'Roboto Condensed', sans-serif;
 }
 
+@mixin filter-icon-base {
+  content: '';
+  display: inline-block;
+  height: 20px;
+  width: 20px;
+  background-image: url('../images/icons/oda_filter_by.svg');
+  background-repeat: no-repeat;
+  background-size: contain;
+  margin-bottom: -5px;
+}
+
 @mixin filter-icon {
   &:after {
-    content: '';
-    display: inline-block;
-    height: 20px;
-    width: 20px;
-    background-image: url('../images/icons/oda_filter_by.svg');
-    background-repeat: no-repeat;
-    background-size: contain;
-    margin-bottom: -5px;
+    @include filter-icon-base;
     margin-left: .5em;
   }
 }
 
+@mixin filter-icon-left {
+  &:before {
+    @include filter-icon-base;
+    margin-right: .5em;
+  }
+}
+
 body {
   color: $gray-dark;
 
@@ -63,6 +74,10 @@ body {
   @include filter-icon;
 }
 
+.filter-icon-left {
+  @include filter-icon-left;
+}
+
 .blockquote {
   font-style: italic;
   border-left: solid 3px clr(accent);

components/04-templates/_default.scss

@@ -432,7 +432,8 @@ $main-width: calc(100% - (#{$sidebar-width} + #{$gutter}));
 
 .domain-oda.path-frontpage {
   .main,
-  .dingo-layout {
+  .dingo-layout,
+  .layout--onecol {
     display: block;
   }
 
@@ -529,23 +530,60 @@ $main-width: calc(100% - (#{$sidebar-width} + #{$gutter}));
   }
 }
 
+.page-node-type-oda-page {
+  .layout__region--content > div:has(picture) {
+    margin-left: 0;
+    margin-bottom: 1.5rem;
+    @include large {
+      margin-left: -100px;
+    }
+  }
+}
+
 .page-node-type-data-report {
   .flag a.button-internal {
     border: 1px solid $green;
   }
 
+  .action-flag a {
+    @include flag_favorite;
+    &:hover::before {
+      background-color: $white;
+    }
+  }
+
+  .action-unflag a {
+    @include flag_unfavorite;
+    &:hover::before {
+      background-color: $white;
+    }
+  }
+
   .layout__region--content > div:has(img) {
     border: 1px solid $gray-lightest;
     margin-bottom: 2rem;
   }
 
   .layout__region--right-sidebar {
+
+    & > div:first-child,
+    & > div:nth-child(2) .views-row > div {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
     .views-element-container {
-      .views-row:has(a.oda-right-ext) {
-        border-bottom: 1px solid $gray-lightest;
-        border-top: 1px solid $gray-lightest;
-        padding: 1rem 0;
-        margin: 1rem 0;
+      .views-row {
+        svg {
+          display: none;
+        }
+        &:has(a.oda-right-ext) {
+          border-bottom: 1px solid $gray-lightest;
+          border-top: 1px solid $gray-lightest;
+          padding: 1rem 0;
+          margin: 1rem 0;
+        }
       }
     }
 

components/04-templates/_oda_reports.scss

@@ -85,6 +85,9 @@
       .image {
         border: 1px solid $gray-light;
         margin-right: 1rem;
+        div {
+          width: 120px;
+        }
       }
     }
   }