Aeroporto di Bologna - Design System

Follower 

<!-- Error rendering component -->
<!-- The partial @scheduling could not be found -->
<!-- Error: The partial @scheduling could not be found
    at Object.invokePartial (/Users/antoniomatera/Sites/adb/node_modules/handlebars/dist/cjs/handlebars/runtime.js:332:11)
    at hbs.VM.invokePartial (/Users/antoniomatera/Sites/adb/node_modules/@frctl/handlebars/src/adapter.js:76:38)
    at hbs.VM.invokePartial (/Users/antoniomatera/Sites/adb/node_modules/@frctl/handlebars/src/adapter.js:76:38)
    at Object.invokePartialWrapper [as invokePartial] (/Users/antoniomatera/Sites/adb/node_modules/handlebars/dist/cjs/handlebars/runtime.js:84:39)
    at Object.eval [as main] (eval at createFunctionContext (/Users/antoniomatera/Sites/adb/node_modules/handlebars/dist/cjs/handlebars/compiler/javascript-compiler.js:262:23), <anonymous>:13:28)
    at main (/Users/antoniomatera/Sites/adb/node_modules/handlebars/dist/cjs/handlebars/runtime.js:208:32)
    at ret (/Users/antoniomatera/Sites/adb/node_modules/handlebars/dist/cjs/handlebars/runtime.js:212:12)
    at ret (/Users/antoniomatera/Sites/adb/node_modules/handlebars/dist/cjs/handlebars/compiler/compiler.js:519:21)
    at prepareAndResolveMarkers (/Users/antoniomatera/Sites/adb/node_modules/promised-handlebars/index.js:99:39)
    at /Users/antoniomatera/Sites/adb/node_modules/promised-handlebars/lib/utils.js:29:28
    at HandlebarsAdapter.render (/Users/antoniomatera/Sites/adb/node_modules/@frctl/handlebars/src/adapter.js:37:30)
    at ComponentSource._renderVariant (/Users/antoniomatera/Sites/adb/node_modules/@frctl/fractal/src/api/components/source.js:212:30)
    at _renderVariant.next (<anonymous>)
    at onFulfilled (/Users/antoniomatera/Sites/adb/node_modules/co/index.js:65:19) -->
 
<div class="c-follower {{ modifier }}">

  {{!-- <div class="c-follower__header">
    {{> @icon header-icon }}
    <p>{{{ header }}}</p>
  </div> --}}

  <div class="c-follower__scheduling">
    {{> @scheduling scheduling }}
  </div>

  <div class="c-follower__button">
    
    {{!-- commentato per possibile ripristino segui volo --}}
    {{!-- {{#if stop-follow}}
      <button type="button" class="c-button c-button--submit">
        <span>Non seguire più</span> {{> @icon class="c-icon c-icon--24" symbol="ic-no-eye-black-24px" }}
      </button>
      <a href="#chatbot-scroll" class=" js-smooth-scroll">Vuoi ricevere notifiche sul volo?</a>
    {{else}} --}}

      <button type="button" class="c-button c-button--messenger">
        <span>Segui volo</span> {{> @icon class="c-icon c-icon--24" symbol="ic-messenger" }}
      </button>

    {{!-- commentato per possibile ripristino segui volo --}}
      {{!-- <a href="#chatbot-scroll" class=" js-smooth-scroll">Vuoi ricevere notifiche sul volo?</a> --}}
    {{!-- {{/if}} --}}
  </div>
 
</div>
 
{
  "header": "Informazioni sul <strong>volo in arrivo</strong>",
  "header-icon": {
    "class": "c-icon c-icon--32",
    "symbol": "ic_flight_land_black_24px"
  },
  "scheduling": {
    "schedulings": [
      {
        "title": "Data",
        "desc": "8 Maggio"
      },
      {
        "title": "Numero volo",
        "title-aria-label": "Numero volo",
        "desc": "BA 541"
      },
      {
        "title": "Orario programmato",
        "title-aria-label": "Orario programmato",
        "desc": "12:05"
      },
      {
        "title": "Orario stimato",
        "desc": "11:55",
        "dd-class": "is-positive",
        "delay": "(18/03/2019)"
      },
      {
        "title": "Stato",
        "desc": "In volo",
        "delay": "(18/03/2019)"
      }
    ]
  },
  "follow-btn": {
    "type": "button",
    "text": "Salva volo",
    "modifier": "c-button--submit"
  }
}
  • Content: 
    .c-follower {
  position: relative;
  z-index: $z-Index-follower;
}

// .c-follower__header {
//   display: flex;
//   align-items: center;
//   justify-content: center;
//   background-color: secondary(page, 100);
//   border-radius: remify(4px) remify(4px) 0 0;
//   padding: remify(32px);

//   svg {
//     display: none;

//     @include min-screen(bp(tablet)) {
//       display: block;
//     }

//   }

//   p {
//     margin-left: remify(16px);

//     @include min-screen(bp(tablet)) {
//       font-size: 150%;
//     }

//   }

// }

.c-follower__scheduling {
  background-color: #fff;
  padding: remify(16px);

  @include min-screen(bp(tablet)) {
    border-radius: remify(4px);
    transform: scale(1.01);
  }

}

.c-follower__button {
  display: flex;
  flex-direction: column;
  position: relative;
  text-align: center;
  width: auto;
  background-color: #fff;
  padding: remify(32px) remify(16px);
  margin-bottom: remify(24px);

  // @include min-screen(bp(tablet)) {
  //   position: absolute;
  //   right: remify(16px);
  //   top: 0;
  //   background-color: initial;
  // }

  .c-button {
    max-width: remify(230px);
    margin: 0 auto;
  }

  svg {
    vertical-align: bottom;
    * {
      fill: currentColor;
    }
  } 

  a {
    margin-top: remify(16px);
  }

}
  • URL: /components/raw/follower/_follower.scss
  • Filesystem Path: src/views/03-organisms/follower/_follower.scss
  • Size: 1.3 KB

No notes defined.