Permalink
Browse files

Add a guide grid to the internal web-server.

This is a WORK IN PROGRESS, not a final finished product. Please do
NOT open tickets for it yet.

What does NOT work (yet)?
 * The 'One-Click-Record' menu isn't hooked.
 * There is no Recording Rule Editor.
 * There are no button to move back/forwards through the guide.

Basically you can view the guide, browse through it by date or time but not much else.

It has been designed with modern browsers in mind. It utilises some
CSS3 and DOM features that may not work with browsers more than 6
months old. This is intentional, it is not a bug but I may be bribed
to change my mind.

The styling is provisional, the finished article may either look very
similar or entirely different.

Firefox, Opera, Opera Mobile, Opera Mobile Classic (Android) and
Chromium were tested. Internet Explorer and Chrome were not tested but
since we're following the standards here they should of course work too.

There is a known issue with Opera Mobile (both versions) and the
record menu throwing everthing out of wack.
  • Loading branch information...
1 parent c0c5299 commit 6444664f1e10297b15817dfdca94b05999df2177 @stuartm stuartm committed Oct 20, 2013
@@ -0,0 +1,33 @@
+.guideGrid .category_Action { background-color: #906020; }
+.guideGrid .category_Adult { background-color: #702020; }
+.guideGrid .category_Animals { background-color: #609060; }
+.guideGrid .category_Art_Music { background-color: #801060; }
+.guideGrid .category_Business { background-color: #703010; }
+.guideGrid .category_Children { background-color: #B00010; }
+.guideGrid .category_Comedy { background-color: #006080; }
+.guideGrid .category_Crime_Mystery { background-color: #105050; }
+.guideGrid .category_Documentary { background-color: #504020; }
+.guideGrid .category_Drama { background-color: #400060; }
+.guideGrid .category_Educational { background-color: #606060; }
+.guideGrid .category_Food { background-color: #208040; }
+.guideGrid .category_Game { background-color: #701010; }
+.guideGrid .category_Health_Medical { background-color: #806060; }
+.guideGrid .category_History { background-color: #807020; }
+.guideGrid .category_HowTo { background-color: #A0A000; }
+.guideGrid .category_Horror { background-color: #101040; }
+.guideGrid .category_Misc { background-color: #403060; }
+.guideGrid .category_Film, .guideGrid .category_Movie { background-color: #809090; }
+.guideGrid .category_News { background-color: #606040; }
+.guideGrid .category_Reality { background-color: #304040; }
+.guideGrid .category_Romance { background-color: #A02050; }
+.guideGrid .category_Science_Nature { background-color: #008050; }
+.guideGrid .category_SciFi_Fantasy { background-color: #606090; }
+.guideGrid .category_Shopping { background-color: #103010; }
+.guideGrid .category_Soaps { background-color: #508080; }
+.guideGrid .category_Spiritual { background-color: #804080; }
+.guideGrid .category_Sports { background-color: #005030; }
+.guideGrid .category_Talk { background-color: #203040; }
+.guideGrid .category_Travel { background-color: #2060B0; }
+.guideGrid .category_War { background-color: #B06050; }
+.guideGrid .category_Western { background-color: #806040; }
+.guideGrid .category_Unknown { background-color: #303030; }
View
@@ -0,0 +1,241 @@
+#content
+{
+ padding: 10px;
+}
+
+.pageTitle
+{
+ float:left;
+}
+
+.navigateBox
+{
+ float: right;
+ margin: 5px 5px 10px 5px;
+ background-color: #333333;
+ border-radius: 8px;
+ padding: 10px;
+ font-weight: bold;
+}
+
+.guideGrid
+{
+ width: 100%;
+ clear: both;
+ /*overflow: visible;*/
+}
+
+.guideGrid div
+{
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ overflow: hidden;
+}
+
+.guideGrid .timeBar
+{
+ clear:both;
+ width: 100%;
+ margin: 5px 0px 5px 0px;
+ font-size: 1.1em;
+ font-weight: bold;
+}
+
+.guideGrid .timeBarDate
+{
+ float: left;
+ background-color: #333333;
+ border-radius: 10px;
+ font-size: 0.8em;
+ width: 10%;
+ height: 100%;
+ text-align: center;
+ padding: 8px 4px 8px 4px;
+}
+
+.guideGrid .timeBarTimes
+{
+ float: left;
+ width: 90%;
+ height: 100%;
+}
+
+.guideGrid .timeBarTime
+{
+ background-color: #333333;
+ border-radius: 10px;
+ padding: 5px 4px 5px 4px;
+ height: 100%;
+}
+
+.guideGrid .channelRow
+{
+ clear: both;
+ width: 100%;
+ height: 80px;
+ margin: 2px;
+ overflow: visible;
+}
+
+.guideGrid .channelBox
+{
+ float: left;
+ width: 10%;
+ height: 100%;
+ text-align: center;
+ vertical-align: middle;
+ background-color: #333333;
+ color: #FFFFFF;
+ border-radius: 10px;
+}
+
+.guideGrid .channelIcon
+{
+ margin: 5px 5px 1px 5px;
+}
+
+.guideGrid .channelText
+{
+ font-weight: bold;
+}
+
+.guideGrid .programBox
+{
+ float: left;
+ height: 100%;
+}
+
+.guideGrid .programBoxInner
+{
+ margin:0px 1px 0px 1px;
+ height: 100%;
+ background-color: #666666;
+ border-radius: 10px;
+}
+
+.guideGrid .programStartsOffScreen
+{
+ border-top-left-radius: 0px;
+ border-bottom-left-radius: 0px;
+}
+
+.guideGrid .programEndsOffScreen
+{
+ border-top-right-radius: 0px;
+ border-bottom-right-radius: 0px;
+}
+
+.guideGrid .programHeader
+{
+ padding: 6px 8px 6px 8px;
+ color: #FFFFFF;
+ font-size: 1.1em;
+ width: 100%;
+ height: 30px;
+ font-weight: bold;
+ background-color: #444444;
+ border-radius: inherit;
+ border-bottom-left-radius: 0px;
+ border-bottom-right-radius: 0px;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ z-index: 5;
+ position:relative;
+}
+
+.guideGrid .programBody
+{
+ padding: 5px 5px 5px 5px;
+ color: #DDDDDD;
+ height: 45px;
+ z-index:5;
+ font-size: 0.8em;
+}
+
+.guideGrid .programDescription
+{
+ position:relative;
+ z-index:5; /* We want this to appear above the black veil */
+}
+
+.guideGrid .programSubtitle
+{
+ position:relative;
+ font-weight: bold;
+ font-size: 0.8em;
+ margin-right:5px;
+ z-index:5; /* We want this to appear above the black veil */
+}
+
+.guideGrid .programArrow
+{
+ font-size: 1.1em;
+ font-weight: bold;
+}
+
+.guideGrid .programWillRecord
+{
+ background-color:#37912F;
+}
+
+.guideGrid .programRecording
+{
+ background-color:#00CC00;
+}
+
+.guideGrid .programOtherShowing
+{
+ border:2px #37912F dashed;
+}
+
+.guideGrid .programSelected
+{
+ border:2px #045FB4 solid;
+}
+
+.guideGrid .relentlessMarchOfTime
+{
+ background-color: rgba(51, 51, 78, 0.7);
+ border-radius: 10px;
+ z-index: 1;
+ height: 80px;
+ margin-left:2px;
+}
+
+#recMenu
+{
+ background-color: rgba(51, 51, 51, 0.85);
+ border: 2px #045FB4 solid;
+ box-shadow: 6px 6px 4px #222222;
+ display: none;
+ z-index: 99;
+ position: absolute;
+ padding: 5px;
+}
+
+#recMenu .button
+{
+ background-color:#444444;
+ border:1px #FFFFFF solid;
+ color: #FFFFFF;
+ margin: 5px
+ font-weight: bold;
+ font-size: 1.1em;
+ padding: 5px;
+ vertical-align: middle;
+ text-align: center;
+ white-space: nowrap;
+ border-radius: 8px;
+}
+
+#programDetails
+{
+ background-color: rgba(51, 51, 51, 0.85);
+ border: 2px #045FB4 solid;
+ box-shadow: 6px 6px 4px #222222;
+ width: 30%;
+ display: none;
+ z-index: 50;
+ position: absolute;
+ padding: 10px;
+}
View
@@ -11,7 +11,7 @@ win32-msvc*:QMAKE_COPY_DIR =
html.path = $${PREFIX}/share/mythtv/html/
html.files = index.html overview.html menu.qsp
-html.files += css css/images images js misc setup samples
+html.files += css css/images images js misc setup samples tv
html.files += 3rdParty xslt
INSTALLS += html
View
@@ -1,6 +1,7 @@
<!DOCTYPE html>
<html>
<head>
+<meta charset="UTF-8">
<title>
MythTV mythbackend Internal Web Server
</title>
Oops, something went wrong.

0 comments on commit 6444664

Please sign in to comment.