Plex Content styling

Plex Content styling

<template>

        {{ title }}
        <v-layout v-if="!contents && !browsingContent" row >
          <v-flex xs12 style="position:relative">
              <v-progress-circular style="left: 50%; top:50%" v-bind:size="60" indeterminate class="amber--text"></v-progress-circular>
          </v-flex>
        </v-layout>

          <v-flex xs12 class="mt-3">
            <v-card v-if="contents" horizontal :img="getArtUrl" class="darken-2 white--text">
              <v-container style="background: rgba(0, 0, 0, .4);"  class="pa-0 ma-0" fluid grid-list-lg>
                <v-layout row style="height:100%">
                  <v-flex md4 class="hidden-sm-and-down pa-4" style="margin-top:0">
                    <v-card-media
                      :src="getThumb()"
                      height="50em"
                      contain
                    ></v-card-media>
                  </v-flex>

                  <v-flex md8 sm12 style="position:relative" v-if="content.type == 'episode'">

 {{ content.grandparentTitle }}

 Season {{ contents.parentIndex }} Episode {{ contents.index }}

{{ content.title }}

                    <v-layout row wrap align-end>
                      <v-flex xs12 sm6 style="opacity:0.5">
                        {{ length }}
                      </v-flex>
                      <v-flex xs12 sm6 style="position:relative">

                          <v-chip bottom v-tooltip:top="{ html: 'Resolution' }" class="grey darken-1 white--text" outline left> {{ largestRes }}p</v-chip>
                          <v-chip bottom v-tooltip:top="{ html: 'Year' }" class="grey darken-4 white--text" outline left> {{ contents.year }}</v-chip>
                          <v-chip v-if="contents.contentRating" v-tooltip:top="{ html: 'Content Rating' }" class="grey darken-4 white--text" small label> {{ contents.contentRating }}</v-chip>

                      </v-flex>
                    </v-layout>
                    <v-divider></v-divider>

 Episode summary automatically hidden for unwatched episodes. Click to unhide.

 {{ content.summary }}

                  </v-flex>

                  <v-flex md9 sm12 style="position:relative" v-if="content.type == 'movie'">

{{ content.title }}

 {{ contents.year }}

                    <v-layout row wrap align-end>
                      <v-flex xs12 sm6  style="opacity:0.5">
                        {{ length }}
                      </v-flex>
                      <v-flex xs12 sm6 style="position:relative">

                          <v-chip bottom v-tooltip:top="{ html: 'Resolution' }" class="grey darken-1 white--text" outline left> {{ largestRes }}p</v-chip>
                          <v-chip v-if="contents.contentRating" v-tooltip:top="{ html: 'Content Rating' }" class="grey darken-4 white--text" small label> {{ contents.contentRating }}</v-chip>
                          <v-chip v-if="contents.studio" v-tooltip:top="{ html: 'Studio' }"  class="grey darken-4 white--text" small label> {{ contents.studio }}</v-chip>

                      </v-flex>
                    </v-layout>
                    <v-divider></v-divider>

 {{ content.summary }}

                    <v-layout row wrap class="hidden-sm-and-down">
                      <v-flex lg3 xl2 v-if="contents.Role && contents.Role.length > 0">
                        <v-subheader class="white--text"> Featuring </v-subheader>

                          {{actor.tag}}  {{actor.role}}

                      </v-flex>
                      <v-flex lg3 xl2 v-if="contents.Director && contents.Director.length > 0">
                        <v-subheader class="white--text"> Director </v-subheader>

                          {{director.tag}}

                      </v-flex>
                      <v-flex lg3 xl2 v-if="contents.Producer && contents.Producer.length > 0">
                        <v-subheader class="white--text"> Producers </v-subheader>

                          {{producer.tag}}

                      </v-flex>
                      <v-flex lg3 xl2 v-if="contents.Writer && contents.Writer.length > 0">
                        <v-subheader class="white--text"> Writers </v-subheader>

                          {{writer.tag}}

                      </v-flex>
                    </v-layout>
                  </v-flex>

                  <v-flex md9 sm12 style="position:relative" v-if="content.type == 'track'">

 {{ content.grandparentTitle }}

 {{ content.parentTitle }}

 {{ content.title }}

                    <v-layout row wrap align-end>
                      <v-flex xs12 sm6  style="opacity:0.5">
                        {{ length }}
                      </v-flex>
                      <v-flex xs12 sm6 style="position:relative">

                          <v-chip v-if="contents.year"  v-tooltip:top="{ html: 'Content Rating' }" class="grey darken-4 white--text" small label> {{ contents.year }}</v-chip>
                          <v-chip v-for="copy in contents.Media" :key="copy.key" v-tooltip:top="{ html: 'Quality' }"  class="grey darken-4 white--text" small> {{ copy.audioCodec.toUpperCase() }}</v-chip>

                      </v-flex>
                    </v-layout>
                    <v-divider></v-divider>
                    <v-chip v-for="country in contents.Country" :key="country.tag" v-tooltip:top="{ html: 'Country' }"> {{ country.tag }}</v-chip>
                    <v-chip v-for="genre in contents.Genre" :key="genre.tag" v-tooltip:top="{ html: 'Genre' }"> {{ genre.tag }}</v-chip>
                  </v-flex>

                    <v-btn v-if="playable && content.Media.length == 1 && (content.viewOffset == 0 || !content.viewOffset)"  v-on:click.native="playMedia(content)" class="primary white--text">
                      <v-icon>play_arrow</v-icon> Play
                    </v-btn>
                    <v-btn v-else @click.native.stop="dialog = true"  class="primary white--text">
                     <v-icon>play_arrow</v-icon> Play Version
                    </v-btn>
                    Now playing on {{ chosenClient.name }} from {{ server.name }}
                    <v-btn v-if="!playable" style="background-color: #cc3f3f" v-on:click.native="pressStop()" class="white--text">
                      <v-icon></v-icon> Stop
                    </v-btn>

                </v-layout>
              </v-container>
            </v-card>
          </v-flex>

        <v-dialog v-if="contents" v-model="dialog" class="pa-0 ma-0" width="500px">
          <v-card  style="background:rgba(0,0,0,0.4); box-shadow: none;">
            <v-card-title class="headline">Select Version</v-card-title>
            <v-checkbox v-if="contents.viewOffset && contents.viewOffset > 0" v-bind:label="'Resume from ' + getDuration(contents.viewOffset) " color="orange lighten-2" class="pa-0 ma-0 ml-3" v-model="resumeFrom"></v-checkbox>

              <v-layout row wrap class="pa-2">
                <v-flex xs8>

{{ media.videoResolution }}p {{ getDuration(media.duration)}}

Video Codec: {{ media.videoCodec }} ({{ media.bitrate }}kbps)

                      Audio Streams: {{ audioStreams(media.Part[0].Stream) }}

                      Subtitles: {{ subtitleStreams(media.Part[0].Stream) }}

                </v-flex>
                <v-flex xs4>
                  <v-btn class="primary white--text" @click.native.stop="playMedia(content,index)">
                    Play
                  </v-btn>
                </v-flex>
              </v-layout>

          </v-card>
        </v-dialog>

</template>

<template>

        {{ title }}
        <v-layout v-if="!contents && !browsingContent" row >
          <v-flex xs12 style="position:relative">
              <v-progress-circular style="left: 50%; top:50%" v-bind:size="60" indeterminate class="amber--text"></v-progress-circular>
          </v-flex>
        </v-layout>

          <v-flex xs12 class="mt-3">
            <v-card v-if="contents" horizontal :img="getArtUrl" class="darken-2 white--text">
              <v-container style="background: rgba(0, 0, 0, .4);"  class="pa-0 ma-0" fluid grid-list-lg>
                <v-layout row style="height:100%">
                  <v-flex md3 class="hidden-sm-and-down">
                    <v-card-media
                      :src="getThumb()"
                      height="50em"
                      contain
                    ></v-card-media>
                  </v-flex>

                  <v-flex md9 sm12 style="position:relative" v-if="content.type == 'episode'">

 {{ content.grandparentTitle }}

 Season {{ contents.parentIndex }} Episode {{ contents.index }}

{{ content.title }}

                    <v-layout row wrap align-end>
                      <v-flex xs12 sm6 style="opacity:0.5">
                        {{ length }}
                      </v-flex>
                      <v-flex xs12 sm6 style="position:relative">

                          <v-chip bottom v-tooltip:top="{ html: 'Resolution' }" class="grey darken-1 white--text" outline left> {{ largestRes }}p</v-chip>
                          <v-chip bottom v-tooltip:top="{ html: 'Year' }" class="grey darken-4 white--text" outline left> {{ contents.year }}</v-chip>
                          <v-chip v-if="contents.contentRating" v-tooltip:top="{ html: 'Content Rating' }" class="grey darken-4 white--text" small label> {{ contents.contentRating }}</v-chip>

                      </v-flex>
                    </v-layout>
                    <v-divider></v-divider>

 Episode summary automatically hidden for unwatched episodes. Click to unhide.

 {{ content.summary }}

                  </v-flex>

                  <v-flex md9 sm12 style="position:relative" v-if="content.type == 'movie'">

{{ content.title }}

 {{ contents.year }}

                    <v-layout row wrap align-end>
                      <v-flex xs12 sm6  style="opacity:0.5">
                        {{ length }}
                      </v-flex>
                      <v-flex xs12 sm6 style="position:relative">

                          <v-chip bottom v-tooltip:top="{ html: 'Resolution' }" class="grey darken-1 white--text" outline left> {{ largestRes }}p</v-chip>
                          <v-chip v-if="contents.contentRating" v-tooltip:top="{ html: 'Content Rating' }" class="grey darken-4 white--text" small label> {{ contents.contentRating }}</v-chip>
                          <v-chip v-if="contents.studio" v-tooltip:top="{ html: 'Studio' }"  class="grey darken-4 white--text" small label> {{ contents.studio }}</v-chip>

                      </v-flex>
                    </v-layout>
                    <v-divider></v-divider>

 {{ content.summary }}

                    <v-layout row wrap class="hidden-sm-and-down">
                      <v-flex lg3 xl2 v-if="contents.Role && contents.Role.length > 0">
                        <v-subheader class="white--text"> Featuring </v-subheader>

                          {{actor.tag}}  {{actor.role}}

                      </v-flex>
                      <v-flex lg3 xl2 v-if="contents.Director && contents.Director.length > 0">
                        <v-subheader class="white--text"> Director </v-subheader>

                          {{director.tag}}

                      </v-flex>
                      <v-flex lg3 xl2 v-if="contents.Producer && contents.Producer.length > 0">
                        <v-subheader class="white--text"> Producers </v-subheader>

                          {{producer.tag}}

                      </v-flex>
                      <v-flex lg3 xl2 v-if="contents.Writer && contents.Writer.length > 0">
                        <v-subheader class="white--text"> Writers </v-subheader>

                          {{writer.tag}}

                      </v-flex>
                    </v-layout>
                  </v-flex>

                  <v-flex md9 sm12 style="position:relative" v-if="content.type == 'track'">

 {{ content.grandparentTitle }}

 {{ content.parentTitle }}

 {{ content.title }}

                    <v-layout row wrap align-end>
                      <v-flex xs12 sm6  style="opacity:0.5">
                        {{ length }}
                      </v-flex>
                      <v-flex xs12 sm6 style="position:relative">

                          <v-chip v-if="contents.year"  v-tooltip:top="{ html: 'Content Rating' }" class="grey darken-4 white--text" small label> {{ contents.year }}</v-chip>
                          <v-chip v-for="copy in contents.Media" :key="copy.key" v-tooltip:top="{ html: 'Quality' }"  class="grey darken-4 white--text" small> {{ copy.audioCodec.toUpperCase() }}</v-chip>

                      </v-flex>
                    </v-layout>
                    <v-divider></v-divider>
                    <v-chip v-for="country in contents.Country" :key="country.tag" v-tooltip:top="{ html: 'Country' }"> {{ country.tag }}</v-chip>
                    <v-chip v-for="genre in contents.Genre" :key="genre.tag" v-tooltip:top="{ html: 'Genre' }"> {{ genre.tag }}</v-chip>
                  </v-flex>

                    <v-btn v-if="playable && content.Media.length == 1 && (content.viewOffset == 0 || !content.viewOffset)"  v-on:click.native="playMedia(content)" class="primary white--text">
                      <v-icon>play_arrow</v-icon> Play
                    </v-btn>
                    <v-btn v-else @click.native.stop="dialog = true"  class="primary white--text">
                     <v-icon>play_arrow</v-icon> Play Version
                    </v-btn>
                    Now playing on {{ chosenClient.name }} from {{ server.name }}
                    <v-btn v-if="!playable" style="background-color: #cc3f3f" v-on:click.native="pressStop()" class="white--text">
                      <v-icon></v-icon> Stop
                    </v-btn>

                </v-layout>
              </v-container>
            </v-card>
          </v-flex>

        <v-dialog v-if="contents" v-model="dialog" class="pa-0 ma-0" width="500px">
          <v-card  style="background:rgba(0,0,0,0.4); box-shadow: none;">
            <v-card-title class="headline">Select Version</v-card-title>
            <v-checkbox v-if="contents.viewOffset && contents.viewOffset > 0" v-bind:label="'Resume from ' + getDuration(contents.viewOffset) " color="orange lighten-2" class="pa-0 ma-0 ml-3" v-model="resumeFrom"></v-checkbox>

              <v-layout row wrap class="pa-2">
                <v-flex xs8>

