<html lang='en'>
<head>
<meta content='text/html; charset=utf-8' http-equiv='Content-Type'>
<title>
GitLab
</title>
</meta>
</head>
<style>
img {
max-width: 100%;
height: auto;
}
p.details {
font-style:italic;
color:#777
}
.footer p {
font-size:small;
color:#777
}
pre.commit-message {
white-space: pre-wrap;
}
.file-stats a {
text-decoration: none;
}
.file-stats .new-file {
color: #090;
}
.file-stats .deleted-file {
color: #B00;
}
</style>
<body>
<div class='content'>
<h3>Jean-Baptiste Kempf pushed to branch master at <a href="https://code.videolan.org/VideoLAN.org/websites">VideoLAN organization / websites</a></h3>
<h4>
Commits:
</h4>
<ul>
<li>
<strong><a href="https://code.videolan.org/VideoLAN.org/websites/commit/1669392b57d1b58eaf3558e7686b61682bdec237">1669392b</a></strong>
<div>
<span>by David Loiret</span>
<i>at 2016-01-20T00:06:33Z</i>
</div>
<pre class='commit-message'>features: improve styles
Signed-off-by: Jean-Baptiste Kempf <jb@videolan.org></pre>
</li>
<li>
<strong><a href="https://code.videolan.org/VideoLAN.org/websites/commit/058b7a33f83eda1b8a2bf8c680eb36954315d607">058b7a33</a></strong>
<div>
<span>by David Loiret</span>
<i>at 2016-01-20T00:06:33Z</i>
</div>
<pre class='commit-message'>features: use Bootstrap table
Signed-off-by: Jean-Baptiste Kempf <jb@videolan.org></pre>
</li>
<li>
<strong><a href="https://code.videolan.org/VideoLAN.org/websites/commit/5c96343f6f9f4d8bcc20af90878b74c04eca8550">5c96343f</a></strong>
<div>
<span>by David Loiret</span>
<i>at 2016-01-20T00:06:33Z</i>
</div>
<pre class='commit-message'>features: improve design of tables
Signed-off-by: Jean-Baptiste Kempf <jb@videolan.org></pre>
</li>
</ul>
<h4>2 changed files:</h4>
<ul>
<li class='file-stats'>
<a href='#diff-0'>
www.videolan.org/vlc/features.css
</a>
</li>
<li class='file-stats'>
<a href='#diff-1'>
www.videolan.org/vlc/features.php
</a>
</li>
</ul>
<h4>Changes:</h4>
<li id='diff-0'>
<a href='https://code.videolan.org/VideoLAN.org/websites/compare/919087c5efb99c71d62eb7fb66c3c30fcbbda2d4...5c96343f6f9f4d8bcc20af90878b74c04eca8550#diff-0'>
<strong>
www.videolan.org/vlc/features.css
</strong>
</a>
<hr>
<pre class="highlight"><code><span style="color: #000000;background-color: #ffdddd">--- a/www.videolan.org/vlc/features.css
</span><span style="color: #000000;background-color: #ddffdd">+++ b/www.videolan.org/vlc/features.css
</span><span style="color: #aaaaaa">@@ -1,96 +1,137 @@
</span> #maincontent table td {
<span style="color: #000000;background-color: #ffdddd">- margin:0px;
- padding:0px;
- border-top:0px;
</span><span style="color: #000000;background-color: #ddffdd">+ margin: 0px;
+ padding: 0px;
+ border-top: 0px;
</span> }
<span style="color: #000000;background-color: #ddffdd">+
</span> ul.feature-icon {
<span style="color: #000000;background-color: #ffdddd">- padding-top: 10px;
-}
-.feature-table {
-}
-.feature-table-lefttop {
- background:url(http://images.videolan.org/images/features/feature-list-lefttop.jpg) no-repeat right bottom !important;
- width: 150px;
-}
-.feature-table-top {
- background:url(http://images.videolan.org/images/features/feature-list-top.jpg) repeat-x bottom !important;
-}
-.feature-table-righttop {
- background:url(http://images.videolan.org/images/features/feature-list-righttop.jpg) no-repeat left bottom !important;
- width: 2px;
-}
-.feature-table-leftbottom {
- background:url(http://images.videolan.org/images/features/feature-list-leftbottom.jpg) no-repeat right top !important;
</span><span style="color: #000000;background-color: #ddffdd">+ padding-top: 10px;
</span> }
<span style="color: #000000;background-color: #ffdddd">-.feature-table-bottom {
- background:url(http://images.videolan.org/images/features/feature-list-bottom.jpg) repeat-x top !important;
-}
-.feature-table-rightbottom {
- background:url(http://images.videolan.org/images/features/feature-list-rightbottom.jpg) no-repeat left top !important;
</span><span style="color: #000000;background-color: #ddffdd">+
+.feature-table {
+ margin-top: 30px;
</span> }
<span style="color: #000000;background-color: #ffdddd">-.feature-table-right {
- width:2px;
- background:url(http://images.videolan.org/images/features/feature-list-right.jpg) repeat-y left !important;
</span><span style="color: #000000;background-color: #ddffdd">+
+.feature-table table {
+ margin-bottom: 0;
</span> }
<span style="color: #000000;background-color: #ddffdd">+
</span> .feature-cat-list {
<span style="color: #000000;background-color: #ffdddd">- background:url(http://images.videolan.org/images/features/feature-list-left.jpg) repeat-y right !important;
- width: 150px;
</span><span style="color: #000000;background-color: #ddffdd">+ width: 150px;
+ text-align: center;
</span> }
<span style="color: #000000;background-color: #ddffdd">+
+.feature-cat:hover {
+ text-decoration: none;
+}
+
</span> .feature-cat {
<span style="color: #000000;background-color: #ffdddd">- cursor:pointer;
- background:url(http://images.videolan.org/images/features/feature-cat.jpg) left no-repeat;
- padding-left:5px;
- padding-top:10px;
- border-collapse: collapse;
- border:none;
- height:28px;
- font-weight: bold;
- color:#2D58AE;
-}
-.feature-cat-sel {
- cursor:pointer;
- background:url(http://images.videolan.org/images/features/feature-cat-sel.jpg) left no-repeat;
- padding-left:5px;
- padding-top:10px;
- border-collapse: collapse;
- border:none;
- height:28px;
- font-weight: bold;
- color:#D4E0F7;
</span><span style="color: #000000;background-color: #ddffdd">+ text-decoration: none;
+ margin: 5px 0;
+ border-top-left-radius: 4px;
+ border-bottom-left-radius: 4px;
+ display: block;
+ cursor: pointer;
+ background: #f9f9f9;
+ padding: 10px 10px 10px 5px;
+ font-weight: bold;
+ color: #2D58AE;
+}
+
+.feature-cat.cat-active {
+ background: #7499E0;
+ border: none;
+ color: #fff;
</span> }
<span style="color: #000000;background-color: #ddffdd">+
</span> .feature-list {
<span style="color: #000000;background-color: #ffdddd">- background: #7499e0 !important;
</span><span style="color: #000000;background-color: #ddffdd">+ background: #7499e0 !important;
</span> }
<span style="color: #000000;background-color: #ddffdd">+
</span> .feature-div {
<span style="color: #000000;background-color: #ffdddd">- margin: 5px;
</span><span style="color: #000000;background-color: #ddffdd">+ margin: 2px;
</span> }
<span style="color: #000000;background-color: #ddffdd">+
</span> .feature-list-table {
<span style="color: #000000;background-color: #ffdddd">- background: #FFF;
</span><span style="color: #000000;background-color: #ddffdd">+ background: #FFF;
</span> }
<span style="color: #000000;background-color: #ddffdd">+
</span> #maincontent table.feature-list-table td {
<span style="color: #000000;background-color: #ffdddd">- border-top: 1px solid #D4E0F7;
</span><span style="color: #000000;background-color: #ddffdd">+ border-top: 1px solid #D4E0F7;
</span> }
<span style="color: #000000;background-color: #ddffdd">+
</span> .feature-cat a, .feature-cat-sel a {
<span style="color: #000000;background-color: #ffdddd">- text-decoration: none;
</span><span style="color: #000000;background-color: #ddffdd">+ text-decoration: none;
</span> }
#maincontent table th.th-os {
<span style="color: #000000;background-color: #ffdddd">- white-space: nowrap;
- overflow: hidden;
- width: 10%;
</span><span style="color: #000000;background-color: #ddffdd">+ white-space: nowrap;
+ overflow: hidden;
+ width: 10%;
+ text-align: center;
+}
+
+table th.th-os a, table th.th-os a > img {
+ display: block;
+ margin: auto;
</span> text-align: center;
}
<span style="color: #000000;background-color: #ffdddd">-#maincontent table th.th-os:hover { overflow: visible; }
-#maincontent table td.yes { color: #333333; background: #EAF0FB; width: 10%; }
-#maincontent table td.no { color: #333333; background: #F3F6FD; width: 10%; }
-#maincontent table td.partial { color: #333333; background: #E1E9F9; width: 10%; }
-#maincontent table td.none { background: #F3F6FD; width: 10%; }
-#maincontent table td.type { background: #EAF0FB; width: 20%; }
-#maincontent table td.category { background: #F3F6FD; width: 10%; }
-td.yes, td.no, td.part, td.partial, td.none{ text-align: center; }
</span><span style="color: #000000;background-color: #ddffdd">+table th.th-os a.inline-block > img {
+ display: inline-block;
+}
+
+#maincontent table th.th-os:hover {
+ overflow: visible;
+}
+
+#maincontent table td.yes {
+ color: #333333;
+ background: #EAF0FB;
+ width: 10%;
+}
+
+#maincontent table td.no {
+ color: #333333;
+ background: #F3F6FD;
+ width: 10%;
+}
+
+#maincontent table td.partial {
+ color: #333333;
+ background: #E1E9F9;
+ width: 10%;
+}
</span>
<span style="color: #000000;background-color: #ffdddd">-#maincontent table th.type { width: 20%; }
-#maincontent table th.category { width: 10%; }
</span><span style="color: #000000;background-color: #ddffdd">+#maincontent table td.none {
+ background: #F3F6FD;
+ width: 10%;
+}
</span>
<span style="color: #000000;background-color: #ddffdd">+#maincontent table td.type {
+ background: #EAF0FB;
+ width: 20%;
+}
+
+table td.category {
+ background: #F3F6FD;
+ width: 10%;
+ border-right: 1px solid #ddd;
+}
+
+td.yes, td.no, td.part, td.partial, td.none {
+ text-align: center;
+}
+
+#maincontent table th.type {
+ width: 20%;
+}
+
+#maincontent table th.category {
+ width: 10%;
+}
+
+.feature-table .notes {
+ padding: 10px 10px 0 10px;
+}
</span>
</code></pre>
<br>
</li>
<li id='diff-1'>
<a href='https://code.videolan.org/VideoLAN.org/websites/compare/919087c5efb99c71d62eb7fb66c3c30fcbbda2d4...5c96343f6f9f4d8bcc20af90878b74c04eca8550#diff-1'>
<strong>
www.videolan.org/vlc/features.php
</strong>
</a>
<hr>
<pre class="highlight"><code><span style="color: #000000;background-color: #ffdddd">--- a/www.videolan.org/vlc/features.php
</span><span style="color: #000000;background-color: #ddffdd">+++ b/www.videolan.org/vlc/features.php
</span><span style="color: #aaaaaa">@@ -34,7 +34,7 @@ function writefeature( $title, $windows, $mac, $linux, $beos, $bsd, $fam )
</span> function writeInputFeatures() {
?>
<div id="feature-list-input">
<span style="color: #000000;background-color: #ffdddd">- <table class="feature-list-table">
</span><span style="color: #000000;background-color: #ddffdd">+ <table class="feature-list-table table table-striped table-hover">
</span> <?php headers( "yes" ); ?>
<tr>
<td class="category" rowspan="14"><b>Input media</b></td>
<span style="color: #aaaaaa">@@ -114,7 +114,7 @@ function writeInputFeatures() {
</span> function writeVideoFeatures() {
?>
<div id="feature-list-video">
<span style="color: #000000;background-color: #ffdddd">- <table class="feature-list-table">
</span><span style="color: #000000;background-color: #ddffdd">+ <table class="feature-list-table table table-striped table-hover">
</span> <?php headers( "no" ); ?>
<?php writefeature( "MPEG-1/2", "yes", "yes", "yes", "yes", "yes", "yes" ); ?>
<?php writefeature( "DivX® (1/2/3)", "yes", "yes", "yes", "yes", "yes", "yes" ); ?>
<span style="color: #aaaaaa">@@ -159,7 +159,7 @@ function writeVideoFeatures() {
</span> function writeAudioFeatures() {
?>
<div id="feature-list-audio">
<span style="color: #000000;background-color: #ffdddd">- <table class="feature-list-table">
</span><span style="color: #000000;background-color: #ddffdd">+ <table class="feature-list-table table table-striped table-hover">
</span> <?php headers( "no" ); ?>
<?php writefeature( "MPEG Layer 1/2", "yes", "yes", "yes", "yes", "yes", "yes" ); ?>
<?php writefeature( "MP3 - MPEG Layer 3", "yes", "yes", "yes", "yes", "yes", "yes" ); ?>
<span style="color: #aaaaaa">@@ -208,7 +208,7 @@ function writeAudioFeatures() {
</span> function writeSubFeatures() {
?>
<div id="feature-list-sub">
<span style="color: #000000;background-color: #ffdddd">- <table class="feature-list-table">
</span><span style="color: #000000;background-color: #ddffdd">+ <table class="feature-list-table table table-striped table-hover">
</span> <?php headers( "yes" ); ?>
<tr>
<td class="category" rowspan="10"><b>Subtitles</b></td>
<span style="color: #aaaaaa">@@ -248,7 +248,7 @@ function writeSubFeatures() {
</span> function writeAVFeatures() {
?>
<div id="feature-list-av">
<span style="color: #000000;background-color: #ffdddd">- <table class="feature-list-table">
</span><span style="color: #000000;background-color: #ddffdd">+ <table class="feature-list-table table table-striped table-hover">
</span> <?php headers( "yes" ); ?>
<tr>
<td class="category" rowspan="6"><b>Video Outputs</b></td>
<span style="color: #aaaaaa">@@ -315,7 +315,7 @@ function writeAVFeatures() {
</span> function writeFilterFeatures() {
?>
<div id="feature-list-filters">
<span style="color: #000000;background-color: #ffdddd">- <table class="feature-list-table">
</span><span style="color: #000000;background-color: #ddffdd">+ <table class="feature-list-table table table-striped table-hover">
</span> <?php headers( "yes" ); ?>
<tr>
<td class="category" rowspan="10"><b>Video Filters</b></td>
<span style="color: #aaaaaa">@@ -347,7 +347,7 @@ function writeFilterFeatures() {
</span> function writeIntfFeatures() {
?>
<div id="feature-list-intf">
<span style="color: #000000;background-color: #ffdddd">- <table class="feature-list-table">
</span><span style="color: #000000;background-color: #ddffdd">+ <table class="feature-list-table table table-striped table-hover">
</span> <?php headers( "no" ); ?>
<tr>
<td class="type">Default</td>
<span style="color: #aaaaaa">@@ -375,7 +375,7 @@ function writeIntfFeatures() {
</span> function writeMiscFeatures() {
?>
<div id="feature-list-misc">
<span style="color: #000000;background-color: #ffdddd">- <table class="feature-list-table">
</span><span style="color: #000000;background-color: #ddffdd">+ <table class="feature-list-table table table-striped table-hover">
</span> <?php headers( "no" ); ?>
<?php writefeature( "SAP/SDP announces", "yes", "yes", "yes", "no", "yes", "no" ); ?>
<?php writefeature( "Bonjour protocol", "no", "yes", "yes", "unt", "unt", "unt" ); ?>
<span style="color: #aaaaaa">@@ -474,7 +474,7 @@ function headers( $extra )
</span> <th class="th-os"><a href="/vlc/download-beos.html">
<img src="http://images.videolan.org/images/icons/beos.png" alt="BeOS" width="32" height="32" />
</a></th>
<span style="color: #000000;background-color: #ffdddd">- <th class="th-os"><a href="/vlc/download-sources.html">
</span><span style="color: #000000;background-color: #ddffdd">+ <th class="th-os"><a class="inline-block" href="/vlc/download-sources.html">
</span> <img src="http://images.videolan.org/images/icons/freebsd.png" alt="FreeBSD" width="32" height="32" />
<img src="http://images.videolan.org/images/icons/openbsd.png" alt="OpenBSD" width="32" height="32" />
<span style="color: #aaaaaa">@@ -490,30 +490,30 @@ if(!isset($_GET['fdiv'])) {
</span> require($_SERVER["DOCUMENT_ROOT"]."/include/header.php");
?>
<span style="color: #000000;background-color: #ffdddd">-<h2>VLC playback Features</h2>
</span><span style="color: #000000;background-color: #ddffdd">+<h1>VLC playback Features</h1>
</span> <table class="feature-table">
<tr>
<span style="color: #000000;background-color: #ffdddd">- <td class="feature-table-lefttop"> </td>
- <td class="feature-table-top"> </td>
- <td class="feature-table-righttop"> </td>
- </tr>
- <tr>
</span> <td class="feature-cat-list">
<span style="color: #000000;background-color: #ffdddd">- <!--Categories-->
- <?php
- $cat = "input";
- if(isset($_GET['cat'])) {
</span><span style="color: #000000;background-color: #ddffdd">+ <!--Categories-->
+ <?php
+ $cat = "input";
+ if (isset($_GET['cat'])) {
</span> $cat = $_GET['cat'];
<span style="color: #000000;background-color: #ffdddd">- }
- ?>
- <div class="feature-cat<?php if($cat=="input") echo "-sel"?>" id="cat-input"><a href="/vlc/features.php?cat=input">Input formats</a></div>
- <div class="feature-cat<?php if($cat=="video") echo "-sel"?>" id="cat-video"><a href="/vlc/features.php?cat=video">Video formats</a></div>
- <div class="feature-cat<?php if($cat=="audio") echo "-sel"?>" id="cat-audio"><a href="/vlc/features.php?cat=audio">Audio formats</a></div>
- <div class="feature-cat<?php if($cat=="sub") echo "-sel"?>" id="cat-sub"><a href="/vlc/features.php?cat=sub">Subtitle/Tag formats</a></div>
- <div class="feature-cat<?php if($cat=="av") echo "-sel"?>" id="cat-av"><a href="/vlc/features.php?cat=av">A/V outputs</a></div>
- <div class="feature-cat<?php if($cat=="filters") echo "-sel"?>" id="cat-filters"><a href="/vlc/features.php?cat=filters">A/V filters</a></div>
- <div class="feature-cat<?php if($cat=="intf") echo "-sel"?>" id="cat-intf"><a href="/vlc/features.php?cat=intf">Interfaces</a></div>
- <div class="feature-cat<?php if($cat=="misc") echo "-sel"?>" id="cat-misc"><a href="/vlc/features.php?cat=misc">Miscellaneous</a></div>
</span><span style="color: #000000;background-color: #ddffdd">+ }
+
+ function getActiveCat($currentCat) {
+ global $cat;
+ echo $currentCat == $cat ? 'cat-active' : '';
+ }
+ ?>
+ <a class="feature-cat <?php getActiveCat('input'); ?>" id="cat-input" href="/vlc/features.php?cat=input">Input formats</a>
+ <a class="feature-cat <?php getActiveCat('video'); ?>" id="cat-video" href="/vlc/features.php?cat=video">Video formats</a>
+ <a class="feature-cat <?php getActiveCat('audio'); ?>" id="cat-audio" href="/vlc/features.php?cat=audio">Audio formats</a>
+ <a class="feature-cat <?php getActiveCat('sub'); ?>" id="cat-sub" href="/vlc/features.php?cat=sub">Subtitle/Tag formats</a>
+ <a class="feature-cat <?php getActiveCat('av'); ?>" id="cat-av" href="/vlc/features.php?cat=av">A/V outputs</a>
+ <a class="feature-cat <?php getActiveCat('filters'); ?>" id="cat-filters" href="/vlc/features.php?cat=filters">A/V filters</a>
+ <a class="feature-cat <?php getActiveCat('intf'); ?>" id="cat-intf" href="/vlc/features.php?cat=intf">Interfaces</a>
+ <a class="feature-cat <?php getActiveCat('misc'); ?>" id="cat-misc" href="/vlc/features.php?cat=misc">Miscellaneous</a>
</span> </td>
<td class="feature-list">
<div class="feature-div">
<span style="color: #aaaaaa">@@ -529,19 +529,17 @@ if(!isset($_GET['fdiv'])) {
</span> ?>
</div>
</td>
<span style="color: #000000;background-color: #ffdddd">- <td class="feature-table-right"> </td>
</span> </tr>
<tr>
<span style="color: #000000;background-color: #ffdddd">- <td class="feature-table-leftbottom"> </td>
- <td class="feature-table-bottom">
- <ul class="feature-icon">
</span><span style="color: #000000;background-color: #ddffdd">+ <td></td>
+ <td>
+ <ul class="feature-icon list-inline">
</span> <li><img src="http://images.videolan.org/images/features/tick.png" alt="Yes" /> = Yes</li>
<li><img src="http://images.videolan.org/images/features/partial.png" alt="Partial" /> = Partial</li>
<li><img src="http://images.videolan.org/images/features/cross.png" alt="No" /> = No</li>
<li><img src="http://images.videolan.org/images/features/untested.png" alt="Untested" /> = Untested</li>
</ul>
</td>
<span style="color: #000000;background-color: #ffdddd">- <td class="feature-table-rightbottom"> </td>
</span> </tr>
</table>
<h2>Streaming</h2>
</code></pre>
<br>
</li>
</div>
<div class='footer' style='margin-top: 10px;'>
<p>
—
<br>
<a href="https://code.videolan.org/VideoLAN.org/websites/compare/919087c5efb99c71d62eb7fb66c3c30fcbbda2d4...5c96343f6f9f4d8bcc20af90878b74c04eca8550">View it on GitLab</a>
<br>
You're receiving this email because of your account on <a href="https://code.videolan.org/">code.videolan.org</a>.
If you'd like to receive fewer emails, you can adjust your notification settings.
<script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","action":{"@type":"ViewAction","name":["merge_requests","issues","commit"],"url":"https://code.videolan.org/VideoLAN.org/websites/compare/919087c5efb99c71d62eb7fb66c3c30fcbbda2d4...5c96343f6f9f4d8bcc20af90878b74c04eca8550"}}</script>
</p>
</div>
</body>
</html>