diff --git a/package.json b/package.json index 52349430a..ad0ac393d 100644 --- a/package.json +++ b/package.json @@ -6,11 +6,11 @@ "@babel/core": "^7.16.0", "@formio/protected-eval": "^1.2.1", "@fortawesome/fontawesome-free": "^6.1.1", - "@gemeente-denhaag/button": "0.2.3-alpha.158", - "@gemeente-denhaag/components-css": "0.1.1-alpha.166", - "@gemeente-denhaag/design-tokens-components": "^0.2.3-alpha.227", - "@gemeente-denhaag/form-progress": "0.1.1-alpha.33", - "@gemeente-denhaag/icons": "0.2.3-alpha.158", + "@gemeente-denhaag/button": "0.2.3-alpha.242", + "@gemeente-denhaag/components-css": "0.1.1-alpha.188", + "@gemeente-denhaag/design-tokens-components": "^0.2.3-alpha.242", + "@gemeente-denhaag/form-progress": "0.1.1-alpha.117", + "@gemeente-denhaag/icons": "0.2.3-alpha.242", "@open-formulieren/design-tokens": "^0.2.0", "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3", "@sentry/react": "^6.13.2", diff --git a/src/components/ButtonsToolbar/index.js b/src/components/ButtonsToolbar/index.js index ee5b304a4..0c7fc3a28 100644 --- a/src/components/ButtonsToolbar/index.js +++ b/src/components/ButtonsToolbar/index.js @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import {Literal, LiteralsProvider} from 'components/Literal'; -import {Toolbar, ToolbarList} from 'components/Toolbar'; +import {Toolbar} from 'components/Toolbar'; import Loader from 'components/Loader'; import LogoutButton from 'components/LogoutButton'; import {SUBMISSION_ALLOWED} from 'components/constants'; @@ -21,7 +21,7 @@ const ButtonsToolbar = ({literals, canSubmitStep, canSubmitForm, loginRequired, onClick={onNavigatePrevPage} > */} - +
{ showSubmitButton && ( - +
{isAuthenticated ? : null} diff --git a/src/scss/components/_layout.scss b/src/scss/components/_layout.scss index 3ddf81af8..c0f0e1071 100644 --- a/src/scss/components/_layout.scss +++ b/src/scss/components/_layout.scss @@ -1,15 +1,87 @@ .openforms-layout { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; - grid-column-gap: 40px; grid-auto-flow: column; - margin-inline: 100px; -} - -.openforms-layout__row { - grid-column: 3 / 11; } .openforms-layout__header { grid-column: 1 / 13; } + + + +/* Den Haag XXS */ +@media (max-width: 359px) { + .openforms-layout { + grid-column-gap: 8px; + } + + .openforms-layout__header { + margin-left: 22px; + } + + .openforms-layout__row { + grid-column: 1 / 13; + margin-inline: 22px; + } +} + +/* Den Haag XS */ +@media (min-width: 360px) { + .openforms-layout { + grid-column-gap: 8px; + } + + .openforms-layout__header { + margin-left: 22px; + } + + .openforms-layout__row { + grid-column: 1 / 13; + margin-inline: 22px; + } +} + +/* Den Haag S */ +@media (min-width: 768px) { + .openforms-layout { + grid-column-gap: 16px; + } + + .openforms-layout__header { + margin-left: 100px; + } + + .openforms-layout__row { + grid-column: 3 / 11; + margin-inline: 0px; + } +} + +/* Den Haag M */ +@media (min-width: 1024px) { + .openforms-layout { + grid-column-gap: 24px; + } +} + +/* Den Haag L */ +@media (min-width: 1280px) { + .openforms-layout { + grid-column-gap: 32px; + } +} + +/* Den Haag XL */ +@media (min-width: 1768px) { + .openforms-layout { + grid-column-gap: 40px; + } +} + +/* Den Haag XXL */ +@media (min-width: 2160px) { + .openforms-layout { + grid-column-gap: 48x; + } +} \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 82e161a0c..813ecce6c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1621,48 +1621,48 @@ resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-6.1.1.tgz#bf5d45611ab74890be386712a0e5d998c65ee2a1" integrity sha512-J/3yg2AIXc9wznaVqpHVX3Wa5jwKovVF0AMYSnbmcXTiL3PpRPfF58pzWucCwEiCJBp+hCNRLWClTomD8SseKg== -"@gemeente-denhaag/baseprops@0.2.3-alpha.158": - version "0.2.3-alpha.158" - resolved "https://registry.yarnpkg.com/@gemeente-denhaag/baseprops/-/baseprops-0.2.3-alpha.158.tgz#933c1878ebcaca5dd36debd07071503e01d151ad" - integrity sha512-S59wH06iiU5RZKHL+02WIkKnxFygHHJiH1hW3gdwlvxchzlRLXWWtYDM2VfDLemxBqM0yqqGKabwbvsbqKN5dw== - -"@gemeente-denhaag/button@0.2.3-alpha.158": - version "0.2.3-alpha.158" - resolved "https://registry.yarnpkg.com/@gemeente-denhaag/button/-/button-0.2.3-alpha.158.tgz#23d05b73b6b8b56c2fa2e1248260be9bf33ce220" - integrity sha512-PX3Yl/xA6+kgIi7ZWT3l7sCb2bZ6XRgm9LpNFtqbYE4PwMf1ln8IzkmwGrT0ntBq5rfJRv4kC/v0oh1oIslakg== - dependencies: - "@gemeente-denhaag/baseprops" "0.2.3-alpha.158" - -"@gemeente-denhaag/components-css@0.1.1-alpha.166": - version "0.1.1-alpha.166" - resolved "https://registry.yarnpkg.com/@gemeente-denhaag/components-css/-/components-css-0.1.1-alpha.166.tgz#d8c12e0b0994be99a112c64f3faffb709c32dd24" - integrity sha512-CselSZ8rGN+EKxc45u4WDJ9cyIDj0EAk5YEaM5NjC1rb4kQRekWiZfKQiSFxNgVWonOqhABLQLNfdkCHlCOFKw== - -"@gemeente-denhaag/design-tokens-components@^0.2.3-alpha.227": - version "0.2.3-alpha.227" - resolved "https://registry.yarnpkg.com/@gemeente-denhaag/design-tokens-components/-/design-tokens-components-0.2.3-alpha.227.tgz#83beef454ca76503958e40a93691de47eb443934" - integrity sha512-kiz9yMhlmqSamzrctmxyds+Afed0tuBcC0PHPC/WPnoKP8w6IzHfUsCozwh3VJVEhfIOn3ATHk7wCiePLZ/hXw== - -"@gemeente-denhaag/form-progress@0.1.1-alpha.33": - version "0.1.1-alpha.33" - resolved "https://registry.yarnpkg.com/@gemeente-denhaag/form-progress/-/form-progress-0.1.1-alpha.33.tgz#ea9f00db004905595b7df8502ba79919df44e017" - integrity sha512-ULwEz5OCgBrgwAxhyqSyNKp0entdDlFxoxuJ88wcyQfBCzqfzdDaU5k6Jqd9Om4hi21ILmT96C9iq3rIM0jmQA== - dependencies: - "@gemeente-denhaag/icons" "0.2.3-alpha.158" - "@gemeente-denhaag/link" "0.2.3-alpha.158" - -"@gemeente-denhaag/icons@0.2.3-alpha.158": - version "0.2.3-alpha.158" - resolved "https://registry.yarnpkg.com/@gemeente-denhaag/icons/-/icons-0.2.3-alpha.158.tgz#1f0614b645fe94dd8ee5d536e646544d59e45c34" - integrity sha512-d171JmpU4SziJtqu54ENrLo0BTZpbEIaqvtjNZ/ArquXqucyDlIV+Oy243i0s0XG+9/Jne06/moJN72ezfDi/g== - -"@gemeente-denhaag/link@0.2.3-alpha.158": - version "0.2.3-alpha.158" - resolved "https://registry.yarnpkg.com/@gemeente-denhaag/link/-/link-0.2.3-alpha.158.tgz#0199109623d1a9abd96d2ee33a58214212f72b27" - integrity sha512-6EoCW51n0CsuZYN2FWJczEjlB3+HSVwQH2mAjzv1lCP7rsFbdfEZrA1SpNQvRmM0VbI9j63AYSxIGSLb/HvAOw== - dependencies: - "@gemeente-denhaag/baseprops" "0.2.3-alpha.158" - "@gemeente-denhaag/icons" "0.2.3-alpha.158" +"@gemeente-denhaag/baseprops@0.2.3-alpha.242": + version "0.2.3-alpha.242" + resolved "https://registry.yarnpkg.com/@gemeente-denhaag/baseprops/-/baseprops-0.2.3-alpha.242.tgz#d90674fde35457ad50d67304b5c759bd91b06a2a" + integrity sha512-N/iuXs+zWrwgoHP7RXfUcAixaDbZ8G54UxL4zvzC/yYuwNGtLqdMjHgnoZpDpUm9MEe0QBPXQpBOA/mSTB1otg== + +"@gemeente-denhaag/button@0.2.3-alpha.242": + version "0.2.3-alpha.242" + resolved "https://registry.yarnpkg.com/@gemeente-denhaag/button/-/button-0.2.3-alpha.242.tgz#a5d736507985f96aa0d52e71670c18afb447cb99" + integrity sha512-NM6/yA9MOjZVfRUQdr3ZSfYZZhQCc0mjQnCPJ/Czv6haO30bfSIcMTM4cR9lELrZJltr8Vk/XhT/qs7Fwp07Yg== + dependencies: + "@gemeente-denhaag/baseprops" "0.2.3-alpha.242" + +"@gemeente-denhaag/components-css@0.1.1-alpha.188": + version "0.1.1-alpha.188" + resolved "https://registry.yarnpkg.com/@gemeente-denhaag/components-css/-/components-css-0.1.1-alpha.188.tgz#85e1a80e80c7a745ec75c4241eed42292d5554fd" + integrity sha512-SyvB2YT4iZsPxBerz84sfjtOrAcSoLPVg4YNkBbz+n+8FqoW8tCaHIaCKk1xF5P6/i5VoA0+InSoWGj/cGWBNw== + +"@gemeente-denhaag/design-tokens-components@^0.2.3-alpha.242": + version "0.2.3-alpha.242" + resolved "https://registry.yarnpkg.com/@gemeente-denhaag/design-tokens-components/-/design-tokens-components-0.2.3-alpha.242.tgz#074f45a7d67bfd966dada50873d3c03ec405f828" + integrity sha512-qAmTOSPjwB1l++zd3kubBGZ9m2EvvOsyleWOCHNr6+YWdSqd2cuF0XtHzB1SAKwemxGSUV9s1ypJDSjhE8JHWw== + +"@gemeente-denhaag/form-progress@0.1.1-alpha.117": + version "0.1.1-alpha.117" + resolved "https://registry.yarnpkg.com/@gemeente-denhaag/form-progress/-/form-progress-0.1.1-alpha.117.tgz#4eed50369a64ac08ae5b2f6443c578ed3d18f2f9" + integrity sha512-4ZaZU1LRGXBD0SXZUWv7+CPfNaAU0oKIxLkMS2kgZvw90GfoqKvEThIacAm/Y33h3OkAdIwxS96RDjZin3RePQ== + dependencies: + "@gemeente-denhaag/icons" "0.2.3-alpha.242" + "@gemeente-denhaag/link" "0.2.3-alpha.242" + +"@gemeente-denhaag/icons@0.2.3-alpha.242": + version "0.2.3-alpha.242" + resolved "https://registry.yarnpkg.com/@gemeente-denhaag/icons/-/icons-0.2.3-alpha.242.tgz#7e6f32d95d1a0b3947f8744bbb57278e5be2f41a" + integrity sha512-lDb8C/nw51Fwfn8hmzOniSZflgoHFJipw5E1dfYCVyorS3fR8uLHw4xqWkjPRKFD3c+NrUZmvcMbdF2GSw37bQ== + +"@gemeente-denhaag/link@0.2.3-alpha.242": + version "0.2.3-alpha.242" + resolved "https://registry.yarnpkg.com/@gemeente-denhaag/link/-/link-0.2.3-alpha.242.tgz#9c557d354441b1130a9ca461e2297b6c6ab90f8a" + integrity sha512-wDj6QgsLaGf+4iGHMALq1b8zmGe7JvJLD0+mH4mniwRkl8sGA/PhoGR82GdXDjiI2CdlJFM1/pbhD3/mpvLgug== + dependencies: + "@gemeente-denhaag/baseprops" "0.2.3-alpha.242" + "@gemeente-denhaag/icons" "0.2.3-alpha.242" "@humanwhocodes/config-array@^0.9.2": version "0.9.5"