{{ media.videoResolution }}p {{ getDuration(media.duration)}}

Video Codec: {{ media.videoCodec }} ({{ media.bitrate }}kbps)

                      Audio Streams: {{ audioStreams(media.Part[0].Stream) }}

                      Subtitles: {{ subtitleStreams(media.Part[0].Stream) }}

                </v-flex>
                <v-flex xs4>
                  <v-btn class="primary white--text" @click.native.stop="playMedia(content,index)">
                    Play
                  </v-btn>
                </v-flex>
              </v-layout>

          </v-card>
        </v-dialog>

</template>


Fix imports in content page.

Fix imports in content page.

<template>

    <page-header :title="content.title">
    </page-header>

    <content-renderer
      v-if="!content.assessment"
      v-show="!searchOpen"
      class="content-renderer"
      @sessionInitialized="setWasIncomplete"
      @startTracking="startTracking"
      @stopTracking="stopTracking"
      @updateProgress="updateProgress"
      :id="content.id"
      :kind="content.kind"
      :files="content.files"
      :contentId="content.content_id"
      :channelId="channelId"
      :available="content.available"
      :extraFields="content.extra_fields"
      :initSession="initSession">
      <icon-button @click="nextContentClicked" v-if="showNextBtn" class="next-btn right" :text="$tr('nextContent')" alignment="right">
        <mat-svg class="right-arrow" category="navigation" name="chevron_right"/>
      </icon-button>
    </content-renderer>

    <assessment-wrapper
      v-else
      v-show="!searchOpen"
      class="content-renderer"
      @sessionInitialized="setWasIncomplete"
      @startTracking="startTracking"
      @stopTracking="stopTracking"
      @updateProgress="updateProgress"
      :id="content.id"
      :kind="content.kind"
      :files="content.files"
      :contentId="content.content_id"
      :channelId="channelId"
      :available="content.available"
      :extraFields="content.extra_fields"
      :initSession="initSession">
      <icon-button @click="nextContentClicked" v-if="showNextBtn" class="next-btn right" :text="$tr('nextContent')" alignment="right">
        <mat-svg class="right-arrow" category="navigation" name="chevron_right"/>
      </icon-button>
    </assessment-wrapper>

        {{ $tr('author') }}: {{ content.author }}

        {{ $tr('license') }}: {{ content.license }}

        <template v-if="content.license_description">

            <ui-icon icon="info_outline" :ariaLabel="$tr('licenseDescription')" class="license-tooltip"/>

          <ui-popover trigger="licensetooltip" class="license-description">
            {{ content.license_description }}
          </ui-popover>
        </template>

        {{ $tr('copyrightHolder') }}: {{ content.license_owner }}

    <download-button v-if="canDownload" :files="content.files" class="download-button"/>

    <content-card-carousel
      v-if="showRecommended"
      :gen-link="genRecLink"
      :header="recommendedText"
      :contents="recommended"/>

    <content-points
      v-if="progress >= 1 && wasIncomplete"
      @close="closeModal"
      :kind="content.next_content.kind"
      :title="content.next_content.title">

      <icon-button slot="nextItemBtn" @click="nextContentClicked" class="next-btn" :text="$tr('nextContent')" alignment="right">
        <mat-svg class="right-arrow" category="navigation" name="chevron_right"/>
      </icon-button>
    </content-points>

</template>


Fixes points within appbar

Fixes points within appbar

<template>

      <points-icon class="icon" :active="true"/>

    {{ $formatNumber(totalPoints) }}
    <ui-tooltip trigger="points" :position="'bottom right'" :openOn="'hover focus'">{{ $tr('totalPoints', { points: totalPoints }) }}</ui-tooltip>

</template>


Fix n+1 query when adding single activity to print config

Fixes #3015

<template>
  <div>
    <e-select v-if="!loading" v-model="optionsScheduleEntry" :items="scheduleEntries" />
    <v-skeleton-loader v-else type="image" height="56" />
  </div>
</template>

<script>
export default {
  name: 'ActivityConfig',
  props: {
    value: { type: Object, required: true },
    camp: { type: Object, required: true },
  },
  computed: {
    options: {
      get() {
        return this.value
      },
      set(v) {
        this.$emit('input', v)
      },
    },
    optionsScheduleEntry: {
      get() {
        return {
          activity: this.options.activity,
          scheduleEntry: this.options.scheduleEntry,
        }
      },
      set(val) {
        this.options.activity = val.activity
        this.options.scheduleEntry = val.scheduleEntry
      },
    },
    scheduleEntries() {
      let scheduleEntries = []

      this.camp.periods().items.forEach((p) => {
        const periodScheduleEntries = p.scheduleEntries().items.map((se) => ({
          value: { activity: se.activity()._meta.self, scheduleEntry: se._meta.self },
          text: '(' + se.number + ') ' + se.activity().title,
        }))
        scheduleEntries = [...scheduleEntries, ...periodScheduleEntries]
      })

      return scheduleEntries
    },
    loading() {
      return [
        this.camp.activities(),
        ...this.camp.periods().items.map((period) => period.scheduleEntries()),
      ].some((entity) => entity._meta.loading)
    },
  },
  defaultOptions() {
    return {
      activity: null,
      scheduleEntry: null,
    }
  },
}
</script>

<template>
  <div>
    <e-select v-model="optionsScheduleEntry" :items="scheduleEntries" />
  </div>
</template>

<script>
export default {
  name: 'ActivityConfig',
  props: {
    value: { type: Object, required: true },
    camp: { type: Object, required: true },
  },
  data() {
    return {}
  },
  computed: {
    options: {
      get() {
        return this.value
      },
      set(v) {
        this.$emit('input', v)
      },
    },
    optionsScheduleEntry: {
      get() {
        return {
          activity: this.options.activity,
          scheduleEntry: this.options.scheduleEntry,
        }
      },
      set(val) {
        this.options.activity = val.activity
        this.options.scheduleEntry = val.scheduleEntry
      },
    },
    scheduleEntries() {
      let scheduleEntries = []

      this.camp.periods().items.forEach((p) => {
        const periodScheduleEntries = p.scheduleEntries().items.map((se) => ({
          value: { activity: se.activity()._meta.self, scheduleEntry: se._meta.self },
          text: '(' + se.number + ') ' + se.activity().title,
        }))
        scheduleEntries = [...scheduleEntries, ...periodScheduleEntries]
      })

      return scheduleEntries
    },
  },
  defaultOptions() {
    return {
      activity: null,
      scheduleEntry: null,
    }
  },
}
</script>


remove unused code (form feedback for notes input)

<template>

Notes

          Save
          Cancel
          Note added.

            Are you sure you want to save this note?

                Save

                Cancel

            Your note is not saved. Are you sure you want to discard your changes?

                Cancel

                Discard

          No notes for this person.

          <div class="mt-3" v-for="(note, index) in sortedNotes" :key="`note ${index}`" :id="`person-note-${index}`">
              {{ note.author }} ({{ note.date | moment("MMMM Do YYYY [at] LT") }}):
              {{ note.note }}

</template>


Moved MAC filters, fixes #88

Moved MAC filters, fixes #88

<template>
    <v-layout row-xs child-flex-xs wrap justify-space-around>
        <v-flex xs3 wrap v-if="showControls.length>0 && view.controlPosition !== 'right'" class="associations-control-container">

-1">

Associations per page

                <v-select
                        v-bind:items="pageSizes"
                        v-model="pagination.rowsPerPage"
                        label="Associations per page"
                        light
                        single-line
                        auto
                ></v-select>

-1">

Significance

                <v-switch
                        label="Only show significant hits"
                        v-model="significant"
                        primary
                        class="mt-0 mb-0"
                ></v-switch>

                    <v-radio label="Permutation threshold" v-model="filters.significant" value="p" class="mt-0 mb-0"></v-radio>
                    <v-radio label="Bonferroni threshold" v-model="filters.significant" value="b" class="mt-0 mb-0"></v-radio>

If turned off, all associations with p-value < 10-4 will be displayed.

-1">

MAF

                <v-checkbox v-model="filters.maf" primary :label="'<1% (' + roundPerc(percentage.maf['*-0.01']) + '% of associations)'" value="1" class="mb-0"></v-checkbox>
                <v-checkbox v-model="filters.maf" primary :label="'1-5% (' + roundPerc(percentage.maf['0.01-0.05001']) + '% of associations)'" value="1-5" class="mt-0 mb-0"></v-checkbox>
                <v-checkbox v-model="filters.maf" primary :label="'5-10% (' + roundPerc(percentage.maf['0.05001-0.1001']) + '% of associations)'" value="5-10" class="mt-0 mb-0"></v-checkbox>
                <v-checkbox v-model="filters.maf" primary :label="'>10% (' + roundPerc(percentage.maf['0.1001-*']) + '% of associations)'" value="10" class="mt-0"></v-checkbox>

-1">

MAC

                <v-checkbox v-model="filters.mac" primary :label="'≤5 (' + roundPerc(percentage.mac['*-6.0']) + '% of associations)'" value="0" class="mb-0"></v-checkbox>
                <v-checkbox v-model="filters.mac" primary :label="'>5 (' + roundPerc(percentage.mac['6.0-*']) + '% of associations)'" value="5" class="mt-0"></v-checkbox>

-1">

