@kitconcept/volto-light-theme 1.0.0-rc.6 → 1.0.0-rc.7

package/CHANGELOG.md

@@ -8,6 +8,16 @@
 
 <!-- towncrier release notes start -->
 
+## 1.0.0-rc.7 (2023-07-13)
+
+### Bugfix
+
+- Fix File content type @iRohitSingh [#17](https://github.com/kitconcept/volto-light-theme/pull/17)
+- Add idiomatic order CSS package @sneridagh
+  Fix margin in edit mode for all blocks @sneridagh [#142](https://github.com/kitconcept/volto-light-theme/pull/142)
+- Fix CSS for Accordion block. @danalvrz [#143](https://github.com/kitconcept/volto-light-theme/pull/143)
+
+
 ## 1.0.0-rc.6 (2023-07-12)
 
 ### Bugfix

package/dockerfiles/docker-compose.yml

@@ -14,7 +14,10 @@ services:
       - ${CURRENT_DIR}:/app/src/addons/${ADDON_PATH}/
     environment:
       RAZZLE_INTERNAL_API_PATH: http://backend:8080/Plone
-      RAZZLE_API_PATH: http://localhost:8080/Plone
+      # In case that you want to connect to and outside (non-docker) local instance
+      # coment the above, use the next line
+      # RAZZLE_INTERNAL_API_PATH: http://host.docker.internal:8080/Plone
+      RAZZLE_API_PATH: http://127.0.0.1:8080/Plone
       HOST: 0.0.0.0
     ports:
       - 3000:3000

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kitconcept/volto-light-theme",
-  "version": "1.0.0-rc.6",
+  "version": "1.0.0-rc.7",
   "description": "Volto Light Theme by kitconcept",
   "main": "src/index.js",
   "repository": {
@@ -37,6 +37,7 @@
     "prettier": "2.0.5",
     "razzle-plugin-scss": "4.2.18",
     "release-it": "^16.1.0",
+    "stylelint-config-idiomatic-order": "8.1.0",
     "stylelint-config-prettier": "9.0.4",
     "stylelint-config-sass-guidelines": "9.0.1",
     "stylelint-prettier": "1.1.2"

package/src/customizations/volto/components/theme/View/FileView.jsx

@@ -0,0 +1,132 @@
+/**
+ * OVERRIDE FileView.jsx
+ * REASON: BFS theme
+ * DATE: 2023-07-11
+ * DEVELOPER: @iRohitSingh
+ */
+
+/**
+ * File view component.
+ * @module components/theme/View/FileView
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Container } from 'semantic-ui-react';
+
+import { flattenToAppURL } from '@plone/volto/helpers';
+
+/**
+ * File view component class.
+ * @function FileView
+ * @params {object} content Content object.
+ * @returns {string} Markup of the component.
+ */
+const FileView = ({ content }) => (
+  <Container className="view-wrapper">
+    <h1 className="documentFirstHeading">
+      {content.title}
+      {content.subtitle && ` - ${content.subtitle}`}
+    </h1>
+    <div className="file-detail">
+      {content.description && (
+        <p className="documentDescription">{content.description}iRohitSingh</p>
+      )}
+      {content.file?.download && (
+        <>
+          <a href={flattenToAppURL(content.file.download)}>
+            {content.file.filename}
+          </a>{' '}
+          <span>
+            (
+            {(() => {
+              switch (content?.file['content-type']) {
+                case 'image/jpeg':
+                  return 'JPEG';
+                case 'image/png':
+                  return 'PNG';
+                case 'image/svg+xml':
+                  return 'SVG';
+                case 'image/gif':
+                  return 'GIF';
+                case 'application/pdf':
+                  return 'PDF';
+                case 'application/msexcel':
+                  return 'XLS';
+                case 'application/vnd.ms-excel':
+                  return 'XLS';
+                case 'application/msword':
+                  return 'DOC';
+                case 'application/mspowerpoint':
+                  return 'PPT';
+                case 'audio/mp4':
+                  return 'MP4';
+                case 'application/zip':
+                  return 'ZIP';
+                case 'video/webm':
+                  return 'WEBM';
+                case 'video/x-msvideo':
+                  return 'AVI';
+                case 'video/x-sgi-movie':
+                  return 'MOVIE';
+                case 'text/xml':
+                  return 'XML';
+                case 'text/plain':
+                  return 'TXT';
+                case 'text/calendar':
+                  return 'ICS';
+                case 'image/x-icon':
+                  return 'ICO';
+                case 'image/bmp':
+                  return 'BMP';
+                case 'audio/mpeg':
+                  return 'MP3';
+                case 'audio/wav':
+                  return 'WAV';
+                case 'application/json':
+                  return 'JSON';
+                case 'application/postscript':
+                  return 'PS';
+                case 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet':
+                  return 'XLSX';
+                case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
+                  return 'DOCX';
+                case 'application/xml':
+                  return 'XML';
+                case 'application/mshelp':
+                  return 'HLP';
+                case 'application/gzip':
+                  return 'GZ';
+                default:
+                  return '';
+              }
+            })()}{' '}
+            /{' '}
+            {content.file?.size < 1000000
+              ? Math.round(content.file.size / 1000)
+              : Math.round(content.file.size / 1000000)}
+            {content.file?.size < 1000000 ? 'KB' : 'MB'})
+          </span>
+        </>
+      )}
+    </div>
+  </Container>
+);
+
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+FileView.propTypes = {
+  content: PropTypes.shape({
+    title: PropTypes.string,
+    description: PropTypes.string,
+    file: PropTypes.shape({
+      download: PropTypes.string,
+      filename: PropTypes.string,
+    }),
+  }).isRequired,
+};
+
+export default FileView;

package/src/theme/_breadcrumbs.scss

@@ -7,7 +7,7 @@ body.view-contentsview {
 }
 
 #main .breadcrumbs {
-  padding: 2em 0;
+  padding: 20px 0;
   background-color: $lightgrey;
 
   .breadcrumb {
@@ -26,6 +26,10 @@ body.view-contentsview {
 
     .home {
       margin-right: 0.5em;
+
+      svg {
+        margin-bottom: -4px;
+      }
     }
 
     .section {

package/src/theme/_content.scss

@@ -120,7 +120,28 @@
 }
 
 .contenttype-file {
-  .content-area a {
-    text-decoration: underline;
+  .content-area {
+    .documentFirstHeading {
+      max-width: var(--default-container-width) !important;
+      margin-right: auto;
+      margin-left: auto;
+    }
+    .file-detail {
+      max-width: var(--narrow-container-width) !important;
+      margin-right: auto;
+      margin-left: auto;
+      .documentDescription {
+        padding-top: 40px;
+        padding-bottom: 40px;
+        margin-bottom: 0;
+      }
+
+      a {
+        text-decoration: underline;
+      }
+      span {
+        color: #808080;
+      }
+    }
   }
 }

package/src/theme/_layout.scss

@@ -44,6 +44,13 @@ $narrow-container-width: 620px !default;
   }
 }
 
+@mixin adjustMarginsToEditContainer($width) {
+  @container (max-width: #{$width + 2 * $spacing-medium}) {
+    margin-right: $spacing-medium;
+    margin-left: $spacing-medium;
+  }
+}
+
 // Container adjustments for dealing correctly with absoluted elements
 @mixin container-preference-order($zindex) {
   position: relative;
@@ -102,12 +109,16 @@ footer {
   @include layout-container-width();
 }
 
-.header-wrapper .header,
-.breadcrumbs .breadcrumb {
+.header-wrapper .header {
   @include layout-container-width();
   @include adjustMarginsToContainer($layout-container-width);
 }
 
+.breadcrumbs .breadcrumb {
+  @include default-container-width();
+  @include adjustMarginsToContainer($default-container-width);
+}
+
 // Content Layout Styling
 #page-document .blocks-group-wrapper {
   & > h2,
@@ -153,6 +164,7 @@ footer {
   & > .block.introduction .block-container,
   & > .block.teaser .teaser-item.default,
   & > .table-of-contents,
+  & > .accordion-block,
   & > .slate blockquote {
     @include default-container-width();
     @include adjustMarginsToContainer($default-container-width);
@@ -186,7 +198,7 @@ footer {
 #page-edit {
   [class*='block-editor-'] {
     @include layout-container-width();
-    @include adjustMarginsToContainer($layout-container-width);
+    @include adjustMarginsToEditContainer($layout-container-width);
   }
 }
 
@@ -205,7 +217,7 @@ footer {
   .block-editor-codeBlock,
   .block-editor-mermaidBlock {
     @include narrow-container-width();
-    @include adjustMarginsToContainer($narrow-container-width);
+    @include adjustMarginsToEditContainer($narrow-container-width);
   }
 
   .block-editor-title h1,
@@ -223,7 +235,7 @@ footer {
   .block-editor-teaser .teaser-item.default,
   .block-editor-toc {
     @include default-container-width();
-    @include adjustMarginsToContainer($default-container-width);
+    @include adjustMarginsToEditContainer($default-container-width);
   }
 
   .block-editor-slate,
@@ -232,7 +244,7 @@ footer {
   .block-editor-teaser,
   .block-editor-separator.has--align--left {
     @include layout-container-width();
-    @include adjustMarginsToContainer($layout-container-width);
+    @include adjustMarginsToEditContainer($layout-container-width);
   }
 }
 

package/src/theme/blocks/_accordion.scss

@@ -2,3 +2,54 @@
 .block.accordion [data-rbd-draggable-context-id] {
   margin-bottom: 2rem;
 }
+
+.accordion-block {
+  .ui.styled.accordion {
+    border-top: 1px solid $black;
+
+    &:last-child {
+      border-bottom: 1px solid $black;
+    }
+    .title.accordion-title {
+      padding: 20px 0 20px 0;
+      background-color: unset;
+
+      & > svg {
+        height: 50px !important;
+        fill: $grey !important;
+        transform: rotate(-90deg);
+      }
+
+      & > span {
+        @include introduction();
+        color: $darkGrey;
+      }
+
+      &.active > span {
+        color: $black;
+      }
+
+      &.active > svg {
+        fill: $black !important;
+        transform: rotate(180deg);
+      }
+    }
+
+    .block.listing {
+      &:first-child {
+        margin-top: 0;
+      }
+      .listing-item:last-child {
+        border-bottom: none !important;
+      }
+    }
+
+    .block:last-child {
+      margin-bottom: 0 !important;
+    }
+
+    .content {
+      padding: 0;
+    }
+  }
+}

package/src/theme/blocks/_grid.scss

@@ -129,6 +129,9 @@
   }
 
   .block.listing {
+    &.previous--has--same--backgroundColor:not(.has--headline) {
+      margin-top: 0;
+    }
     h2 {
       margin-bottom: 40px !important;
     }
@@ -144,7 +147,7 @@
 
   .block-editor-empty {
     padding: 0;
-    margin: 1rem 0.5rem 1rem 0.5rem !important;
+    margin: 0.5rem 0.5rem 0.5rem 0.5rem !important;
   }
 }
 

package/src/theme/blocks/_listing.scss

@@ -185,12 +185,13 @@
     }
   }
 
-  &.previous--is--same--block-type.previous--has--same--backgroundColor:not(.has--headline) {
+  &.previous--has--same--backgroundColor:not(.has--headline) {
     margin-top: 200px;
   }
 
-  p + &:not(.has--headline) {
-    margin-top: 80px;
+  .documentFirstHeading
+    + &.previous--has--same--backgroundColor:not(.has--headline) {
+    margin-top: 0;
   }
 }