feat: base theme for tintigny

MWEBTTY-7
IMIO · Jul 23, 2024 · 967f9c8 · 967f9c8
1 parent dca9ca9
commit 967f9c8
Show file tree

Hide file tree

Showing 17 changed files with 728 additions and 0 deletions.
diff --git a/tintigny/assets/svg/close.svg b/tintigny/assets/svg/close.svg
diff --git a/tintigny/assets/svg/placeholder.jpg b/tintigny/assets/svg/placeholder.jpg
diff --git a/tintigny/icons/barceloneta-apple-touch-icon-114x114-precomposed.png b/tintigny/icons/barceloneta-apple-touch-icon-114x114-precomposed.png
diff --git a/tintigny/icons/barceloneta-apple-touch-icon-144x144-precomposed.png b/tintigny/icons/barceloneta-apple-touch-icon-144x144-precomposed.png
diff --git a/tintigny/icons/barceloneta-apple-touch-icon-57x57-precomposed.png b/tintigny/icons/barceloneta-apple-touch-icon-57x57-precomposed.png
diff --git a/tintigny/icons/barceloneta-apple-touch-icon-72x72-precomposed.png b/tintigny/icons/barceloneta-apple-touch-icon-72x72-precomposed.png
diff --git a/tintigny/icons/barceloneta-apple-touch-icon-precomposed.png b/tintigny/icons/barceloneta-apple-touch-icon-precomposed.png
diff --git a/tintigny/icons/barceloneta-apple-touch-icon.png b/tintigny/icons/barceloneta-apple-touch-icon.png
diff --git a/tintigny/icons/favicon.ico b/tintigny/icons/favicon.ico
diff --git a/tintigny/index.html b/tintigny/index.html
@@ -0,0 +1,70 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Tintigny</title>
+    <link rel="shortcut icon" type="image/x-icon"
+    href="icons/barceloneta-favicon.ico" />
+    <link rel="apple-touch-icon"
+        href="icons/barceloneta-apple-touch-icon.png" />
+    <link rel="apple-touch-icon-precomposed" sizes="144x144"
+        href="icons/barceloneta-apple-touch-icon-144x144-precomposed.png" />
+    <link rel="apple-touch-icon-precomposed" sizes="114x114"
+        href="icons/barceloneta-apple-touch-icon-114x114-precomposed.png" />
+    <link rel="apple-touch-icon-precomposed" sizes="72x72"
+        href="icons/barceloneta-apple-touch-icon-72x72-precomposed.png" />
+    <link rel="apple-touch-icon-precomposed" sizes="57x57"
+        href="icons/barceloneta-apple-touch-icon-57x57-precomposed.png" />
+    <link rel="apple-touch-icon-precomposed"
+        href="icons/barceloneta-apple-touch-icon-precomposed.png" />
+  </head>
+  <body>
+    <section id="portal-toolbar">
+    </section>
+    <div class="outer-wrapper">
+      <header id="content-header">
+        <div class="container">
+          <header id="portal-top">
+          </header>
+          <div id="anonymous-actions">
+          </div>
+        </div>
+        <div class="mask-menu"></div>
+      </header>
+      <div id="mainnavigation-wrapper">
+        <div id="mainnavigation">
+        </div>
+      </div>
+      <div id="hero" class="principal">
+        <div class="container">
+          <div class="gigantic">
+          </div>
+        </div>
+      </div>
+      <div id="above-content-wrapper">
+          <div id="above-content">
+          </div>
+      </div>
+      <div class="container">
+        <div class="row">
+          <aside id="global_statusmessage" class="col-12"></aside>
+        </div>
+        <main id="main-container" class="row">
+          <section id="portal-column-content">
+          </section>
+          <aside id="portal-column-one">
+          </aside>
+          <aside id="portal-column-two" role="complementary">
+          </aside>
+        </main><!--/row-->
+      </div><!--/container-->
+    </div> <!--/outer-wrapper -->
+      <footer id="portal-footer-wrapper">
+        <div class="container" id="portal-footer">
+          <div class="doormat row"></div>
+          <div class="copyright row"><div class="col-12"></div></div>
+          <div class="colophon row"><div class="col-12"></div></div>
+          <div class="site-actions row"><div class="col-12"></div></div>
+        </div>
+      </footer>
+  </body>
+</html>
diff --git a/tintigny/manifest.cfg b/tintigny/manifest.cfg
@@ -0,0 +1,21 @@
+[theme]
+title = Template for tintigny
+description = A Diazo based Plone theme
+preview = preview.png
+rules = /++theme++tintigny/rules.xml
+prefix = /++theme++tintigny
+doctype = <!DOCTYPE html>
+
+enabled-bundles =
+disabled-bundles =
+
+production-js = /++theme++tintigny/dist/js/theme.js
+production-css = /++theme++tintigny/dist/css/theme.css
+tinymce-content-css = /++theme++tintigny/dist/css/theme.css
+
+
+#[theme:overrides]
+#directory = template-overrides
+
+[theme:parameters]
+# portal_url = python: portal.absolute_url()
diff --git a/tintigny/package.json b/tintigny/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "@imiobe/plonetheme-smartweb-tintigny",
+  "description": "iA.Smartweb base theme for Plone",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "maintainers": [
+    {
+      "name": "Thomas Lambert (iMio)",
+      "email": "[email protected]",
+      "url": "https://imio.be"
+    }
+  ],
+  "homepage": "https://tintigny.preprod.imio.be",
+  "keywords": [
+    "imio",
+    "plone",
+    "smartweb"
+  ],
+  "version": "0.0.2",
+  "license": "GPL version 2",
+  "scripts": {
+    "stylelint": "npx stylelint 'src/**/*.{css,less}' 'src/**/*.{css,less}",
+    "stylelint:fix": "npx stylelint 'src/**/*.{css,less}' --fix",
+    "prettier": "npx prettier --single-quote --check 'src/**/*.{js,jsx,ts,tsx,json,css,scss,sass}'",
+    "prettier:fix": "npx prettier --single-quote --write 'src/**/*.{js,jsx,ts,tsx,json,css,scss,sass}'",
+    "dry-release": "release-it --dry-run",
+    "release": "release-it"
+  },
+  "devDependencies": {
+    "@plone/plonetheme-barceloneta-base": "3.0.0",
+    "@imiobe/plonetheme-smartweb-base": "0.0.6",
+    "@popperjs/core": "^2.11.6"
+  }
+}
diff --git a/tintigny/preview.png b/tintigny/preview.png
diff --git a/tintigny/rules.xml b/tintigny/rules.xml
@@ -0,0 +1,146 @@
+<?xml version="1.0" encoding="utf-8"?>
+<rules xmlns="http://namespaces.plone.org/diazo"
+       xmlns:css="http://namespaces.plone.org/diazo/css"
+       xmlns:xhtml="http://www.w3.org/1999/xhtml"
+       xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+       xmlns:xi="http://www.w3.org/2001/XInclude">
+
+  <!-- <xi:include href="++theme++barceloneta/grid-col-marker.xml"/> -->
+
+  <theme href="index.html" />
+  <notheme css:if-not-content="#visual-portal-wrapper" />
+
+  <rules css:if-content="#portal-top">
+    <!-- Attributes -->
+    <copy attributes="*" css:theme="html" css:content="html" />
+    <!-- Base tag -->
+    <before css:theme="title" css:content="base" />
+    <!-- Title -->
+    <replace css:theme="title" css:content="title" />
+    <!-- Pull in Plone Meta -->
+    <after css:theme-children="head" css:content="head meta" />
+    <!-- Don't use Plone icons, use the theme's -->
+    <drop css:content="head link[rel='apple-touch-icon']" />
+    <drop css:content="head link[rel='shortcut icon']" />
+    <!-- CSS -->
+    <after css:theme-children="head" css:content="head link" />
+    <after css:theme-children="head" css:content="head style" />
+    <!-- Script -->
+    <after css:theme-children="head" css:content="head script" />
+  </rules>
+
+  <!-- Copy over the id/class attributes on the body tag. This is important for per-section styling -->
+  <copy attributes="*" css:content="body" css:theme="body" />
+
+  <!-- move global nav -->
+  <replace css:theme-children="#mainnavigation" css:content-children="#portal-mainnavigation" method="raw" />
+
+  <!-- Content header -->
+  <replace css:theme="#portal-top" css:content-children="#portal-top" />
+
+  <!-- full-width breadcrumb -->
+  <replace css:theme="#above-content" css:content="#viewlet-above-content" />
+
+  <!-- Central column -->
+  <replace css:theme-children="#portal-column-content" css:content-children="#portal-column-content"></replace>
+
+  <!-- Alert message -->
+  <replace css:theme-children="#global_statusmessage" css:content-children="#global_statusmessage" />
+
+  <!-- Left column -->
+  <after css:theme-children="#portal-column-one" css:content-children="#portal-column-one"></after>
+  <drop css:theme="#portal-column-one" css:if-not-content="#portal-column-one" />
+
+  <!-- Right column -->
+  <after css:theme-children="#portal-column-two" css:content-children="#portal-column-two"></after>
+  <drop css:theme="#portal-column-two" css:if-not-content="#portal-column-two" />
+
+  <before
+        css:theme-children="#portal-footer"
+        css:content=".smartweb_footer"
+  />
+  <!-- Footer -->
+  <xsl:variable name="footer_portlets" select="//footer[@id='portal-footer-wrapper']//div[@class='portletWrapper']/*[not(contains(@id,'portal-colophon')) and not(contains(@id,'portal-footer-signature')) and not(contains(@class,'portletActions'))]"></xsl:variable>
+  <xsl:variable name="footer_portlets_count" select="count($footer_portlets)"></xsl:variable>
+
+
+  <!-- Replace footer information with Plone version. -->
+  <replace
+      css:theme-children="#portal-footer .copyright > div"
+      css:content-children="#portal-footer-wrapper #portal-footer-signature .card-body"
+      />
+  <drop css:theme="#portal-footer .copyright" css:if-not-content="#portal-footer-wrapper #portal-footer-signature" />
+
+  <!-- Replace colophon information with Plone version. -->
+  <replace
+      css:theme-children="#portal-footer .colophon > div"
+      css:content-children="#portal-footer-wrapper #portal-colophon .card-body"
+      />
+  <drop css:theme="#portal-footer .colophon" css:if-not-content="#portal-footer-wrapper #portal-colophon" />
+
+  <!-- Replace site-actions with Plone version. -->
+  <replace
+      css:theme-children="#portal-footer .site-actions > div"
+      css:content="#portal-footer-wrapper .actions-site_actions"
+      />
+  <drop css:theme="#portal-footer .site-actions" css:if-not-content="#portal-footer-wrapper .actions-site_actions" />
+
+  <!-- Move all other footer portlets into doormat area. -->
+  <replace css:theme-children="#portal-footer .doormat">
+    <xsl:variable name="columns">
+      <xsl:if test="$footer_portlets_count=1">col-md-12</xsl:if>
+      <xsl:if test="$footer_portlets_count=2">col-md-6</xsl:if>
+      <xsl:if test="$footer_portlets_count=3">col-md-4</xsl:if>
+      <xsl:if test="$footer_portlets_count=4">col-md-3</xsl:if>
+      <xsl:if test="$footer_portlets_count>4">col-md-4</xsl:if>
+    </xsl:variable>
+    <xsl:for-each select="$footer_portlets">
+      <div class="col-xs-12 {$columns}">
+        <xsl:for-each select=".">
+          <xsl:choose>
+            <xsl:when css:test=".card">
+              <xsl:choose>
+                <xsl:when css:test=".card-header:not(.titleless)">
+                  <div class="headline"><h2><xsl:value-of css:select=".card-header" /></h2></div>
+                </xsl:when>
+              </xsl:choose>
+              <xsl:choose>
+                <xsl:when css:test=".portletCollection">
+                  <ul>
+                    <xsl:for-each css:select=".portletItem">
+                      <li>
+                        <a><xsl:copy-of select="a/attribute::*" /><xsl:apply-templates select="./a/text()" /></a>
+                        <small><xsl:value-of css:select=".portletItemDetails" /></small>
+                      </li>
+                    </xsl:for-each>
+                  </ul>
+                </xsl:when>
+                <xsl:otherwise>
+                  <xsl:apply-templates css:select=".card-body" />
+                </xsl:otherwise>
+              </xsl:choose>
+              <xsl:if css:test=".card-footer">
+                <p><xsl:apply-templates select="./node()[@class='card-footer']/node()" /></p>
+              </xsl:if>
+            </xsl:when>
+            <xsl:otherwise>
+              <xsl:apply-templates select="./node()" />
+            </xsl:otherwise>
+          </xsl:choose>
+        </xsl:for-each>
+      </div>
+    </xsl:for-each>
+  </replace>
+
+  <!-- Add additional footer content, like script tags (from site settings). -->
+  <after
+      css:theme-children="html body"
+      content="//footer[@id='portal-footer-wrapper']/*[not(@class='row')]"
+      />
+
+  <!-- toolbar -->
+  <replace css:theme="#portal-toolbar" css:content="#edit-bar" css:if-not-content=".ajax_load" css:if-content=".userrole-authenticated" />
+  <drop css:theme="#portal-toolbar" css:if-content=".userrole-anonymous" />
+  <replace css:theme="#anonymous-actions" css:content-children="#portal-personaltools-wrapper" css:if-not-content=".ajax_load" css:if-content=".userrole-anonymous" />
+
+</rules>
diff --git a/tintigny/src/index.js b/tintigny/src/index.js
@@ -0,0 +1,34 @@
+import "./scss/main.scss";
+$( document ).ready(function() {
+    $('#portal-globalnav-collapse').on('show.bs.collapse', function () {
+        document.body.classList.add('open-nav-overflow');
+        document.documentElement.classList.add('open-nav-overflow');
+    })
+    $('#portal-globalnav-collapse').on('hidden.bs.collapse', function () {
+        document.body.classList.remove('open-nav-overflow');
+        document.documentElement.classList.remove('open-nav-overflow');
+    })
+
+    // For custom slider
+    if($('.sectionnews .swiper').length > 0){
+        var newsSwiper = $('.sectionnews .swiper')[0].swiper
+        newsSwiper.params.spaceBetween=30;
+        newsSwiper.params.speed=1000,
+        newsSwiper.update();
+    }
+    if($('.sectionevents .swiper').length > 0){
+        var eventsSwiper = $('.sectionevents .swiper')[0].swiper
+        eventsSwiper.params.spaceBetween=30;
+        eventsSwiper.params.speed=1000,
+        eventsSwiper.update();
+    }
+
+    // For banner
+
+    let checkBanner = document.querySelector("#portal-header #banner");
+    let headerCustom = document.getElementById("portal-header");
+
+    if (checkBanner != null) {
+       headerCustom.classList.add("header-custom");
+    }
+});
diff --git a/tintigny/src/scss/main.scss b/tintigny/src/scss/main.scss
@@ -0,0 +1,12 @@
+//// VARIABLES
+// ... add your variables here
+
+$enable-roboto-webfont: false;
+//// IMPORTS
+// Import barceloneta files from node_modules --load-path=node_modules
+// @import "@plone/plonetheme-barceloneta-base/scss/barceloneta";
+// @import "@imiobe/plonetheme-smartweb-base/src/scss/main";
+@import './variables';
+@import '../../../base/src/scss/main.scss';
+//// STYLES
+// ... add your styles here