Chromosomes

                <v-checkbox v-model="filters.chr" primary :label="'1 (' + roundPerc(percentage.chromosomes.chr1) + '% of associations)'" value="1" class="mb-0"> what</v-checkbox>
                <v-checkbox v-model="filters.chr" primary :label="'2 (' + roundPerc(percentage.chromosomes.chr2) + '% of associations)'" value="2" class="mt-0 mb-0"></v-checkbox>
                <v-checkbox v-model="filters.chr" primary :label="'3 (' + roundPerc(percentage.chromosomes.chr3) + '% of associations)'" value="3" class="mt-0 mb-0"></v-checkbox>
                <v-checkbox v-model="filters.chr" primary :label="'4 (' + roundPerc(percentage.chromosomes.chr4) + '% of associations)'" value="4" class="mt-0 mb-0"></v-checkbox>
                <v-checkbox v-model="filters.chr" primary :label="'5 (' + roundPerc(percentage.chromosomes.chr5) + '% of associations)'" value="5" class="mt-0"></v-checkbox>

-1">

Annotation

                <v-checkbox v-model="filters.annotation" primary :label="'Non-synonymous coding (' + roundPerc(percentage.annotations.ns) + '% of associations)'" value="ns" class="mb-0"></v-checkbox>
                <v-checkbox v-model="filters.annotation" primary :label="'Synonymous coding (' + roundPerc(percentage.annotations.s) + '% of associations)'" value="s" class="mt-0 mb-0"></v-checkbox>
                <v-checkbox v-model="filters.annotation" primary :label="'Intron (' + roundPerc(percentage.annotations.in) + '% of associations)'" value="in" class="mt-0 mb-0"></v-checkbox>
                <v-checkbox v-model="filters.annotation" primary :label="'Intergenic (' + roundPerc(percentage.annotations.i) + '% of associations)'" value="i" class="mt-0 mb-0"></v-checkbox>

-1">

Type

                <v-checkbox v-model="filters.type" primary :label="'Genic (' + roundPerc(percentage.types['1']) + '% of associations)'" value="genic" class="mb-0"></v-checkbox>
                <v-checkbox v-model="filters.type" primary :label="'Non-genic (' + roundPerc(percentage.types['0']) + '% of associations)'" value="non-genic" class="mt-0 mb-0"></v-checkbox>

Download

Download the filtered associations (since the file first needs to be generated, this may take a while, please only click once)

                <v-btn floating primary class="mr-3 mt-2 btn--large" tag="a" :href="_getDownloadHref()" download v-tooltip:bottom="{html: 'Download set of filtered associations'}">
                    <v-icon dark>file_download</v-icon>
                </v-btn>

        </v-flex>
        <v-flex xs9 wrap fill-height class="association-table-container" @mouseleave="showAssociation(null)" v-show="view.controlPosition !== 'right' || showSwitch">
            <v-data-table
                    v-bind:headers="headers"
                    v-bind:items="associations"
                    v-bind:pagination.sync="pagination"
                    hide-actions
                    :loading="loading"
                    class="elevation-1 mt-2 asso-table"

            >
                <template slot="headerCell" scope="props">

                      {{ props.header.text | capitalize }}

                </template>
                <template slot="items" scope="props">

{{ props.item.snp.chr | capitalize }}:{{ props.item.snp.position }}

Missing SNP info

                        {{ props.item.score | round }}

                            <router-link :to="{name: 'studyDetail', params: { id: props.item.study.id }}" >{{ props.item.study.name }}</router-link>

                            <router-link v-if="'snp' in props.item" :to="{name: 'geneDetail', params: { geneId: props.item.snp.geneName }}">{{ props.item.snp.geneName }}</router-link>
Missing SNP info

                        {{ props.item.maf | round }}
                        {{ props.item.mac }}

                            <router-link :to="{name: 'phenotypeDetail', params: { id: props.item.study.phenotype.id }}">{{ props.item.study.phenotype.name }}</router-link>

                                 0 ">{{ props.item.snp.annotations[0].effect | toLowerCap }}

Missing SNP info

                                GenicNon-genic

Missing SNP info

                </template>
            </v-data-table>

                <v-pagination :length="pageCount" v-model="currentPage"  v-if="view.name !== 'top-associations'">
                </v-pagination>

                    <v-btn floating secondary @click="previous" :disabled="pager===1"><v-icon light>keyboard_arrow_left</v-icon></v-btn>
                    <v-btn floating secondary @click="next" :disabled="pager===pageCount"><v-icon light>keyboard_arrow_right</v-icon></v-btn>

        </v-flex >
        <v-flex xs11 wrap fill-height class="association-table-container" v-show="showControls.length>0 && view.controlPosition === 'right' && !showSwitch">
            <v-data-table
                    v-bind:headers="headers"
                    v-bind:items="associations"
                    v-bind:pagination.sync="pagination"
                    hide-actions
                    :loading="loading"
                    class="elevation-1 mt-2 asso-table"
            >
                <template slot="headerCell" scope="props">

                      {{ props.header.text | capitalize }}

                </template>
                <template slot="items" scope="props" @mouseover.native="showAssociation">

{{ props.item.snp.chr | capitalize }}:{{ props.item.snp.position }}

Missing SNP info

                        {{ props.item.score | round }}

                            <router-link :to="{name: 'studyDetail', params: { id: props.item.study.id }}" >{{ props.item.study.name }}</router-link>

                            <router-link v-if="'snp' in props.item" :to="{name: 'geneDetail', params: { geneId: props.item.snp.geneName }}">{{ props.item.snp.geneName }}</router-link>
Missing SNP info

                        {{ props.item.maf | round }}
                        {{ props.item.mac }}

                            <router-link :to="{name: 'phenotypeDetail', params: { id: props.item.study.phenotype.id }}">{{ props.item.study.phenotype.name }}</router-link>

                                 0 ">{{ props.item.snp.annotations[0].effect | toLowerCap }}

Missing SNP info

                                GenicNon-genic

Missing SNP info

                </template>
            </v-data-table>

                <v-pagination :length="pageCount" v-model="currentPage"  v-if="view.name !== 'top-associations'">
                </v-pagination>

                    <v-btn floating secondary @click="previous" :disabled="pager===1"><v-icon light>keyboard_arrow_left</v-icon></v-btn>
                    <v-btn floating secondary @click="next" :disabled="pager===pageCount"><v-icon light>keyboard_arrow_right</v-icon></v-btn>

        </v-flex>
        <v-flex xs3 row v-show="showSwitch">
            <v-layout row>
                <v-flex xs10 wrap v-if="showControls.length>0 && view.controlPosition === 'right' && showSwitch" class="associations-control-container">

-1">

MAF

                        <v-checkbox v-model="filters.maf" primary :label="'<1% (' + roundPerc(percentage.maf['*-0.01']) + '% of associations)'" value="1" class="mb-0"></v-checkbox>
                        <v-checkbox v-model="filters.maf" primary :label="'1-5% (' + roundPerc(percentage.maf['0.01-0.05001']) + '% of associations)'" value="1-5" class="mt-0 mb-0"></v-checkbox>
                        <v-checkbox v-model="filters.maf" primary :label="'5-10% (' + roundPerc(percentage.maf['0.05001-0.1001']) + '% of associations)'" value="5-10" class="mt-0 mb-0"></v-checkbox>
                        <v-checkbox v-model="filters.maf" primary :label="'>10% (' + roundPerc(percentage.maf['0.1001-*']) + '% of associations)'" value="10" class="mt-0"></v-checkbox>

-1">

MAC

                        <v-checkbox v-model="filters.mac" primary :label="'<5 (' + roundPerc(percentage.mac['0-6']) + '% of associations)'" value="0" class="mb-0"></v-checkbox>
                        <v-checkbox v-model="filters.mac" primary :label="'>5 (' + roundPerc(percentage.mac['6-*']) + '% of associations)'" value="5" class="mt-0"></v-checkbox>

-1">

Chromosomes

                        <v-checkbox v-model="filters.chr" primary :label="'1 (' + roundPerc(percentage.chromosomes.chr1) + '% of associations)'" value="1" class="mb-0"> what</v-checkbox>
                        <v-checkbox v-model="filters.chr" primary :label="'2 (' + roundPerc(percentage.chromosomes.chr2) + '% of associations)'" value="2" class="mt-0 mb-0"></v-checkbox>
                        <v-checkbox v-model="filters.chr" primary :label="'3 (' + roundPerc(percentage.chromosomes.chr3) + '% of associations)'" value="3" class="mt-0 mb-0"></v-checkbox>
                        <v-checkbox v-model="filters.chr" primary :label="'4 (' + roundPerc(percentage.chromosomes.chr4) + '% of associations)'" value="4" class="mt-0 mb-0"></v-checkbox>
                        <v-checkbox v-model="filters.chr" primary :label="'5 (' + roundPerc(percentage.chromosomes.chr5) + '% of associations)'" value="5" class="mt-0"></v-checkbox>

-1">

Annotation

                        <v-checkbox v-model="filters.annotation" primary :label="'Non-synonymous coding (' + roundPerc(percentage.annotations.ns) + '% of associations)'" value="ns" class="mb-0"></v-checkbox>
                        <v-checkbox v-model="filters.annotation" primary :label="'Synonymous coding (' + roundPerc(percentage.annotations.s) + '% of associations)'" value="s" class="mt-0 mb-0"></v-checkbox>
                        <v-checkbox v-model="filters.annotation" primary :label="'Intron (' + roundPerc(percentage.annotations.in) + '% of associations)'" value="in" class="mt-0 mb-0"></v-checkbox>
                        <v-checkbox v-model="filters.annotation" primary :label="'Intergenic (' + roundPerc(percentage.annotations.i) + '% of associations)'" value="i" class="mt-0 mb-0"></v-checkbox>

-1">

Type

                        <v-checkbox v-model="filters.type" primary :label="'Genic (' + roundPerc(percentage.types['1']) + '% of associations)'" value="genic" class="mb-0"></v-checkbox>
                        <v-checkbox v-model="filters.type" primary :label="'Non-genic (' + roundPerc(percentage.types['0']) + '% of associations)'" value="non-genic" class="mt-0 mb-0"></v-checkbox>

-1">

Significance

                        <v-switch
                                label="Only show significant hits"
                                v-model="significant"
                                primary
                                class="mt-0 mb-0"
                        ></v-switch>

                            <v-radio label="Permutation threshold" v-model="filters.significant" value="p" class="mt-0 mb-0"></v-radio>
                            <v-radio label="Bonferroni threshold" v-model="filters.significant" value="b" class="mt-0 mb-0"></v-radio>

If turned off, all associations with p-value < 10-4 will be displayed.

Download

Download the filtered associations (since the file first needs to be generated, this may take a while, please only click once)

                        <v-btn floating primary class="mr-3 mt-2 btn--large" tag="a" :href="_getDownloadHref()" download v-tooltip:bottom="{html: 'Download set of filtered associations (since the file needs to be generated, this may take a while)'}">
                            <v-icon dark>file_download</v-icon>
                        </v-btn>

            </v-flex>
            <v-flex xs2 class="text-xs-right">

<v-switch v-model="showSwitch" primary label="Filters" class="mb-0 switchright"></v-switch>

            </v-flex>
            </v-layout>
        </v-flex>
        <v-flex xs1 v-show="showControls.length>0 && view.controlPosition === 'right' && !showSwitch" class="text-xs-right">
            <v-layout>
                <v-flex xs6 offset-xs6>

<v-switch v-model="showSwitch" primary label="Filters" class="mb-0 switchright"></v-switch>

                </v-flex>
            </v-layout>
        </v-flex>
    </v-layout>
</template>

<template>
    <v-layout row-xs child-flex-xs wrap justify-space-around>
        <v-flex xs3 wrap v-if="showControls.length>0 && view.controlPosition !== 'right'" class="associations-control-container">

