This repository has been archived by the owner on Feb 23, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #304 from multinet-app/sample-views
Sample views
- Loading branch information
Showing
8 changed files
with
282 additions
and
132 deletions.
There are no files selected for viewing
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,45 +1,153 @@ | ||
| <template> | ||
| <v-container | ||
| fill-height | ||
| fluid | ||
| > | ||
| <v-container class="pa-0" fluid> | ||
| <v-content> | ||
| <div class="getting-started"> | ||
| <v-icon | ||
| class="gs-icon" | ||
| color="grey lighten-2" | ||
| > | ||
| outlined_flag | ||
| </v-icon> | ||
| <div class="gs-content"> | ||
| <h1 class="gs-title">Getting Started...</h1> | ||
| <p class="gs-text">Use the sidebar to the left to create a workspace or select an existing one.</p> | ||
| </div> | ||
| </div> | ||
| <!-- BANNER --> | ||
| <v-responsive | ||
| class="mb-5 pt-5" | ||
| > | ||
| <v-container class="d-flex align-center"> | ||
| <v-sheet | ||
| class="d-flex pa-5" | ||
| color="primary" | ||
| dark | ||
| flat | ||
| height="100%" | ||
| > | ||
| <v-card | ||
| class="pr-5" | ||
| color="transparent" | ||
| flat | ||
| width="66%" | ||
| > | ||
| <v-card-title>Welcome to Multinet!</v-card-title> | ||
| <v-divider /> | ||
| <v-card-text> | ||
| Check out the featured datasets and visualizations below! You | ||
| can also create your own workspace and upload your own data with | ||
| the <strong>New Workspace</strong> button to the left, or | ||
| explore data others have uploaded. | ||
| </v-card-text> | ||
|
|
||
| <v-card-text> | ||
| This project is a joint research and development effort between | ||
| the University of Utah and Kitware Inc., funded by the National | ||
| Science Foundation. | ||
| </v-card-text> | ||
| </v-card> | ||
| <v-card | ||
| class="d-flex align-center" | ||
| light | ||
| width="33%" | ||
| > | ||
| <v-card-text> | ||
| <v-row class="px-4"> | ||
| <v-col | ||
| class="align-center d-flex py-1" | ||
| cols="4" | ||
| :key="collab.logo" | ||
| v-for="collab in collabs" | ||
| > | ||
| <img :src="collab.logo" alt="" width="100%" height="auto"> | ||
| </v-col> | ||
| </v-row> | ||
| </v-card-text> | ||
| </v-card> | ||
| </v-sheet> | ||
| </v-container> | ||
| </v-responsive> | ||
|
|
||
| <!-- COLUMNS --> | ||
| <v-container> | ||
| <v-row> | ||
| <v-col | ||
| cols="4" | ||
| v-for="sample in samples" | ||
| :key="sample.title" | ||
| > | ||
| <v-hover> | ||
| <template v-slot:default="{ hover }"> | ||
| <v-card> | ||
| <v-img | ||
| class="align-end" | ||
| height="250px" | ||
| :src="sample.image" | ||
| > | ||
| <v-card-title class="box-shadow-title"> | ||
| {{ sample.title }} | ||
| </v-card-title> | ||
| </v-img> | ||
| <v-fade-transition> | ||
| <v-overlay | ||
| v-if="hover" | ||
| absolute | ||
| opacity=".85" | ||
| > | ||
| <div class="overlay-text"> | ||
| <p>{{ sample.text }}</p> | ||
| <v-btn | ||
| color="primary" | ||
| :href="sample.href" | ||
| target="_blank" | ||
| > | ||
| Open in New Window | ||
| </v-btn> | ||
| </div> | ||
| </v-overlay> | ||
| </v-fade-transition> | ||
| </v-card> | ||
| </template> | ||
| </v-hover> | ||
| </v-col> | ||
| </v-row> | ||
| </v-container> | ||
|
|
||
| </v-content> | ||
| </v-container> | ||
| </template> | ||
|
|
||
| <style> | ||
| .getting-started { | ||
| align-items: flex-start; | ||
| display: flex; | ||
| justify-content: center; | ||
| margin: 0 auto 100px; | ||
| max-width: 600px; | ||
| } | ||
| <script lang="ts"> | ||
| import Vue from 'vue'; | ||
| .v-icon.gs-icon { | ||
| font-size: 86px; | ||
| margin-right: 15px; | ||
| } | ||
| export default Vue.extend ({ | ||
| data() { | ||
| return { | ||
| collabs: [ | ||
| { | ||
| logo: require('../assets/Ulogo_100px.png'), | ||
| }, | ||
| { | ||
| logo: require('../assets/kw_logo.png'), | ||
| }, | ||
| { | ||
| logo: require('../assets/nsf_logo.png'), | ||
| }, | ||
| ], | ||
| samples: [ | ||
| { | ||
| title: 'Paul Revere - Node Link Diagram', | ||
| image: require('../assets/boston.jpg'), | ||
| text: 'Explore the Paul Revere dataset using an interactive and beautiful node-link diagram. Discover the figures coordinating a pivotal event in history!', | ||
| href: '/nodelink/?workspace=boston&graph=boston', | ||
| }, | ||
| { | ||
| title: 'Les Miserables - Adjacency Matrix', | ||
| image: require('../assets/miserables.jpg'), | ||
| text: 'Explore the Les Miserables dataset using an interactive adjacency matrix. See the factions and relationships for yourself!', | ||
| href: '/adjmatrix/?workspace=miserables&graph=miserables', | ||
| }, | ||
| ], | ||
| }; | ||
| }, | ||
| }); | ||
| </script> | ||
|
|
||
| .gs-title { | ||
| color: #d2d2d2; | ||
| font-size: 36px; | ||
| <style> | ||
| .box-shadow-title { | ||
| box-shadow: inset 0px -230px 70px -120px white; | ||
| padding-bottom: 8px; | ||
| padding-top: 210px; | ||
| } | ||
| .gs-text { | ||
| font-size: 20px; | ||
| .overlay-text { | ||
| padding: 48px; | ||
| } | ||
| </style> |
Oops, something went wrong.