[www-doc] [Git][VideoLAN.org/websites][master] 3 commits: features: improve styles
Jean-Baptiste Kempf
gitlab at videolan.org
Wed Jan 20 00:06:36 CET 2016
Jean-Baptiste Kempf pushed to branch master at VideoLAN organization / websites
Commits:
1669392b by David Loiret at 2016-01-20T00:06:33Z
features: improve styles
Signed-off-by: Jean-Baptiste Kempf <jb at videolan.org>
- - - - -
058b7a33 by David Loiret at 2016-01-20T00:06:33Z
features: use Bootstrap table
Signed-off-by: Jean-Baptiste Kempf <jb at videolan.org>
- - - - -
5c96343f by David Loiret at 2016-01-20T00:06:33Z
features: improve design of tables
Signed-off-by: Jean-Baptiste Kempf <jb at videolan.org>
- - - - -
2 changed files:
- www.videolan.org/vlc/features.css
- www.videolan.org/vlc/features.php
Changes:
=====================================
www.videolan.org/vlc/features.css
=====================================
--- a/www.videolan.org/vlc/features.css
+++ b/www.videolan.org/vlc/features.css
@@ -1,96 +1,137 @@
#maincontent table td {
- margin:0px;
- padding:0px;
- border-top:0px;
+ margin: 0px;
+ padding: 0px;
+ border-top: 0px;
}
+
ul.feature-icon {
- 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;
+ padding-top: 10px;
}
-.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;
+
+.feature-table {
+ margin-top: 30px;
}
-.feature-table-right {
- width:2px;
- background:url(http://images.videolan.org/images/features/feature-list-right.jpg) repeat-y left !important;
+
+.feature-table table {
+ margin-bottom: 0;
}
+
.feature-cat-list {
- background:url(http://images.videolan.org/images/features/feature-list-left.jpg) repeat-y right !important;
- width: 150px;
+ width: 150px;
+ text-align: center;
}
+
+.feature-cat:hover {
+ text-decoration: none;
+}
+
.feature-cat {
- 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;
+ 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;
}
+
.feature-list {
- background: #7499e0 !important;
+ background: #7499e0 !important;
}
+
.feature-div {
- margin: 5px;
+ margin: 2px;
}
+
.feature-list-table {
- background: #FFF;
+ background: #FFF;
}
+
#maincontent table.feature-list-table td {
- border-top: 1px solid #D4E0F7;
+ border-top: 1px solid #D4E0F7;
}
+
.feature-cat a, .feature-cat-sel a {
- text-decoration: none;
+ text-decoration: none;
}
#maincontent table th.th-os {
- white-space: nowrap;
- overflow: hidden;
- width: 10%;
+ 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;
text-align: center;
}
-#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; }
+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%;
+}
-#maincontent table th.type { width: 20%; }
-#maincontent table th.category { width: 10%; }
+#maincontent table td.none {
+ background: #F3F6FD;
+ width: 10%;
+}
+#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;
+}
=====================================
www.videolan.org/vlc/features.php
=====================================
--- a/www.videolan.org/vlc/features.php
+++ b/www.videolan.org/vlc/features.php
@@ -34,7 +34,7 @@ function writefeature( $title, $windows, $mac, $linux, $beos, $bsd, $fam )
function writeInputFeatures() {
?>
<div id="feature-list-input">
- <table class="feature-list-table">
+ <table class="feature-list-table table table-striped table-hover">
<?php headers( "yes" ); ?>
<tr>
<td class="category" rowspan="14"><b>Input media</b></td>
@@ -114,7 +114,7 @@ function writeInputFeatures() {
function writeVideoFeatures() {
?>
<div id="feature-list-video">
- <table class="feature-list-table">
+ <table class="feature-list-table table table-striped table-hover">
<?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" ); ?>
@@ -159,7 +159,7 @@ function writeVideoFeatures() {
function writeAudioFeatures() {
?>
<div id="feature-list-audio">
- <table class="feature-list-table">
+ <table class="feature-list-table table table-striped table-hover">
<?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" ); ?>
@@ -208,7 +208,7 @@ function writeAudioFeatures() {
function writeSubFeatures() {
?>
<div id="feature-list-sub">
- <table class="feature-list-table">
+ <table class="feature-list-table table table-striped table-hover">
<?php headers( "yes" ); ?>
<tr>
<td class="category" rowspan="10"><b>Subtitles</b></td>
@@ -248,7 +248,7 @@ function writeSubFeatures() {
function writeAVFeatures() {
?>
<div id="feature-list-av">
- <table class="feature-list-table">
+ <table class="feature-list-table table table-striped table-hover">
<?php headers( "yes" ); ?>
<tr>
<td class="category" rowspan="6"><b>Video Outputs</b></td>
@@ -315,7 +315,7 @@ function writeAVFeatures() {
function writeFilterFeatures() {
?>
<div id="feature-list-filters">
- <table class="feature-list-table">
+ <table class="feature-list-table table table-striped table-hover">
<?php headers( "yes" ); ?>
<tr>
<td class="category" rowspan="10"><b>Video Filters</b></td>
@@ -347,7 +347,7 @@ function writeFilterFeatures() {
function writeIntfFeatures() {
?>
<div id="feature-list-intf">
- <table class="feature-list-table">
+ <table class="feature-list-table table table-striped table-hover">
<?php headers( "no" ); ?>
<tr>
<td class="type">Default</td>
@@ -375,7 +375,7 @@ function writeIntfFeatures() {
function writeMiscFeatures() {
?>
<div id="feature-list-misc">
- <table class="feature-list-table">
+ <table class="feature-list-table table table-striped table-hover">
<?php headers( "no" ); ?>
<?php writefeature( "SAP/SDP announces", "yes", "yes", "yes", "no", "yes", "no" ); ?>
<?php writefeature( "Bonjour protocol", "no", "yes", "yes", "unt", "unt", "unt" ); ?>
@@ -474,7 +474,7 @@ function headers( $extra )
<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>
- <th class="th-os"><a href="/vlc/download-sources.html">
+ <th class="th-os"><a class="inline-block" href="/vlc/download-sources.html">
<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" />
@@ -490,30 +490,30 @@ if(!isset($_GET['fdiv'])) {
require($_SERVER["DOCUMENT_ROOT"]."/include/header.php");
?>
-<h2>VLC playback Features</h2>
+<h1>VLC playback Features</h1>
<table class="feature-table">
<tr>
- <td class="feature-table-lefttop"> </td>
- <td class="feature-table-top"> </td>
- <td class="feature-table-righttop"> </td>
- </tr>
- <tr>
<td class="feature-cat-list">
- <!--Categories-->
- <?php
- $cat = "input";
- if(isset($_GET['cat'])) {
+ <!--Categories-->
+ <?php
+ $cat = "input";
+ if (isset($_GET['cat'])) {
$cat = $_GET['cat'];
- }
- ?>
- <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>
+ }
+
+ 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>
</td>
<td class="feature-list">
<div class="feature-div">
@@ -529,19 +529,17 @@ if(!isset($_GET['fdiv'])) {
?>
</div>
</td>
- <td class="feature-table-right"> </td>
</tr>
<tr>
- <td class="feature-table-leftbottom"> </td>
- <td class="feature-table-bottom">
- <ul class="feature-icon">
+ <td></td>
+ <td>
+ <ul class="feature-icon list-inline">
<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>
- <td class="feature-table-rightbottom"> </td>
</tr>
</table>
<h2>Streaming</h2>
View it on GitLab: https://code.videolan.org/VideoLAN.org/websites/compare/919087c5efb99c71d62eb7fb66c3c30fcbbda2d4...5c96343f6f9f4d8bcc20af90878b74c04eca8550
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://mailman.videolan.org/pipermail/www-doc/attachments/20160120/3496db31/attachment.html>
More information about the www-doc
mailing list