-1">

Associations per page

                <v-select
                        v-bind:items="pageSizes"
                        v-model="pagination.rowsPerPage"
                        label="Associations per page"
                        light
                        single-line
                        auto
                ></v-select>

-1">

Significance

                <v-switch
                        label="Only show significant hits"
                        v-model="significant"
                        primary
                        class="mt-0 mb-0"
                ></v-switch>

                    <v-radio label="Permutation threshold" v-model="filters.significant" value="p" class="mt-0 mb-0"></v-radio>
                    <v-radio label="Bonferroni threshold" v-model="filters.significant" value="b" class="mt-0 mb-0"></v-radio>

If turned off, all associations with p-value < 10-4 will be displayed.

-1">

MAF

                <v-checkbox v-model="filters.maf" primary :label="'<1% (' + roundPerc(percentage.maf['*-0.01']) + '% of associations)'" value="1" class="mb-0"></v-checkbox>
                <v-checkbox v-model="filters.maf" primary :label="'1-5% (' + roundPerc(percentage.maf['0.01-0.05001']) + '% of associations)'" value="1-5" class="mt-0 mb-0"></v-checkbox>
                <v-checkbox v-model="filters.maf" primary :label="'5-10% (' + roundPerc(percentage.maf['0.05001-0.1001']) + '% of associations)'" value="5-10" class="mt-0 mb-0"></v-checkbox>
                <v-checkbox v-model="filters.maf" primary :label="'>10% (' + roundPerc(percentage.maf['0.1001-*']) + '% of associations)'" value="10" class="mt-0"></v-checkbox>

-1">

Chromosomes

                <v-checkbox v-model="filters.chr" primary :label="'1 (' + roundPerc(percentage.chromosomes.chr1) + '% of associations)'" value="1" class="mb-0"> what</v-checkbox>
                <v-checkbox v-model="filters.chr" primary :label="'2 (' + roundPerc(percentage.chromosomes.chr2) + '% of associations)'" value="2" class="mt-0 mb-0"></v-checkbox>
                <v-checkbox v-model="filters.chr" primary :label="'3 (' + roundPerc(percentage.chromosomes.chr3) + '% of associations)'" value="3" class="mt-0 mb-0"></v-checkbox>
                <v-checkbox v-model="filters.chr" primary :label="'4 (' + roundPerc(percentage.chromosomes.chr4) + '% of associations)'" value="4" class="mt-0 mb-0"></v-checkbox>
                <v-checkbox v-model="filters.chr" primary :label="'5 (' + roundPerc(percentage.chromosomes.chr5) + '% of associations)'" value="5" class="mt-0"></v-checkbox>

-1">

Annotation

                <v-checkbox v-model="filters.annotation" primary :label="'Non-synonymous coding (' + roundPerc(percentage.annotations.ns) + '% of associations)'" value="ns" class="mb-0"></v-checkbox>
                <v-checkbox v-model="filters.annotation" primary :label="'Synonymous coding (' + roundPerc(percentage.annotations.s) + '% of associations)'" value="s" class="mt-0 mb-0"></v-checkbox>
                <v-checkbox v-model="filters.annotation" primary :label="'Intron (' + roundPerc(percentage.annotations.in) + '% of associations)'" value="in" class="mt-0 mb-0"></v-checkbox>
                <v-checkbox v-model="filters.annotation" primary :label="'Intergenic (' + roundPerc(percentage.annotations.i) + '% of associations)'" value="i" class="mt-0 mb-0"></v-checkbox>

-1">

Type

                <v-checkbox v-model="filters.type" primary :label="'Genic (' + roundPerc(percentage.types['1']) + '% of associations)'" value="genic" class="mb-0"></v-checkbox>
                <v-checkbox v-model="filters.type" primary :label="'Non-genic (' + roundPerc(percentage.types['0']) + '% of associations)'" value="non-genic" class="mt-0 mb-0"></v-checkbox>

-1">

MAC

                <v-checkbox v-model="filters.mac" primary :label="'≤5 (' + roundPerc(percentage.mac['*-6.0']) + '% of associations)'" value="0" class="mb-0"></v-checkbox>
                <v-checkbox v-model="filters.mac" primary :label="'>5 (' + roundPerc(percentage.mac['6.0-*']) + '% of associations)'" value="5" class="mt-0"></v-checkbox>

Download

Download the filtered associations (since the file first needs to be generated, this may take a while, please only click once)

                <v-btn floating primary class="mr-3 mt-2 btn--large" tag="a" :href="_getDownloadHref()" download v-tooltip:bottom="{html: 'Download set of filtered associations'}">
                    <v-icon dark>file_download</v-icon>
                </v-btn>

        </v-flex>
        <v-flex xs9 wrap fill-height class="association-table-container" @mouseleave="showAssociation(null)" v-show="view.controlPosition !== 'right' || showSwitch">
            <v-data-table
                    v-bind:headers="headers"
                    v-bind:items="associations"
                    v-bind:pagination.sync="pagination"
                    hide-actions
                    :loading="loading"
                    class="elevation-1 mt-2 asso-table"

            >
                <template slot="headerCell" scope="props">

                      {{ props.header.text | capitalize }}

                </template>
                <template slot="items" scope="props">

{{ props.item.snp.chr | capitalize }}:{{ props.item.snp.position }}

Missing SNP info

                        {{ props.item.score | round }}

                            <router-link :to="{name: 'studyDetail', params: { id: props.item.study.id }}" >{{ props.item.study.name }}</router-link>

                            <router-link v-if="'snp' in props.item" :to="{name: 'geneDetail', params: { geneId: props.item.snp.geneName }}">{{ props.item.snp.geneName }}</router-link>
Missing SNP info

                        {{ props.item.maf | round }}
                        {{ props.item.mac }}

                            <router-link :to="{name: 'phenotypeDetail', params: { id: props.item.study.phenotype.id }}">{{ props.item.study.phenotype.name }}</router-link>

                                 0 ">{{ props.item.snp.annotations[0].effect | toLowerCap }}

Missing SNP info

                                GenicNon-genic

Missing SNP info

                </template>
            </v-data-table>

                <v-pagination :length="pageCount" v-model="currentPage"  v-if="view.name !== 'top-associations'">
                </v-pagination>

                    <v-btn floating secondary @click="previous" :disabled="pager===1"><v-icon light>keyboard_arrow_left</v-icon></v-btn>
                    <v-btn floating secondary @click="next" :disabled="pager===pageCount"><v-icon light>keyboard_arrow_right</v-icon></v-btn>

        </v-flex >
        <v-flex xs11 wrap fill-height class="association-table-container" v-show="showControls.length>0 && view.controlPosition === 'right' && !showSwitch">
            <v-data-table
                    v-bind:headers="headers"
                    v-bind:items="associations"
                    v-bind:pagination.sync="pagination"
                    hide-actions
                    :loading="loading"
                    class="elevation-1 mt-2 asso-table"
            >
                <template slot="headerCell" scope="props">

                      {{ props.header.text | capitalize }}

                </template>
                <template slot="items" scope="props" @mouseover.native="showAssociation">

{{ props.item.snp.chr | capitalize }}:{{ props.item.snp.position }}

Missing SNP info

                        {{ props.item.score | round }}

                            <router-link :to="{name: 'studyDetail', params: { id: props.item.study.id }}" >{{ props.item.study.name }}</router-link>

                            <router-link v-if="'snp' in props.item" :to="{name: 'geneDetail', params: { geneId: props.item.snp.geneName }}">{{ props.item.snp.geneName }}</router-link>
Missing SNP info

                        {{ props.item.maf | round }}
                        {{ props.item.mac }}

                            <router-link :to="{name: 'phenotypeDetail', params: { id: props.item.study.phenotype.id }}">{{ props.item.study.phenotype.name }}</router-link>

                                 0 ">{{ props.item.snp.annotations[0].effect | toLowerCap }}

Missing SNP info

                                GenicNon-genic

Missing SNP info

                </template>
            </v-data-table>

                <v-pagination :length="pageCount" v-model="currentPage"  v-if="view.name !== 'top-associations'">
                </v-pagination>

                    <v-btn floating secondary @click="previous" :disabled="pager===1"><v-icon light>keyboard_arrow_left</v-icon></v-btn>
                    <v-btn floating secondary @click="next" :disabled="pager===pageCount"><v-icon light>keyboard_arrow_right</v-icon></v-btn>

        </v-flex>
        <v-flex xs3 row v-show="showSwitch">
            <v-layout row>
                <v-flex xs10 wrap v-if="showControls.length>0 && view.controlPosition === 'right' && showSwitch" class="associations-control-container">

-1">

MAF

                        <v-checkbox v-model="filters.maf" primary :label="'<1% (' + roundPerc(percentage.maf['*-0.01']) + '% of associations)'" value="1" class="mb-0"></v-checkbox>
                        <v-checkbox v-model="filters.maf" primary :label="'1-5% (' + roundPerc(percentage.maf['0.01-0.05001']) + '% of associations)'" value="1-5" class="mt-0 mb-0"></v-checkbox>
                        <v-checkbox v-model="filters.maf" primary :label="'5-10% (' + roundPerc(percentage.maf['0.05001-0.1001']) + '% of associations)'" value="5-10" class="mt-0 mb-0"></v-checkbox>
                        <v-checkbox v-model="filters.maf" primary :label="'>10% (' + roundPerc(percentage.maf['0.1001-*']) + '% of associations)'" value="10" class="mt-0"></v-checkbox>

-1">

Chromosomes

                        <v-checkbox v-model="filters.chr" primary :label="'1 (' + roundPerc(percentage.chromosomes.chr1) + '% of associations)'" value="1" class="mb-0"> what</v-checkbox>
                        <v-checkbox v-model="filters.chr" primary :label="'2 (' + roundPerc(percentage.chromosomes.chr2) + '% of associations)'" value="2" class="mt-0 mb-0"></v-checkbox>
                        <v-checkbox v-model="filters.chr" primary :label="'3 (' + roundPerc(percentage.chromosomes.chr3) + '% of associations)'" value="3" class="mt-0 mb-0"></v-checkbox>
                        <v-checkbox v-model="filters.chr" primary :label="'4 (' + roundPerc(percentage.chromosomes.chr4) + '% of associations)'" value="4" class="mt-0 mb-0"></v-checkbox>
                        <v-checkbox v-model="filters.chr" primary :label="'5 (' + roundPerc(percentage.chromosomes.chr5) + '% of associations)'" value="5" class="mt-0"></v-checkbox>

-1">

Annotation

                        <v-checkbox v-model="filters.annotation" primary :label="'Non-synonymous coding (' + roundPerc(percentage.annotations.ns) + '% of associations)'" value="ns" class="mb-0"></v-checkbox>
                        <v-checkbox v-model="filters.annotation" primary :label="'Synonymous coding (' + roundPerc(percentage.annotations.s) + '% of associations)'" value="s" class="mt-0 mb-0"></v-checkbox>
                        <v-checkbox v-model="filters.annotation" primary :label="'Intron (' + roundPerc(percentage.annotations.in) + '% of associations)'" value="in" class="mt-0 mb-0"></v-checkbox>
                        <v-checkbox v-model="filters.annotation" primary :label="'Intergenic (' + roundPerc(percentage.annotations.i) + '% of associations)'" value="i" class="mt-0 mb-0"></v-checkbox>

-1">

