Review: Summary

Ready

HTML
View
Context
Assets
Info
Notes


        
        <div class="review review--summary ">
    <div class="review__summary-handle">
        <div class="review__summary-rating">
            <div class="rating " aria-label="Average rating: 72%" title="4/5 sterren" tabindex="0">
                <div class="rating__star " role="presentation" style="width: 72%">
                    <span class="
                rating__indicator
                
            "></span>
                </div>
            </div>
            <div class="rating__title">
                4/5 sterren
            </div>

        </div>
        <div class="review__summary-content">
            <div class="review__summary-amount">
                <span class="review__amount-qty"> 3,9/5 sterren ((32) reviews) </span>
            </div>
            <div class="review__summary-add-review">
                <button class="button modal-trigger review__summary-add" data-modal-trigger="addReview" type="button">
                    Review plaatsen
                    <svg class="icon button__icon review__summary-add--icon" role="img">
                        <title>Plus</title>
                        <use xlink:href="/images/icons-sprite.svg#plus"></use>
                    </svg>

                </button>

            </div>
        </div>
    </div>
</div>


        <div class="review review--summary {{ class }}">
    <div class="review__summary-handle">
        <div class="review__summary-rating">
            {{ render '@rating' }}
        </div>
        <div class="review__summary-content">
            <div class="review__summary-amount">
                {{#if amountLink}}
                    <span class="review__amount-qty"> {{ title }} ({{ reviewsQty }} reviews) </span>
                {{/if}}           
            </div>
            <div class="review__summary-add-review">
                {{ render '@modal-trigger' addReviewTrigger }}
            </div>        
        </div>
    </div>
</div>

{{#if script }}
    <script src="{{static 'modal.js' }}"></script>
{{/if}}


        
            
            {
  "modalContent": {
    "class": "review--add-content"
  },
  "modal": {
    "class": "review review--add",
    "id": "addReview",
    "attributes": "aria-labelledby=\"addReview\" aria-describedby=\"addReview\""
  },
  "trigger": true,
  "addReviewTrigger": {
    "buttonModalTrigger": {
      "tag": "button",
      "class": "modal-trigger review__summary-add",
      "attributes": "data-modal-trigger=\"addReview\" type=\"button\"",
      "icon": {
        "id": "plus",
        "title": "Plus",
        "class": "button__icon review__summary-add--icon"
      },
      "text": "Review plaatsen"
    }
  },
  "script": false,
  "rating": {
    "ariaLabel": "Average rating 72%",
    "star": {
      "attributes": "style=\"width: 72%\""
    },
    "class": "review__rating"
  },
  "author": "Klaas Akkerman",
  "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacus odio, rutrum a augue nec, varius vehicula odio. Praesent at nibh vehicula libero pellentesque vulputate. Ut malesuada dolor eget purus condimentum, eget porttitor est luctus. Donec tristique, tortor a iaculis mollis, ex erat gravida nunc, quis viverra tortor neque quis eros. Pellentesque lorem sapien, consequat non vestibulum ac, pellentesque vitae risus. Nunc eleifend magna id fringilla semper. ",
  "date": "08-06-2020",
  "icon": {
    "id": "custom-check"
  },
  "amountLink": true,
  "reviewsQty": "(32)",
  "title": "3,9/5 sterren"
}

File:

Content:


                                .review {
    width: 100%;

    @include mq($screen-m) {
        display: flex;
        flex-flow: row nowrap;
        padding: $spacer--3 $spacer--075;
    }

    &--add {
        @include mq($screen-m) {
            display: block;
        }

        &__heading {
            padding: $spacer--1;
        }

        &__title {
            font-family: $font-family-evogria;
            font-style: normal;
            font-weight: normal;
            font-size: $font-size-large;
            text-transform: uppercase;
            color: #343434;
            margin: 0;
        }
        &__title-product {
            font-family: $font-family-saira;
            font-style: normal;
            font-weight: normal;
            font-size: $font-size-medium;
            color: #a7a7a7;
        }

        &__main-block {
            background-color: #ecf5f4;
            border-radius: 5px;
            padding: $spacer--1;
            margin: 0;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
        }

        &__rating-block {
            background-color: $white;
            border-radius: $border-radius;
            padding: $spacer--075;
            flex: 1 0 60%;
        }

        &__product-image {
            flex: 0 1 40%;
            padding-right: $spacer--2;
        }

        &__rating {
            display: grid;
            grid-template-columns: 30% 70%;
            border-bottom: 1px solid $gray-light;

            &:last-child {
                border: 0;
            }
        }
    }

    &--summary {
        @include mq($screen-m) {
            display: flex;
            justify-content: flex-end;
        }

        .rating {
            margin-right: $spacer;
        }
    }

    &__details {
        width: 100%;

        &:first-child {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
        }

        &:last-child {
            margin-top: $spacer--2;
        }

        @include mq($screen-m) {
            &:first-child {
                display: block;
                width: 20%;
                margin-right: $spacer--large;
            }

            &:last-child {
                width: 80%;
                margin-top: 0;
            }
        }
    }

    &__heading {
        display: flex;
        justify-content: space-between;
        letter-spacing: 1px;
    }

    &__title {
        font-size: $font-size-large;
        font-weight: $font-weight-base;
        font-family: $font-family-evogria;
        text-transform: uppercase;
        color: #a6a6a6;
    }

    &__title-product {
        display: block;
        margin: $spacer--05 0;
        text-transform: none;
        font-weight: bold;
    }

    &__content {
        font-size: $font-size-base;
        font-family: $font-family-saira;
        font-weight: $font-weight-base;
        margin-top: $spacer--15;
        line-height: 165%;

        & span {
            color: $gray;
        }

        & p {
            color: $gray-light;
        }
    }

    &__date {
        display: block;
        color: #b4b4b4;
        font-size: $font-size-base;
        font-family: $font-family-saira;
    }

    &__field {
        margin: 0;
        padding: $spacer--1;
        position: relative;

        & .input__field {
            opacity: 0.5;
            font-family: $font-family-saira;
            padding-right: 3rem;

            + svg.icon,
            + .mage-error + svg.icon {
                display: none;
                fill: #09cfc4;
            }

            &.valid + svg.icon,
            &.valid + .mage-error + svg.icon {
                position: absolute;
                display: block;
                top: 1.57rem;
                right: 1rem;
            }
        }
    }

    &__placeReview-btn {
        display: flex;
        justify-content: flex-end;
        margin-top: $spacer--15;
        padding: 0;
    }

    &__submit-btn {
        width: 50%;
        border-radius: $border-radius;
    }

    &__required-info {
        margin-top: $spacer--large;
        font-size: $font-size-small;
    }

    &__summary-handle {
        @include mq($screen-m) {
            display: flex;
            flex-basis: 100%;
        }
    }

    &__amount {
        &-qty {
            font-family: $font-family-saira;
            font-size: $font-size-base;
            font-weight: $font-weight-semibold;
            color: rgba(52, 52, 52, 0.75);

            @include mq($screen-m) {
                font-size: $font-size-large;
            }
        }
    }

    &__summary-add {
        background: $white;
        border-radius: $border-radius--small;
        font-family: $font-family-saira;
        font-weight: $font-weight-base;
        font-size: $font-size-small;
        color: #a6a6a6;
        padding: 0 $spacer--125;
        height: 40px;

        display: flex;
        flex-direction: row-reverse;

        &:hover {
            background: $red;
            color: $white;

            & .review__summary-add--icon {
                fill: $white;
            }
        }

        @include mq($screen-m) {
            font-size: $font-size-medium;
        }

        &--icon {
            fill: #a6a6a6;
            height: 16px;
            width: 16px;
            margin-right: $spacer--05;

            @include mq($screen-m) {
                margin-right: $spacer--125;
                height: 18px;
                width: 18px;
            }
        }
    }

    &__summary-rating {
        display: flex;
        align-items: flex-end;
        align-self: baseline;
        justify-content: space-between;
        flex-direction: row;
        flex-basis: 100%;

        @include mq($screen-m) {
            flex-basis: 20%;
            flex-direction: column;
            align-items: flex-start;
            align-self: center;
        }
    }

    &__summary-content {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        flex-basis: 100%;
        margin-top: $spacer--075;

        @include mq($screen-m) {
            flex-basis: 80%;
            margin-top: 0;
        }
    }

    &__summary-amount {
        display: flex;

        @include mq($screen-m) {
            justify-content: flex-start;
            flex-basis: 50%;
        }
    }

    &__summary-add-review {
        display: flex;

        @include mq($screen-m) {
            flex-basis: 50%;
            justify-content: flex-end;
        }
    }

    &__rating-fieldset {
        border-bottom: 1px solid $gray-lighter;
        padding-bottom: $spacer--1;

        &--second {
            margin-top: $spacer--1;
        }
        &--last {
            margin-top: $spacer--1;
            padding: 0;
            border: none;
        }

        & .row {
            justify-content: space-between;
            padding: 0 $spacer--075;
        }
    }

    &__rating-legend {
        font-family: $font-family-saira;
        font-weight: $font-weight-semibold;
        font-size: $font-size-large;
        display: flex;
        align-items: center;
        margin-bottom: 0;

    }

    &__rating-stars {
        margin: 0;
    }

    &__modal {
        &.modal-popup {
            display: none;
            position: fixed;
            top: 0;
            height: 100%;
            width: 100%;
            background: rgba(0, 0, 0, 0.6);
            &._show {
                display: block;
            }

            .modal-inner-wrap {
                max-width: 650px;
                border-radius: $border-radius--large;
                padding: 15px;
            }

            .modal-header {
                justify-content: space-between;
                align-items: center;
                padding-top: $spacer--1;
                padding-bottom: $spacer--1;

                .heading--page {
                    margin: 0;
                }

                .modal__close-button {
                    background: transparent;

                    .icon {
                        fill: $gray-light;
                    }
                }
            }

            .content {
                .review {
                    &--add {
                        padding: 0;

                        &__main-block {
                            margin-bottom: 0;
                        }

                        &__heading {
                            padding-left: 0;
                            padding-right: 0;
                            padding-top: 0;
                        }
                    }

                    &__field {
                        padding: $spacer--1 0 0;
                    }
                }
            }

            .modal-footer {
                display: none;
            }

            @include mq(false, $screen-m) {
                .modal-inner-wrap {
                    width: 95%;
                }

                .modal-header,
                .modal-content {
                    padding-left: $spacer--05;
                    padding-right: $spacer--05;
                }

                .review {
                    &--add__main-block {
                        padding: $spacer--05;
                    }

                    &--add__product-image {
                        display: none;
                    }

                    &--add__rating {
                        grid-template-columns: 25% 75%;
                    }
                }
            }
        }
    }
}

URL: /components/raw/review/_review.scss
Filesystem Path: build/components/03-modules/review/_review.scss
Size: 9.7 KB

Handle: @review--summary
Variants (3): Default , Add , Summary
Preview:
- With layout
- Component only
Filesystem Path: build/components/03-modules/review/review--summary.hbs
References (2): @rating, @modal-trigger
Referenced by (2): @product-review, @product-view--grouped

There are no notes for this item.