Huddle Grid-Detail View

Developer
Alyssa
Size
8,974 Kb
Views
28,336
  1. Huddle Grid-Detail View Previews
  2. Huddle Grid-Detail View HTML Codes
  3. Huddle Grid-Detail View CSS Codes
  4. Huddle Grid-Detail View JS Codes

How do I make an huddle grid-detail view?

What is a huddle grid-detail view? How do you make a huddle grid-detail view? This script and codes were developed by Alyssa on 08 September 2022, Thursday.

Huddle Grid-Detail View Previews
IQ Test

Huddle Grid-Detail View - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Huddle Grid-Detail View</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="grid-north" class="container">
<div class="fancy"><h4 class="ruled"><span>North Side</span></h4></div>
<ul class="rooms north"> <li id="N-1" class="room-10 category-3 mix" style="display: inline-block"><span>N-1</span></li> <li id="N-2" class="room-11 category-2 mix"><span>N-2</span></li> <li id="N-3" class="room-12 category-3 mix" style="display: inline-block"><span>N-3</span></li> <li id="N-4" class="room-13 category-3 mix" style="display: inline-block"><span>N-4</span></li> <li id="N-5" class="room-14 category-1 mix" style="display: inline-block"><span>N-5</span></li> <li id="N-6" class="room-15 category-3 mix" style="display: inline-block"><span>N-6</span></li> <li id="N-7" class="room-16 category-2 mix" style="display: inline-block"><span>N-7</span></li> <li id="N-8" class="room-17 category-3 mix" style="display: inline-block"><span>N-8</span></li> <li id="N-9" class="room-18 category-3 mix" style="display: inline-block"><span>N-9</span></li> <li id="N-10" class="room-19 category-2 mix" style="display: inline-block"><span>N-10</span></li> <li id="N-11" class="room-20 category-3 mix" style="display: inline-block"><span>N-11</span></li> <li id="N-12" class="room-21 category-1 mix" style="display: inline-block"><span>N-12</span></li> <li id="N-13" class="room-22 category-3 mix" style="display: inline-block"><span>N-13</span></li> <li id="N-14" class="room-23 category-2 mix" style="display: inline-block"><span>N-14</span></li> <li id="N-15" class="room-24 category-3 mix" style="display: inline-block"><span>N-15</span></li> <li id="N-16" class="room-25 category-3 mix" style="display: inline-block"><span>N-16</span></li> <li id="N-17" class="room-26 category-3 mix"><span>N-17</span></li> <li id="N-18" class="room-27 category-2 mix" style="display: inline-block"><span>N-18</span></li> <!-- https://mixitup.kunkalabs.com/learn/tutorial/responsive-grids/#-gap--elements --> <li class="gap"></li> <li class="gap"></li> <li class="gap"></li> <li class="gap"></li> <li class="gap"></li> <p class="error">No rooms were found matching the selected filters.</p>
</ul>
</div> <!-- /.container -->
<div class="details dark" style="display: inline-block;
width: 100%; margin-bottom: 10px;"> <div class="container"> <header class="header"> <span class="h2">N-1</span> <span class="h3">North Side // Lounge</span> <span class="close"></span> </header> <span class="checkin">Check-In</span> <ul class="amenities"> <li class="h3">Room Details:</li> <li class="data">Data Port</li> <li class="phone">Teleconference</li> <li class="appletv">Apple TV</li> <li class="display">Cinema Display</li> <li class="closed">Closed Space</li> </ul> <!-- /.amenities --> <ul class="occupants"> <li class="h3">Occupants:</li> <li>Alastair Green</li> <li>Charlene Zvolanek</li> <li>Dan Frazier</li> <li>Steve Belovarich</li> <li>Rob Edwards</li> </ul> <!-- /.occupants --> </div> <!-- /.container -->
</div> <!-- /.details --> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Huddle Grid-Detail View - Script Codes CSS Codes

