Add 'contents' section at the top of the page

These links wrap a <button> tag and use the "btn" class. To distinguish them from the command buttons that trigger the modals, I've given them a different colour scheme and a different emoji prefix.
This commit is contained in:
kfrn 2017-10-04 22:19:29 +13:00
parent efd9e55b66
commit fd7528a6bd
2 changed files with 32 additions and 3 deletions

View File

@ -14,6 +14,7 @@ h2 {
.select-from {
font-size: 16px;
}
code {
word-break: break-all;
word-wrap: break-word;
@ -85,6 +86,18 @@ div {
transform: scale(1.3) translateZ(0);
}
.contents-list {
color: black;
}
.contents-list:hover {
color: #2a9fd6;
}
.contents-list:before {
content: "📼"
}
.codeblock {
font-family: monospace
padding: 2px 4px;

View File

@ -42,7 +42,23 @@
<div class="well col-md-8 col-md-offset-0">
<div class="well">
<h3>What do you want to do?</h3>
<p class="select-from">Select from the following.</p>
<p class="select-from">Click one of the following categories to see possible commands of that type:</p>
<a href="#rewrap"><button type="button" class="btn contents-list">Change container (rewrap)</button></a>
<a href="#transcode"><button type="button" class="btn contents-list">Change codec (transcode)</button></a>
<a href="#properties"><button type="button" class="btn contents-list">Change video properties</button></a>
<a href="#join-trim"><button type="button" class="btn contents-list">Join videos, or trim/create an excerpt from a video</button></a>
<a href="#interlacing"><button type="button" class="btn contents-list">Work with interlaced video</button></a>
<a href="#filters-scopes"><button type="button" class="btn contents-list">Use filters or scopes</button></a>
<a href="#metadata"><button type="button" class="btn contents-list">View or strip metadata</button></a>
<a href="#create-images"><button type="button" class="btn contents-list">Generate image files from a video</button></a>
<a href="#create-video"><button type="button" class="btn contents-list">Create a video from image(s) and audio</button></a>
<a href="#overlay"><button type="button" class="btn contents-list">Overlay timecode or text on a video</button></a>
<a href="#normalise-audio"><button type="button" class="btn contents-list">Normalize/equalize audio</button></a>
<a href="#preservation"><button type="button" class="btn contents-list">Preservation tasks</button></a>
<a href="#test-files"><button type="button" class="btn contents-list">Generate test files</button></a>
<a href="#repair"><button type="button" class="btn contents-list">Repair a file</button></a>
<a href="#ocr"><button type="button" class="btn contents-list">Use OCR</button></a>
<a href="#other"><button type="button" class="btn contents-list">Something else</button></a>
</div>
<div class="well">
@ -1021,7 +1037,7 @@ e.g.: <code>ffmpeg -f concat -safe 0 -i mylist.txt -c copy <i>output_file</i></c
</div>
<div class="well">
<h2 id="metadata">View or delete metadata</h2>
<h2 id="metadata">View or strip metadata</h2>
<!-- Pull specs -->
<span data-toggle="modal" data-target="#pull_specs"><button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Pull specs from video file">Pull specs</button></span>
@ -1073,7 +1089,7 @@ e.g.: <code>ffmpeg -f concat -safe 0 -i mylist.txt -c copy <i>output_file</i></c
</div>
<div class="well">
<h2 id="still-images">Generate image files from a video</h2>
<h2 id="create-images">Generate image files from a video</h2>
<!-- Create GIF -->
<span data-toggle="modal" data-target="#create_gif"><button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Create a GIF from a video">Create GIF</button></span>