@eeacms/volto-eea-design-system 1.0.4 → 1.0.6

package/CHANGELOG.md

@@ -4,6 +4,35 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [1.0.6](https://github.com/eea/volto-eea-design-system/compare/1.0.5...1.0.6) - 29 March 2023
+
+#### :rocket: New Features
+
+- feat: add viewport-(width/height) less functions [Miu Razvan - [`68300a3`](https://github.com/eea/volto-eea-design-system/commit/68300a3c34e66954c7ef3a6e52baa37431fbfa9e)]
+
+#### :nail_care: Enhancements
+
+- refactor(Banner.jsx): use flattenToAppURL helper function to get image source URL [Miu Razvan - [`24b13d7`](https://github.com/eea/volto-eea-design-system/commit/24b13d7c09a498ca889d413135c9abc4e6cab9ad)]
+- change(docusaurus): set full class name for remix icons [David Ichim - [`f435e10`](https://github.com/eea/volto-eea-design-system/commit/f435e10034b04cab4aeb301d8521559f98be299e)]
+
+#### :house: Internal changes
+
+- style(theme): update container width and margins in eea theme [Miu Razvan - [`3e4446a`](https://github.com/eea/volto-eea-design-system/commit/3e4446a3af641ddca03f1f2833dd6e79535feb98)]
+
+#### :hammer_and_wrench: Others
+
+- horizontal overflow hidden in view mode [Miu Razvan - [`f395f27`](https://github.com/eea/volto-eea-design-system/commit/f395f276df003480a219bae639f87bebcf35799f)]
+### [1.0.5](https://github.com/eea/volto-eea-design-system/compare/1.0.4...1.0.5) - 28 March 2023
+
+#### :rocket: New Features
+
+- feat: improve full-width class [Miu Razvan - [`70bba7e`](https://github.com/eea/volto-eea-design-system/commit/70bba7e295dd237e7c579ef0446ff05e0c8529d8)]
+
+#### :bug: Bug Fixes
+
+- fix(banner): Add missing divider for time tag #327 from eea/banner-metadata [ichim-david - [`c46a583`](https://github.com/eea/volto-eea-design-system/commit/c46a58336ec9eb2ce75d2637f3197f417e8ca326)]
+- fix(banner): Add missing divider for time tag [kreafox - [`7d68c39`](https://github.com/eea/volto-eea-design-system/commit/7d68c395d368a267baef4422df6e72f63d099b75)]
+
 ### [1.0.4](https://github.com/eea/volto-eea-design-system/compare/1.0.3...1.0.4) - 27 March 2023
 
 #### :rocket: New Features

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-design-system",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "@eeacms/volto-eea-design-system: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/ui/Banner/Banner.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Container, Icon, Button, Grid } from 'semantic-ui-react';
 import PropTypes from 'prop-types';
+import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
 import { formatDate } from '@plone/volto/helpers/Utils/Date';
 import config from '@plone/volto/registry';
 
@@ -25,7 +26,7 @@ const socialPlatforms = {
 };
 
 export const getImageSource = (image) => {
-  if (image?.scales?.huge) return image.scales.huge.download;
+  if (image?.scales?.huge) return flattenToAppURL(image.scales.huge.download);
   return null;
 };
 

package/theme/plugins.js

@@ -0,0 +1,41 @@
+module.exports = {
+  install(less, pluginManager, functions) {
+    functions.add('vw', function (percentage) {
+      return new less.tree.Call('calc', [
+        new less.tree.Operation(
+          '*',
+          [
+            new less.tree.Call('var', [
+              new less.tree.UnicodeDescriptor('--vw'),
+              new less.tree.Dimension(
+                1,
+                new less.tree.Unit(['vw'], null, 'vw'),
+              ),
+            ]),
+            percentage,
+          ],
+          true,
+        ),
+      ]);
+    });
+
+    functions.add('vh', function (percentage) {
+      return new less.tree.Call('calc', [
+        new less.tree.Operation(
+          '*',
+          [
+            new less.tree.Call('var', [
+              new less.tree.UnicodeDescriptor('--vh'),
+              new less.tree.Dimension(
+                1,
+                new less.tree.Unit(['vh'], null, 'vh'),
+              ),
+            ]),
+            percentage,
+          ],
+          true,
+        ),
+      ]);
+    });
+  },
+};

package/theme/theme.less

@@ -10,6 +10,8 @@
 
 @themesFolderEEA: '~eea-volto-themes';
 
+@plugin "./plugins";
+
 /*--------------------
    Site Variables
 ---------------------*/

package/theme/themes/eea/elements/container.overrides

@@ -2,6 +2,35 @@
          Theme Overrides
 *******************************/
 
+body {
+  .contentWidth(0);
+  --toolbar-width: 0px;
+  --sidebar-width: 0px;
+
+  &.has-toolbar {
+    --toolbar-width: @toolbarWidth;
+  }
+
+  &.has-toolbar-collapsed {
+    --toolbar-width: @collapsedWidth;
+  }
+
+  &.has-sidebar {
+    --sidebar-width: @sidebarWidth;
+  }
+
+  &.has-sidebar-collapsed {
+    --sidebar-width: @collapsedWidth;
+  }
+
+  @media screen and (max-width: calc(@tabletBreakpoint - 1px)) {
+    &.has-toolbar,
+    &.has-toolbar-collapsed {
+      --toolbar-width: 0px;
+    }
+  }
+}
+
 /* All Sizes */
 .ui.container {
   transition: width 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045),
@@ -88,10 +117,6 @@
   }
 }
 
-body {
-  .contentWidth(0);
-}
-
 // WIP container fixes for edit interface
 @media only screen and (max-width: 1600px) {
   .has-sidebar.section-add .container,
@@ -116,33 +141,16 @@ body {
 
 .has--size--full:not(.block-editor-columnsBlock),
 .full-width {
+  @toolbarWidthCSS: var(--toolbar-width, 0px);
+  @sidebarWidthCSS: var(--sidebar-width, 0px);
+  @scrollbarWidthCSS: var(--scrollbar-width, @scrollbarWidth);
   position: relative;
-  width: calc(100vw - var(--scrollbar-width, @scrollbarWidth)) !important;
+  width: calc(100vw - @toolbarWidthCSS - @sidebarWidthCSS - @scrollbarWidthCSS) !important;
   right: 50%;
   left: 50%;
   max-width: initial !important;
-  margin-left: calc(-50vw + var(--scrollbar-width, @scrollbarWidth) / 2) !important;
-  margin-right: calc(-50vw + var(--scrollbar-width, @scrollbarWidth) / 2) !important;
-}
-
-@media only screen and (min-width: @largestMobileScreen) {
-  body.has-toolbar {
-    .has--size--full:not(.block-editor-columnsBlock),
-    .full-width {
-      width: calc(100vw - @toolbarWidth - var(--scrollbar-width, @scrollbarWidth)) !important;
-      margin-left: calc(-50vw + (@toolbarWidth + var(--scrollbar-width, @scrollbarWidth)) / 2) !important;
-      margin-right: calc(-50vw + (@toolbarWidth + var(--scrollbar-width, @scrollbarWidth)) / 2) !important;
-    }
-  }
-
-  body.has-toolbar-collapsed {
-    .has--size--full:not(.block-editor-columnsBlock),
-    .full-width {
-      width: calc(100vw - @toolbarWidthMin - var(--scrollbar-width, @scrollbarWidth)) !important;
-      margin-left: calc(-50vw + (var(--scrollbar-width, @scrollbarWidth) + @toolbarWidthMin) / 2) !important;
-      margin-right: calc(-50vw + (var(--scrollbar-width, @scrollbarWidth) + @toolbarWidthMin) / 2) !important;
-    }
-  }
+  margin-left: calc(-50vw + (@toolbarWidthCSS + @sidebarWidthCSS + @scrollbarWidthCSS) / 2) !important;
+  margin-right: calc(-50vw + (@toolbarWidthCSS + @sidebarWidthCSS + @scrollbarWidthCSS) / 2) !important;
 }
 
 .has--size--full:not(.block-editor-columnsBlock) .ui.grid {
@@ -192,4 +200,3 @@ body {
   }
 
 }
-

package/theme/themes/eea/elements/container.variables

@@ -2,6 +2,10 @@
             Container
 *******************************/
 
+@toolbarWidth: 80px;
+@sidebarWidth: 375px;
+@collapsedWidth: 20px;
+
 /*-------------------
        Element
 --------------------*/

package/theme/themes/eea/extras/banner.less

@@ -41,15 +41,15 @@
       }
 
       .metadata {
+        margin-bottom: @rem-space-3;
         font-size: @mobileMetadataFontSize;
         line-height: @mobileMetadataLineHeight;
-        margin-bottom: @rem-space-3;
 
         .field.type {
           font-weight: @metadataTypeFontWeight;
         }
 
-        span.field:not(:last-child)::after {
+        .field:not(:last-child)::after {
           content: @metadataFieldDividerContent;
         }
       }
@@ -110,10 +110,10 @@
 /*Share Popup*/
 
 .ui.popup.share-popup {
+  position: initial; // without position initial popper cannot correctly place popup
+  min-width: @sharePopupMinWidth;
   padding: @sharePopupPadding;
   filter: @sharePopupFilter;
-  min-width: @sharePopupMinWidth;
-  position: initial; // without position initial popper cannot correctly place popup
 
   p {
     font-size: @sharePopupFontSize;