@net7/boilerplate-arianna 3.0.1-rc.2

package/src/lib/styles/arianna/layouts/_multimedia-layout.scss

@@ -0,0 +1,132 @@
+/**
+ * MULTIMEDIA
+ *
+ * Layout for timeline and map pages
+ */
+
+
+/* ------------------------------------ *\
+    MULTIMEDIA
+\* ------------------------------------ */
+.aw-multimedia {
+    background-color: $color-background-light;
+    /* Timeline */
+    &__timeline {
+        position: relative;
+        z-index: 10;
+        box-shadow: 0 5px 15px rgba(0, 0, 0, .07);
+    }
+    &__timeline-controls {
+        position: absolute;
+        z-index: 10000;
+        top: $space;
+        left: $space;
+        display: flex;
+    }
+    &__timeline-control {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-left: $space;
+        padding: $space $space;
+        font-size: $font-size-l;
+        border: 0;
+        background-color: $color-gray-05;
+        color: $color-text-inverse;
+        height: auto !important;
+        cursor: pointer;
+        opacity: 0.75;
+        transition: all $transition-durations;
+
+        &:hover, &:active, &:hover:active {
+            background-color: $color-gray-05;
+            color: $color-text-inverse;
+            opacity: 1;
+        }
+    }
+    /* Map */
+    &__map {
+        .n7-map__container {
+            height: 300px;
+        }
+    }
+    /* Results area */
+    &__results {
+        background-color: $color-background-base;
+        box-shadow: 0 5px 15px rgba(0, 0, 0, .07);
+        max-width: $page-max-width;
+        padding: 0;
+        margin: 0 auto $space*10 auto;
+    }
+    /* Title */
+    &__results-title {
+        background-color: $color-background-light;
+        border-bottom: 1px solid $color-border-light;
+        .n7-inner-title {
+            padding: $space*2 $space*3;
+        }
+        .n7-inner-title__title {
+            margin-bottom: 0;
+            font-weight: $font-weight-normal;
+            font-size: $font-size-l;
+            strong {
+                font-weight: $font-weight-bold;
+            }
+        }
+        .n7-inner-title__subtitle {
+            padding-top: calc($space/4);
+            font-size: $font-size-l;
+            font-style: italic;
+            color: $color-gray-04;
+        }
+        .aw-multimedia__results-title-big {
+            font-weight: $font-weight-bold;
+            font-size: $font-size-xl;
+        }
+    }
+    /* Wraps the results and pagination */
+    &__results-wrapper {
+        padding: $space*2 $space*3;
+        .aw-item-preview-wrapper:last-child {
+            border-bottom: 0;
+            margin-bottom: 0;
+        }
+        .n7-smart-pagination {
+            margin-top: $space*2;
+        }
+    }
+    /* Empty state */
+    &__empty {
+        padding: $space*8;
+    }
+    &__empty-text {
+        margin: 0;
+        padding: 0;
+        font-size: $font-size-l;
+    }
+    /* Loader */
+    &__loader {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: $space*5;
+    }
+}
+
+
+/* ------------------------------------ *\
+   #MEDIA-QUERIES
+\* ------------------------------------ */
+
+@media all and (max-width: 1120px) {}
+
+@media all and (max-width: $breakpoint-laptop) {}
+
+@media all and (max-width: $breakpoint-ipad-portrait) {}
+
+@media all and (max-width: $breakpoint-smartphone-landscape) {}
+
+
+/* Retina */
+@media (-webkit-min-device-pixel-ratio: 2),
+    (min-resolution: 192dpi) {}

package/src/lib/styles/arianna/layouts/_scheda-layout.scss

