css layout for preferences

This commit is contained in:
Andrew Dolgov 2006-09-30 07:49:50 +01:00
parent 08aef78132
commit 3f59e8cdb1
4 changed files with 112 additions and 261 deletions

View File

@ -17,6 +17,8 @@
$dt_add = get_script_dt_add(); $dt_add = get_script_dt_add();
?> ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html> <html>
<head> <head>
<title>Tiny Tiny RSS : Preferences</title> <title>Tiny Tiny RSS : Preferences</title>
@ -85,45 +87,28 @@ window.onload = init;
<ul id="debug_output"></ul> <ul id="debug_output"></ul>
<div id="notify" class="notify"><span id="notify_body">&nbsp;</span></div>
<div id="fatal_error"><div id="fatal_error_inner"> <div id="fatal_error"><div id="fatal_error_inner">
<h1>Fatal Error</h1> <h1>Fatal Error</h1>
<div id="fatal_error_msg">Unknown Error</div> <div id="fatal_error_msg">Unknown Error</div>
</div></div> </div></div>
<table width="100%" height="100%" cellspacing="0" cellpadding="0" class="main"> <div id="prefHeader">
<?php if (get_pref($link, 'DISPLAY_HEADER')) { ?>
<tr>
<td colspan="2">
<table cellspacing="0" cellpadding="0" width="100%"><tr>
<td rowspan="2" class="header" valign="middle">
<img src="<?php echo $theme_image_path ?>images/ttrss_logo.png" alt="Tiny Tiny RSS">
</td>
<td valign="top" class="notifyBox">
<div id="notify" class="notify"><span id="notify_body">&nbsp;</span></div>
</td>
</tr><tr><td class="welcomePrompt">
<?php if (!SINGLE_USER_MODE) { ?> <?php if (!SINGLE_USER_MODE) { ?>
<div style="float : right">
Hello, <b><?php echo $_SESSION["name"] ?></b> Hello, <b><?php echo $_SESSION["name"] ?></b>
(<a href="logout.php">Logout</a>) (<a href="logout.php">Logout</a>)
</div>
<?php } ?> <?php } ?>
</td> <img src="<?php echo $theme_image_path ?>images/ttrss_logo.png" alt="Tiny Tiny RSS"/>
</tr></table> </div>
</td>
</tr> <div id="prefTabs">
<?php } else { ?> <div class="return">
<tr> <a href="#" onclick="gotoMain()">Exit preferences</a>
<td class="small"> </div>
<div id="notify" class="notify_sm"><span id="notify_body">&nbsp;</span></div>
<div id="userDlgShadow"><div id="userDlg">&nbsp;</div></div>
</td><td class="welcomePrompt">
<?php if (!SINGLE_USER_MODE) { ?>
Hello, <b><?php echo $_SESSION["name"] ?></b>
(<a href="logout.php">Logout</a>)
<?php } ?>
</td></tr>
<?php } ?>
<tr>
<td class="prefsTabs" align="left" valign="bottom">
<input id="genConfigTab" class="prefsTab" type="submit" value="Preferences" <input id="genConfigTab" class="prefsTab" type="submit" value="Preferences"
onclick="selectTab('genConfig')"> onclick="selectTab('genConfig')">
<input id="feedConfigTab" class="prefsTab" type="submit" value="My Feeds" <input id="feedConfigTab" class="prefsTab" type="submit" value="My Feeds"
@ -142,29 +127,11 @@ window.onload = init;
<input id="userConfigTab" class="prefsTab" type="submit" value="User Manager" <input id="userConfigTab" class="prefsTab" type="submit" value="User Manager"
onclick="selectTab('userConfig')"> onclick="selectTab('userConfig')">
<?php } ?> <?php } ?>
</td> </div>
<td class="prefsToolbar" valign="middle" align="right">
<input type="submit" onclick="gotoMain()" class="button" value="Return to main">
</td>
</tr>
</tr>
<td id="prefContent" class="prefContent" valign="top" colspan="2">
<div id="prefContent">
<p>Loading, please wait...</p> <p>Loading, please wait...</p>
</div>
</td>
</tr>
<?php if (get_pref($link, 'DISPLAY_FOOTER')) { ?>
<tr>
<td class="footer" colspan="2">
<a href="http://tt-rss.spb.ru/">Tiny Tiny RSS</a> v<?php echo VERSION ?> &copy; 2005-2006 Andrew Dolgov
<?php if (WEB_DEMO_MODE) { ?>
<br>Running in demo mode, some functionality is disabled.
<?php } ?>
</td>
</td>
<?php } ?>
</table>
<?php db_close($link); ?> <?php db_close($link); ?>

