Theme for Villerslaville

IMIO · Dec 17, 2024 · e4b2786 · e4b2786
1 parent 241ab81
commit e4b2786
Show file tree

Hide file tree

Showing 55 changed files with 2,370 additions and 0 deletions.
diff --git a/villerslaville/assets/svg/bg-agenda.jpg b/villerslaville/assets/svg/bg-agenda.jpg
diff --git a/villerslaville/assets/svg/bg-une.png b/villerslaville/assets/svg/bg-une.png
diff --git a/villerslaville/assets/svg/btn-plus.svg b/villerslaville/assets/svg/btn-plus.svg
diff --git a/villerslaville/assets/svg/close.svg b/villerslaville/assets/svg/close.svg
diff --git a/villerslaville/assets/svg/logo.png b/villerslaville/assets/svg/logo.png
diff --git a/villerslaville/assets/svg/placeholder.jpg b/villerslaville/assets/svg/placeholder.jpg
diff --git a/villerslaville/icons/android-chrome-144x144.png b/villerslaville/icons/android-chrome-144x144.png
diff --git a/villerslaville/icons/android-chrome-192x192.png b/villerslaville/icons/android-chrome-192x192.png
diff --git a/villerslaville/icons/android-chrome-256x256.png b/villerslaville/icons/android-chrome-256x256.png
diff --git a/villerslaville/icons/android-chrome-36x36.png b/villerslaville/icons/android-chrome-36x36.png
diff --git a/villerslaville/icons/android-chrome-384x384.png b/villerslaville/icons/android-chrome-384x384.png
diff --git a/villerslaville/icons/android-chrome-48x48.png b/villerslaville/icons/android-chrome-48x48.png
diff --git a/villerslaville/icons/android-chrome-512x512.png b/villerslaville/icons/android-chrome-512x512.png
diff --git a/villerslaville/icons/android-chrome-72x72.png b/villerslaville/icons/android-chrome-72x72.png
diff --git a/villerslaville/icons/android-chrome-96x96.png b/villerslaville/icons/android-chrome-96x96.png
diff --git a/villerslaville/icons/apple-touch-icon-1024x1024.png b/villerslaville/icons/apple-touch-icon-1024x1024.png
diff --git a/villerslaville/icons/apple-touch-icon-114x114.png b/villerslaville/icons/apple-touch-icon-114x114.png
diff --git a/villerslaville/icons/apple-touch-icon-120x120.png b/villerslaville/icons/apple-touch-icon-120x120.png
diff --git a/villerslaville/icons/apple-touch-icon-144x144.png b/villerslaville/icons/apple-touch-icon-144x144.png
diff --git a/villerslaville/icons/apple-touch-icon-152x152.png b/villerslaville/icons/apple-touch-icon-152x152.png
diff --git a/villerslaville/icons/apple-touch-icon-167x167.png b/villerslaville/icons/apple-touch-icon-167x167.png
diff --git a/villerslaville/icons/apple-touch-icon-180x180.png b/villerslaville/icons/apple-touch-icon-180x180.png
diff --git a/villerslaville/icons/apple-touch-icon-57x57.png b/villerslaville/icons/apple-touch-icon-57x57.png
diff --git a/villerslaville/icons/apple-touch-icon-60x60.png b/villerslaville/icons/apple-touch-icon-60x60.png
diff --git a/villerslaville/icons/apple-touch-icon-72x72.png b/villerslaville/icons/apple-touch-icon-72x72.png
diff --git a/villerslaville/icons/apple-touch-icon-76x76.png b/villerslaville/icons/apple-touch-icon-76x76.png
diff --git a/villerslaville/icons/apple-touch-icon-precomposed.png b/villerslaville/icons/apple-touch-icon-precomposed.png
diff --git a/villerslaville/icons/apple-touch-icon.png b/villerslaville/icons/apple-touch-icon.png
diff --git a/villerslaville/icons/favicon-16x16.png b/villerslaville/icons/favicon-16x16.png
diff --git a/villerslaville/icons/favicon-32x32.png b/villerslaville/icons/favicon-32x32.png
diff --git a/villerslaville/icons/favicon-48x48.png b/villerslaville/icons/favicon-48x48.png
diff --git a/villerslaville/icons/favicon.ico b/villerslaville/icons/favicon.ico
diff --git a/villerslaville/icons/logo.png b/villerslaville/icons/logo.png
diff --git a/villerslaville/icons/manifest.webmanifest b/villerslaville/icons/manifest.webmanifest
@@ -0,0 +1,65 @@
+{
+  "dir": "auto",
+  "lang": "en-US",
+  "display": "standalone",
+  "orientation": "any",
+  "start_url": "/?homescreen=1",
+  "background_color": "#fff",
+  "theme_color": "#fff",
+  "icons": [
+    {
+      "src": "android-chrome-36x36.png",
+      "sizes": "36x36",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "android-chrome-48x48.png",
+      "sizes": "48x48",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "android-chrome-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "android-chrome-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "android-chrome-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "android-chrome-256x256.png",
+      "sizes": "256x256",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "android-chrome-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any"
+    }
+  ]
+}
diff --git a/villerslaville/index.html b/villerslaville/index.html
@@ -0,0 +1,72 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Villerslaville</title>
+    <link rel="apple-touch-icon" sizes="57x57" href="/icons/apple-touch-icon-57x57.png">
+    <link rel="apple-touch-icon" sizes="60x60" href="/icons/apple-touch-icon-60x60.png">
+    <link rel="apple-touch-icon" sizes="72x72" href="/icons/apple-touch-icon-72x72.png">
+    <link rel="apple-touch-icon" sizes="76x76" href="/icons/apple-touch-icon-76x76.png">
+    <link rel="apple-touch-icon" sizes="114x114" href="/icons/apple-touch-icon-114x114.png">
+    <link rel="apple-touch-icon" sizes="120x120" href="/icons/apple-touch-icon-120x120.png">
+    <link rel="apple-touch-icon" sizes="144x144" href="/icons/apple-touch-icon-144x144.png">
+    <link rel="apple-touch-icon" sizes="152x152" href="/icons/apple-touch-icon-152x152.png">
+    <link rel="apple-touch-icon" sizes="167x167" href="/icons/apple-touch-icon-167x167.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon-180x180.png">
+    <link rel="apple-touch-icon" sizes="1024x1024" href="/icons/apple-touch-icon-1024x1024.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="228x228" href="/icons/coast-228x228.png">
+    <link rel="manifest" href="/icons/manifest.webmanifest">
+    <link rel="shortcut icon" href="/icons/favicon.ico">
+  </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/villerslaville/manifest.cfg b/villerslaville/manifest.cfg
@@ -0,0 +1,21 @@
+[theme]
+title = Template for villerslaville
+description = A Diazo based Plone theme
+preview = preview.png
+rules = /++theme++villerslaville/rules.xml
+prefix = /++theme++villerslaville
+doctype = <!DOCTYPE html>
+
+enabled-bundles =
+disabled-bundles =
+
+production-js = /++theme++villerslaville/dist/js/theme.js
+production-css = /++theme++villerslaville/dist/css/theme.css
+tinymce-content-css = /++theme++villerslaville/dist/css/theme.css
+
+
+#[theme:overrides]
+#directory = template-overrides
+
+[theme:parameters]
+# portal_url = python: portal.absolute_url()
diff --git a/villerslaville/package.json b/villerslaville/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "@imiobe/plonetheme-smartweb-villerslaville",
+  "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://villerslaville.preprod.imio.be",
+  "keywords": [
+    "imio",
+    "plone",
+    "smartweb"
+  ],
+  "version": "0.0.1",
+  "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.1.0",
+    "@popperjs/core": "^2.11.6"
+  }
+}
diff --git a/villerslaville/preview.png b/villerslaville/preview.png
diff --git a/villerslaville/rules.xml b/villerslaville/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/villerslaville/src/index.js b/villerslaville/src/index.js
@@ -0,0 +1,32 @@
+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");
+  }
+});