Commit a1a5e504 authored by Michael Murtaugh's avatar Michael Murtaugh

first version media box testing

parent 39b086d8
......@@ -4,7 +4,7 @@ Goal: to build a simple (as possible) in-page directory listing media player. Th
## Deployment on Apache
```
IndexHeadInsert "<script type=\"text/javascript\" src=\"/lib/directory/directory
IndexHeadInsert "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><script type=\"text/javascript\" src=\"/lib/directory/directory
.js\"></script><link rel=\"stylesheet\" type=\"text/css\" href=\"/lib/directory/directory.css\">"
......
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: left;
}
*, ::after, ::before {
box-sizing: border-box;
}
.bd-example {
padding: 1.5rem;
margin-right: 0;
margin-left: 0;
border-width: .2rem;
position: relative;
margin: 1rem -15px 0;
border: solid #f8f9fa;
display: -ms-flexbox;
display: flex;
-ms-flex-align: start;
align-items: flex-start;
flex-wrap: wrap;
}
.media {
display: -ms-flexbox;
display: flex;
-ms-flex-align: start;
align-items: flex-start;
-ms-flex: 1;
flex: 1;
}
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.mr-3, .mx-3 {
margin-right: 1rem !important;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
margin-bottom: .5rem;
font-weight: 500;
line-height: 1.2;
}
.h5, h5 {
font-size: 1.25rem;
}
.mt-0, .my-0 {
margin-top: 0 !important;
}
.media-body {
-ms-flex: 1;
flex: 1;
}
svg {
overflow: hidden;
vertical-align: middle;
}
</style>
</head>
<body>
</body>
</html>
<div class="bd-example">
<div class="media">
<svg class="bd-placeholder-img mr-3" width="64" height="64" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 64x64"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">64x64</text></svg>
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</div>
<div class="media">
<svg class="bd-placeholder-img mr-3" width="64" height="64" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 64x64"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">64x64</text></svg>
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</div>
</div>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment