iswision-web/layouts/default.vue

<template>
  <v-app id="app">
    <v-navigation-drawer
      id="nav-drawer"
      v-model="drawer"
      clipped
      app
      dark
      temporary
    >
      <v-list dense>
        <template v-for="item in items">
          <v-list-tile :key="item.text" ripple :to="item.to">
            <v-list-tile-action>
              <v-icon dark>{{ item.icon }}</v-icon>
            </v-list-tile-action>
            <v-list-tile-content>
              <v-list-tile-title>
                {{ item.title }}
              </v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>
        </template>
      </v-list>
    </v-navigation-drawer>
    <v-toolbar id="toolbar" dense fixed clipped-left app>
      <mq-layout :mq="['mobile', 'tablet']">
        <v-toolbar-side-icon
          dark
          @click.stop="drawer = !drawer"
        ></v-toolbar-side-icon>
      </mq-layout>
      <mq-layout mq="laptop+"
        ><nuxt-link
          v-for="item in items"
          :key="item.title"
          class="nav"
          :to="item.to"
          ><v-icon class="menu-icon" dark>{{ item.icon }}</v-icon
          >{{ item.title }}</nuxt-link
        >
      </mq-layout>
      <v-spacer></v-spacer>
    </v-toolbar>
    <v-content id="contentWrapper">
      <v-img
        id="headerPicture"
        contain
        :src="require('@/assets/ISWIsion Website Header.png')"
      />
      <v-container id="content" grid-list-md text-xs-center>
        <v-layout row wrap>
          <v-flex class="views" xs12 md9>
            <nuxt />
          </v-flex>
          <v-flex class="aside" xs12 md3>
            <h2>Mail Us</h2>

            <a href="mailto:info@iswision.de">info@iswision.de</a>
            <v-divider />
            <h2>Join Us</h2>

            <nuxt-link to="/location">Ernst-Abbe-Zentrum</nuxt-link><br />
            Ehrenbergstraße 28<br />
            98693 Ilmenau<br />
            <v-divider />
            <h2>Supporters</h2>
            <div id="supporter">
              <a
                v-for="item in supporter"
                :key="item.url"
                class="supporter"
                :href="item.url"
              >
                <v-img
                  contain
                  :src="require(`@/assets/Sponsoren/${item.img} Logo.svg`)"
                />
              </a>
            </div>
            <v-divider />

            <h2>Twitter #iswision2019</h2>
            <br />
            <a
              href="https://twitter.com/search?q=%23iswision19%20OR%20%23iswi1*%20OR%20%23iswiradio%20OR%20%23iswision"
              >Tweets about #iswision19</a
            >
            <v-divider />
            <h2>Former ISWIsion Shows</h2>
            <div v-for="year in shows" :key="year">
              <a :href="'http://www.iswision.de/iswision' + year">{{ year }}</a>
              <br />
            </div>
          </v-flex>
        </v-layout>
      </v-container>
    </v-content>
    <v-footer id="footer" app>
      <a href="https://fem.tu-ilmenau.de/" class="logo">
        <v-img contain :src="require('@/assets/01-femlogo.png')"
      /></a>
      <a href="https://istuff.de/" class="logo"
        ><v-img contain :src="require('@/assets/Logo_iSTUFF_weiss.png')"
      /></a>
    </v-footer>
  </v-app>
</template>

<script>
export default {
  data() {
    return {
      drawer: null,
      items: [
        {
          icon: 'videocam',
          title: 'ISWIsion Live',
          to: '/'
        },
        {
          icon: 'event_seat',
          title: 'Cultural Events',
          to: '/cultural-events'
        },
        {
          icon: 'ondemand_video',
          title: 'Trailer',
          to: '/trailer'
        },
        {
          icon: 'bubble_chart',
          title: 'about',
          to: '/about'
        },
        {
          icon: 'map',
          title: 'location',
          to: '/location'
        }
      ],
      miniVariant: false,
      right: true,
      rightDrawer: false,
      title: 'iswision19',
      supporter: [
        {
          img: 'Arri',
          url: 'https://www.arri.com/en/'
        },
        {
          img: 'IMT',
          url: 'https://www.tu-ilmenau.de/mt/'
        },
        {
          img: 'ISWI',
          url: 'https://iswi.org/'
        },
        {
          img: 'Riedel',
          url: 'https://www.riedel.net/de/'
        },
        {
          img: 'Robe',
          url: 'https://www.robelighting.de/'
        },
        {
          img: 'TU',
          url: 'https://www.tu-ilmenau.de/'
        }
      ],
      shows: [2003, 2005, 2007, 2009, 2011, 2013, 2015, 2017]
    }
  }
}
</script>

<style scoped>
#app {
  background-color: #3b8d85;
  color: #e1ebe7;
}
#toolbar,
#content,
#footer {
  background-color: #2b4d42;
}
#toolbar {
  z-index: 1001;
}
.nav {
  margin-left: 2em;
  font-size: 2em;
  color: #e1ebe7;
}

#content {
  width: 75vw;
  margin: auto;
  margin-top: 1vh;
  position: relative;
}
#clock {
  position: absolute;
  top: 0;
  left: 0;
}
#contentWrapper {
  margin-top: 3vh;
}

#headerPicture {
  max-width: 80vw;
  max-height: 20vh;
  margin: auto;
}

#footer {
  display: flex;
  align-content: center;
  align-items: stretch;
  z-index: 1001;
}

#nav-drawer {
  z-index: 1002;
  background-color: #2b4d42;
}
.views {
  padding-left: 3em;
  padding-right: 3em;
  width: 100%;
}

.aside {
  text-align: left;
  padding-left: 1em !important;
}
.v-divider {
  border-color: #7f828b !important;
  margin-top: 2em;
  margin-bottom: 2em;
}
.logo {
  display: contents;
}
.logo > * {
  margin-left: 2em;
  margin-top: 5px;
  margin-bottom: 5px;
}
#supporter {
  display: flex;
  flex-wrap: wrap;
}
.supporter {
  display: contents;
}
.supporter > * {
  min-height: 5vh;
  min-width: 10vw;
  max-width: 100%;
  flex-grow: 1;
}
.social-media-link {
  margin-left: 2em;
  height: 70%;
  width: 5%;
}
.social-media {
  height: 100%;
  width: 100%;
}
.menu-icon {
  transform: translateY(-0.2em);
}
</style>
<style>
a {
  text-decoration: none;
}
.streamWrapper {
  position: relative;
  padding-top: 56.25%;
  overflow: hidden;
  width: 100%;
  height: auto;
}
.streamWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>