Type

                        <v-checkbox v-model="filters.type" primary :label="'Genic (' + roundPerc(percentage.types['1']) + '% of associations)'" value="genic" class="mb-0"></v-checkbox>
                        <v-checkbox v-model="filters.type" primary :label="'Non-genic (' + roundPerc(percentage.types['0']) + '% of associations)'" value="non-genic" class="mt-0 mb-0"></v-checkbox>

-1">

MAC

                        <v-checkbox v-model="filters.mac" primary :label="'<5 (' + roundPerc(percentage.mac['0-6']) + '% of associations)'" value="0" class="mb-0"></v-checkbox>
                        <v-checkbox v-model="filters.mac" primary :label="'>5 (' + roundPerc(percentage.mac['6-*']) + '% of associations)'" value="5" class="mt-0"></v-checkbox>

-1">

Significance

                        <v-switch
                                label="Only show significant hits"
                                v-model="significant"
                                primary
                                class="mt-0 mb-0"
                        ></v-switch>

                            <v-radio label="Permutation threshold" v-model="filters.significant" value="p" class="mt-0 mb-0"></v-radio>
                            <v-radio label="Bonferroni threshold" v-model="filters.significant" value="b" class="mt-0 mb-0"></v-radio>

If turned off, all associations with p-value < 10-4 will be displayed.

Download

Download the filtered associations (since the file first needs to be generated, this may take a while, please only click once)

                        <v-btn floating primary class="mr-3 mt-2 btn--large" tag="a" :href="_getDownloadHref()" download v-tooltip:bottom="{html: 'Download set of filtered associations (since the file needs to be generated, this may take a while)'}">
                            <v-icon dark>file_download</v-icon>
                        </v-btn>

            </v-flex>
            <v-flex xs2 class="text-xs-right">

<v-switch v-model="showSwitch" primary label="Filters" class="mb-0 switchright"></v-switch>

            </v-flex>
            </v-layout>
        </v-flex>
        <v-flex xs1 v-show="showControls.length>0 && view.controlPosition === 'right' && !showSwitch" class="text-xs-right">
            <v-layout>
                <v-flex xs6 offset-xs6>

<v-switch v-model="showSwitch" primary label="Filters" class="mb-0 switchright"></v-switch>

                </v-flex>
            </v-layout>
        </v-flex>
    </v-layout>
</template>


turns audio data properties into object hashes

<template>

      <button
        @click="togglePlay"
        class="play-button"
        :class="{ 'is-play': isPlay.status, 'is-pause': isPause.status }"
        ></button>

        {{ formattedCurrentMin }} : {{ formattedCurrentSec }}

      <input
        v-el:timebar
        @click="setTimebar"
        class="timeline" type="range" min="0" max="100" value="0"
        >

        {{ formattedTotalMin }} : {{ formattedTotalSec }}

      <button class="audio-button" @click="restart">restart</button>
      <button class="audio-button" @click="minus20">- 20s</button>
      <button class="audio-button" @click="plus20">+ 20s</button>

  <audio
    id="audio"
    @timeupdate="timeUpdate"
    @loadedmetadata="setTotalTime"
    v-el:audio
    src="http://www.stephaniequinn.com/Music/Commercial%20DEMO%20-%2004.mp3"
    ></audio>

</template>

<template>

      <button
        @click="togglePlay"
        class="play-button"
        :class="{ 'is-play': isPlay, 'is-pause': isPause }">
      </button>

        {{ currentMinutes }} : {{ formattedCurrentSec }}

      <input
        v-el:timebar
        @click="setTimebar"
        class="timeline" type="range" min="0" max="100" value="0">

        {{ totalMinutes }} : {{ formattedTotalSec }}

      <button class="audio-button" @click="restart">restart</button>
      <button class="audio-button" @click="minus20">- 20s</button>
      <button class="audio-button" @click="plus20">+ 20s</button>

  <audio
    id="audio"
    @timeupdate="timeUpdate"
    @loadedmetadata="setTotalTime"
    v-el:audio
    src="http://www.stephaniequinn.com/Music/Commercial%20DEMO%20-%2004.mp3">
  </audio>

</template>


Updates tab styling.

Updates tab styling.

<template>
  <uw-card
    v-if="!isErrored && term && (!isReady || periods.length > 0)"
    :loaded="isReady" :errored="isErrored"
  >
    <template #card-heading>

        {{ termName }} Schedule

          Final exam schedule and Visual Schedule

    </template>
    <template #card-body>

 0">

            {{ eosSection.curriculum_abbr }} {{ eosSection.course_number }}
            {{ eosSection.section_id }} meeting times:

              ,

                {{ formatDate(meeting.eos_start_date) }}

                  – {{ formatDate(meeting.eos_end_date) }}

                (Class does not meet)

                (Online learning)

                  ({{ formatTime(meeting.start_time) }} –
                  {{ formatTime(meeting.end_time) }})

          <uw-schedule-tab :period="period" />

    </template>
  </uw-card>
</template>


