PHP Classes

File: resources/js/components/SearchDetails.vue

Recommend this page to a friend!
  Classes of Edward Paul   Find PHP Service   resources/js/components/SearchDetails.vue   Download  
File: resources/js/components/SearchDetails.vue
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: Find PHP Service
Application to find services in a near location
Author: By
Last change:
Date: 3 years ago
Size: 2,920 bytes
 

Contents

Class file image Download
<template> <transition name="modal"> <div class="modal-mask" @click="close" v-show="show"> <div class="modal-container" @click.stop> <div class="modal-header"> <h3>{{ result.title}}</h3> </div> <div class="modal-body"> <p class="card-text">{{ result.description}}.</p> <p class="card-text">{{ result.address +' '+result.city+' '+result.state+ ' '+result.zip_code}}</p> </div> <div class="modal-footer text-right"> <footer class="blockquote-footer"><cite title="Source Title">{{ result.human_readable_date}}</cite></footer> </div> </div> </div> </transition> </template> <script> export default { name: "SearchDetails", props: ['show', 'result'], methods: { savePost: function () { this.$emit('close'); }, close: function () { this.$emit('close'); } }, mounted: function () { document.addEventListener("keydown", (e) => { if (this.show && e.keyCode == 27) { this.close(); } }); } } </script> <style scoped> * { box-sizing: border-box; } .modal-mask { position: fixed; z-index: 9998; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .5); transition: opacity .3s ease; } .modal-container { width: 500px; margin: 40px auto 0; padding: 20px 30px; background-color: #fff; border-radius: 2px; box-shadow: 0 2px 8px rgba(0, 0, 0, .33); transition: all .3s ease; font-family: Helvetica, Arial, sans-serif; } .modal-header h3 { margin-top: 0; color: #42b983; } .modal-body { margin: 20px 0; } .text-right { text-align: right; } .form-label { display: block; margin-bottom: 1em; } .form-label > .form-control { margin-top: 0.5em; } .form-control { display: block; width: 100%; padding: 0.5em 1em; line-height: 1.5; border: 1px solid #ddd; } /* * The following styles are auto-applied to elements with * transition="modal" when their visibility is toggled * by Vue.js. * * You can easily play with the modal transition by editing * these styles. */ .modal-enter { opacity: 0; } .modal-leave-active { opacity: 0; } .modal-enter .modal-container, .modal-leave-active .modal-container { -webkit-transform: scale(1.1); transform: scale(1.1); } </style>