Nested flexbox layout for library catalog

Developer
Martin Boyce
Size
3,271 Kb
Views
14,161

How do I make an nested flexbox layout for library catalog?

What is a nested flexbox layout for library catalog? How do you make a nested flexbox layout for library catalog? This script and codes were developed by Martin Boyce on 20 September 2022, Tuesday.

Nested flexbox layout for library catalog Previews
IQ Test

Nested flexbox layout for library catalog - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>nested flexbox layout for library catalog</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container-fluid"> <h2>Result List</h2> <div class="result-list"> <div class="panel panel-default result-item"> <div class="panel-heading"> <h3 class="panel-title">1. Handle with care</h3> </div> <div class="panel-body result-detail"> <div class="result-author"> <p>Picoult, Jodi, 1966-</p> <p>Large Print<br> 2012</p> <p>1 available copy at Caringbah Library<br> <a class="show-copies">show all copies</a> </p> </div> <div class="result-actions"> <a href="#" class="btn btn-success">Place Hold</a> <br /> <a href="#">Add to Basket</a> </div> </div> <div class="result-status"> <table class="table hidden"> <tbody> <tr> <th>Location</th> <th>Call No.</th> <th>Status</th> </tr> <tr> <td>Caringbah Large print fiction</td> <td>LP PICO</td> <td>Available</td> </tr> <tr> <td>Bundeena Adult Fiction</td> <td>PICO</td> <td>DUE 03-12-16</td> </tr> </tbody> </table> </div> </div> <div class="panel panel-default result-item"> <div class="panel-heading"> <h3 class="panel-title">2. House rules</h3> </div> <div class="panel-body result-detail"> <div class="result-author"> <p>Picoult, Jodi, 1966-</p> <p>Book<br> 2012</p> <p>1 available copy at Cronulla Library<br> <a class="show-copies">show all copies</a> </p> </div> <div class="result-actions"> <a href="#" class="btn btn-success">Place Hold</a> <br /> <a href="#">Add to Basket</a> </div> </div> <div class="result-status"> <table class="table hidden"> <tbody> <tr> <th>Location</th> <th>Call No.</th> <th>Status</th> </tr> <tr> <td>Cronulla Fiction</td> <td><a href="/search~S1?/cPICO/cpico/-3,-1,,E/browse">PICO</a></td> <td>Available </td> </tr> </tbody> </table> </div> </div> <div class="panel panel-default result-item"> <div class="panel-heading"> <h3 class="panel-title">3. The pact [electronic resource] : a love story</h3> </div> <div class="panel-body result-detail"> <div class="result-cover"><img src="http://placehold.it/120x180"/></div> <div class="result-author"> <p>Picoult, Jodi, 1966-</p> <p>eBook<br> 2012</p> <p>1 available copy at<br> <a class="show-copies">show all copies</a> </p> </div> <div class="result-actions"> <a href="#">Add to Basket</a> </div> </div> <div class="result-status"></div> </div> <div class="panel panel-default result-item"> <div class="panel-heading"> <h3 class="panel-title">Leaving home [sound recording]</h3> </div> <div class="panel-body result-detail"> <div class="result-cover"><img src="http://placehold.it/120x180"/></div> <div class="result-author"> <p>Picoult, Jodi, 1966-<br> Audiobook<br> 2012</p> <p>0 available copies. 1 hold on first copy returned of 1 copy.<br> <a class="show-copies">show all copies</a> </p> </div> <div class="result-actions"> <a href="#" class="btn btn-success">Place Hold</a> <br /> <a href="#">Add to Basket</a> </div> </div> <div class="result-status"> <table class="table hidden"> <tbody> <tr> <th>Location</th> <th>Call No.</th> <th>Status</th> </tr> <tr> <td>Sutherland Compact discs</td> <td>CDF PICO</td> <td>DUE 29-11-16</td> </tr> </tbody> </table> </div> </div> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Nested flexbox layout for library catalog - Script Codes CSS Codes

.result-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap;
}
.result-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; -ms-flex-preferred-size: 100%; flex-basis: 100%;
}
@media (min-width: 768px) and (max-width: 1199px) { .result-item { -ms-flex-preferred-size: 49%; flex-basis: 49%; } .result-item:nth-child(2n+1) { margin-right: 2%; }
}
@media (min-width: 1200px) { .result-item { -ms-flex-preferred-size: 32%; flex-basis: 32%; margin-right: 1.2%; }
}
.result-detail { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: column nowrap; flex-flow: column nowrap; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start;
}
@media (min-width: 480px) { .result-detail { -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; }
}
.result-author { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1;
}
.result-actions { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0;
}

Nested flexbox layout for library catalog - Script Codes JS Codes

$('a.show-copies').on('click', function(e) { console.log('click recorded'); var getResultDetail = $(this).parentsUntil('.result-item').next('.result-status').children('table'); $(getResultDetail).toggleClass('hidden'); e.preventDefault();
});
Nested flexbox layout for library catalog - Script Codes
Nested flexbox layout for library catalog - Script Codes
Home Page Home
Developer Martin Boyce
Username boycetrus
Uploaded September 20, 2022
Rating 3
Size 3,271 Kb
Views 14,161
Do you need developer help for Nested flexbox layout for library catalog?

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!

Martin Boyce (boycetrus) Script Codes
Name
Test Case for ajax fail on single result
Bootstrap Panel List
AJAX content from an RSS feed using jQuery
First steps with Handlebars.js
Google Maps API Ground Overlay
Google Maps API Custom Overlay
Sutherland Shire Libraries Catalogue Search
Fetching book covers with the Google Books API
Booklist Using Google Spreadsheets as JSON Source and Handlebars for templating
Flexbox horozontal scrolling booklist
Create amazing love letters 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!