rework preferences tabs

18 years ago · 656f4b6cd1
parent 77834b2ee6
commit 656f4b6cd1
3 changed files with 95 additions and 69 deletions
--- a/prefs.php
+++ b/prefs.php
@ -104,30 +104,30 @@ window.onload = init;
 	<img src="<?php echo $theme_image_path ?>images/ttrss_logo.png" alt="Tiny Tiny RSS"/>	
 </div>

-<div id="prefTabs">
 		<div class="return">
 			<a href="#" onclick="gotoMain()">Exit preferences</a>
 		</div>

-		<input id="genConfigTab" class="prefsTab" type="submit" value="Preferences"
-			onclick="selectTab('genConfig')">
-		<input id="feedConfigTab" class="prefsTab" type="submit" value="My Feeds"
-			onclick="selectTab('feedConfig')">
+		<div class="firstTab">&nbsp;</div>
+
+		<div id="genConfigTab" class="prefsTab" 
+			onclick="selectTab('genConfig')">Preferences</div>
+		<div id="feedConfigTab" class="prefsTab" 
+			onclick="selectTab('feedConfig')">My Feeds</div>
 		<?php if (ENABLE_FEED_BROWSER && !SINGLE_USER_MODE) { ?>
-		<input id="feedBrowserTab" class="prefsTab" type="submit" value="Other Feeds"
-			onclick="selectTab('feedBrowser')">
+		<div id="feedBrowserTab" class="prefsTab" 
+			onclick="selectTab('feedBrowser')">Other Feeds</div>
 		<?php } ?>
-		<input id="filterConfigTab" class="prefsTab" type="submit" value="Content Filtering"
-			onclick="selectTab('filterConfig')">
+		<div id="filterConfigTab" class="prefsTab" 
+			onclick="selectTab('filterConfig')">Content Filtering</div>
 		<?php if (get_pref($link, 'ENABLE_LABELS')) { ?>
-		<input id="labelConfigTab" class="prefsTab" type="submit" value="Label Editor"
-			onclick="selectTab('labelConfig')">
+		<div id="labelConfigTab" class="prefsTab" 
+			onclick="selectTab('labelConfig')">Label Editor</div>
 		<?php } ?>
 		<?php if ($_SESSION["access_level"] >= 10) { ?>
-		<input id="userConfigTab" class="prefsTab" type="submit" value="User Manager"
-			onclick="selectTab('userConfig')">
+		<div id="userConfigTab" class="prefsTab" 
+			onclick="selectTab('userConfig')">User Manager</div>
 		<?php } ?>		
-</div>

 <div id="prefContent">
 	<p>Loading, please wait...</p>
--- a/themes/compat/theme.css
+++ b/themes/compat/theme.css
@ -422,8 +422,39 @@ div.helpResponse h2, div.infoBoxContents h2 {
 	font-size : 12pt;
 }

-table.main td.prefsTabs {
-	padding-left : 5px;
+div.prefsTab {
+	border-width : 1px 1px 0px 1px;
+	border-color : #c0c0c0;
+	border-style : solid;
+	font-size : small;
+	position : relative;
+	bottom : 0px;
+	border-collapse : collapse;
+	-moz-border-radius : 3px;
+	min-width : 100px;
+	text-align : center;
+	background-image : url("images/vgrad_light_rev2.png");
+	background-position : top left;
+	background-repeat : repeat-x;
+
+}
+
+div.prefsTabSelected {
+	float : left;
+	border-width : 1px 1px 0px 1px;
+	border-color : #c0c0c0;
+	border-style : solid;
+	margin : 0px 0px 0px 5px;
+	padding : 3px 5px 3px 5px;
+	font-size : small;
+	position : relative;
+	bottom : 0px;
+	border-collapse : collapse;
+	-moz-border-radius : 3px;
+	font-weight : bold;
+	min-width : 100px;
+	text-align : center;
+	background : white;
 }

 input.prefsTab {
@ -903,24 +934,16 @@ div.headlines_cdm {
 	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 {
+div.return {
 	float : right;
 	font-size : small;
 }

-#prefTabs div.return a {
+div.return a {
 	color : #5050aa;
 }

-#prefTabs div.return a:hover {
+div.return a:hover {
 	color : black;
 }

@ -932,4 +955,5 @@ div.headlines_cdm {
 	background-position : top left;
 	background-repeat : repeat-x;
 	font-size : small;
+	border-color : #c0c0c0;
 }
--- a/tt-rss.css
+++ b/tt-rss.css
@ -528,44 +528,48 @@ input.extSearch {
 	width : 100%;
 }

-table.main td.prefsTabs {
-	padding-left : 5px;
-/*		  background-image : url("images/toolbar.png");
-	background-position : bottom left;
-	background-repeat : repeat-x; */
+div.prefsTab:hover {
+	cursor : pointer;
 }

-input.prefsTab {		
-	background-image : url("images/prefs_tab.png");
-	background-position : top left;
-	background-repeat : repeat-x;
-	border : 0px solid black;
-	padding : 2px 7px 2px 7px;
-	margin : 0px 1px 0px 0px;
-	width : 130px;
-	font-size : small;
-	background-color : white;
+div.firstTab {
+	float : left;
+	width : 5px;
 }

-input.prefsTabSelected {
-
-	background-image : url("images/active_tab.png");
-	background-position : top left;
-	background-repeat : repeat-x;
-	border : 0px solid black;
-	padding : 2px 7px 2px 7px;
-	margin : 0px 1px 0px 0px;
-	width : 130px;
-	font-weight : bold;
-	background-position : top left;
-	background-repeat : repeat-x;
+div.prefsTab {
+	float : left;
+	border-width : 1px 1px 0px 1px;
+	border-color : #88b0f0;
+	border-style : solid;
+	margin : 0px 0px 0px 5px;
+	padding : 3px 5px 3px 5px;
 	font-size : small;
+	position : relative;
+	bottom : -1px;
+	border-collapse : collapse;
+	-moz-border-radius : 3px;
+	min-width : 100px;
+	text-align : center;
 }

-
-/*input.prefsTab:hover {
-	background : white;
-}*/
+div.prefsTabSelected {
+	float : left;
+	border-width : 1px 1px 0px 1px;
+	border-color : #88b0f0;
+	border-style : solid;
+	margin : 0px 0px 0px 5px;
+	padding : 3px 5px 3px 5px;
+	background-color : #ecf4ff;
+	font-size : small;
+	position : relative;
+	bottom : -1px;
+	border-collapse : collapse;
+	-moz-border-radius : 3px;
+	font-weight : bold;
+	min-width : 100px;
+	text-align : center;
+}

 div.warning {
 	background : #fff7d5;
@ -1265,24 +1269,17 @@ div.headlines_cdm {
 	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 {
+div.return {
 	float : right;
 	font-size : small;
+	margin-right : 10px;
 }

-#prefTabs div.return a {
+div.return a {
 	color : #4684ff;
 }

-#prefTabs div.return a:hover {
+div.return a:hover {
 	color : black;
 }

@ -1291,6 +1288,7 @@ div.headlines_cdm {
 }

 #prefContent {
+	clear : left;
 	bottom : 20px;
 	padding : 1em;
 	min-height : 300px;
@ -1298,4 +1296,8 @@ div.headlines_cdm {
 	background-position : top left;
 	background-repeat : repeat-x;
 	font-size : small;
+	border-width : 1px 0px 0px 0px;
+	border-color : #88b0f0;
+	border-style : solid;
+
 }