@@ -0,0 +1,438 @@
+/**
+ * SCHEDA
+ *
+ * Layout for page detail of Cultural Objects and Aggregations.
+ * Includes traa navigation on the right.
+ */
+ 
+/* ------------------------------------ *\
+    LAYOUT
+\* ------------------------------------ */
+.aw-scheda {
+    padding-top: $space*3;
+    margin-bottom: $space*6;
+
+    &__content {
+        display: flex;
+        position: relative;
+        margin: 0 auto;
+        max-width: $page-max-width;
+    }
+
+    &__tree {
+        align-self: start;
+        flex: 0 0 $aw-scheda-tree-width;
+        width: $aw-scheda-tree-width;
+
+        &.is-sticky {
+            .n7-tree {
+                height: calc(100% - #{$sidebar-header-height}); /* space for sidebar header */
+                overflow-y: auto;
+                overflow-x: hidden;
+            }
+        }
+    }
+
+    &__scheda-wrapper {
+        flex: 1;
+        min-width: $bubble-chart-column-container-min-width;
+        position: relative;
+        z-index: 4;
+        box-shadow: 0 2px 20px 0 rgba(0,0,0,0.08);
+
+        &-no-item {
+            width: 50%;
+            margin: $space*5 auto;
+            text-align: center;
+        }
+    }
+
+    .n7-sidebar-header {
+        position: relative;
+        z-index: 6;
+    }
+}
+
+
+/* ------------------------------------ *\
+    TREE
+\* ------------------------------------ */
+.aw-scheda__tree {
+    box-shadow: 0 2px 20px 0 rgba(0,0,0,0.10);
+
+    .n7-tree {
+        background-color: $color-background-base;
+    }
+
+    .aw-scheda__tree-content {
+        min-height: $aw-scheda-minimum-height;
+    }
+
+    .n7-sidebar-header__icon-right {
+        cursor: pointer;
+    }
+
+    /* Loading */
+    .aw-scheda__tree-content-loading {
+        .n7-content-placeholder {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 40px;
+            padding: 0 $space*2;
+            background-color: $color-background-base;
+        }
+        .tree-placeholder-item {
+            width: 100%;
+            margin-bottom: 0;
+        }
+    }
+}
+
+
+/* ------------------------------------ *\
+    COLLAPSED
+\* ------------------------------------ */
+.aw-scheda__content.is-collapsed {
+    display: block;
+
+    .aw-scheda__tree {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: auto;
+    }
+
+    .n7-sidebar-header__icon-left,
+    .n7-sidebar-header__text-wrapper {
+        display: none;
+    }
+
+    .n7-breadcrumbs {
+        margin-left: $sidebar-header-height;
+    }
+}
+
+
+/* ------------------------------------ *\
+    SCHEDA-DETAILS
+\* ------------------------------------ */
+.aw-scheda__scheda-wrapper {
+    min-height: $aw-scheda-minimum-height;
+    background-color: $color-background-base;
+
+    /* Intro text */
+    .aw-scheda__intro-text {
+        min-height: 650px;
+        padding: $space*2 $space*2.5;
+        text-align: left;
+
+        h2 {
+            font-size: $font-size-xxl;
+        }
+
+        h3 {
+            margin-top: $space*2;
+            font-size: $font-size-l;
+        }
+
+        ul {
+            margin: $space 0;
+        }
+
+        li {
+            margin: 0 0 calc($space/2) 0;
+            padding: 0;
+            color: $color-text;
+            font-size: $font-size-m;
+            font-weight: $font-weight-normal;
+            line-height: 1.5;
+            list-style-position: inside;
+        }
+
+        img {
+            float: left;
+            margin-top: $space;
+            margin-right: $space*3;
+            margin-bottom: $space*3;
+            max-width: 400px;
+            max-height: 400px;
+            height: auto;
+            width: auto;
+            border-radius: $border-radius;
+        }
+    }
+
+    /* Breadcrumbs */
+    .n7-breadcrumbs {
+        height: $sidebar-header-height;
+        overflow: hidden;
+        padding-left: $space*2;
+        box-sizing: border-box;
+        background-color: $color-background-medium;
+        box-shadow: inset 0 3px 20px rgba(0,0,0,.03);
+
+        .n7-breadcrumbs__label {
+            &:hover {
+                color: $color-text-link;
+            }
+        }
+
+        .n7-breadcrumbs__item:last-child a {
+            cursor: pointer;
+        }
+    }
+
+    /*  Fake breadcrumbs */
+    .aw-scheda__fake-breadcrumbs {
+        width: 100%;
+        height: $sidebar-header-height;
+        box-sizing: border-box;
+        background-color: $color-background-medium;
+        box-shadow: inset 0 3px 20px rgba(0,0,0,.03);
+    }
+
+    .aw-scheda__fake-breadcrumbs-open {
+        display: flex;
+        align-items: center;
+        height: $sidebar-header-height;
+        margin-left: $sidebar-header-height;
+        padding-left: $space*2;
+        color: $color-text-light;
+        cursor: pointer;
+        transition: color $transition-durations;
+
+        &:hover {
+            color: $color-text-link;
+        }
+    }
+
+    /* Inner title */
+    /* Main title that describes the scheda content */
+    .n7-inner-title {
+        // margin-bottom: $aw-scheda-content-padding;
+        border-bottom: 2px solid $color-border-normal;
+
+        &__title {
+            font-weight: $scheda-title-font-weight;
+        }
+    }
+
+    /* Minor inner titles that describes the various sections */
+    .aw-scheda__inner-title {
+        padding: 0 $aw-scheda-content-padding $aw-scheda-content-padding $aw-scheda-content-padding;
+        font-size: $font-size-xxl;
+        font-weight: $font-weight-normal;
+    }
+
+    /* Sections */
+    /* Sections that contains ImageViewer, Text, metadata, Buubble chart, Similar objects */
+    .aw-scheda__section {
+        // margin-bottom: $aw-scheda-content-padding;
+        padding-top: $space*3;
+        border-bottom: 2px solid $color-border-normal;
+
+        &:last-child {
+            margin-bottom: 0;
+            border-bottom: 0;
+        }
+    }
+
+    /* Description text */
+    .aw-scheda__description {
+        padding: $aw-scheda-content-padding;
+        columns: 2;
+        font-size: $font-size-m;
+        line-height: 1.70;
+    }
+
+    /* Metadata */
+    .aw-scheda__metadata {
+        .n7-metadata-viewer {
+            padding: 0 $aw-scheda-content-padding $aw-scheda-content-padding $aw-scheda-content-padding;
+        }
+    }
+
+    /* Bubble chart */
+    .aw-scheda__bubble-chart {
+        .n7-bubble-chart {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 0 $aw-scheda-content-padding $aw-scheda-content-padding $aw-scheda-content-padding;
+            height: $bubble-section-patrimonio;
+        }
+
+        #bubbleChartContainer {
+            height: 100%;
+        }
+    }
+    
+    /* Related items */
+    .aw-scheda__related {
+        overflow: hidden; /* For fake grid gap */
+    }
+
+    .aw-scheda__related-items {
+        padding: 0 $aw-scheda-content-padding $aw-scheda-content-padding $aw-scheda-content-padding;
+
+        /* Targeting elements in the last row */
+        >*:nth-child(2n + 1):nth-last-child(-n + 2),
+        >*:nth-child(2n + 1):nth-last-child(-n + 2) ~ * {
+            .n7-item-preview {
+                margin-bottom: 0;
+                padding-bottom: 0;
+                border-bottom: 0;
+            }
+        }
+    }
+}
+
+/* ------------------------------------ *\
+    LOADING
+\* ------------------------------------ */
+.aw-scheda__scheda-wrapper-loading {
+    background-color: $color-background-base;
+    z-index: 4;
+    box-shadow: 0 2px 20px 0 rgba(0,0,0,0.08);
+}
+
+/* ------------------------------------ *\
+    EMPTY-STATE
+\* ------------------------------------ */
+.aw-scheda__empty {
+    text-align: center;
+}
+
+
+
+
+/* ------------------------------------ *\
+   #DIGITAL OBJECTS: IMAGE VIEWER, EXTERNAL LINKS, PDF
+\* ------------------------------------ */
+.aw-scheda {
+    /* Digital object selection */
+    &__digital-object-dropdown-label {
+        margin: 0 $space 0 0;
+        height: $space*4;
+        line-height: $space*4;
+    }
+
+    &__digital-object-dropdown {
+        display: flex;
+        padding: $space*2 $space*2;
+        border-bottom: 2px solid $color-border-normal;
+
+        .aw-scheda-dropdown__header {
+            display: flex;
+            align-items: center;
+            height: $space*4;
+            line-height: $space*4;
+            padding: 0 $space;
+            border: 1px solid $color-border-normal;
+            background-color: $color-background-light;
+            cursor: pointer;
+        }
+
+        .aw-scheda-dropdown__header-label {
+            font-weight: $font-weight-bold;
+        }
+
+        .aw-scheda-dropdown__header-icon {
+            margin-left: $space;
+        }
+
+        .aw-scheda-dropdown__items {
+            display: none;
+            position: absolute;
+            padding: $space*2;
+            z-index: $z-index-digital-object-modal;
+            background-color: $color-background-base;
+            border: 1px solid $color-border-normal;
+            box-shadow: 0 1px 1px rgba(0,0,0,0.04), 0 2px 10px rgba(0,0,0,0.04);
+
+            ul {
+                padding: 0;
+                margin: 0;
+                list-style: none;
+            }
+
+            li {
+                cursor: pointer;
+                margin-bottom: $space;
+                transition: all $transition-durations;
+
+                &:hover {
+                    color: $color-text-link;
+                }
+
+                &:last-child {
+                    margin-bottom: 0;
+                }
+            }
+        }
+
+        .aw-scheda-dropdown {
+            &.is-open .aw-scheda-dropdown__items {
+                display: block;
+            }
+        }
+    }
+
+    &__media {
+        border-bottom: 2px solid $color-border-normal;
+    }
+
+    /* External URL */
+    &__external-url-link {
+        display: block;
+        padding: $aw-scheda-content-padding;
+        text-align: center;
+        background-color: $color-background-light;
+        font-size: $font-size-l;
+    }
+}
+
+/* Image viewer navigation */
+.navigation-hidden .n7-image-viewer {
+    .n7-image-viewer__prev,
+    .n7-image-viewer__next {
+        display: none !important;
+    }
+}
+
+
+/* ------------------------------------ *\
+   #MEDIA-QUERIES
+\* ------------------------------------ */
+@media all and (max-width: 1179px) {
+
+    .aw-scheda__scheda-wrapper {
+        .n7-inner-title__tools {
+            margin-left: 39px;
+            padding-top: calc($space/2);
+        }
+    }
+
+}
+
+@media all and (max-width: 1120px) {
+
+    .aw-scheda__scheda-wrapper {
+        /* Description text */
+        .aw-scheda__description {
+            columns: 1;
+        }
+    }
+    
+}
+
+@media all and (max-width: $breakpoint-ipad-portrait) {
+}
+
+@media all and (max-width: $breakpoint-smartphone-landscape) {
+}
+
+/* Retina */
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+}