feat(frontend): 💄 Aggiunti componenti MDC e relativi stili

In particolare:
- Aggiunti i seguenti componenti: Card (e tutti sottocomponenti), Layout a griglia (righe, colonne e celle), Icone Material Design.
- Stili SCSS: Aggiunti stili globali, Cards, FAB. Aggiunti nuovi colori e nuovi font per intestazioni e corpo

.idea/inspectionProfiles/Project_Default.xml

@@ -74,9 +74,10 @@
     <inspection_tool class="HtmlUnknownAttribute" enabled="true" level="WARNING" enabled_by_default="true">
       <option name="myValues">
         <value>
-          <list size="2">
+          <list size="3">
             <item index="0" class="java.lang.String" itemvalue="slot" />
             <item index="1" class="java.lang.String" itemvalue="class" />
+            <item index="2" class="java.lang.String" itemvalue="tabindex" />
           </list>
         </value>
       </option>

package.json

@@ -14,6 +14,18 @@
     "dependencies": {
         "@inertiajs/inertia": "^0.10.0",
         "@maicol07/inertia-mithril": "^0.3.3",
+        "@material/card": "^12.0.0",
+        "@material/layout-grid": "^12.0.0",
+        "@material/mwc-button": "^0.22.1",
+        "@material/mwc-checkbox": "^0.22.1",
+        "@material/mwc-fab": "^0.22.1",
+        "@material/mwc-formfield": "^0.22.1",
+        "@material/mwc-select": "^0.22.1",
+        "@material/mwc-textarea": "^0.22.1",
+        "@material/mwc-textfield": "^0.22.1",
+        "@material/ripple": "^12.0.0",
+        "@material/theme": "^12.0.0",
+        "@mdi/font": "^5.9.55",
         "jquery": "^3.6.0",
         "mithril": "^2.0.4"
     },

resources/js/Components/Card/Actions.js

@@ -0,0 +1,11 @@
+import Component from '../Component';
+
+export default class Actions extends Component {
+  view(vnode) {
+    return (
+      <div class={`mdc-card__actions ${vnode.attrs.fullbleed ? 'mdc-card__actions--full-bleed' : ''}`}>
+        {vnode.children}
+      </div>
+    );
+  }
+}

resources/js/Components/Card/Card.js

@@ -0,0 +1,27 @@
+import {MDCRipple} from '@material/ripple';
+import Mithril from 'mithril';
+import Component from '../Component';
+
+export default class Card extends Component {
+  view(vnode) {
+    return <div
+      class={
+        `mdc-card 
+        ${vnode.attrs.outlined ? 'mdc-card--outlined' : ''} 
+        ${vnode.attrs['columnspan-desktop'] ? `mdc-layout-grid__cell--span-${vnode.attrs['columnspan-desktop']}-desktop` : ''} 
+        ${vnode.attrs['columnspan-tablet'] ? `mdc-layout-grid__cell--span-${vnode.attrs['columnspan-tablet']}-tablet` : ''} 
+        ${vnode.attrs['columnspan-phone'] ? `mdc-layout-grid__cell--span-${vnode.attrs['columnspan-phone']}-phone` : ''} 
+        ${vnode.attrs.order ? `mdc-layout-grid__cell--order-${vnode.attrs.order}` : ''} 
+        ${vnode.attrs.align ? `mdc-layout-grid__cell--align-${vnode.attrs.align}` : ''} 
+        ${vnode.attrs.class ?? ''}`
+      }
+      style={vnode.attrs.style ?? ''}>
+      {vnode.children}
+    </div>;
+  }
+
+  oncreate(vnode: Mithril.VnodeDOM) {
+    super.oncreate(vnode);
+    $('.mdc-card__primary-action').each((index, element) => new MDCRipple(element));
+  }
+}

resources/js/Components/Card/Content.js

@@ -0,0 +1,11 @@
+import Component from '../Component';
+
+export default class Content extends Component {
+  view(vnode) {
+    return (
+      <div class="mdc-card__content">
+        {vnode.children}
+      </div>
+    );
+  }
+}

resources/js/Components/Card/Media.js

@@ -0,0 +1,14 @@
+import Component from '../Component';
+
+export default class Media extends Component {
+  view(vnode) {
+    return (
+      <div class={
+        `mdc-card__media ${vnode.attrs.noscaling ? '' : 'mdc-card__media--16-9'} 
+        ${vnode.attrs.square ? 'mdc-card__media--square' : ''}`
+      } style={vnode.attrs.background ? `background-image: url("${vnode.attrs.background}");` : ''}>
+        <div class="mdc-card__media-content">{vnode.attrs.title ?? ''}</div>
+      </div>
+    );
+  }
+}

resources/js/Components/Card/PrimaryAction.js

@@ -0,0 +1,12 @@
+import Component from '../Component';
+
+export default class PrimaryAction extends Component {
+  view(vnode) {
+    return (
+      <div class="mdc-card__primary-action" tabindex="0">
+        <div class="mdc-card__ripple"/>
+        {vnode.children}
+      </div>
+    );
+  }
+}

