- Made epg images better stylable. Moved epg image info into span

  area, which floats right of the normal epg description text.

4 files changed, 39 insertions, 16 deletions

diff --git a/css/styles.css b/css/styles.css
index 9117b33..8d41458 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -236,10 +236,6 @@ div.info-win {
 	margin-right: -26px;
 }
 
-.info-win .description {
-	margin-bottom: 0px;
-}
-
 .hint-title {
 	display: none;
 }
@@ -587,7 +583,8 @@ div.content div {
 }
 
 div.description {
-	margin: 5px;
+	margin: 5px 5px 0px 5px;
+	overflow: hidden;
 }
 
 div.title {
@@ -936,6 +933,15 @@ table.login tr td {
 	margin-top: 5px;
 }
 
+.info-win span.epg_images {
+	float: right;
+        margin-left: 5px;
+}
+
+.info-win span.epg_images img.epg_image {
+	width: 100%;
+}
+
 .info-win div.boxheader {
 	display: none;
 }
diff --git a/doc/ChangeLog b/doc/ChangeLog
index ade99b5..f5dda08 100644
--- a/doc/ChangeLog
+++ b/doc/ChangeLog
@@ -1,6 +1,12 @@
+2007-07-21  Dieter Hametner  <dh+vdr at gekrumbel dot de>
+
+	Made epgimages better styleable. Displaying them as floats right
+	of the epg description text.
+
 2007-07-20  Christian Wieninger <cwieninger at gmx dot de>
+
 	Added support for EPG images: Specify the directory with your
-	EPG images via the new commandline option '-e <dir>' or 
+	EPG images via the new commandline option '-e <dir>' or
 	'--epgimages=<dir> like
 	-P'live -e /video/epgimages'
 
diff --git a/live/css/siteprefs.css b/live/css/siteprefs.css
index ed92cb0..9fa03cc 100644
--- a/live/css/siteprefs.css
+++ b/live/css/siteprefs.css
@@ -15,3 +15,9 @@ table {
 	width: 100%;
 }
 */
+
+/* comment this out, if you want epg images at their native size */
+.info-win span.epg_images {
+	width: 120px;
+}
+
diff --git a/pages/pageelems.ecpp b/pages/pageelems.ecpp
index 1116d51..e2fdb8d 100644
--- a/pages/pageelems.ecpp
+++ b/pages/pageelems.ecpp
@@ -180,22 +180,27 @@ int update_status(1);
 			</div>
 		 	<div>
 				<div class="info"><%cpp> if (!archived.empty()) { </%cpp><span class="bold"><$ (archived + " ") $></span><%cpp> } </%cpp><$ (time) $></div>
-%	if (elapsed >= 0) {
+<%cpp>
+	if (elapsed >= 0) {
+</%cpp>
 				<div class="progress"><div><& pageelems.progressbar progress=(elapsed) &></div></div>
-%	}
+<%cpp>
+	}
+</%cpp>
 		 		<div class="title"><$ (title) $></div>
 				<div class="short"><$ (short_descr) $></div>
 				<div class="description">
-					<%cpp> reply.out() << StringEscapeAndBreak(long_descr); </%cpp>
-				</div>
-				<br/>				
-				<div>
-<%cpp>				list<string> images = EpgEvents::EpgImages(boxId);
-				for(std::list<std::string>::iterator it = images.begin(); it != images.end(); ++it ) {
+					<span class="epg_images">
+<%cpp>
+	list<string> images = EpgEvents::EpgImages(boxId);
+	for(std::list<std::string>::iterator it = images.begin(); it != images.end(); ++it ) {
 </%cpp>
-					<img src="/epgimages/<$ *it $>">
-<%cpp>				}
+						<img src="/epgimages/<$ *it $>" class="epg_image"/>
+<%cpp>
+	}
 </%cpp>
+					</span>
+					<%cpp> reply.out() << StringEscapeAndBreak(long_descr); </%cpp>
 				</div>
 			</div>
 		</div>