Skip to content

example.html

Jump to bottom
rasta edited this page Feb 25, 2019 · 2 revisions 
<html>
  <head>
    <link href="https://phaidra.univie.ac.at/static/css/vue/vuetify.css" rel="stylesheet">
    <style type="text/css">
      /* fix the funny flex basis bug */ 
      .flex.xs9 {
        max-height: 40;
      }
    </style>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
  </head>
  <body>
    <div id="app">
      <v-app>
        <v-content>
          <v-container grid-list-md>
            <jsonld-wrapper :pid="'o:930876'"></jsonld-wrapper>
          
            <h3 class="md-title">Members (2)</h3>
            
            <v-card class="ma-3">
              <v-toolbar dense flat class="mb-3">
                <v-layout>
                  <v-toolbar-title class="font-weight-light">Chinesische Fischhändler in Wladiwostok : Rückseite mit Beschreibung</v-toolbar-title>
                </v-layout>
              </v-toolbar>
              <a href="https://phaidra.univie.ac.at/imageserver/o:930874" target="_blank">
              <v-img max-height="400" contain :src="'https://phaidra.univie.ac.at/preview/o:930874/ImageManipulator/boxImage/480/png'" /></a>
              <v-card-text class="ma-2"  >
                <jsonld-wrapper
                  :pid="'o:930874'"
                ></jsonld-wrapper>
              </v-card-text>
            </v-card>
            
            <v-card class="ma-3">
              <v-toolbar dense flat class="mb-3">
                <v-layout>
                  <v-toolbar-title class="font-weight-light">Chinesische Fischhändler in Wladiwostok : Vorderseite</v-toolbar-title>
                </v-layout>
              </v-toolbar>
              <a href="https://phaidra.univie.ac.at/imageserver/o:930875" target="_blank">
              <v-img max-height="400" contain :src="'https://phaidra.univie.ac.at/preview/o:930875/ImageManipulator/boxImage/480/png'" /></a>  
              <v-card-text class="ma-2"  >
                <jsonld-wrapper
                  :pid="'o:930875'"
                ></jsonld-wrapper>
              </v-card-text>
            </v-card>
      
            
          </v-container>
        </v-content>
      </v-app>
    </div>

    <script src="https://phaidra.univie.ac.at/static/js/vue/base64.js"></script>
    <script src="https://phaidra.univie.ac.at/static/js/vue/moment.js"></script>
    <script src="https://phaidra.univie.ac.at/static/js/vue/lang.js"></script>
    <script src="https://phaidra.univie.ac.at/static/js/vue/vocabulary.js"></script>
    <script src="https://phaidra.univie.ac.at/static/js/vue/vue.js"></script>
    <script src="https://phaidra.univie.ac.at/static/js/vue/vuex.js"></script>
    <script src="https://phaidra.univie.ac.at/static/js/vue/store.js"></script>
    <script src="https://phaidra.univie.ac.at/static/js/vue/i18n.js"></script>
    <script src="https://phaidra.univie.ac.at/static/js/vue/vue-i18n.js"></script>
    <script src="https://phaidra.univie.ac.at/static/js/vue/vuetify.js"></script>
    <script src="https://phaidra.univie.ac.at/static/js/vue/phaidra-vue-components.umd.js"></script>

    <script>

      const i18n = new VueI18n({
        locale: 'de',
        messages
      })

      Vue.component('jsonld-wrapper', {
        name: 'jsonld-wrapper',
        props: {
          pid: String
        },
        template: `<p-d-jsonld ref="display" :jsonld="displayjsonld" v-on:load-jsonld="displayjsonld = $event" ></p-d-jsonld>`,
        data() {
          return {
            displayjsonld: {}
          }
        },
        mounted: function () {
          this.$vuetify.theme.primary = '#0063a6'
          this.$store.commit('setInstanceApi', 'https://services.phaidra.univie.ac.at/api')
          this.$refs.display.loadMetadata(this.pid)
        }
      });

      new Vue({ 
        el: '#app',
        i18n,
        store,
        data: { 
          displayjsonld: {}
        }
      })

    </script>
  </body>

</html>
Clone this wiki locally