A Pen by Zach Watkins on CodePen.
Created
July 9, 2021 02:38
-
-
Save ZachWatkins/6be39ed5d43cd321d74cd90481305fc7 to your computer and use it in GitHub Desktop.
Mobile Listing JS Template
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
| <script id="template-listing" type="text/template"><div class="pro"><a class="property-link" href="{{ permalink }}"><div class="thumbnails owl-carousel owl-theme"><div class="item"><img src="{{ thumb1 }}"></div><div class="item"><img src="{{ thumb2 }}"></div><div class="item"><img src="{{ thumb3 }}"></div></div><span class="heading-frame"><h3 class="property-title">{{ StreetNumber }} {{ StreetName }}, {{ City }}, {{ State }} {{ PostalCode }}</h3><span class="price overlay br">{{ ListPrice }}</span><span class="city overlay bl hide-medium">{{ City }}, {{ State }}</span></span>{{ DaysSinceListed }}<span class="prop-content details">{{ Bed }} Bed <span class="separator">~</span> {{ Bath }} Bath <span class="separator">~</span> {{ Acres }} acres<br>{{ PropertyType }} <span class="separator">~</span> {{ County }} County</span><div class="prop-content"><div class="desc collapse">{{ Description }}</div></a><button type="button" class="btn btn-default btn-danger btn-bg read-more hide-medium" data-target=".desc" data-toggle="collapse">Expand</button><div class="action-items">{{ VideoButton }}<a href="#frminquiry" class="contact btn btn-default btn-danger btn-bg">Contact Agent</a><a href="#print-flyer" class="print-flyer btn btn-default btn-danger btn-bg btn-half-sm">Print Flyer</a><a href="#share" class="share btn btn-default btn-danger btn-bg btn-half-sm">Share</a></div></div></div> | |
| </script> | |
| <script> | |
| var listing = []; | |
| listing['permalink'] = '#listing'; | |
| listing['thumb1']='https://homeandranchrealestate.com/wp-content/uploads/mls_photos/image-large-7634005-1.jpg'; | |
| listing['thumb2']='https://homeandranchrealestate.com/wp-content/uploads/mls_photos/image-large-7634005-2.jpg'; | |
| listing['thumb3']='https://homeandranchrealestate.com/wp-content/uploads/mls_photos/image-large-7634005-3.jpg'; | |
| listing['StreetNumber']='5721'; | |
| listing['StreetName']='CR 378'; | |
| listing['City']='Caldwell'; | |
| listing['State']='TX'; | |
| listing['PostalCode']='77836'; | |
| listing['ListPrice']='$645,000'; | |
| listing['DaysSinceListed']='<span class="list-date overlay tr">Listed 3 days ago</span>'; | |
| listing['Bed']='3'; | |
| listing['Bath']='2'; | |
| listing['Acres']='3.248'; | |
| listing['PropertyType']='Residential'; | |
| listing['County']='Burleson'; | |
| listing['Description']='Introducing PIN OAK ESTATES! One of Burleson County\'s newest HOME SITE subdivisions just 8 miles north of Caldwell, water lines in place, boundary lines open, electric to each site, towering trees, small open areas, paved frontage, light rural restrictions, and a beautiful setting awaits your dream home! Multiple home sites available ranging from 2 acres to 16 acres.'; | |
| listing['VideoButton']='<a href="#video" class="video btn btn-default btn-danger btn-bg">Video</a>'; | |
| </script> | |
| <div class="content"></div> |
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
| // Process template content. | |
| var template_string = document.querySelector('#template-listing').innerHTML; | |
| var listing_html = template_string.replace('{{ permalink }}', listing['permalink']).replace('{{ thumb1 }}', listing['thumb1']).replace('{{ thumb2 }}', listing['thumb2']).replace('{{ thumb3 }}', listing['thumb3']).replace('{{ StreetNumber }}', listing['StreetNumber']).replace('{{ StreetName }}', listing['StreetName']).replace(/{{ City }}/g, listing['City']).replace(/{{ State }}/g, listing['State']).replace(/{{ PostalCode }}/g, listing['PostalCode']).replace('{{ ListPrice }}', listing['ListPrice']).replace('{{ DaysSinceListed }}', listing['DaysSinceListed']).replace('{{ Bed }}', listing['Bed']).replace('{{ Bath }}', listing['Bath']).replace('{{ Acres }}', listing['Acres']).replace('{{ PropertyType }}', listing['PropertyType']).replace('{{ County }}', listing['County']).replace('{{ Description }}', listing['Description']).replace('{{ VideoButton }}', listing['VideoButton']); | |
| document.querySelector('.content').innerHTML = listing_html; | |
| // Attach event handlers. | |
| document.querySelector('.read-more').addEventListener('click', function(e){ | |
| var selector = this.getAttribute('data-target'); | |
| var cname = this.getAttribute('data-toggle'); | |
| jQuery(selector).toggleClass(cname); | |
| }); | |
| jQuery('.thumbnails').owlCarousel({ | |
| items: 1, | |
| loop: true, | |
| dots: false, | |
| nav: true, | |
| navContainer: '.thumbnails' | |
| }); |
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
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script> |
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
| a { | |
| text-decoration: none; | |
| color: #000; | |
| &:hover, | |
| &:active { | |
| text-decoration: underline; | |
| } | |
| } | |
| .btn { | |
| display: inline-block; | |
| padding: 6px 12px; | |
| margin-bottom: 0; | |
| font-size: 14px; | |
| font-weight: normal; | |
| line-height: 1.42857143; | |
| text-align: center; | |
| white-space: nowrap; | |
| vertical-align: middle; | |
| -ms-touch-action: manipulation; | |
| touch-action: manipulation; | |
| cursor: pointer; | |
| -webkit-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| user-select: none; | |
| background-image: none; | |
| border: 1px solid transparent; | |
| border-radius: 4px; | |
| } | |
| .btn-default { | |
| color: #333; | |
| background-color: #fff; | |
| border-color: #ccc; | |
| } | |
| .btn-danger { | |
| color: #fff; | |
| background-color: #d9534f; | |
| border-color: #d43f3a; | |
| } | |
| .btn-bg { | |
| background: #5f2a2a; | |
| border-color: #5f2a2a; | |
| } | |
| body { | |
| background: #000; | |
| padding: 0; | |
| margin: 0; | |
| font-size: 16pt; | |
| } | |
| .content { | |
| background: #e4ded2; | |
| margin: 0 auto; | |
| padding: 1rem; | |
| box-sizing: border-box; | |
| } | |
| .pro { | |
| background: #fff; | |
| border: 2px solid #000; | |
| font-size: 4vw; | |
| position: relative; | |
| button.btn { | |
| font: inherit; | |
| width: 100%; | |
| line-height: 1.5; | |
| } | |
| .btn { | |
| display: block; | |
| text-align: center; | |
| font-size: 1em; | |
| line-height: 1.5; | |
| padding: .4rem; | |
| cursor: pointer; | |
| text-transform: uppercase; | |
| } | |
| .action-items, | |
| .btn + .btn { | |
| margin-top: .5rem; | |
| } | |
| .content { | |
| max-width: 768px; | |
| margin: 0 auto; | |
| padding: 1rem; | |
| box-sizing: border-box; | |
| } | |
| .property-link { | |
| text-decoration: none; | |
| } | |
| .heading-frame { | |
| position: relative; | |
| display: block; | |
| } | |
| .heading-frame h3 { | |
| line-height: 1; | |
| padding: 0.75rem; | |
| text-align: center; | |
| font-size: 1.25em; | |
| margin: 0; | |
| color: #FFF; | |
| border-bottom: 2px solid #000; | |
| background-color: #a7c1cd; | |
| text-shadow: 0 1px 3px #000,0 1px 1px #000,0 1px 1px #000, 0 0 1px #000; | |
| /* text-shadow: 0 0 1px #333,0 0 1px #333,0 0 1px #333,0 0 1px #333,0 0 2px #333,0 0 2px #333,0 0 2px #333; */ | |
| } | |
| .thumbnails { | |
| position:relative; | |
| .owl-prev, | |
| .owl-next {position:absolute;top:50%;font-size:40px;transform:translateY(-50%);color:white;background-color:rgba(0,0,0,0.5);display:none;z-index:2; | |
| } | |
| .owl-prev{left:0;} | |
| .owl-next {right:1rem;} | |
| } | |
| img { | |
| width: 100%; | |
| margin: 0; | |
| display: block; | |
| } | |
| .separator { | |
| font-weight: bold; | |
| display: inline-block; | |
| padding-left: 0.25em; | |
| padding-right: 0.25em; | |
| } | |
| .property-link { | |
| position: relative; | |
| display: block; | |
| } | |
| .prop-content { | |
| padding: 1rem; | |
| display: block; | |
| &.details { | |
| text-align: center; | |
| font-weight: bold; | |
| } | |
| } | |
| a + .prop-content { | |
| padding-top: 0; | |
| } | |
| .text-center { | |
| text-align: center; | |
| } | |
| .desc { | |
| position: relative; | |
| padding-bottom: 1rem; | |
| } | |
| @media screen and (min-width: 560px) { | |
| $xy-padding: 4%; | |
| font-size: 23px; | |
| .heading-frame h3 { | |
| padding: $xy-padding / 1.5 $xy-padding; | |
| } | |
| .property-link .overlay:not(.tr) { | |
| padding: { | |
| left: $xy-padding; | |
| right: $xy-padding; | |
| } | |
| } | |
| .prop-content { | |
| padding: $xy-padding; | |
| } | |
| } | |
| @media screen and (max-width: 767px) { | |
| .btn-half-sm { | |
| display: inline-block; | |
| width: calc(50% - 1.173rem); | |
| margin-right: .25rem; | |
| + .btn-half-sm { | |
| margin-left: .25rem; | |
| margin-right: 0; | |
| } | |
| } | |
| .desc { | |
| overflow: hidden; | |
| &.collapse { | |
| height: 4em; | |
| &::after { | |
| content: ""; | |
| background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1)); | |
| position: absolute; | |
| top: 50%; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| } | |
| } | |
| } | |
| .property-link .overlay { | |
| color: #fff; | |
| background-color: rgba(0, 0, 0, 0.8); | |
| padding: 0.75rem; | |
| font-size: 1.125em; | |
| line-height: 1; | |
| position: absolute; | |
| z-index: 2; | |
| text-decoration: none; | |
| text-shadow: 2px 2px 1px #000, 2px 0 1px #000, 2px -2px 1px #000, | |
| 0 -2px 1px #000, -2px -2px 1px #000, -2px 0 1px #000, -2px 2px 1px #000, | |
| 0 2px 1px #000; | |
| } | |
| .property-link .bl { | |
| bottom: 100%; | |
| left: 0; | |
| right: 0; | |
| } | |
| .property-link .br { | |
| bottom: 100%; | |
| right: 0; | |
| z-index: 3; | |
| background: transparent; | |
| } | |
| .property-link .tr { | |
| top: 0; | |
| right: 0; | |
| text-align: right; | |
| font-size: 0.875em; | |
| padding: .5rem; | |
| } | |
| } | |
| @media screen and (min-width:768px) { | |
| $xy-padding: 1rem; | |
| font-size: 21px; | |
| padding-top: 50px; | |
| clear: both; | |
| &::after { | |
| content: ""; | |
| display: block; | |
| clear: both; | |
| } | |
| .hide-medium { | |
| display: none; | |
| } | |
| .heading-frame { | |
| position: static; | |
| h3 { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| box-sizing: border-box; | |
| padding: 0 $xy-padding; | |
| margin-bottom: $xy-padding; | |
| height: 50px; | |
| line-height: 50px; | |
| } | |
| } | |
| .property-link { | |
| position: static; | |
| .overlay.br, | |
| .overlay.tr, | |
| .prop-content { | |
| box-sizing: border-box; | |
| display: inline-block; | |
| width: 67%; | |
| padding: 0 $xy-padding 0 0; | |
| } | |
| .overlay.tr { | |
| font-style: italic; | |
| } | |
| .prop-content { | |
| text-align: left; | |
| } | |
| } | |
| .prop-content { | |
| padding: $xy-padding; | |
| } | |
| .thumbnails, | |
| .heading-frame { | |
| float: left; | |
| } | |
| .thumbnails { | |
| display: inline-block; | |
| width: 33%; | |
| position: relative; | |
| padding: 0 $xy-padding $xy-padding 0; | |
| box-sizing: border-box; | |
| .owl-stage-outer { | |
| border: 2px solid black; | |
| border-width: 0 2px 2px 0; | |
| // height:140px; | |
| } | |
| .owl-prev, | |
| .owl-next { | |
| display: block; | |
| } | |
| img { | |
| width: 100%; | |
| box-sizing: border-box; | |
| } | |
| } | |
| .heading-frame { | |
| width: 67%; | |
| } | |
| .price { | |
| font-size: 1.5em; | |
| font-weight: bold; | |
| margin-top: 1rem; | |
| } | |
| .action-items { | |
| text-align: right; | |
| a.btn { | |
| display: inline-block; | |
| &:not(.contact) { | |
| padding: .5rem .7rem; | |
| line-height: 1; | |
| } | |
| ~ a.btn { | |
| margin: 0 0 0 .5rem; | |
| } | |
| } | |
| } | |
| .contact.btn { | |
| position: absolute; | |
| right: 16px; | |
| top: 66px; | |
| margin: 0; | |
| } | |
| } | |
| } |
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
| <link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment