Merge dev to master

.github/workflows/projects.yml

@@ -0,0 +1,25 @@
+name: projects
+
+on:
+  issues:
+    types:
+      - opened
+  pull_requests:
+    types:
+      - opened
+
+jobs:
+  add-to-project:
+    name: Add opened issue or PR to CommITCrowd project
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/[email protected]
+        with:
+          # URL of the project to add issues to
+          project-url: https://github.com/orgs/svsticky/projects/7
+          # A GitHub personal access token with write access to the project
+          github-token: ${{ secrets.ADD_TO_PROJECT_PAT }}
+          # A comma-separated list of labels to use as a filter for issue to be added
+          # labeled: # optional
+          # The behavior of the labels filter, AND to match all labels, OR to match any label, NOT to exclude any listed label (default is OR)
+          # label-operator: # optional

.gitignore

@@ -70,3 +70,6 @@ pnpm-lock.yaml
 .yarn-integrity
 # semantic dist
 src/semantic/dist
+
+# IDEA
+.idea/

src/components/IntroInformation.jsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { Button, Card } from 'semantic-ui-react';
+import { graphql, StaticQuery } from 'gatsby';
+import { getLanguage, getTranslation, metadata } from '../data/i18n';
+
+class IntroInformation extends React.Component {
+  render() {
+    const language =
+      typeof window !== 'undefined'
+        ? getLanguage(window)
+        : metadata.defaultLocale;
+    let intro_information = this.props.data.allContentfulIntroInformation.nodes.filter(
+      d => d.node_locale === language
+    )[0]; //get only the first element
+
+    let color = this.props.data.contentfulBoard.color;
+    console.log(color);
+
+    return (
+      <>
+        <div>
+          <h2>{intro_information.title}</h2>
+          <Card fluid>
+            <div>{intro_information.description.description}</div>
+            <Button
+              href={intro_information.introWebsiteUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="button"
+              style={{ backgroundColor: color, color: 'white' }}
+            >
+              {intro_information.linkToWebsiteButtonText}
+            </Button>
+          </Card>
+        </div>
+      </>
+    );
+  }
+}
+
+const introInformationQuery = graphql`
+  query introInformationQuery {
+    allContentfulIntroInformation {
+      nodes {
+        node_locale
+        title
+        linkToWebsiteButtonText
+        description {
+          description
+        }
+        introWebsiteUrl
+      }
+    }
+    contentfulBoard(current: { eq: true }) {
+      color
+    }
+  }
+`;
+
+export default props => (
+  <StaticQuery
+    query={introInformationQuery}
+    render={data => <IntroInformation data={data} {...props} />}
+  />
+);

src/components/layout/GridDryQueries.jsx

@@ -23,6 +23,9 @@ const IndexWrapper = styled.div`
   .mainPartner {
     grid-area: mainPartner;
   }
+  .introInformation {
+    grid-area: introInformation;
+  }
 
   .banner {
     display: grid;
@@ -38,6 +41,7 @@ const IndexWrapper = styled.div`
       grid-template-areas:
         'logo'
         'banner'
+        'introInformation'
         'news'
         'news'
         'drinks'
@@ -64,6 +68,7 @@ const IndexWrapper = styled.div`
       grid-template-columns: 1fr 1fr;
       grid-template-areas:
         'banner banner'
+        'introInformation introInformation'
         'news news'
         'drinks mainPartner'
         'jobs activity';
@@ -80,6 +85,7 @@ const IndexWrapper = styled.div`
       grid-template-columns: 3fr 1fr;
       grid-template-areas:
         'banner banner'
+        'news introInformation'
         'news drinks'
         'news mainPartner'
         'news jobs'

src/semantic/src/site/globals/site.variables

@@ -2,4 +2,4 @@
      User Global Variables
 *******************************/
 
-@primaryColor: #61518f;
+@primaryColor: #197052;

src/semantic/src/themes/default/globals/reset.overrides

@@ -147,6 +147,8 @@ sup {
 
 img {
   border-style: none;
+    max-width: 100%;
+    height: auto;
 }
 
 /* Forms

src/static-pages/index.jsx

@@ -11,6 +11,7 @@ import MainPartnerBanner from '$/components/mainpartner/Banner';
 import IndexWrapper from '$/components/layout/GridDryQueries';
 import FeaturedJobWidget from '$/components/jobs/FeaturedJobWidget';
 import ActivityWidget from '$/components/activities/ActivityWidget';
+import IntroInformation from '$/components/IntroInformation';
 
 import logo from '$/images/sticky-logo-text.svg';
 
@@ -34,6 +35,9 @@ const Index = ({ data }) => {
           <div className="news">
             <News itemsPerPage="5" />
           </div>
+          <div className="introInformation">
+            <IntroInformation />
+          </div>
           <div className="drinks">
             <Drinks />
           </div>

src/static-pages/vereniging/huisstijl.jsx

@@ -71,6 +71,52 @@ const tdStyle = {
   padding: '10px',
 };
 
+function rgbToCymk(rgb) {
+  let computedC = 1 - rgb.r / 255;
+  let computedM = 1 - rgb.g / 255;
+  let computedY = 1 - rgb.b / 255;
+
+  let minCMY = Math.min(computedC, Math.min(computedM, computedY));
+  computedC = Math.round(((computedC - minCMY) / (1 - minCMY)) * 100);
+  computedY = Math.round(((computedY - minCMY) / (1 - minCMY)) * 100);
+  computedM = Math.round(((computedM - minCMY) / (1 - minCMY)) * 100);
+  let computedK = Math.round(minCMY * 100);
+
+  return {
+    c: computedC,
+    y: computedY,
+    m: computedM,
+    k: computedK,
+  };
+}
+
+function hexToRgb(hex) {
+  // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
+  let shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+  hex = hex.replace(shorthandRegex, function(m, r, g, b) {
+    return r + r + g + g + b + b;
+  });
+
+  let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result
+    ? {
+        r: parseInt(result[1], 16),
+        g: parseInt(result[2], 16),
+        b: parseInt(result[3], 16),
+      }
+    : null;
+}
+
+function cymkColor(hex) {
+  const cymk = rgbToCymk(hexToRgb(hex));
+  return `${cymk.c}%, ${cymk.y}%, ${cymk.m}%, ${cymk.k}%`;
+}
+
+function rgbColor(hex) {
+  const rgb = hexToRgb(hex);
+  return `${rgb.r}, ${rgb.g}, ${rgb.b}`;
+}
+
 const Huisstijl = props => {
   const language =
     typeof window !== 'undefined'
@@ -116,11 +162,15 @@ const Huisstijl = props => {
           <tbody>
             <tr>
               <td style={tdStyle}>CYMK</td>
-              <td style={tdStyle}>0%, 94%, 83%, 50%</td>
+              <td style={tdStyle}>
+                {cymkColor(props.data.contentfulBoard.color)}
+              </td>
             </tr>
             <tr>
               <td style={tdStyle}>RGB</td>
-              <td style={tdStyle}>128, 8, 22</td>
+              <td style={tdStyle}>
+                {rgbColor(props.data.contentfulBoard.color)}
+              </td>
             </tr>
             <tr>
               <td style={tdStyle}>HEX</td>

src/templates/JobTemplate.jsx

@@ -31,14 +31,16 @@ const JobView = ({ data }) => {
               <Button primary href={'mailto:' + job.contactPerson.email} fluid>
                 {getTranslation(job.node_locale, 'vacancy.mail')}
               </Button>
-              <Button
-                primary
-                href={'tel:' + job.contactPerson.phone}
-                fluid
-                className="call-button"
-              >
-                {getTranslation(job.node_locale, 'vacancy.call')}
-              </Button>
+              {job.contactPerson.phone && (
+                <Button
+                  primary
+                  href={'tel:' + job.contactPerson.phone}
+                  fluid
+                  className="call-button"
+                >
+                  {getTranslation(job.node_locale, 'vacancy.call')}
+                </Button>
+              )}
             </Card>
           )}
         </div>