resources/js/Components/Grid/Cell.js

@@ -0,0 +1,20 @@
+import Component from '../Component';
+
+export default class Cell extends Component {
+  view(vnode) {
+    return <div
+      class={
+        `mdc-layout-grid__cell 
+        ${vnode.attrs.columnspan ? `mdc-layout-grid__cell--span-${vnode.attrs.columnspan}` : ''} 
+        ${vnode.attrs['columnspan-desktop'] ? `mdc-layout-grid__cell--span-${vnode.attrs['columnspan-desktop']}-desktop` : ''} 
+        ${vnode.attrs['columnspan-tablet'] ? `mdc-layout-grid__cell--span-${vnode.attrs['columnspan-tablet']}-tablet` : ''} 
+        ${vnode.attrs['columnspan-phone'] ? `mdc-layout-grid__cell--span-${vnode.attrs['columnspan-phone']}-phone` : ''} 
+        ${vnode.attrs.order ? `mdc-layout-grid__cell--order-${vnode.attrs.order}` : ''} 
+        ${vnode.attrs.align ? `mdc-layout-grid__cell--align-${vnode.attrs.align}` : ''} 
+        ${vnode.attrs.class ?? ''}`
+      }
+      {...vnode.attrs}>
+      {vnode.children}
+    </div>;
+  }
+}

resources/js/Components/Grid/LayoutGrid.js

@@ -0,0 +1,15 @@
+import Component from '../Component';
+
+export default class LayoutGrid extends Component {
+  view(vnode) {
+    return <div
+      class={
+        `mdc-layout-grid ${vnode.attrs.fixed ? 'mdc-layout-grid--fixed-column-width' : ''}
+        ${vnode.attrs.align ? `mdc-layout-grid--align-${vnode.attrs.align}` : ''}
+        ${vnode.attrs.class}`
+      }
+      style={vnode.attrs.style}>
+      {vnode.children}
+    </div>;
+  }
+}

resources/js/Components/Grid/Row.js

@@ -0,0 +1,7 @@
+import Component from '../Component';
+
+export default class Row extends Component {
+  view(vnode) {
+    return <div {...vnode.attrs} class={`mdc-layout-grid__inner ${vnode.attrs.class}`}>{vnode.children}</div>;
+  }
+}

resources/js/Components/Mdi.js

@@ -0,0 +1,14 @@
+import Component from './Component';
+
+export default class Mdi extends Component {
+  view(vnode) {
+    return <i {...vnode.attrs} class={`mdi mdi-${vnode.attrs.icon} ${vnode.attrs.class ?? ''}`} />;
+    /*
+    Quando MWC supporterà pienamente le icone SVG potremo
+    import * as mdi from '@mdi/js';
+    import {camelCase} from 'lodash/string';
+    return <svg class={`mdi ${vnode.attrs.class ?? ''}`} {...vnode.attrs} viewBox={vnode.attrs.viewBox ?? '0 0 24 24'}>
+      <path d={vnode.attrs.icon ? mdi[camelCase(`mdi-${vnode.attrs.icon}`)] : ''} />
+    </svg>; */
+  }
+}

resources/scss/_material.scss