View File

@ -8,104 +8,6 @@ body {
/* common styles */ /* common styles */
table.main td.headerBox {
background-image : url("images/vgrad_light_rev2.png");
background-position : top left;
background-repeat : repeat-x;
}
/*
table.main td.header {
padding : 10px 10px 10px 30px;
height : 70px;
} */
table.main td.mainToolbar {
border-width : 0px 0px 0px 0px;
border-style : solid;
border-color : #c0c0c0;
padding : 3px 25px 3px 10px;
}
table.main td.prefsToolbar {
padding : 0px 5px 5px 0px;
}
table.main td.feeds {
width : 290px;
height : 100%;
border-width : 1px 0px 0px 0px;
border-style : solid;
border-color : #c0c0c0;
padding : 0px;
}
table.main td.headlinesToolbarBox {
padding : 10px;
border-width : 0px 0px 1px 1px;
border-style : solid;
border-color : #c0c0c0;
background-image : url("images/vgrad_light.png");
background-position : bottom left;
background-repeat : repeat-x;
}
table.main td.footer, table.main td.prefFooter {
border-width : 1px 0px 0px 0px;
border-style : solid;
border-color : #c0c0c0;
padding : 10px;
text-align : center;
font-size : x-small;
background-image : url("images/vgrad_light_rev2.png");
background-position : top left;
background-repeat : repeat-x;
color : gray;
}
table.main td.footer a {
color : gray;
}
table.main td.footer a:hover {
color : #5050aa;
}
table.main td.headlines {
height : 25%;
border-width : 0px 0px 1px 1px;
border-style : solid;
border-color : #c0c0c0;
}
table.main td.headlines2 {
height : 100%;
border-width : 0px 0px 0px 1px;
border-style : solid;
border-color : #c0c0c0;
}
table.main td.content {
height : 100%;
background-image : url("images/vgrad_light_rev.png");
background-position : top left;
background-repeat : repeat-x;
border-width : 0px 0px 0px 1px;
border-style : solid;
border-color : #c0c0c0;
}
table.main td.prefContent {
height : 100%;
background-image : url("images/vgrad_light_rev.png");
background-position : top left;
background-repeat : repeat-x;
border-width : 1px 0px 0px 0px;
border-style : solid;
border-color : #c0c0c0;
padding : 20px;
}
div.postReply { div.postReply {
background-image : url("images/vgrad_light_rev.png"); background-image : url("images/vgrad_light_rev.png");
background-position : top left; background-position : top left;
@ -561,7 +463,7 @@ div.warning {
border : 1px solid #c0c0c0; border : 1px solid #c0c0c0;
padding : 5px; padding : 5px;
margin : 5px; margin : 5px;
font-size : x-small; font-size : small;
} }
div.notice { div.notice {
@ -569,7 +471,7 @@ div.notice {
border : 1px solid #c0c0c0; border : 1px solid #c0c0c0;
padding : 5px; padding : 5px;
margin : 5px; margin : 5px;
font-size : x-small; font-size : small;
} }
ul.nomarks { ul.nomarks {
@ -918,7 +820,7 @@ div.cdmContent a:hover {
right : 5px; right : 5px;
height : 40px; height : 40px;
color : gray; color : gray;
font-size : x-small; font-size : small;
} }
#feeds-holder { #feeds-holder {
@ -1005,3 +907,42 @@ div.headlines_cdm {
margin-left : 1px; margin-left : 1px;
background-color : white; background-color : white;
} }
/* preferences layout */
#prefHeader {
margin : 10px;
color : gray;
font-size : small;
}
#prefTabs {
border-width : 0px 0px 1px 0px;
border-color : #c0c0c0;
border-style : solid;
border-collapse : collapse;
padding : 0px 10px 0px 10px;
}
#prefTabs div.return {
float : right;
font-size : small;
}
#prefTabs div.return a {
color : #5050aa;
}
#prefTabs div.return a:hover {
color : black;
}
#prefContent {
bottom : 20px;
padding : 1em;
min-height : 300px;
background-image : url("images/vgrad_light_rev.png");
background-position : top left;
background-repeat : repeat-x;
font-size : small;
}

View File

