- Table of Disciplines #101

- Insert Facebook bar to the Site #97

src/components/CCardDiscipline/CCardDiscipline.scss

@@ -0,0 +1,84 @@
+$heightBtn: 100%;
+$grayshadow: #555;
+
+.text-subtitle-carica {
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.75rem;
+  letter-spacing: .00937em;
+  text-shadow: .1rem .1rem .1rem $grayshadow;
+}
+
+.text-subtitle-certificato {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+@media (max-width: 718px) {
+  // PER VERSIONE MOBILE
+  .text-subtitle-carica {
+    font-size: 1rem;
+  }
+}
+
+.my-card-discipline {
+  width: 100%;
+  max-width: 350px;
+  min-width: 300px;
+  padding: 1rem 1rem;
+
+  box-shadow: none;
+  border-radius: 20px;
+  margin: 1rem 1rem;
+  transition: transform .2s ease-out;
+}
+
+.my-card-discipline:hover {
+  transition: transform .2s ease-in;
+  transform: scale(1.03);
+}
+
+.disc {
+  text-align: center !important;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.75rem;
+  letter-spacing: .00937em;
+  text-shadow: .1rem .1rem .1rem $grayshadow;
+
+  &__title {
+    //color: white;
+    text-shadow: .125rem .125rem .125rem #2d2260;
+  }
+
+  &__cell {
+    font-size: 1rem;
+    color: red;
+  }
+
+  &__email {
+    font-size: 1rem;
+    color: #3b5998;
+  }
+
+  &__description {
+    font-size: 1rem;
+    color: #000000;
+  }
+
+  &__email a {
+    text-decoration: none;
+  }
+
+}
+
+.myimg {
+  border-radius: 30px !important;
+  margin: 30px auto 10px;
+}
+
+.q-img {
+  &__image {
+    border-radius: 30px !important;
+  }
+}

src/components/CCardDiscipline/CCardDiscipline.ts

@@ -0,0 +1,21 @@
+import Vue from 'vue'
+import { Component, Prop, Watch } from 'vue-property-decorator'
+
+import { tools } from '../../store/Modules/tools'
+import { toolsext } from '@src/store/Modules/toolsext'
+import { IDiscipline } from '../../model'
+import MixinBase from '../../mixins/mixin-base'
+
+@Component({
+  mixins: [MixinBase],
+  name: 'CCardDiscipline'
+})
+
+export default class CCardDiscipline extends Vue {
+  @Prop({ required: true }) public discipline: IDiscipline
+
+  public getNextLesson(typol) {
+    // Get next lesson
+    return ''
+  }
+}

src/components/CCardDiscipline/CCardDiscipline.vue

@@ -0,0 +1,35 @@
+<template>
+    <q-card class="my-card-discipline text-center fa-border inset-shadow">
+        <q-img :src="`statics/` + discipline.img_small" class="myimg">
+            <div class="absolute-bottom text-spacetrans">
+                <q-btn rounded :to="discipline.linkpage">
+                    <div class="text-h4 text-trans disc__title shadow-max">{{discipline.label}}</div>
+                </q-btn>
+            </div>
+        </q-img>
+
+        <q-card-section>
+            <div class="disc__description">{{discipline.description}}</div>
+        </q-card-section>
+
+        <q-card-section v-if="getNextLesson(discipline.typol_code)">
+            <i class="icon ion-calendar"></i> Prossima Lezione:
+            <div class="disc__description">{{getNextLesson(discipline.typol_code)}}</div>
+        </q-card-section>
+
+        <q-btn rounded size="sm" color="primary" :to="discipline.linkpage">Leggi tutto</q-btn>
+
+
+        <!--<q-card-section>-->
+        <!--<div class="text-subtitle3">{{myop.disciplines}}</div>-->
+        <!--{{myop.info}}-->
+        <!--</q-card-section>-->
+    </q-card>
+</template>
+
+<script lang="ts" src="./CCardDiscipline.ts">
+</script>
+
+<style lang="scss" scoped>
+    @import './CCardDiscipline.scss';
+</style>

src/components/CCardDiscipline/index.ts

@@ -0,0 +1 @@
+export {default as CCardDiscipline} from './CCardDiscipline.vue'