@@ -0,0 +1,162 @@
+@use "variables";
+@use '~@material/theme' with (
+    $primary: variables.$primary,
+    $secondary: variables.$secondary
+);
+@use "~@material/card";
+@use "~@material/layout-grid/mdc-layout-grid";
+@use "~@mdi/font";
+
+@include card.core-styles;
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    color: var(--mdc-theme-text-primary-on-background, black);
+    font-family: #{variables.$headings_font};
+}
+
+p,
+small {
+    color: var(--mdc-theme-text-primary-on-background, black);
+    font-family: #{variables.$body_font};
+}
+
+body {
+    background-color: var(--mdc-theme-background, #fff);
+}
+
+/* ---------------------------
+    MDC Cards
+--------------------------- */
+.mdc-card {
+    padding: 16px;
+}
+
+.mdc-card__thumbnail {
+    padding-right: 16px;
+    font-size: 24px;
+}
+
+.mdc-card__title {
+    margin-top: 0;
+    margin-bottom: 0;
+    font-family: var(--mdc-typography-headline1-font-family, variables.$body_font);
+    font-size: 1.25rem;
+    font-weight: 500;
+    letter-spacing: 0.0125em;
+    line-height: 2rem;
+}
+
+.mdc-card__subhead {
+    display: block;
+    font-family: var(--mdc-typography-subtitle1-font-family, variables.$body_font);
+}
+
+.mdc-card__supporting-text {
+    display: block;
+    padding-top: 16px;
+    font-family: var(--mdc-typography-font-family, variables.$body_font);
+}
+
+.mdc-card__title,
+.mdc-card__subhead,
+.mdc-card__supporting-text {
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    text-decoration: inherit;
+    text-transform: inherit;
+}
+
+.mdc-card__subhead,
+.mdc-card__supporting-text {
+    font-size: 0.875rem;
+    font-weight: 400;
+    letter-spacing: 0.0178571429em;
+    line-height: 1.25rem;
+    opacity: 0.6;
+}
+
+/* ---------------------------
+    MDC Sticky FABs
+--------------------------- */
+
+mwc-fab.sticky {
+    position: fixed;
+    right: 16px;
+    bottom: 16px;
+}
+
+/* ---------------------------
+    MDC Theme and Typography
+--------------------------- */
+:root {
+    --mdc-theme-primary: #{variables.$primary};
+    --mdc-theme-primary2: #{variables.$primary}; // Fix for MWC Drawer styling
+    --mdc-theme-secondary: #{variables.$secondary};
+    --mdc-theme-background: #fff;
+    --mdc-theme-surface: #fff;
+    --mdc-theme-error: #b00020;
+    --mdc-theme-text-primary-on-background: #000d;
+    --mdc-theme-text-icon-on-background: #00000060;
+    --mdc-theme-outline-color: #e0e0e0;
+    --mdc-typography-font-family: #{variables.$body_font};
+    --mdc-typography-button-font-family: #{variables.$headings_font};
+
+    @each $type in headline1, headline2, headline3, headline4, headline5, headline6, subtitle1, subtitle2 {
+        --mdc-typography-#{$type}-font-family: #{variables.$body_font};
+        --mdc-typography-#{$type}-font-weight: 500;
+    }
+}
+
+.mdc-high-contrast {
+    --mdc-theme-primary: #{lighten(variables.$primary, 100%)};
+    --mdc-theme-primary2: #{lighten(variables.$primary, 50%)}; // Fix for MWC Drawer styling
+    --mdc-theme-secondary: #{variables.$secondary};
+    --mdc-theme-on-primary: #000;
+    --mdc-theme-on-secondary: #000;
+    --mdc-theme-error: #cf6679;
+    --mdc-theme-text-primary-on-background: #fff;
+    --mdc-theme-text-secondary-on-background: #b9b9b989;
+    --mdc-theme-text-icon-on-background: #e7e7e7;
+    --mdc-theme-background: #121212;
+    --mdc-theme-surface: #121212;
+    --mdc-ripple-color: #fff;
+    --mdc-button-outline-color: #e0e0e0;
+    --mdc-dialog-heading-ink-color: #fff;
+    --mdc-dialog-content-ink-color: #fff;
+    --mdc-checkbox-unchecked-color: #fff;
+    --mdc-text-field-idle-line-color: #fff;
+
+    [slot="appContent"] {
+        color: var(--mdc-theme-on-primary, #{variables.$primary});
+    }
+
+    a {
+        color: var(--mdc-theme-primary, #{variables.$primary});
+    }
+
+    mwc-textfield {
+        --mdc-theme-primary: var(--mdc-theme-secondary, #{variables.$secondary});
+    }
+
+    mwc-icon-button,
+    i.mdi:not(.light-bg) {
+        color: var(--mdc-theme-text-icon-on-background, #000d);
+    }
+
+    mwc-button {
+        --mdc-ripple-color: var(--mdc-theme-primary, #{variables.$primary});
+
+        &[raised] {
+            --mdc-ripple-color: unset;
+
+            i.mdi {
+                color: unset;
+            }
+        }
+    }
+}

resources/scss/_variables.scss

@@ -0,0 +1,9 @@
+// Colori
+$primary: #3f3f3f;
+$secondary: #e8a80f;
+
+// Font
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Nunito:wght@400;700&display=swap');
+
+$headings_font: 'Montserrat, sans-serif';
+$body_font: 'Nunito, sans-serif';

resources/scss/app.scss

@@ -0,0 +1,48 @@
+@import "variables";
+@import 'material';
+
+hr {
+    border-color: rgba(0, 0, 0, 0.12);
+    margin: 16px 0;
+}
+
+.mdi {
+    //width: 24px;
+    line-height: 1;
+}
+
+.center {
+    display: block;
+    width: 50%;
+    margin-right: auto;
+    margin-left: auto;
+}
+
+.vcenter {
+    position: absolute;
+    top: 50%;
+    margin: 0;
+    -ms-transform: translateY(-50%);
+    transform: translateY(-50%);
+}
+
+mwc-fab#contrast-switcher {
+    &.contrast-light {
+        --mdc-theme-secondary: black;
+        --mdc-theme-on-secondary: white;
+    }
+
+    &.contrast-dark {
+        --mdc-theme-secondary: white;
+        --mdc-theme-on-secondary: black;
+    }
+}
+
+.logo-bg-sticky {
+    position: fixed;
+    z-index: 1;
+    top: 60%;
+    right: -15%;
+    width: 500px;
+    opacity: 0.1;
+}