@ -6,106 +6,6 @@ body {
font-family : sans-serif; font-family : sans-serif;
} }
/* common styles */
table.main td.headerBox {
/* background-image : url("images/vgrad_light_rev2.png");
background-position : top left;
background-repeat : repeat-x; */
background-color : white;
}
table.main td.header {
padding : 10px 10px 10px 10px;
height : 50px;
}
table.main td.mainToolbar {
border-width : 0px 0px 0px 0px;
border-style : solid;
border-color : #c0c0c0;
padding : 3px 25px 3px 10px;
}
table.main td.prefsToolbar {
padding : 0px 5px 5px 0px;
}
table.main td.feeds {
width : 290px;
height : 100%;
border-width : 1px 0px 0px 0px;
border-style : solid;
border-color : #88b0f0;
padding : 0px;
}
table.main td.headlinesToolbarBox {
padding : 10px;
border-width : 0px 0px 1px 1px;
border-style : solid;
border-color : #88b0f0;
background-image : url("images/toolbar.png");
background-position : bottom left;
background-repeat : repeat-x;
background-color : white;
}
table.main td.footer {
border-width : 1px 0px 0px 0px;
border-style : solid;
border-color : #88b0f0;
padding : 10px;
text-align : center;
font-size : x-small;
background-image : url("images/footer.png");
background-position : top left;
background-repeat : repeat-x;
background-color : white;
color : gray;
}
table.main td.footer a {
color : gray;
}
table.main td.footer a:hover {
color : #4684ff;
}
table.main td.headlines {
height : 25%;
border-width : 0px 0px 1px 1px;
border-style : solid;
border-color : #88b0f0;
}
table.main td.headlines2 {
height : 100%;
border-width : 0px 0px 0px 1px;
border-style : solid;
border-color : #c0c0c0;
}
table.main td.content {
height : 100%;
border-width : 0px 0px 0px 1px;
border-style : solid;
border-color : #88b0f0;
}
table.main td.prefContent {
height : 100%;
background-image : url("images/prefs-content.png");
background-position : top left;
background-repeat : repeat-x;
border-width : 1px 0px 0px 0px;
border-style : solid;
border-color : #88b0f0;
padding : 20px;
background-color : white;
}
div.postReply { div.postReply {
padding : 10px; padding : 10px;
} }
@ -641,7 +541,7 @@ input.prefsTab {
padding : 2px 7px 2px 7px; padding : 2px 7px 2px 7px;
margin : 0px 1px 0px 0px; margin : 0px 1px 0px 0px;
width : 130px; width : 130px;
font-size : x-small; font-size : small;
background-color : white; background-color : white;
} }
@ -657,7 +557,7 @@ input.prefsTabSelected {
font-weight : bold; font-weight : bold;
background-position : top left; background-position : top left;
background-repeat : repeat-x; background-repeat : repeat-x;
font-size : x-small; font-size : small;
} }
@ -668,9 +568,9 @@ input.prefsTabSelected {
div.warning { div.warning {
background : #fff7d5; background : #fff7d5;
border : 1px solid #d7c47a; border : 1px solid #d7c47a;
padding : 3px; padding : 5px;
margin : 5px; margin : 5px;
font-size : x-small; font-size : small;
} }
div.notice { div.notice {
@ -678,7 +578,7 @@ div.notice {
border : 1px solid #88b0f0; border : 1px solid #88b0f0;
padding : 5px; padding : 5px;
margin : 5px; margin : 5px;
font-size : x-small; font-size : small;
} }
ul.nomarks { ul.nomarks {
@ -1368,3 +1268,46 @@ div.headlines_cdm {
height : 280px; height : 280px;
overflow : auto; overflow : auto;
} }
/* preferences layout */
#prefHeader {
margin : 10px;
color : #4684ff;
font-size : small;
}
#prefTabs {
border-width : 0px 0px 1px 0px;
border-color : #88b0f0;
border-style : solid;
border-collapse : collapse;
padding : 0px 10px 0px 10px;
}
#prefTabs div.return {
float : right;
font-size : small;
}
#prefTabs div.return a {
color : #4684ff;
}
#prefTabs div.return a:hover {
color : black;
}
#prefTabs input {
vertical-align : bottom;
}
#prefContent {
bottom : 20px;
padding : 1em;
min-height : 300px;
background-image : url("images/prefs-content.png");
background-position : top left;
background-repeat : repeat-x;
font-size : small;
}

View File

@ -115,7 +115,7 @@ window.onload = init;
(<a href="logout.php">Logout</a>) (<a href="logout.php">Logout</a>)
</div> </div>
<?php } ?> <?php } ?>
<img src="<?php echo $theme_image_path ?>images/ttrss_logo.png" alt="Tiny Tiny RSS"> <img src="<?php echo $theme_image_path ?>images/ttrss_logo.png" alt="Tiny Tiny RSS"/>
</div> </div>
<div id="feeds-holder"> <div id="feeds-holder">