/*! huddle 2014-06-13 */
@import url("//hello.myfonts.net/count/29d649");
/* @import must be at top of file, otherwise CSS will not work */
@font-face { font-family: Avenir; font-weight: 200; font-style: normal; src: url("fonts/29D649_6_0.eot"); src: url("fonts/29D649_6_0.eot?#iefix") format("embedded-opentype"), url("fonts/29D649_6_0.woff") format("woff"), url("fonts/29D649_6_0.ttf") format("truetype"), url("fonts/29D649_6_0.svg#Avenir") format("svg"); }
@font-face { font-family: Avenir; font-weight: bold; font-style: normal; src: url("fonts/29D649_B_0.eot"); src: url("fonts/29D649_B_0.eot?#iefix") format("embedded-opentype"), url("fonts/29D649_B_0.woff") format("woff"), url("fonts/29D649_B_0.ttf") format("truetype"), url("fonts/29D649_B_0.svg#Avenir") format("svg"); }
@font-face { font-family: Avenir; font-weight: 900; font-style: normal; src: url("fonts/29D649_2_0.eot"); src: url("fonts/29D649_2_0.eot?#iefix") format("embedded-opentype"), url("fonts/29D649_2_0.woff") format("woff"), url("fonts/29D649_2_0.ttf") format("truetype"), url("fonts/29D649_2_0.svg#Avenir") format("svg"); }
/* line 1, ../sass/lib/global/_base.scss */
html, body { margin: 0; padding: 0; width: 100%; height: 100%; min-width: 100% !important; max-width: 100% !important; background: white; font-family: sans-serif; }
/* line 13, ../sass/lib/global/_base.scss */
body { height: auto; }
/* line 17, ../sass/lib/global/_base.scss */
#document { position: relative; padding-bottom: 40px; }
/* line 23, ../sass/lib/global/_base.scss */
ul { margin: 0; padding: 0; }
/* line 2, ../sass/lib/vendor/neat/grid/_grid.scss */
* { box-sizing: border-box; }
/* line 3, ../sass/lib/mixins/_grid.scss */
.container { *zoom: 1; max-width: 60em; margin-left: auto; margin-right: auto; max-width: 64em; }
/* line 18, ../sass/lib/vendor/bourbon/addons/_clearfix.scss */
.container:before, .container:after { content: " "; display: table; }
/* line 23, ../sass/lib/vendor/bourbon/addons/_clearfix.scss */
.container:after { clear: both; }
/* line 3, ../sass/lib/mixins/_typography.scss */
body { color: #27235e; font-family: Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 0.9375em; -webkit-font-smoothing: antialiased; line-height: 1.2em; }
@media screen and (max-device-width: 47.9375em) and (-webkit-min-device-pixel-ratio: 1.6) { /* line 3, ../sass/lib/mixins/_typography.scss */ body { font-size: 2.93333em; } }
/* line 23, ../sass/lib/mixins/_typography.scss */
h1, h2, h3, h4, .rooms li span, h5, .subway .marker, h6 { font-family: Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 1.2em; margin: 0; text-rendering: optimizeLegibility; }
/* line 30, ../sass/lib/mixins/_typography.scss */
h1, .h1 { font-weight: 900; font-size: 2.8em; text-transform: uppercase; }
@media screen and (max-device-width: 47.9375em), screen and (max-width: 47.9375em) { /* line 30, ../sass/lib/mixins/_typography.scss */ h1, .h1 { font-size: 1.33333em; } }
/* line 40, ../sass/lib/mixins/_typography.scss */
h2, .h2 { font-size: 2.4em; font-weight: bold; }
/* line 45, ../sass/lib/mixins/_typography.scss */
h3, .h3, .details .checkin { font-size: 1.06667em; text-transform: uppercase; font-weight: bold; }
/* line 51, ../sass/lib/mixins/_typography.scss */
h4, .rooms li span, .h4, .subway li { font-size: 1em; font-weight: bold; text-transform: uppercase; }
/* line 57, ../sass/lib/mixins/_typography.scss */
h5, .subway .marker, .h5 { font-size: 0.8em; font-weight: bold; }
/* line 66, ../sass/lib/mixins/_typography.scss */
a { color: #27235e; }
/* line 71, ../sass/lib/mixins/_typography.scss */
a:hover { color: #27235e; }
/* line 75, ../sass/lib/mixins/_typography.scss */
a:active, a:focus { color: #27235e; outline: none; }
/* line 81, ../sass/lib/mixins/_typography.scss */
.ruled { text-align: center; padding: 1.5em 0; overflow: hidden; }
/* line 86, ../sass/lib/mixins/_typography.scss */
.ruled span { display: inline-block; position: relative; }
/* line 91, ../sass/lib/mixins/_typography.scss */
.ruled span:before, .ruled span:after { content: ""; position: absolute; height: 5px; border-bottom: 0.125em solid; top: 0; width: 37.5em; }
@media screen and (max-device-width: 47.9375em) and (-webkit-min-device-pixel-ratio: 1.6) { /* line 91, ../sass/lib/mixins/_typography.scss */ .ruled span:before, .ruled span:after { margin-top: 20px; } }
/* line 105, ../sass/lib/mixins/_typography.scss */
.ruled span:before { right: 100%; margin-right: 0.9375em; }
/* line 110, ../sass/lib/mixins/_typography.scss */
.ruled span:after { left: 100%; margin-left: 0.9375em; }
/* line 1, ../sass/partial/_header.scss */
body { background: #e5e5e5 url("img/header-bg.png") no-repeat center -85px; }
/* line 5, ../sass/partial/_header.scss */
#header { background: rgba(0, 35, 74, 0.9); color: #e5e5e5; border-bottom: 0.06667em solid #099cd8; }
/* line 15, ../sass/partial/_header.scss */
.banner { float: left; display: block; margin-right: 1.9356%; width: 49.0322%; margin-left: 25.4839%; margin-right: 0 !important; background: url(img/logo.svg) no-repeat center -1em; background-size: 5.625em; background-position-y: -25px; text-align: center; letter-spacing: 0.1875em; }
/* line 38, ../sass/lib/vendor/neat/grid/_span-columns.scss */
.banner:last-child { margin-right: 0; }
/* line 36, ../sass/lib/mixins/_mixins.scss */
body.tablet .banner { float: left; display: block; margin-right: 1.9356%; width: 66.02147%; margin-left: 8.49463%; }
/* line 38, ../sass/lib/vendor/neat/grid/_span-columns.scss */
body.tablet .banner:last-child { margin-right: 0; }
@media screen and (max-device-width: 47.9375em), screen and (max-width: 47.9375em) { /* line 15, ../sass/partial/_header.scss */ .banner { float: left; display: block; margin-right: 1.9356%; width: 100%; margin-left: 0%; background: white url(img/logo.svg) no-repeat; background-size: 4.0625em; background-position-x: -5px; background-position-y: -5px; } /* line 38, ../sass/lib/vendor/neat/grid/_span-columns.scss */ .banner:last-child { margin-right: 0; } }
/* line 41, ../sass/partial/_header.scss */
.banner .logo { padding: 1.85714em 0 0.28571em; border-bottom: 1px solid #099cd8; position: relative; }
/* line 47, ../sass/partial/_header.scss */
.banner .logo:after { content: ""; position: absolute; top: auto; right: auto; bottom: -7px; left: 50%; margin-left: -6px; width: 12px; height: 12px; border-radius: 50%; background: #00234a; border: 1px solid #099cd8; }
@media screen and (max-device-width: 47.9375em), screen and (max-width: 47.9375em) { /* line 47, ../sass/partial/_header.scss */ .banner .logo:after { display: none; } }
/* line 65, ../sass/partial/_header.scss */
.banner .logo .light { color: #099cd8; font-weight: 300; }
/* line 72, ../sass/partial/_header.scss */
.banner .tagline { display: block; padding: 1.33333em 0 1.55556em; font-weight: 900; font-size: 1.125em; line-height: 1.2em; text-transform: uppercase; }
/* line 84, ../sass/partial/_header.scss */
.toggle { float: left; display: block; margin-right: 1.9356%; width: 6.55904%; margin-left: 16.98927%; margin-right: 0; margin-top: 9px; width: 40px; height: 40px; border: 1px solid; font: 0/0 a; cursor: pointer; }
/* line 86, ../sass/partial/_header.scss */
.toggle span { display: block; height: 100%; background-clip: content-box; padding: 10px 8px; background-position-y: -2px; background-image: -webkit-linear-gradient( #e5e5e5 1px, transparent 1px); background-image: -webkit-gradient(linear, left top, left bottom, from(#e5e5e5), to(transparent)); background-image: -webkit-linear-gradient(#e5e5e5 1px, transparent 1px); background-image: linear-gradient( #e5e5e5 1px, transparent 1px); background-size: 100% 7px; }
@media screen and (max-device-width: 47.9375em), screen and (max-width: 47.9375em) { /* line 86, ../sass/partial/_header.scss */ .toggle span { background-image: -webkit-linear-gradient( #27235e 1px, transparent 1px); background-image: -webkit-gradient(linear, left top, left bottom, from(#27235e), to(transparent)); background-image: -webkit-linear-gradient(#27235e 1px, transparent 1px); background-image: linear-gradient( #27235e 1px, transparent 1px); } }
/* line 38, ../sass/lib/vendor/neat/grid/_span-columns.scss */
.toggle:last-child { margin-right: 0; }
@media screen and (max-device-width: 47.9375em) and (-webkit-min-device-pixel-ratio: 1.6) { /* line 84, ../sass/partial/_header.scss */ .toggle { width: 80px; height: 80px; top: 44px !important; right: 40px !important; } /* line 115, ../sass/partial/_header.scss */ .toggle span { background-image: -webkit-linear-gradient( #27235e 3px, transparent 3px); background-image: -webkit-gradient(linear, left top, left bottom, from(#27235e), to(transparent)); background-image: -webkit-linear-gradient(#27235e 3px, transparent 3px); background-image: linear-gradient( #27235e 3px, transparent 3px); background-size: 100% 22px; } }
/* line 126, ../sass/partial/_header.scss */
.toggle:hover { color: #ffca00; }
/* line 128, ../sass/partial/_header.scss */
.toggle:hover span { background-image: -webkit-linear-gradient( #ffca00 1px, transparent 1px); background-image: -webkit-gradient(linear, left top, left bottom, from(#ffca00), to(transparent)); background-image: -webkit-linear-gradient(#ffca00 1px, transparent 1px); background-image: linear-gradient( #ffca00 1px, transparent 1px); }
/* line 36, ../sass/lib/mixins/_mixins.scss */
body.tablet .toggle { margin-left: 0%; }
@media screen and (max-device-width: 47.9375em), screen and (max-width: 47.9375em) { /* line 141, ../sass/partial/_header.scss */ body { background-image: none; } /* line 145, ../sass/partial/_header.scss */ #header { border-bottom-color: #27235e; } /* line 149, ../sass/partial/_header.scss */ .banner .logo { padding: 1em 0 0.7em 1.2em; color: #27235e; } /* line 154, ../sass/partial/_header.scss */ .banner .tagline { display: none; } /* line 158, ../sass/partial/_header.scss */ .toggle { position: absolute; top: 2px; right: 8px; color: #27235e; border: none; } }
/* line 3, ../sass/partial/_filter.scss */
.filters .h4, .filters .subway li, .subway .filters li { display: block; margin-top: 1.33333em; margin-bottom: 0.66667em; text-transform: capitalize; }
/* line 11, ../sass/partial/_filter.scss */
.filters ul { *zoom: 1; list-style-type: none; border: 0.06667em solid; }
/* line 18, ../sass/lib/vendor/bourbon/addons/_clearfix.scss */
.filters ul:before, .filters ul:after { content: " "; display: table; }
/* line 23, ../sass/lib/vendor/bourbon/addons/_clearfix.scss */
.filters ul:after { clear: both; }
/* line 18, ../sass/partial/_filter.scss */
.filters li { float: left; padding: 0.625em; width: 125px; text-align: center; white-space: nowrap; cursor: pointer; }
/* line 29, ../sass/partial/_filter.scss */
.filters li.selected, .filters li:hover { background: #27235e; color: #e5e5e5; }
/* line 35, ../sass/partial/_filter.scss */
.filters li:not(:last-child) { border-right: 1px solid; }
@media screen and (max-device-width: 47.9375em), screen and (max-width: 47.9375em) { /* line 35, ../sass/partial/_filter.scss */ .filters li:not(:last-child) { border-right: none; } }
/* line 43, ../sass/partial/_filter.scss */
.type { float: left; }
/* line 47, ../sass/partial/_filter.scss */
.status, .views { float: right; }
@media screen and (max-device-width: 47.9375em), screen and (max-width: 47.9375em) { /* line 52, ../sass/partial/_filter.scss */ .filters { position: absolute; top: 0; width: 100%; z-index: 10; } /* line 60, ../sass/partial/_filter.scss */ .filters .container { display: none; background: rgba(0, 0, 0, 0.8); } /* line 65, ../sass/partial/_filter.scss */ .filters.open .container { display: block; } /* line 69, ../sass/partial/_filter.scss */ .filters .h4, .filters .subway li, .subway .filters li { margin: 0; padding: 1em; background: black; color: #e5e5e5; text-transform: uppercase; } /* line 77, ../sass/partial/_filter.scss */ .filters li { float: none; width: auto; color: #e5e5e5; } /* line 83, ../sass/partial/_filter.scss */ .type, .status { float: none; } /* line 87, ../sass/partial/_filter.scss */ .type { border-top: none !important; border-left: none !important; border-right: none !important; border-bottom: 0.06667em solid #555555 !important; } /* line 94, ../sass/partial/_filter.scss */ .status { margin: 1em auto; width: 70%; max-width: 20em; border-color: #555 !important; } /* line 102, ../sass/partial/_filter.scss */ .views li { float: left; } /* line 106, ../sass/partial/_filter.scss */ .status li { width: 50%; float: right; } /* line 111, ../sass/partial/_filter.scss */ .type li { margin-left: 20px; padding: 0.875em 0.625em 0.75em 1.875em; text-align: left !important; } /* line 118, ../sass/partial/_filter.scss */ .type li:not(:last-child) { border-bottom: 0.06667em solid #555555; } /* line 123, ../sass/partial/_filter.scss */ .type li:hover { background: none; } /* line 128, ../sass/partial/_filter.scss */ .status li:hover, .status li.selected { background: #555555; } /* line 132, ../sass/partial/_filter.scss */ .type li.selected { background: url(img/check.svg) no-repeat left center; background-size: 1.25em; } /* line 137, ../sass/partial/_filter.scss */ .done { display: block; margin: 1.25em auto; padding: 0.625em; width: 30%; max-width: 8.75em; color: #e5e5e5; text-align: center; border: 0.06667em solid #555555; cursor: pointer; } }
/* line 154, ../sass/partial/_filter.scss */
.select, .views { margin: 0.625em; }
/* line 159, ../sass/partial/_filter.scss */
.select { display: inline-block; padding: 0.6875em; min-width: 11.875em; background: url(img/dropdown-closed.svg) no-repeat 92% center; background-size: 2em; border: 0.06667em solid #27235e; cursor: pointer; }
/* line 170, ../sass/partial/_filter.scss */
.select:hover { background-image: url(img/dropdown-closed.svg); }
/* line 176, ../sass/partial/_filter.scss */
.open .select { background-image: url(img/dropdown-open.svg); }
/* line 178, ../sass/partial/_filter.scss */
.open .select:hover { background-image: url(img/dropdown-open.svg); }
/* line 184, ../sass/partial/_filter.scss */
li.map { padding-top: 0; }
/* line 189, ../sass/partial/_filter.scss */
.pin, .dots { display: block; font: 0/0 a; }
/* line 194, ../sass/partial/_filter.scss */
.pin { margin-top: 8px; width: 24px; height: 24px; border-radius: 50% 50% 50% 0; border: 2px solid #27235e; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
@media screen and (max-device-width: 47.9375em) and (-webkit-min-device-pixel-ratio: 1.6) { /* line 194, ../sass/partial/_filter.scss */ .pin { margin-top: 15px; width: 74px; height: 74px; border-width: 4px; } }
/* line 209, ../sass/partial/_filter.scss */
.pin:after { content: ''; width: 7px; height: 7px; margin: 5px 0 0 -6px; border: 2px solid #27235e; position: absolute; border-radius: 50%; }
@media screen and (max-device-width: 47.9375em) and (-webkit-min-device-pixel-ratio: 1.6) { /* line 209, ../sass/partial/_filter.scss */ .pin:after { width: 34px; height: 34px; margin: 12px 0 0 -20px; border-width: 4px; } }
/* line 228, ../sass/partial/_filter.scss */
li:hover .pin, li.selected .pin { border-color: #e5e5e5; }
/* line 230, ../sass/partial/_filter.scss */
li:hover .pin:after, li.selected .pin:after { border-color: #e5e5e5; }
/* line 235, ../sass/partial/_filter.scss */
.dots { width: 23px; height: 23px; background-image: -webkit-repeating-radial-gradient(transparent 2px, #27235e 2px, #27235e 3px, transparent 4px, transparent 12px); background-image: repeating-radial-gradient(transparent 2px, #27235e 2px, #27235e 3px, transparent 4px, transparent 12px); background-size: 8px 8px; }
@media screen and (max-device-width: 47.9375em) and (-webkit-min-device-pixel-ratio: 1.6) { /* line 235, ../sass/partial/_filter.scss */ .dots { width: 60px; height: 60px; background-image: -webkit-repeating-radial-gradient(transparent 6px, #27235e 6px, #27235e 8px, transparent 9px, transparent 24px); background-image: repeating-radial-gradient(transparent 6px, #27235e 6px, #27235e 8px, transparent 9px, transparent 24px); background-size: 20px 20px; } }
/* line 248, ../sass/partial/_filter.scss */
li:hover .dots, li.selected .dots { background-image: -webkit-repeating-radial-gradient(transparent 2px, #e5e5e5 2px, #e5e5e5 3px, transparent 4px, transparent 12px); background-image: repeating-radial-gradient(transparent 2px, #e5e5e5 2px, #e5e5e5 3px, transparent 4px, transparent 12px); background-size: 8px 8px; }
@media screen and (max-device-width: 47.9375em) and (-webkit-min-device-pixel-ratio: 1.6) { /* line 248, ../sass/partial/_filter.scss */ li:hover .dots, li.selected .dots { background-image: -webkit-repeating-radial-gradient(transparent 6px, #e5e5e5 6px, #e5e5e5 8px, transparent 9px, transparent 24px); background-image: repeating-radial-gradient(transparent 6px, #e5e5e5 6px, #e5e5e5 8px, transparent 9px, transparent 24px); background-size: 20px 20px; } }
/* line 259, ../sass/partial/_filter.scss */
.subway .dim { opacity: .15; }
/* line 1, ../sass/partial/_footer.scss */
#footer { background: white; }
@media screen and (max-device-width: 47.9375em), screen and (max-width: 47.9375em) { /* line 1, ../sass/partial/_footer.scss */ #footer { background: none; padding: 0 20px; } }
/* line 10, ../sass/partial/_footer.scss */
.copy { padding: 1em 0 1em 3.8em; background: url(img/logo.svg) no-repeat; background-size: 3em; }
/* line 1, ../sass/module/_subway.scss */
.subway { background: rgba(0, 35, 74, 0.9); color: #e5e5e5; overflow: hidden; padding: 2.26667em 0; }
@media screen and (max-device-width: 47.9375em), screen and (max-width: 47.9375em) { /* line 1, ../sass/module/_subway.scss */ .subway { padding-top: 5em; } }
@media screen and (min-width: 48em) and (min-device-width: 48em) { /* line 14, ../sass/module/_subway.scss */ .subway .container { min-width: 64em; } }
/* line 19, ../sass/module/_subway.scss */
.subway .marker { color: #099cd8; text-transform: uppercase; white-space: nowrap; }
/* line 26, ../sass/module/_subway.scss */
.subway .marker.north, .subway .marker.south { padding: 10px 36px; }
/* line 31, ../sass/module/_subway.scss */
.subway .marker.north { float: left; display: block; margin-right: 1.9356%; width: 100%; margin-bottom: 2.5em; background: url(img/arrow.svg) no-repeat; background-size: 24px; }
/* line 38, ../sass/lib/vendor/neat/grid/_span-columns.scss */
.subway .marker.north:last-child { margin-right: 0; }
/* line 41, ../sass/module/_subway.scss */
.subway .marker.kitchen, .subway .marker.front-desk { float: left; display: block; margin-right: 1.9356%; width: 15.05367%; padding: 18px; margin-top: 1.66667em; margin-bottom: 1.66667em; border: 1px dashed; text-align: center; }
/* line 38, ../sass/lib/vendor/neat/grid/_span-columns.scss */
.subway .marker.kitchen:last-child, .subway .marker.front-desk:last-child { margin-right: 0; }
/* line 52, ../sass/module/_subway.scss */
.subway .marker.line { float: left; display: block; margin-right: 1.9356%; width: 66.02147%; padding-top: 3.66667em; border-bottom: 1px dashed; }
/* line 38, ../sass/lib/vendor/neat/grid/_span-columns.scss */
.subway .marker.line:last-child { margin-right: 0; }
/* line 59, ../sass/module/_subway.scss */
.subway .marker.front-desk { margin-right: 0; }
/* line 64, ../sass/module/_subway.scss */
.subway .marker.south, .subway .marker.all-agency { float: left; display: block; margin-right: 1.9356%; width: 15.05367%; }
/* line 38, ../sass/lib/vendor/neat/grid/_span-columns.scss */
.subway .marker.south:last-child, .subway .marker.all-agency:last-child { margin-right: 0; }
@media screen and (min-width: 48em) and (min-device-width: 48em) { /* line 64, ../sass/module/_subway.scss */ .subway .marker.south, .subway .marker.all-agency { margin-top: 20px; } }
/* line 72, ../sass/module/_subway.scss */
.subway .marker.south { right: 0; background: url(img/arrow-down.svg) no-repeat; background-size: 24px; }
/* line 78, ../sass/module/_subway.scss */
.subway .marker.all-agency { margin-left: 53%; padding-top: 0.83333em; padding-bottom: 2.5em; background: url(img/dotted-arrow.svg) no-repeat center 2.4em; background-size: 24px; text-align: center; }
/* line 90, ../sass/module/_subway.scss */
.subway ul { list-style-type: none; }
/* line 95, ../sass/module/_subway.scss */
.subway ul.north, .subway ul.south { float: left; display: block; margin-right: 1.9356%; width: 100%; }
/* line 38, ../sass/lib/vendor/neat/grid/_span-columns.scss */
.subway ul.north:last-child, .subway ul.south:last-child { margin-right: 0; }
/* line 100, ../sass/module/_subway.scss */
.subway ul.north { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAE0lEQVQIW2Nk923+z4AFMA6kBAChygsLkoq5hQAAAABJRU5ErkJggg==) repeat-x 0 38px; }
/* line 105, ../sass/module/_subway.scss */
.subway li { float: left; position: relative; width: 47px; height: 65px; text-align: center; -webkit-transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
@media screen and (max-device-width: 47.9375em), screen and (max-width: 47.9375em) { /* line 105, ../sass/module/_subway.scss */ .subway li { height: 4.8em; } }
/* line 119, ../sass/module/_subway.scss */
.subway li:after { display: block; content: ""; margin: 0 auto; width: 16px; height: 16px; border-radius: 50%; background: #27235e; border: 7px solid #bfbfbf; margin-top: 8px; -webkit-transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
@media screen and (max-device-width: 47.9375em), screen and (max-width: 47.9375em) { /* line 119, ../sass/module/_subway.scss */ .subway li:after { margin-top: 0; width: 2.25em; height: 2.25em; border: 0.5em solid #bfbfbf; } }
/* line 143, ../sass/module/_subway.scss */
.subway li.available:after { border-color: #00af48; }
/* line 147, ../sass/module/_subway.scss */
.subway li.occupied:after { border-color: #da0426; }
/* line 151, ../sass/module/_subway.scss */
.subway li.purgatory:after { border-color: #ffca00; }
/* line 156, ../sass/module/_subway.scss */
.subway li:hover.available:after { border-color: #3fc375; }
/* line 160, ../sass/module/_subway.scss */
.subway li:hover.occupied:after { border-color: #e3425c; }
/* line 164, ../sass/module/_subway.scss */
.subway li:hover.purgatory:after { border-color: #ffd73f; }
/* line 168, ../sass/module/_subway.scss */
.subway li:hover:before { position: absolute; bottom: 2px; left: 50%; margin-left: -22px; display: block; content: ""; width: 42px; height: 42px; border-radius: 50%; border: 1px dashed; }
@media screen and (max-device-width: 47.9375em), screen and (max-width: 47.9375em) { /* line 168, ../sass/module/_subway.scss */ .subway li:hover:before { width: 73px; height: 73px; left: 20px; top: -10px; } }
@media screen and (min-device-width: 768px) and (min-width: 768px) { /* line 193, ../sass/module/_subway.scss */ .subway #N-1, .subway #S-1 { margin-left: -10px; } /* line 197, ../sass/module/_subway.scss */ .subway #N-2, .subway #N-5, .subway #N-9, .subway #N-12 { margin-left: 2.2em; } /* line 201, ../sass/module/_subway.scss */ .subway #N-18 { margin-right: -10px; } /* line 205, ../sass/module/_subway.scss */ .subway ul.south { position: relative; } /* line 209, ../sass/module/_subway.scss */ .subway #S-15, .subway #S-16 { position: absolute; left: 609px; width: 76px; text-align: right; } /* line 216, ../sass/module/_subway.scss */ .subway #S-15 span, .subway #S-16 span { display: block; margin-top: 20px; } /* line 221, ../sass/module/_subway.scss */ .subway #S-15:after, .subway #S-16:after { margin-top: -25px; margin-left: 0; } /* line 226, ../sass/module/_subway.scss */ .subway #S-15:hover:before, .subway #S-16:hover:before { left: 20%; bottom: 15px; } /* line 232, ../sass/module/_subway.scss */ .subway #S-15 { top: 64px; } /* line 236, ../sass/module/_subway.scss */ .subway #S-16 { top: 111px; } /* line 240, ../sass/module/_subway.scss */ .subway #S-17 { margin-left: 135px; } }
@media screen and (max-device-width: 47.9375em), screen and (max-width: 47.9375em) { /* line 247, ../sass/module/_subway.scss */ .subway .container { position: relative; } /* line 254, ../sass/module/_subway.scss */ .subway .marker.north, .subway .marker.south, .subway ul.north, .subway ul.south { float: left; display: block; margin-right: 1.9356%; width: 49.0322%; } /* line 38, ../sass/lib/vendor/neat/grid/_span-columns.scss */ .subway .marker.north:last-child, .subway .marker.south:last-child, .subway ul.north:last-child, .subway ul.south:last-child { margin-right: 0; } /* line 259, ../sass/module/_subway.scss */ .subway .marker.south, .subway ul.south { margin-right: 0; } /* line 264, ../sass/module/_subway.scss */ .subway .marker.north, .subway .marker.south { position: absolute; top: 0; background-image: none !important; font-size: 1.125em; text-align: center; } /* line 276, ../sass/module/_subway.scss */ .subway .marker.kitchen, .subway .marker.front-desk, .subway .marker.line, .subway .marker.all-agency { display: none; } /* line 281, ../sass/module/_subway.scss */ .subway ul.north, .subway ul.south { margin-top: 3em; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAE0lEQVQIW2Nk923+z4AFMA6kBAChygsLkoq5hQAAAABJRU5ErkJggg==); background-repeat: repeat-y; } /* line 293, ../sass/module/_subway.scss */ .subway ul.north li, .subway ul.south li { float: left; display: block; margin-right: 8.21968%; width: 63.92677%; } /* line 38, ../sass/lib/vendor/neat/grid/_span-columns.scss */ .subway ul.north li:last-child, .subway ul.south li:last-child { margin-right: 0; } /* line 299, ../sass/module/_subway.scss */ .subway ul.north span, .subway ul.south span { margin-top: .8em; font-size: 1.25em; } /* line 305, ../sass/module/_subway.scss */ .subway ul.north { background-position-x: 72%; /*optimized for 480px wide*/ border-right: 0.06667em dashed #099cd8; } /* line 309, ../sass/module/_subway.scss */ .subway ul.north li { margin-left: 18%; } /* line 311, ../sass/module/_subway.scss */ .subway ul.north li:after { margin-right: 0; } /* line 316, ../sass/module/_subway.scss */ .subway ul.north span { float: left; } /* line 321, ../sass/module/_subway.scss */ .subway ul.south { background-position-x: 26%; /*optimized for 480px wide*/ } /* line 325, ../sass/module/_subway.scss */ .subway ul.south li { margin-left: 16%; } /* line 327, ../sass/module/_subway.scss */ .subway ul.south li:after { margin-left: 0; } /* line 331, ../sass/module/_subway.scss */ .subway ul.south span { float: right; } }
@media screen and (max-device-width: 47.9375em) and (max-device-width: 47.9375em) and (-webkit-min-device-pixel-ratio: 1.6), screen and (max-width: 47.9375em) and (max-device-width: 47.9375em) and (-webkit-min-device-pixel-ratio: 1.6) { /* line 281, ../sass/module/_subway.scss */ .subway ul.north, .subway ul.south { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGElEQVQYV2Nk923+z0AEYBxViC+UqB88APnYEmeE+HMjAAAAAElFTkSuQmCC); } }
/* line 1, ../sass/module/_grid.scss */
.rooms { text-align: justify; font-size: 0; }
/* line 6, ../sass/module/_grid.scss */
.rooms li { display: inline-block; width: 15%; font-size: 16px; }
@media screen and (max-device-width: 47.9375em), screen and (max-width: 47.9375em) { /* line 6, ../sass/module/_grid.scss */ .rooms li { width: 33%; } }
/* line 16, ../sass/module/_grid.scss */
.tablet .rooms li { width: 18%; }
.rooms li.mix { display:none;
}
/* line 20, ../sass/module/_grid.scss */
.rooms li.mix { margin-bottom: 0.625em; padding: 0.4em 0.625em 12%; background: white url(img/room/table-4.svg) no-repeat center; background-position-y: 1.66667em; background-size: 90%; border-top: 6px solid #bfbfbf; cursor: pointer; -webkit-transition: background 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), margin 1s; transition: background 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), margin 1s; }
@media screen and (max-device-width: 47.9375em) and (-webkit-min-device-pixel-ratio: 1.6) { /* line 20, ../sass/module/_grid.scss */ .rooms li.mix { background-position-y: 3.8em; border-top-width: 12px; } }
@media screen and (max-device-width: 47.9375em), screen and (max-width: 47.9375em) { /* line 20, ../sass/module/_grid.scss */ .rooms li.mix { margin-bottom: 0; padding-bottom: 26%; } }
/* line 45, ../sass/module/_grid.scss */
.tablet .rooms li.mix { padding-bottom: 15%; }
@media screen and (max-device-width: 47.9375em) and (-webkit-min-device-pixel-ratio: 1.6) { /* line 54, ../sass/module/_grid.scss */ .rooms li span { font-size: 40px; } }
/* line 62, ../sass/module/_grid.scss */
.rooms li.available { border-top-color: #00af48; }
/* line 66, ../sass/module/_grid.scss */
.rooms li.occupied { border-top-color: #da0426; }
/* line 70, ../sass/module/_grid.scss */
.rooms li.purgatory { border-top-color: #ffca00; }
/* line 75, ../sass/module/_grid.scss */
.rooms li:hover.available { border-top-color: #3fc375; }
/* line 79, ../sass/module/_grid.scss */
.rooms li:hover.occupied { border-top-color: #e3425c; }
/* line 83, ../sass/module/_grid.scss */
.rooms li:hover.purgatory { border-top-color: #ffd73f; }
/* line 88, ../sass/module/_grid.scss */
.rooms li.unfocus { background-color: #f2f2f2; }
/* line 138, ../sass/module/_grid.scss */
.rooms li.category-1 { background-image: url(img/room/standing.svg); }
/* line 141, ../sass/module/_grid.scss */
.rooms li.category-2 { background-image: url(img/room/lounge.svg); }
/* line 144, ../sass/module/_grid.scss */
.rooms li.category-3 { background-image: url(img/room/table-4.svg); }
/* line 146, ../sass/module/_grid.scss */
.rooms li.category-3.opt-b { background-image: url(img/room/table-6.svg); }
/* line 150, ../sass/module/_grid.scss */
.rooms li.category-4 { background-image: url(img/room/open.svg); }
/* line 154, ../sass/module/_grid.scss */
.fail .error { font-size: 16px; }
/* line 158, ../sass/module/_grid.scss */
.backToTop { position: absolute; right: 0; }
@media screen and (max-device-width: 47.9375em), screen and (max-width: 47.9375em) { /* line 164, ../sass/module/_grid.scss */ #grid-north { padding-top: 4.375em; } /* line 168, ../sass/module/_grid.scss */ .fancy { width: 13.75em; margin: 0 auto; position: relative; overflow: hidden; } }
/* line 4, ../sass/module/_detail.scss */
.details.light { background: white; }
/* line 8, ../sass/module/_detail.scss */
.details.dark { background: rgba(0, 35, 74, 0.9); color: #e5e5e5; }
/* line 13, ../sass/module/_detail.scss */
.details .container { padding: 3.33333em 0 2.2em; }
/* line 17, ../sass/module/_detail.scss */
.details .header { padding-bottom: 1.6em; border-bottom: 1px solid; }
/* line 22, ../sass/module/_detail.scss */
.details .h2 { padding-right: 0.38889em; margin-right: 0.38889em; border-right: 1px solid; }
/* line 31, ../sass/module/_detail.scss */
.details .checkin { float: left; display: block; margin-right: 1.9356%; width: 32.04294%; padding: 16px 25px; border: 1px solid; text-align: center; cursor: pointer; -webkit-transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
/* line 38, ../sass/lib/vendor/neat/grid/_span-columns.scss */
.details .checkin:last-child { margin-right: 0; }
/* line 42, ../sass/module/_detail.scss */
.details ul { *zoom: 1; float: left; list-style-type: none; }
/* line 18, ../sass/lib/vendor/bourbon/addons/_clearfix.scss */
.details ul:before, .details ul:after { content: " "; display: table; }
/* line 23, ../sass/lib/vendor/bourbon/addons/_clearfix.scss */
.details ul:after { clear: both; }
/* line 47, ../sass/module/_detail.scss */
.details ul .h3, .details ul .checkin { padding: 1em 1.5625em; margin-bottom: 8px; border-bottom: 1px solid; }
/* line 53, ../sass/module/_detail.scss */
.details ul li { padding: 0.53333em 1.66667em; }
/* line 60, ../sass/module/_detail.scss */
.details ul.amenities li:not(.h3), .details ul.occupants li:not(.h3) { padding-left: 3em; }
/* line 65, ../sass/module/_detail.scss */
.details ul.amenities { border-left: 1px solid; }
/* line 83, ../sass/module/_detail.scss */
.details.light .checkin { background: #27235e; color: #e5e5e5; }
/* line 86, ../sass/module/_detail.scss */
.details.light .checkin:hover { background: #312e66; color: white; }
/* line 92, ../sass/module/_detail.scss */
.details.light ul.occupants li:not(.h3) { background: url(img/users/dark.svg) no-repeat; }
/* line 104, ../sass/module/_detail.scss */
.details.dark .checkin:hover { background: #27235e; }
/* line 125, ../sass/module/_detail.scss */
.details.dark ul.occupants li:not(.h3) { background: url(img/users/light.svg) no-repeat; }
/* line 14, ../sass/huddle.scss */
.mobileonly { display: none !important; }
@media screen and (max-device-width: 47.9375em), screen and (max-width: 47.9375em) { /* line 14, ../sass/huddle.scss */ .mobileonly { display: block !important; } }
@media screen and (max-device-width: 47.9375em), screen and (max-width: 47.9375em) { /* line 23, ../sass/huddle.scss */ .mobilehide { position: absolute; top: -9999px; left: -9999px; /*wish I didn't have to do it this way...*/ } }

Huddle Grid-Detail View - Script Codes JS Codes

$('.rooms li.mix').click(function(){ var $this = $(this), //cache value //index = $this.index(), //need FILTERED index $visibleItems = $(".mix[style*='block']"), //style="display: inline-block" OR style !empty filteredIndex;// = $visibleItems.filter($this).index() + 1; // convert from 0-based index to 1 //console.log('i am a(n): '+$.type($this)) //console.log($this[0]) //console.log('this is a full collection: '+$.type($(".mix"))) //console.log($(".mix")) //console.log('now an array: '+$.type($.makeArray($(".mix")))) //console.log($.makeArray($(".mix"))) //console.log('this is a filtered collection: '+$.type($visibleItems)) //console.log($visibleItems) //console.log('now an array: '+$.type($.makeArray($visibleItems))) //console.log($.makeArray($visibleItems)) //console.log('both arrays are complex, as they are just a zero-based list of objects: '+$.type( $.makeArray($visibleItems)[0] )) //console.log($.makeArray($visibleItems)[0] ) //console.log('i want to find an item with a matching id of '+$this.attr('id')) //http://stackoverflow.com/a/7364307 /*var result = $.grep($visibleItems, function(e){ //console.log( $(e).attr('id') ) console.log( $(e).index() ) return $(e).attr('id') == $this.attr('id') // === ? }) console.log(result) //result[0].id */ $visibleItems.each(function(index){ //console.log(this) //console.log($(this)) //console.log($(this).attr('id')) if( $(this).attr('id') == $this.attr('id') ){ //console.log(index) //+ 1 filteredIndex = (index + 1); //convert from zero-based } }) //console.log( $.type( $.makeArray($visibleItems)) ) //console.log( $.inArray( 'li#N-3.room-12.category-3.mix', //$.makeArray($visibleItems)) ) //console.log($.makeArray($visibleItems)); console.log( 'i am: ' + filteredIndex + ' out of ' + $visibleItems.length + ' visible items' ) if ( $('body').hasClass('mobile') ) { // 3 ! var row = Math.ceil(filteredIndex / 3), //rounding up position = (row*3); //we are using after, so we don't need + 1 } else { // 6 var row = Math.ceil(filteredIndex / 6), //rounding up position = (row*6); //we are using after, so we don't need + 1 //console.log( filteredIndex % 6 ) we don't need the remainder } //console.log( 'add details div at position: '+position+' OF $visibleItems !!!, which is: ' ) //console.log( $.makeArray($visibleItems)[position] ) if($this.hasClass('details-open')) { $('#grid-north').after( $('.details') ) } else { if( position > $visibleItems.length ) { $('.rooms').append( $('.details') ) //append to correct div/ul by checking parent // $('.mix:last').after( $('.details') ) } else { $($.makeArray($visibleItems)[position - 1]).after( $('.details') ) // have to subtract 1 to account for mix of zero-based and 1-based indices... } $this.siblings().removeClass('details-open'); } $this.toggleClass('details-open'); //if position doesn't exist, add to end //$this.siblings().removeClass('details-open'); //$this.toggleClass('details-open'); //if( $this.hasClass('details-open') ) { //$this.append( $('.details.dark') ) //} else { //$this.removeClass('details-open'); //}
});
Huddle Grid-Detail View - Script Codes
Huddle Grid-Detail View - Script Codes
Home Page Home
Developer Alyssa
Username alyda
Uploaded September 08, 2022
Rating 3
Size 8,974 Kb
Views 28,336
Do you need developer help for Huddle Grid-Detail View?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Alyssa (alyda) Script Codes
Name
Evolve JS
Wire up a Backend
Evolve Navigation
Huddle Subway Map
Shadow Dom with Polymer
Evolve Error Pages
Lexus Email Templates
Evolve Logo SVG animation
Evolve Patterns
360 Image Slider
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!