"mobile"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/koderdojo/pen/MozqVL?limit=all&page=80&q=contact+" /> <link rel='stylesheet prefetch' href='//fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons'><link rel='stylesheet prefetch' href='//unpkg.com/vuetify/dist/vuetify.min.css'> <style class="cp-pen-styles"></style></head><body> <script type="text/x-template" id="contacts"> <v-layout row> <v-flex xs12 sm6 offset-sm3> <v-card> <v-toolbar class="blue" dark> <v-toolbar-side-icon></v-toolbar-side-icon> <v-toolbar-title>Contacts</v-toolbar-title> <v-spacer></v-spacer> <v-btn icon> <v-icon>search</v-icon> </v-btn> <v-btn icon> <v-icon>view_module</v-icon> </v-btn> </v-toolbar> <v-list two-line> <v-list-tile avatar v-for="contact in contacts" v-bind:key="contact.id"> <v-list-tile-avatar> <v-icon class="blue white--text">face</v-icon> </v-list-tile-avatar> <v-list-tile-content> <v-list-tile-title> {{ contact.name }} </v-list-tile-title> <v-list-tile-sub-title>{{ contact.phone }}</v-list-tile-sub-title> </v-list-tile-content> <v-list-tile-action> <v-btn :to="'/contacts/' + contact.id" icon ripple> <v-icon class="grey--text text--lighten-1">info</v-icon> </v-btn> </v-list-tile-action> </v-list-tile> </v-list> </v-card> </v-flex> </v-layout> </script> <script type="text/x-template" id="contact"> <v-layout> <v-flex xs12 sm6 offset-sm3> <v-card> <v-card-media src="//s3-us-west-2.amazonaws.com/s.cdpn.io/1032908/desert.jpg" height="200px"> </v-card-media> <v-card-title primary-title> <div> <h3 class="headline mb-0">{{ contact.name }}</h3> <p class="text-lg-center">{{ contact.phone }}</p> </div> </v-card-title> <v-card-actions> <v-btn flat class="orange--text" to="/">Back</v-btn> </v-card-actions> </v-card> </v-flex> </v-layout> </script> <v-app id="app" standalone> <main> <v-container fluid> <router-view></router-view> </v-container> </main> </v-app> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//unpkg.com/vue'></script><script src='//unpkg.com/vuetify/dist/vuetify.min.js'></script><script src='//unpkg.com/vuex'></script><script src='//unpkg.com/vue-router'></script> <script >const store = new Vuex.Store({ state: { contacts: [ {id: 1, name: 'John Doe', phone: '111-222-3333'}, {id: 2, name: 'Jane Doe', phone: '111-222-4444'}, {id: 3, name: 'Timmy Doe', phone: '111-222-5555'}, ] } }) const Contacts = { data() { return { headers: [ { text: 'Name', value: 'name', align: 'left' }, { text: 'Phone', value: 'phone', align: 'left' } ], } }, computed: { contacts() { return this.$store.state.contacts } }, template: '#contacts' } const Contact = { computed: { contact() { const id = parseInt(this.$route.params.id); return this.$store.state.contacts.filter(function(c) { return c.id === id; })[0]; } }, template: '#contact' } const routes = [ { path:'/', component: Contacts}, { path:'/contacts/:id', component: Contact} ] const router = new VueRouter({ routes }); new Vue({ store, router }).$mount('#app'); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: