Nested flexbox layout for library catalog
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 - 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();
});
Developer | Martin Boyce |
Username | boycetrus |
Uploaded | September 20, 2022 |
Rating | 3 |
Size | 3,271 Kb |
Views | 14,168 |
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!
Name | Size |
Booklist Using Google Spreadsheets as JSON Source and Handlebars for templating | 3,063 Kb |
Using Google Spreadsheets as JSON Source | 2,492 Kb |
Test Case for ajax fail on single result | 3,297 Kb |
Fetching book covers with the Google Books API | 8,769 Kb |
Scratchpad | 5,672 Kb |
Google Analytics Event Tracking using html5 data attributes | 2,560 Kb |
Get the app | 3,198 Kb |
Flexbox login form | 3,551 Kb |
Bootstrap Panel List | 2,472 Kb |
Nested flexbox layout for library catalog | 3,271 Kb |
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!
Name | Username | Size |
Tooltip in table | Roine | 3,713 Kb |
HTM5 picture dropzone | Jaysalvat | 2,576 Kb |
Prototype Responsive Homepage | Heyitsolivia | 7,677 Kb |
Kut D3 | Jellevrswk | 3,687 Kb |
Mini Profile | Frytyler | 3,828 Kb |
Clock | Martingrand | 3,520 Kb |
AngularJS Animated Todo List | Ehaase | 2,975 Kb |
Transition | Shayhowe | 1,632 Kb |
Resume | Rottingroom | 5,483 Kb |
SlideupBoxes | Gavra | 23,772 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!