docs(VDatatable): fix crud example (#7166)

<template>
  <v-data-table
    :headers="headers"
    :items="desserts"
    sort-by="calories"
    class="elevation-1"
  >
    <template v-slot:top>
      <v-toolbar flat color="white">
        <v-toolbar-title>My CRUD</v-toolbar-title>
        <v-divider
          class="mx-3"
          inset
          vertical
        ></v-divider>
        <v-spacer></v-spacer>
        <v-dialog v-model="dialog" max-width="500px">
          <v-btn slot="activator" color="primary" dark class="mb-2">New Item</v-btn>
          <v-card>
            <v-card-title>
              {{ formTitle }}
            </v-card-title>

            <v-card-text>
              <v-container grid-list-md>
                <v-layout wrap>
                  <v-flex xs12 sm6 md4>
                    <v-text-field v-model="editedItem.name" label="Dessert name"></v-text-field>
                  </v-flex>
                  <v-flex xs12 sm6 md4>
                    <v-text-field v-model="editedItem.calories" label="Calories"></v-text-field>
                  </v-flex>
                  <v-flex xs12 sm6 md4>
                    <v-text-field v-model="editedItem.fat" label="Fat (g)"></v-text-field>
                  </v-flex>
                  <v-flex xs12 sm6 md4>
                    <v-text-field v-model="editedItem.carbs" label="Carbs (g)"></v-text-field>
                  </v-flex>
                  <v-flex xs12 sm6 md4>
                    <v-text-field v-model="editedItem.protein" label="Protein (g)"></v-text-field>
                  </v-flex>
                </v-layout>
              </v-container>
            </v-card-text>

            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn color="blue darken-1" text @click="close">Cancel</v-btn>
              <v-btn color="blue darken-1" text @click="save">Save</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-toolbar>
    </template>
    <template v-slot:item.action="{ item }">
      <v-icon
        small
        class="mr-2"
        @click="editItem(item)"
      >
        edit
      </v-icon>
      <v-icon
        small
        @click="deleteItem(item)"
      >
        delete
      </v-icon>
    </template>
    <template #no-data>
      <v-btn color="primary" @click="initialize">Reset</v-btn>
    </template>
  </v-data-table>
</template>

<template>
  <v-data-table
    :headers="headers"
    :items="desserts"
    sort-by="calories"
    class="elevation-1"
  >
    <template v-slot:top>
      <v-toolbar flat color="white">
        <v-toolbar-title>My CRUD</v-toolbar-title>
        <v-divider
          class="mx-3"
          inset
          vertical
        ></v-divider>
        <v-spacer></v-spacer>
        <v-dialog v-model="dialog" max-width="500px">
          <v-btn slot="activator" color="primary" dark class="mb-2">New Item</v-btn>
          <v-card>
            <v-card-title>
              {{ formTitle }}
            </v-card-title>

            <v-card-text>
              <v-container grid-list-md>
                <v-layout wrap>
                  <v-flex xs12 sm6 md4>
                    <v-text-field v-model="editedItem.name" label="Dessert name"></v-text-field>
                  </v-flex>
                  <v-flex xs12 sm6 md4>
                    <v-text-field v-model="editedItem.calories" label="Calories"></v-text-field>
                  </v-flex>
                  <v-flex xs12 sm6 md4>
                    <v-text-field v-model="editedItem.fat" label="Fat (g)"></v-text-field>
                  </v-flex>
                  <v-flex xs12 sm6 md4>
                    <v-text-field v-model="editedItem.carbs" label="Carbs (g)"></v-text-field>
                  </v-flex>
                  <v-flex xs12 sm6 md4>
                    <v-text-field v-model="editedItem.protein" label="Protein (g)"></v-text-field>
                  </v-flex>
                </v-layout>
              </v-container>
            </v-card-text>

            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn color="blue darken-1" text @click="close">Cancel</v-btn>
              <v-btn color="blue darken-1" text @click="save">Save</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-toolbar>
    </template>
    <template v-slot:item.column.action="{ item }">
      <v-icon
        small
        class="mr-2"
        @click="editItem(item)"
      >
        edit
      </v-icon>
      <v-icon
        small
        @click="deleteItem(item)"
      >
        delete
      </v-icon>
    </template>
    <template #no-data>
      <v-btn color="primary" @click="initialize">Reset</v-btn>
    </template>
  </v-data-table>
</template>


销售单据优化

销售单据优化

<template>

              查询
              重置

      -1" @click="myHandleAdd" type="primary" icon="plus">新增
       0">

          -1" @click="batchDel">删除
          -1" @click="batchSetStatus(1)">审核
          -1" @click="batchSetStatus(0)">反审核

          批量操作

          查看
          -1" type="vertical" />
          -1" @click="myHandleEdit(record)">编辑
          -1" type="vertical" />
          -1" title="确定删除吗?" @confirm="() => handleDelete(record.id)">
            删除

        <template slot="customRenderStatus" slot-scope="status">
          未审核
          已审核
          已转销售
        </template>

    <sale-order-modal ref="modalForm" @ok="modalFormOk"></sale-order-modal>
    <bill-detail ref="modalDetail"></bill-detail>

</template>

<template>

              查询
              重置

      -1" @click="myHandleAdd" type="primary" icon="plus">新增
       0">

          -1" @click="batchDel">删除
          -1" @click="batchSetStatus(1)">审核
          -1" @click="batchSetStatus(0)">反审核

          批量操作

          查看
          -1" type="vertical" />
          -1" @click="myHandleEdit(record)">编辑
          -1" type="vertical" />
          -1" title="确定删除吗?" @confirm="() => handleDelete(record.id)">
            删除

        <template slot="customRenderStatus" slot-scope="status">
          未审核
          已审核
          已转采购
        </template>

    <sale-order-modal ref="modalForm" @ok="modalFormOk"></sale-order-modal>
    <bill-detail ref="modalDetail"></bill-detail>

</template>


Add ids required for annotation note system tests

<template>

  <SideMenu v-if="ranges"
            :style="{top: offset}">

      Highlight

      Elide

      Replace

      Add link

      Add note

  </SideMenu>

  <ContextMenu ref="linkMenu"
               :closeOnClick="false">
    <form @submit.prevent="submit('link', content)"
          class="form">
      <LinkInput ref="linkInput"
                 v-model="content"/>
    </form>
  </ContextMenu>

  <ContextMenu ref="noteMenu"
               :closeOnClick="false">
    <form @submit.prevent="submit('note', content)"
          class="form"
          id="note-form">
      <textarea ref="noteInput"
                id="note-textarea"
                placeholder="Note text..."
                v-model="content"></textarea>
      <input type="submit"
             value="Save"
             id="save-note"
             class="button">
    </form>
  </ContextMenu>

</template>

<template>

  <SideMenu v-if="ranges"
            :style="{top: offset}">

      Highlight

      Elide

      Replace

      Add link

      Add note

  </SideMenu>

  <ContextMenu ref="linkMenu"
               :closeOnClick="false">
    <form @submit.prevent="submit('link', content)"
          class="form">
      <LinkInput ref="linkInput"
                 v-model="content"/>
    </form>
  </ContextMenu>

  <ContextMenu ref="noteMenu"
               :closeOnClick="false">
    <form @submit.prevent="submit('note', content)"
          class="form">
      <textarea ref="noteInput"
                placeholder="Note text..."
                v-model="content"></textarea>
      <input type="submit"
             value="Save"
             class="button">
    </form>
  </ContextMenu>

</template>


fix_table_th_alignment_on_IE

<script>

  import get from 'lodash/get';

  export default {
    name: 'CoreTable',
    props: {
      selectable: {
        type: Boolean,
        default: false,
        required: false,
      },
      emptyMessage: {
        type: String,
        default: null,
      },
    },
    computed: {
      tHeadStyle() {
        return {
          borderBottom: `solid 1px ${this.$themeTokens.fineLine}`,
          fontSize: '12px',
          color: this.$themeTokens.annotation,
        };
      },
      tbodyTrStyle() {
        const selectable = {
          cursor: 'pointer',
          ':hover': {
            backgroundColor: this.$themePalette.grey.v_100,
          },
        };
        return Object.assign(
          {
            ':not(:last-child)': {
              borderBottom: `solid 1px ${this.$themeTokens.fineLine}`,
            },
          },
          this.selectable ? selectable : {}
        );
      },
    },
    render(createElement) {
      let tableHasRows = true;

      // create <thead> element with #headers slot
      const theadEl = createElement('thead', { style: this.tHeadStyle }, [
        createElement('tr', {}, this.$slots.headers),
      ]);

      const tbodyCopy = [...this.$slots.tbody];
      tbodyCopy.forEach(tbody => {
        // Need to check componentOptions if wrapped in <transition-group>, or just children
        // if in regular <tbody>
        const tgroupChildren = get(tbody, 'componentOptions.children');
        if (tgroupChildren) {
          tableHasRows = tgroupChildren.length > 0;
        }

        if (tbody.children) {
          tableHasRows = tbody.children.length > 0;
          tbody.children.forEach(child => {
            if (!child.data) {
              child.data = {};
            }
            if (!child.data.class) {
              child.data.class = [];
            } else if (child.data.class && !Array.isArray(child.data.class)) {
              child.data.class = [child.data.class];
            }
            child.data.class.push(this.$computedClass(this.tbodyTrStyle));
          });
        }
      });

      // Insert an empty message as a <p> at the end if it is provided and the
      // table has no rows.
      const showEmptyMessage = this.emptyMessage && !tableHasRows;

      return createElement('div', { class: 'core-table-container' }, [
        createElement('table', { class: 'core-table' }, [
          ...(this.$slots.default || []),
          theadEl,
          tbodyCopy,
        ]),
        showEmptyMessage && createElement('p', this.emptyMessage),
      ]);
    },
  };

</script>

<style lang="scss" scoped>

  @import '~kolibri-design-system/lib/styles/definitions';

  .core-table-container {
    @extend %momentum-scroll;

    overflow-x: auto;
    overflow-y: hidden;
  }

  .core-table {
    width: 100%;
    font-size: 14px;
  }

  /deep/ thead th {
    vertical-align: bottom;
    text-align: left;
  }

  /deep/ tr {
    text-align: left;
  }

  /deep/ th,
  /deep/ td {
    padding: 12px 8px;
    line-height: 1.5em;
    vertical-align: top;
  }

  /deep/ td {
    max-width: 300px;
    overflow-x: auto;
  }

  /deep/ tr:not(:last-child) {
    border-bottom: 1px solid rgb(223, 223, 223);
  }

  /deep/ .core-table-checkbox-col {
    width: 40px;
    .k-checkbox-container {
      margin: 0 0 0 2px;
      line-height: 1em;
    }
  }

  /deep/ .core-table-button-col {
    padding: 4px;
    text-align: right;

    button {
      margin: 0;
    }
  }

</style>

<script>

  import get from 'lodash/get';

  export default {
    name: 'CoreTable',
    props: {
      selectable: {
        type: Boolean,
        default: false,
        required: false,
      },
      emptyMessage: {
        type: String,
        default: null,
      },
    },
    computed: {
      tHeadStyle() {
        return {
          borderBottom: `solid 1px ${this.$themeTokens.fineLine}`,
          fontSize: '12px',
          color: this.$themeTokens.annotation,
        };
      },
      tbodyTrStyle() {
        const selectable = {
          cursor: 'pointer',
          ':hover': {
            backgroundColor: this.$themePalette.grey.v_100,
          },
        };
        return Object.assign(
          {
            ':not(:last-child)': {
              borderBottom: `solid 1px ${this.$themeTokens.fineLine}`,
            },
          },
          this.selectable ? selectable : {}
        );
      },
    },
    render(createElement) {
      let tableHasRows = true;

      // create <thead> element with #headers slot
      const theadEl = createElement('thead', { style: this.tHeadStyle }, [
        createElement('tr', {}, this.$slots.headers),
      ]);

      const tbodyCopy = [...this.$slots.tbody];
      tbodyCopy.forEach(tbody => {
        // Need to check componentOptions if wrapped in <transition-group>, or just children
        // if in regular <tbody>
        const tgroupChildren = get(tbody, 'componentOptions.children');
        if (tgroupChildren) {
          tableHasRows = tgroupChildren.length > 0;
        }

        if (tbody.children) {
          tableHasRows = tbody.children.length > 0;
          tbody.children.forEach(child => {
            if (!child.data) {
              child.data = {};
            }
            if (!child.data.class) {
              child.data.class = [];
            } else if (child.data.class && !Array.isArray(child.data.class)) {
              child.data.class = [child.data.class];
            }
            child.data.class.push(this.$computedClass(this.tbodyTrStyle));
          });
        }
      });

      // Insert an empty message as a <p> at the end if it is provided and the
      // table has no rows.
      const showEmptyMessage = this.emptyMessage && !tableHasRows;

      return createElement('div', { class: 'core-table-container' }, [
        createElement('table', { class: 'core-table' }, [
          ...(this.$slots.default || []),
          theadEl,
          tbodyCopy,
        ]),
        showEmptyMessage && createElement('p', this.emptyMessage),
      ]);
    },
  };

</script>

<style lang="scss" scoped>

  @import '~kolibri-design-system/lib/styles/definitions';

  .core-table-container {
    @extend %momentum-scroll;

    overflow-x: auto;
    overflow-y: hidden;
  }

  .core-table {
    width: 100%;
    font-size: 14px;
  }

  /deep/ thead th {
    vertical-align: bottom;
  }

  /deep/ tr {
    text-align: left;
  }

  /deep/ th,
  /deep/ td {
    padding: 12px 8px;
    line-height: 1.5em;
    vertical-align: top;
  }

  /deep/ td {
    max-width: 300px;
    overflow-x: auto;
  }

  /deep/ tr:not(:last-child) {
    border-bottom: 1px solid rgb(223, 223, 223);
  }

  /deep/ .core-table-checkbox-col {
    width: 40px;
    .k-checkbox-container {
      margin: 0 0 0 2px;
      line-height: 1em;
    }
  }

  /deep/ .core-table-button-col {
    padding: 4px;
    text-align: right;

    button {
      margin: 0;
    }
  }

</style>


Increase options limit so all lists can be scrolled to the end

<template>

      {{ label }}

        (optional)

      {{hint}}

      Error:

{{ error }}

    <multiselect
      label="label"
      open-direction="auto"
      track-by="value"
      v-model="selectedOptions"
      :placeholder="setPlaceHolder"
      :model="multiSelectModel"
      :clear-on-select="!multipleSelect"
      :close-on-select="isCloseOnSelect"
      :hide-selected="true"
      :internal-search="false"
      :loading="isLoading"
      :multiple="multipleSelect"
      :options="options"
      :options-limit="1500"
      :show-no-results="false"
      :showLabels="false"
      :searchable="true"
      :custom-label="nameWithSubLabel"
      :id="id"
      :class="{ 'govuk-input--error': error }"
      @search-change="queryOptions"
      @open="clearInputField">
      <template slot="clear" slot-scope="props">

      </template>
      <template slot="option" slot-scope="props">

{{
          props.option.label }}

{{ props.option.subLabel }}

{{ props.option.subLabel }}

      </template>

      <template slot="caret" slot-scope="methods">

      </template>
    </multiselect>

    <template v-if="multipleSelect">
      <input type="hidden" class="js-ClearInputs--removable-field" :name="name"
             v-for="(option, index) in selectedOptions"
             :key="index" :value="option.value">
    </template>
    <template v-else>
      <input type="hidden" class="js-ClearInputs--removable-field" :name="name"
             :value="hiddenFormValue">
    </template>

</template>

<template>

      {{ label }}

        (optional)

      {{hint}}

      Error:

{{ error }}

    <multiselect
      label="label"
      open-direction="auto"
      track-by="value"
      v-model="selectedOptions"
      :placeholder="setPlaceHolder"
      :model="multiSelectModel"
      :clear-on-select="!multipleSelect"
      :close-on-select="isCloseOnSelect"
      :hide-selected="true"
      :internal-search="false"
      :loading="isLoading"
      :multiple="multipleSelect"
      :options="options"
      :options-limit="500"
      :show-no-results="false"
      :showLabels="false"
      :searchable="true"
      :custom-label="nameWithSubLabel"
      :id="id"
      :class="{ 'govuk-input--error': error }"
      @search-change="queryOptions"
      @open="clearInputField">
      <template slot="clear" slot-scope="props">

      </template>
      <template slot="option" slot-scope="props">

{{
          props.option.label }}

{{ props.option.subLabel }}

{{ props.option.subLabel }}

      </template>

      <template slot="caret" slot-scope="methods">

      </template>
    </multiselect>

    <template v-if="multipleSelect">
      <input type="hidden" class="js-ClearInputs--removable-field" :name="name"
             v-for="(option, index) in selectedOptions"
             :key="index" :value="option.value">
    </template>
    <template v-else>
      <input type="hidden" class="js-ClearInputs--removable-field" :name="name"
             :value="hiddenFormValue">
    </template>

</template>


Fixbug

Fixbug

<template>
  <md-tab md-label="base64" class="base64-container" md-tooltip="base64加解密">

请输入要进行编码或解码的字符：

      <textarea class="base64-src" id="base64-src" v-model="srcStr" placeholder="请输入待编码内容"></textarea>
      <transition name="src-close-transition" enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">

            <md-icon>close</md-icon>
            <md-tooltip md-direction="right">清空文本</md-tooltip>

            <md-icon>content_copy</md-icon>
            <md-tooltip md-direction="right">复制文本</md-tooltip>

      </transition>

        <md-button class="md-raised md-primary" :md-theme="theme">解密</md-button>

        <md-button class="md-raised md-accent" :md-theme="theme">加密</md-button>

Base64编码或解码结果：

      <textarea class="base64-dest" id="base64-dest" v-model="destStr"></textarea>
      <transition name="dest-close-transition" enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">

            <md-icon>close</md-icon>
            <md-tooltip md-direction="right">清空文本</md-tooltip>

            <md-icon>content_copy</md-icon>
            <md-tooltip md-direction="right">复制文本</md-tooltip>

      </transition>

  </md-tab>
</template>


fix(linting): fix the wrong indent

fix(linting): fix the wrong indent

Former-commit-id: 12a5420beeadb92a4d808cbaeba648020ff29e52

<template>
  <v-menu
    v-model="showMenu"
    :position-x="x"
    :position-y="y"
    absolute
    offset-y
    z-index="205"
  >
    <v-list id="cm">
      <v-list-tile
        v-for="(item, index) in items"
        :key="index"
        @click="item.onClick"
      >
        <v-list-tile-title>{{ item.title }}</v-list-tile-title>
      </v-list-tile>
    </v-list>
  </v-menu>
</template>

<script>
import Vue from 'vue';

export default {
  data() {
    return {
      showMenu: true,
      x: 10,
      y: 10,
      items: [],
    };
  },
  created() {
    Vue.prototype.$menu = this.show;
  },
  methods: {
    show(items, x, y) {
      console.log('show');
      this.x = x;
      this.y = y;
      this.items = items;
      this.showMenu = true;
    },
    hide() {
      this.showMenu = false;
    },
  },
};
</script>

<style>
</style>

<template>
    <v-menu
      v-model="showMenu"
      :position-x="x"
      :position-y="y"
      absolute
      offset-y
      z-index="205"
    >
      <v-list id="cm">
        <v-list-tile
          v-for="(item, index) in items"
          :key="index"
          @click="item.onClick"
        >
          <v-list-tile-title>{{ item.title }}</v-list-tile-title>
        </v-list-tile>
      </v-list>
    </v-menu>
</template>

<script>
import Vue from 'vue';

export default {
  data() {
    return {
      showMenu: true,
      x: 10,
      y: 10,
      items: [],
    }
  },
  created() {
    Vue.prototype.$menu = this.show;
  },
  methods: {
    show(items, x, y) {
      console.log('show');
      this.x = x;
      this.y = y;
      this.items = items;
      this.showMenu = true;
    },
    hide() {
      this.showMenu = false;
    },
  },
}
</script>

<style>
</style>


fix multiform dropdown UI

fix multiform dropdown UI

<template>
    <Dropdown v-bind="$attrs" :text="l('action_bar.list.forms_dropdown')">
        <template v-for="form in visibleForms">
            <DropdownItem @click="handleSelected(form)" :key="form.key">

                    <template v-if="hasIcon">

                    </template>

                        {{ form.label }}

            </DropdownItem>
        </template>
    </Dropdown>
</template>


fetch eval data

fetch eval data

<template>

    <div :class="`w-100 myuw-border-top border-c${section.color_id}`" />
    <uw-card loaded>
      <template #card-heading>

              {{ section.curriculum_abbr }}
              {{ section.course_number }}
              {{ section.section_id }}

            {{ section.course_title }}

              {{ ucfirst(section.section_type) }}

              {{ section.credits }} CR

          Summer {{ section.summer_term.split('-').map(ucfirst).join('-') }}

          Dates: {{ sectionFormattedDates(section) }}

          Your status: On Standby

      </template>

      <template #card-body>
        <uw-course-eval
          v-if="isReadyEval"
          :eval-data="getSectionEval(evalData, section.index)"
          :section="section"
        />
        <uw-course-details
          v-if="!section.is_ended"
          :course="course"
          :section="section"
          :show-row-heading="showRowHeading "
        />
      </template>

      <template #card-disclosure>
        <template
          v-if="section.is_ended || getSectionEval(evalData, section.index)"
        >
          <b-collapse :id="`course-details-${index}`" v-model="isOpen">
            <uw-course-details
              :course="course"
              :section="section"
              :show-row-heading="showRowHeading "
            />

        </template>
        <template v-else>
          <b-collapse :id="`instructors-collapse-${index}`" v-model="isOpen">
            <uw-instructor-info
              v-if="section.instructors.length > 0"
              :instructors="section.instructors"
            />

        </template>
      </template>

      <template #card-footer>
        <template
          v-if="section.is_ended || getSectionEval(evalData, section.index)"
        >
          <b-button
            v-if="!isOpen"
            v-b-toggle="`course-details-${index}`"
            variant="link"
            size="sm"
            class="w-100 p-0 border-0 text-dark"
            aria-label="SHOW COURSE DETAILS"
            title="Expand to show course details"
          >
            SHOW COURSE DETAILS

          <b-button
            v-else
            v-b-toggle="`course-details-${index}`"
            variant="link"
            size="sm"
            class="w-100 p-0 border-0 text-dark"
            aria-label="HIDE COURSE DETAILS"
            title="Collapse to hide course details"
          >
            HIDE COURSE DETAILS

        </template>

        <template v-else>
           0">
            <b-button
              v-if="!isOpen"
              v-b-toggle="`instructors-collapse-${index}`"
              variant="link"
              size="sm"
              class="w-100 p-0 border-0 text-dark"
              aria-label="SHOW INSTRUCTORS"
              title="Expand to show instructors"
            >
              SHOW INSTRUCTORS

            <b-button
              v-else
              v-b-toggle="`instructors-collapse-${index}`"
              variant="link"
              size="sm"
              class="w-100 p-0 border-0 text-dark"
              aria-label="HIDE INSTRUCTORS"
              title="Collapse to hide instructors"
            >
              HIDE INSTRUCTORS

            No instructor information available

        </template>
      </template>
    </uw-card>

</template>


Remove console

Remove console

<template>
  <mew-overlay
    :show-overlay="open"
    :title="title"
    right-btn-text="Cancel"
    :back="accessBack"
    :close="overlayClose"
  >
    <template v-slot:mewOverlayBody>

          Select a hardware wallet to access. Make sure

          your device is connected and unlocked

        <v-sheet
          :outlined="true"
          color="transparent"
          :rounded="true"
          :max-width="740"
          :min-width="475"
          :min-height="340"
        >
          <v-container>
            <v-row justify="start">
              <v-col v-for="button in buttons" :key="button.label" cols="6">

                  <mew-super-button
                    :title="button.label"
                    :cols-num="6"
                    color-theme="basic"
                    @click.native="nextStep(button.type)"
                  >
                    <template v-slot:contentSlot>

                    </template>
                  </mew-super-button>

              </v-col>
            </v-row>
          </v-container>
        </v-sheet>

      <mew6-white-sheet v-else-if="step === 1">

            <mew-select
              v-if="walletType === 'ledger'"
              v-model="selectedLedgerApp"
              label="Opened Ledger App"
              :items="ledgerApps"
            />
            <mew-select
              v-model="selectedPath"
              label="HD derivation path"
              :items="paths"
            />

          <mew-button
            button-size="xlarge"
            title="Unlock wallet"
            has-full-width
            @click.native="nextStep"
          />

      </mew6-white-sheet>
      <v-sheet
        v-else-if="showNetworkAddresses"
        :outlined="true"
        color="transparent"
        :rounded="true"
        :max-width="740"
        :min-width="475"
        :min-height="340"
      >
        <v-container>
          <v-row align="center" justify="center">
            <v-col cols="12">
              <mew-expand-panel
                :interactive-content="true"
                :panel-items="panelItems"
              >
                <template v-slot:panelBody1>

                    <v-radio-group v-model="selectedNetwork">

                          {{ type }}

                        <v-container>
                          <v-row align="center" justify="space-between">
                            <v-col
                              v-for="(item, idx) in Networks[type]"
                              :key="item.service + idx"
                              cols="6"
                            >
                              <v-radio
                                :label="item.service"
                                :value="item.url"
                              />
                            </v-col>
                          </v-row>
                        </v-container>

                    </v-radio-group>

                </template>
                <template v-slot:panelBody2>

                    <v-radio-group v-model="selectedAddress">

                            Address

                              Eth Balance

                              # of Tokens

 0"
                            :key="acc.address"
                          >

                              <v-row justify="space-around">
                                <v-col cols="1">
                                  <v-radio label="" :value="acc.address" />
                                </v-col>
                                <v-col cols="8" class="text-truncate">
                                  <v-row justify="space-around">
                                    <blockie
                                      width="25px"
                                      height="25px"
                                      :address="acc.address"
                                    />
                                    {{
                                      acc.address | concatAddress
                                    }}
                                  </v-row>
                                  <input
                                    :ref="acc.address"
                                    :value="acc.address"
                                    class="address-copy-input"
                                  />
                                </v-col>
                                <v-col cols="2">
                                  <v-row>
                                    <v-icon
                                      small
                                      class="cursor--pointer"
                                      @click="copy(acc.address)"
                                      >mdi-content-copy</v-icon
                                    >
                                    <v-icon
                                      small
                                      class="cursor--pointer"
                                      @click="launchExplorrer(acc.address)"
                                      >mdi-launch</v-icon
                                    >
                                  </v-row>
                                </v-col>
                              </v-row>

                              {{
                                acc.balance === 'Loading..'
                                  ? acc.balance
                                  : `${acc.balance} ${network.type.name}`
                              }}

                            {{ acc.tokens }}

                            Loading...

                    </v-radio-group>

                    <v-row align="center" justify="center">

                        <mew-button
                          title="Previous"
                          color-theme="basic"
                          icon="mdi-chevron-left"
                          icon-type="mdi"
                          :has-full-width="false"
                          button-size="small"
                          icon-align="left"
                          btn-style="transparent"
                          :disabled="addressPage <= 1"
                          @click.native="previousAddressSet"
                        />
                        <mew-button
                          title="Next"
                          color-theme="basic"
                          icon="mdi-chevron-right"
                          icon-type="mdi"
                          :has-full-width="false"
                          button-size="small"
                          icon-align="right"
                          btn-style="transparent"
                          @click.native="nextAddressSet"
                        />

                    </v-row>

                </template>
              </mew-expand-panel>

                <mew-button
                  title="Access My Wallet"
                  button-size="large"
                  :disabled="!(selectedAddress && acceptTerms)"
                  @click.native="setWallet"
                />
                <mew-checkbox
                  v-model="acceptTerms"
                  label="To access my wallet, I accept "
                  :link="link"
                  class="justify-center"
                />

            </v-col>
          </v-row>
        </v-container>
      </v-sheet>
    </template>
  </mew-overlay>
</template>


fix side nav height issue on android.

fix side nav height issue on android.

<template>

        <ui-icon-button
          @click="toggleNav"
          type="secondary"
          color="white"
          size="large"
          icon="keyboard_arrow_left"
          :aria-label="closeNav"/>

        {{ $tr('instant') }}

      <div class="scrollable-nav" :style="{ width: width + 'px', paddingTop: `${headerHeight + 16}px` }">

        <ui-menu
          class="nav-main"
          :options="menuOptions"
          hasIcons
          @select="navigate"
          role="navigation"
          :aria-label="ariaLabel"
          :style="{ width: width + 'px' }">
        </ui-menu>

{{ $tr('instant') }}

              <ui-icon icon="copyright"/>
              {{ $tr('vodafoneCopyright') }}

{{ footerMsg }}

              <ui-icon icon="copyright"/>
              {{ $tr('learningEqualityCopyright') }}

</template>


refactor nav styling to use jeet columns

<template>

        <svg role="presentation" height="40" width="40" viewbox="0 0 24 24" src="../icons/learn.svg"></svg>
        Learn

        <svg role="presentation" height="40" width="40" viewbox="0 0 24 24" src="../icons/explore.svg"></svg>
        Explore

</template>


ELECTRON: Fix an issue where witness funding would sometimes fail

Using the absolute minimum (in blocks) lock period thats valid for an amount can fail if blocks come in before the transaction makes its way onto the chain.
Add some "buffer" to prevent this

<template>

    <portal to="header-slot">

    </portal>

        <novo-form-field :title="$t('add_holding_account.funding_account')">

            <select v-model="fundingAccount">
              <option
                v-for="account in fundingAccounts"
                :key="account.UUID"
                :value="account"
                >{{ account.label }}</option
              >
            </select>

              <fa-icon :icon="['fal', 'chevron-down']" />

        </novo-form-field>
        <novo-form-field :title="$t('common.amount')">
          <input
            type="number"
            min="50"
            v-model="amount"
            :max="maxAmountForAccount"
            :class="amountClass"
          />
        </novo-form-field>
        <novo-form-field :title="$t('add_holding_account.lock_for')">

            <vue-slider
              :min="2"
              :max="36"
              class="lock-time-slider"
              :class="lockTimeClass"
              :value="lockTimeInMonths"
              v-model="lockTimeInMonths"
            />

              {{ lockTimeInMonths }} {{ $t("common.months") }}

        </novo-form-field>

        <novo-form-field
          :title="$t('add_holding_account.estimated_earnings')"
          v-if="isWeightSufficient"
        >

{{ $t("add_holding_account.daily") }}

              {{
                (
                  this.estimatedWeight.estimated_daily_earnings / 100000000
                ).toFixed(2)
              }}

{{ $t("add_holding_account.overall") }}

              {{
                (
                  this.estimatedWeight.estimated_lifetime_earnings / 100000000
                ).toFixed(2)
              }}

        </novo-form-field>

        <novo-form-field :title="$t('common.account_name')">
          <input
            type="text"
            v-model="accountName"
            maxlength="30"
            ref="accountName"
          />
        </novo-form-field>
        <novo-form-field
          :title="$t('common.password')"
          v-if="walletPassword === null"
        >
          <input
            v-model="password"
            type="password"
            :class="passwordClass"
            @keydown="onPasswordKeydown"
          />
        </novo-form-field>

    <portal to="footer-slot">
      <novo-button-section>
        <template v-slot:left>
          <button @click="current--" v-if="current !== 1">
            {{ $t("buttons.previous") }}
          </button>
        </template>
        <button
          @click="nextStep"
          :disabled="!isWeightSufficient"
          v-if="current === 1"
        >
          {{ $t("buttons.next") }}
        </button>
        <button
          @click="createAndFundHoldingAccount"
          :disabled="disableLockButton"
          v-else
        >
          {{ $t("buttons.lock") }}
        </button>
      </novo-button-section>
    </portal>

</template>


Side menu polish (#45)

Side menu polish (#45)

* Hide search bar when side menu shows
* Increase touch target for side menu

<template>

    <transition name="slide">

          <router-link to="/" class="section">
            Home
          </router-link>

            Products
            <router-link
              v-for="p in products"
              :key="p.key"
              :to="`/products/${p.key}`"
              class="block cursor-pointer text-sm text-gray-500"
            >
              {{ p.name }}
            </router-link>

          <router-link to="/authors" class="section">
            Authors
          </router-link>

            Submit

          <router-link to="/about" class="section">
            About
          </router-link>

            Feedback

    </transition>

      <router-link
        tag="div"
        to="/"
        class="inline-flex flex-row items-center ml-2 cursor-pointer"
      >

      </router-link>

      <router-link tag="div" class="nav-item nav-item-link" to="/"
        >Home</router-link
      >

        Products

          <router-link
            v-for="p in products"
            :key="p.key"
            :to="`/products/${p.key}`"
            tag="div"
            class="px-3 py-2 whitespace-nowrap hover:bg-gray-50"
          >
            {{ p.name }}
          </router-link>

      <router-link tag="div" class="nav-item nav-item-link" to="/authors"
        >Authors</router-link
      >

      Submit

      <router-link tag="div" class="nav-item nav-item-link" to="/about"
        >About</router-link
      >

      Feedback

      <transition name="appear">
        <SearchBar v-if="!showSideMenu" />
      </transition>

</template>

<template>

    <transition name="slide">

          <router-link to="/" class="section">
            Home
          </router-link>

            Products
            <router-link
              v-for="p in products"
              :key="p.key"
              :to="`/products/${p.key}`"
              class="block cursor-pointer text-sm text-gray-500"
            >
              {{ p.name }}
            </router-link>

          <router-link to="/authors" class="section">
            Authors
          </router-link>

            Submit

          <router-link to="/about" class="section">
            About
          </router-link>

            Feedback

    </transition>

      <router-link
        tag="div"
        to="/"
        class="inline-flex flex-row items-center ml-2 cursor-pointer"
      >

      </router-link>

      <router-link tag="div" class="nav-item nav-item-link" to="/"
        >Home</router-link
      >

        Products

          <router-link
            v-for="p in products"
            :key="p.key"
            :to="`/products/${p.key}`"
            tag="div"
            class="px-3 py-2 whitespace-nowrap hover:bg-gray-50"
          >
            {{ p.name }}
          </router-link>

      <router-link tag="div" class="nav-item nav-item-link" to="/authors"
        >Authors</router-link
      >

      Submit

      <router-link tag="div" class="nav-item nav-item-link" to="/about"
        >About</router-link
      >

      Feedback

      <SearchBar />

</template>


Link variant, no padding

Link variant, no padding

<template>

      <uw-course-title show-sln :section="section" class="flex-fill" />

      <b-button v-if="section.mini_card"
        variant="link" size="sm"
        :title="`Remove mini-card of ${section.label}`"
        @click="toggleMiniWrapper"
        class="ml-3 align-self-start p-0"
      >

    <uw-card-property v-if="section.summer_term" title="Summer Term">
      {{ capitalizeString(section.summer_term) }}
    </uw-card-property>

    <uw-card-property v-if="section.cc_display_dates" title="Dates">
      {{ sectionFormattedDates(section) }}
    </uw-card-property>

</template>

<template>

      <uw-course-title show-sln :section="section" class="flex-fill" />

      <b-button v-if="section.mini_card"
        variant="dark" size="sm"
        :title="`Remove mini-card of ${section.label}`"
        @click="toggleMiniWrapper"
        class="ml-3 align-self-start"
      >

    <uw-card-property v-if="section.summer_term" title="Summer Term">
      {{ capitalizeString(section.summer_term) }}
    </uw-card-property>

    <uw-card-property v-if="section.cc_display_dates" title="Dates">
      {{ sectionFormattedDates(section) }}
    </uw-card-property>

</template>


adjust listing user to lack of avatar initials in db

<template>

        Name
        Email
        Roles

      <transition-group
        name="staggered-fade"
        tag="tbody"
        class="clickableRows"
        v-bind:css="false"
        v-on:before-enter="beforeEnter"
        v-on:enter="enter"
        v-on:leave="leave"
      >

            <avatar v-if="user.avatar"
                    :username="user.name"
                    :size="30"
                    :rounded="false"
                    :border-radius="2"
                    :backgroundColor="user.avatar.color"
            ></avatar>

          {{user.name}} (removed)
          {{user.email}}

            {{role}}

      </transition-group>

</template>

<template>

        Name
        Email
        Roles

      <transition-group
        name="staggered-fade"
        tag="tbody"
        class="clickableRows"
        v-bind:css="false"
        v-on:before-enter="beforeEnter"
        v-on:enter="enter"
        v-on:leave="leave"
      >

            <avatar v-if="user.avatar"
                    username=""
                    :size="30"
                    :rounded="false"
                    :border-radius="2"
                    :backgroundColor="user.avatar.color"
                    :initials="user.avatar.initials"
            ></avatar>

          {{user.name}} (removed)
          {{user.email}}

            {{role}}

      </transition-group>

</template>


Added todo

Added todo

<template>
  <uw-card v-if="showOutageCard" :loaded="true">
    <template #card-heading>

        Limited data due to technical difficulties

    </template>
    <template #card-body>

        We are aware of the issue and working on it. Please try again later.

        Things you might be looking for:

Canvas LMS

Catalyst Web Tools

Student Registration

Student Class Schedule

Student Tuition Statement

Time Schedule

MyPlan

My Class Instructor Resources

GradePage

Panopto Lecture Capture

UW Professional & Continuing Education

Workday

MyFinancial.desktop

    </template>
  </uw-card>
</template>


Fix advanced input border radius

Fix advanced input border radius

Signed-off-by: Marco Ambrosini <3397c7e210a9d1588196cfebb12b2c6b133f6934@pm.me>

<template>
	<At ref="at"
		v-model="text"
		class="atwho-wrapper"
		name-key="label"
		:members="autoCompleteMentionCandidates"
		:filter-match="atFilter"
		:tab-select="true"
		:allow-spaces="false"
		@at="handleAtEvent">
		<template v-slot:item="scope">
			<Avatar v-if="isMentionToAll(scope.item.id)"
				:size="44"
				:icon-class="'icon-group-forced-white'"
				:disable-tooltip="true"
				:disable-menu="true"
				:is-no-user="true" />

				{{ getFirstLetterOfGuestName(scope.item.label) }}

			<Avatar v-else
				:size="44"
				:user="atRemoveQuotesFromUserIdForAvatars(scope.item.id)"
				:display-name="scope.item.label"
				:disable-tooltip="true"
				:disable-menu="true" />

				{{ scope.item.label }}

					{{ getStatusMessage(scope.item) }}

		</template>
		<template v-slot:embeddedItem="scope">

				<Mention
					v-if="scope.current.id"
					:id="scope.current.id"
					:type="getTypeForMentionComponent(scope.current)"
					:name="scope.current.label"
					:data-mention-id="scope.current.id" />

		</template>

	</At>
</template>


Add statistics on home page

Add statistics on home page

<template>

Nuit de l'Info 2016 - Édition Bordelaise

{{ part.title }}

{{ title }}

{{ day.title }}

 * {{ event.hour }}

                    goto
                    <router-link :to="{name: 'help'}">Guide & Aide;</router-link>

                    goto
                    <router-link :to="{name: 'register'}">S'inscrire;</router-link>

                    goto
                    <router-link :to="{name: 'recovery'}">Perte de votre compte;
                    </router-link>

Statistiques

{ participants : {{ users }}
                    ,

 teams :  {{ teams }}
                    }

</template>


docs(Alert): remove line-height for p elements

<template>
  <v-alert
    :class="$vuetify.theme.dark ? undefined : 'grey lighten-5'"
    border="left"
    class="v-alert--md"
    colored-border
    v-bind="$attrs"
    v-on="$listeners"
  >
    <component :is="component">
      <slot />
    </component>
  </v-alert>
</template>

<script>
  export default {
    name: 'Alert',

    computed: {
      component () {
        const length = this.$slots.default.length

        return length > 1 ? 'div' : 'app-md'
      },
    },
  }
</script>

<style lang="sass">
  .v-alert--md .v-markdown
    p
      line-height: initial

      &:last-child
        margin-bottom: 0

</style>

<template>
  <v-alert
    :class="$vuetify.theme.dark ? undefined : 'grey lighten-5'"
    border="left"
    class="v-alert--md"
    colored-border
    v-bind="$attrs"
    v-on="$listeners"
  >
    <component :is="component">
      <slot />
    </component>
  </v-alert>
</template>

<script>
  export default {
    name: 'Alert',

    computed: {
      component () {
        const length = this.$slots.default.length

        return length > 1 ? 'div' : 'app-md'
      },
    },
  }
</script>

<style lang="sass">
  .v-alert--md .v-markdown
    p:last-child
      margin-bottom: 0

</style>