Merge pull request #213 from hiwelo/accessibility-improvements
Accessibility improvements
This commit is contained in:
commit
9949a0d32b
6 changed files with 482 additions and 475 deletions
894
css/style.css
894
css/style.css
File diff suppressed because it is too large
Load diff
|
@ -1,25 +1,25 @@
|
||||||
{locale path="../i18n" domain="Alltube"}
|
{locale path="../i18n" domain="Alltube"}
|
||||||
<!Doctype HTML>
|
<!doctype html>
|
||||||
<html {if isset($locale)}lang="{$locale->getBcp47()}"{/if}>
|
<html {if isset($locale)}lang="{$locale->getBcp47()}"{/if}>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name=viewport content="width=device-width, initial-scale=1">
|
<meta name=viewport content="width=device-width, initial-scale=1">
|
||||||
{if isset($description)}
|
{if isset($description)}
|
||||||
<meta name="description" content="{$description|escape}" />
|
<meta name="description" content="{$description|escape}" />
|
||||||
<meta name="twitter:description" content="{$description|escape}" />
|
<meta name="twitter:description" content="{$description|escape}" />
|
||||||
<meta property="og:description" content="{$description|escape}" />
|
<meta property="og:description" content="{$description|escape}" />
|
||||||
{/if}
|
{/if}
|
||||||
<link rel="stylesheet" href="{base_url}/dist/main.css" />
|
<link rel="stylesheet" href="{base_url}/dist/main.css" />
|
||||||
<title>{$config->appName}{if isset($title)} - {$title|escape}{/if}</title>
|
<title>{$config->appName}{if isset($title)} - {$title|escape}{/if}</title>
|
||||||
<link rel="canonical" href="{$canonical}" />
|
<link rel="canonical" href="{$canonical}" />
|
||||||
<link rel="icon" href="{base_url}/img/favicon.png" />
|
<link rel="icon" href="{base_url}/img/favicon.png" />
|
||||||
<meta property="og:title" content="{$config->appName}{if isset($title)} - {$title|escape}{/if}" />
|
<meta property="og:title" content="{$config->appName}{if isset($title)} - {$title|escape}{/if}" />
|
||||||
<meta property="og:image" content="{base_url}/img/logo.png" />
|
<meta property="og:image" content="{base_url}/img/logo.png" />
|
||||||
<meta name="twitter:card" content="summary" />
|
<meta name="twitter:card" content="summary" />
|
||||||
<meta name="twitter:title" content="{$config->appName}{if isset($title)} - {$title|escape}{/if}" />
|
<meta name="twitter:title" content="{$config->appName}{if isset($title)} - {$title|escape}{/if}" />
|
||||||
<meta name="twitter:image" content="{base_url}/img/logo.png" />
|
<meta name="twitter:image" content="{base_url}/img/logo.png" />
|
||||||
<meta name="twitter:creator" content="@Tael67" />
|
<meta name="twitter:creator" content="@Tael67" />
|
||||||
<meta name="theme-color" content="#4F4F4F">
|
<meta name="theme-color" content="#4F4F4F">
|
||||||
<link rel="manifest" href="{base_url}/resources/manifest.json" />
|
<link rel="manifest" href="{base_url}/resources/manifest.json" />
|
||||||
</head>
|
</head>
|
||||||
<body class="{$class}">
|
<body class="{$class}">
|
||||||
|
|
|
@ -18,9 +18,12 @@
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
<div class="social">
|
<div class="social">
|
||||||
<a class="twitter" rel="noopener" href="http://twitter.com/home?status={base_url|urlencode}" title="{t}Share on Twitter{/t}" target="_blank">
|
<a class="twitter" rel="noopener" href="http://twitter.com/home?status={base_url|urlencode}" title="{t}Share on Twitter{/t}" target="_blank" aria-label="{t}Share on Twitter{/t} {t}(opens a new window){/t}">
|
||||||
<div class="twittermask"></div></a>
|
<div class="twittermask"></div>
|
||||||
<a class="facebook" rel="noopener" href="https://www.facebook.com/sharer/sharer.php?u={base_url|urlencode}" title="{t}Share on Facebook{/t}" target="_blank"><div class="facebookmask"></div></a>
|
</a>
|
||||||
|
<a class="facebook" rel="noopener" href="https://www.facebook.com/sharer/sharer.php?u={base_url|urlencode}" title="{t}Share on Facebook{/t}" target="_blank" aria-label="{t}Share on Facebook{/t} {t}(opens a new window){/t}">
|
||||||
|
<div class="facebookmask"></div>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
|
|
|
@ -25,8 +25,8 @@
|
||||||
{t}Audio only (MP3){/t}
|
{t}Audio only (MP3){/t}
|
||||||
</label>
|
</label>
|
||||||
<div class="seekOptions">
|
<div class="seekOptions">
|
||||||
{t}From{/t} <input type="text" pattern="(\d+:)?(\d+:)?\d+(\.\d+)?" placeholder="HH:MM:SS" value="" name="from"/>
|
<label for="from">{t}From{/t}</label> <input type="text" pattern="(\d+:)?(\d+:)?\d+(\.\d+)?" placeholder="HH:MM:SS" value="" name="from" id="from" />
|
||||||
{t}to{/t} <input type="text" pattern="(\d+:)?(\d+:)?\d+(\.\d+)?" placeholder="HH:MM:SS" value="" name="to"/>
|
<label for="to">{t}to{/t}</label> <input type="text" pattern="(\d+:)?(\d+:)?\d+(\.\d+)?" placeholder="HH:MM:SS" value="" name="to" id="to" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -5,7 +5,8 @@
|
||||||
<h2>{t}This video is protected{/t}</h2>
|
<h2>{t}This video is protected{/t}</h2>
|
||||||
<p>{t}You need a password in order to download this video.{/t}</p>
|
<p>{t}You need a password in order to download this video.{/t}</p>
|
||||||
<form action="" method="POST">
|
<form action="" method="POST">
|
||||||
<input class="URLinput" type="password" name="password" title="{t}Video password{/t}" />
|
<label class="sr-only" for="password">{t}Video password{/t}</label>
|
||||||
|
<input class="URLinput" type="password" name="password" id="password" />
|
||||||
<br/><br/>
|
<br/><br/>
|
||||||
<input class="downloadBtn" type="submit" value="{t}Download{/t}" />
|
<input class="downloadBtn" type="submit" value="{t}Download{/t}" />
|
||||||
</form>
|
</form>
|
||||||
|
|
|
@ -83,14 +83,15 @@
|
||||||
{if $config->convertAdvanced}
|
{if $config->convertAdvanced}
|
||||||
<input type="checkbox" name="customConvert" id="customConvert"/>
|
<input type="checkbox" name="customConvert" id="customConvert"/>
|
||||||
<label for="customConvert">{t}Convert into a custom format:{/t}</label>
|
<label for="customConvert">{t}Convert into a custom format:{/t}</label>
|
||||||
<select title="Custom format" name="customFormat">
|
<select title="Custom format" name="customFormat" aria-label="{t}Format to convert to{/t}">
|
||||||
{foreach $config->convertAdvancedFormats as $format}
|
{foreach $config->convertAdvancedFormats as $format}
|
||||||
<option>{$format}</option>
|
<option>{$format}</option>
|
||||||
{/foreach}
|
{/foreach}
|
||||||
</select>
|
</select>
|
||||||
{t}with{/t}
|
{t}with{/t}
|
||||||
<input type="number" value="{$config->audioBitrate}" title="Custom bitrate" class="customBitrate"name="customBitrate" id="customBitrate" />
|
<label for="customBitrate" class="sr-only">{t}Bit rate{/t}</label>
|
||||||
<label for="customBitrate">{t}kbit/s audio{/t}</label>
|
<input type="number" value="{$config->audioBitrate}" title="Custom bitrate" class="customBitrate"name="customBitrate" id="customBitrate" aria-describedby="customBitrateUnit" />
|
||||||
|
<span id="customBitrateUnit">{t}kbit/s audio{/t}</span>
|
||||||
<br/><br/>
|
<br/><br/>
|
||||||
{/if}
|
{/if}
|
||||||
<input class="downloadBtn" type="submit" value="{t}Download{/t}" /><br/>
|
<input class="downloadBtn" type="submit" value="{t}Download{/t}" /><br/>
|
||||||
|
|
Loading…
Reference in a new issue