tazpkg rev 738

pkgs.cgi: rework sidebar again: update page on any changes, more clear and light html code.
author Aleksej Bobylev <al.bobylev@gmail.com>
date Wed Dec 31 15:41:15 2014 +0200 (2014-12-31)
parents 3b6602629dc0
children c214f7081500
files tazpanel/pkgs.cgi tazpanel/pkgs.css
line diff
     1.1 --- a/tazpanel/pkgs.cgi	Wed Dec 31 05:34:56 2014 +0200
     1.2 +++ b/tazpanel/pkgs.cgi	Wed Dec 31 15:41:15 2014 +0200
     1.3 @@ -193,46 +193,51 @@
     1.4  <form method="get" action="">
     1.5  
     1.6  <div id="sidebar">
     1.7 -	<select name="my" value="$my">
     1.8 -		<option value="my" $([ "$my" ] && echo -n "selected")>$(_ 'My packages')</option>
     1.9 -		<option value="" $([ ! "$my" ] && echo -n "selected")>$(_ 'All packages')</option>
    1.10 +	<select id="my" name="my" onchange="this.form.submit()">
    1.11 +		<option value="my">$(_ 'My packages')</option>
    1.12 +		<option value=""  >$(_ 'All packages')</option>
    1.13  	</select>
    1.14  
    1.15  	<h4>$(_ 'Categories')</h4>
    1.16  
    1.17 -	<table class="side">
    1.18 -${row}base-system"  id="cat1"/><label for="cat1" class="a_base-system" >$(_ 'base-system')</label></td></tr>
    1.19 -${row}x-window"     id="cat2"/><label for="cat2" class="a_x-window"    >$(_ 'x-window')</label></td></tr>
    1.20 -${row}utilities"    id="cat3"/><label for="cat3" class="a_utilities"   >$(_ 'utilities')</label></td></tr>
    1.21 -${row}network"      id="cat4"/><label for="cat4" class="a_network"     >$(_ 'network')</label></td></tr>
    1.22 -${row}games"        id="cat5"/><label for="cat5" class="a_games"       >$(_ 'games')</label></td></tr>
    1.23 -${row}graphics"     id="cat6"/><label for="cat6" class="a_graphics"    >$(_ 'graphics')</label></td></tr>
    1.24 -${row}office"       id="cat7"/><label for="cat7" class="a_office"      >$(_ 'office')</label></td></tr>
    1.25 -${row}multimedia"   id="cat8"/><label for="cat8" class="a_multimedia"  >$(_ 'multimedia')</label></td></tr>
    1.26 -${row}development"  id="cat9"/><label for="cat9" class="a_development" >$(_ 'development')</label></td></tr>
    1.27 -${row}system-tools" id="cata"/><label for="cata" class="a_system-tools">$(_ 'system-tools')</label></td></tr>
    1.28 -${row}security"     id="catb"/><label for="catb" class="a_security"    >$(_ 'security')</label></td></tr>
    1.29 -${row}misc"         id="catc"/><label for="catc" class="a_misc"        >$(_ 'misc')</label></td></tr>
    1.30 -${row}meta"         id="catd"/><label for="catd" class="a_meta"        >$(_ 'meta')</label></td></tr>
    1.31 -${row}non-free"     id="cate"/><label for="cate" class="a_non-free"    >$(_ 'non-free')</label></td></tr>
    1.32 -${row}all"          id="catf"/><label for="catf" class="a_all"         >$(_ 'all')</label></td></tr>
    1.33 -${row}extra"        id="catg"/><label for="catg" class="a_extra"       >$(_ 'extra')</label></td></tr>
    1.34 -	</table>
    1.35 +	<div class="select_wrap">
    1.36 +	<select id="cat" name="cat" size="16" onchange="this.form.submit()">
    1.37 +		<option value="base-system" >$(_ 'base-system')</option>
    1.38 +		<option value="x-window"    >$(_ 'x-window')</option>
    1.39 +		<option value="utilities"   >$(_ 'utilities')</option>
    1.40 +		<option value="network"     >$(_ 'network')</option>
    1.41 +		<option value="games"       >$(_ 'games')</option>
    1.42 +		<option value="graphics"    >$(_ 'graphics')</option>
    1.43 +		<option value="office"      >$(_ 'office')</option>
    1.44 +		<option value="multimedia"  >$(_ 'multimedia')</option>
    1.45 +		<option value="development" >$(_ 'development')</option>
    1.46 +		<option value="system-tools">$(_ 'system-tools')</option>
    1.47 +		<option value="security"    >$(_ 'security')</option>
    1.48 +		<option value="misc"        >$(_ 'misc')</option>
    1.49 +		<option value="meta"        >$(_ 'meta')</option>
    1.50 +		<option value="non-free"    >$(_ 'non-free')</option>
    1.51 +		<option value="all"         >$(_ 'all')</option>
    1.52 +		<option value="extra"       >$(_ 'extra')</option>
    1.53 +	</select>
    1.54 +	<script type="text/javascript">
    1.55 +		document.getElementById('my').value="$my"
    1.56 +		document.getElementById('cat').value="$cat"
    1.57 +	</script>
    1.58 +	</div>
    1.59  EOT
    1.60  
    1.61  	if [ -d $PKGS_DB/undigest ]; then
    1.62  		cat << EOT
    1.63  	<h4>$(_ 'Repository')</h4>
    1.64  
    1.65 -	<select name="repo" value="$repo">
    1.66 -		<option value="Public" $([ "$repo" == "Public" ] && echo -n "selected")>$(_ 'Public')</option>
    1.67 +	<select id="repo" name="repo" onchange="this.form.submit()">
    1.68 +		<option value="Public">$(_ 'Public')</option>
    1.69  		$(for i in $(ls $PKGS_DB/undigest); do
    1.70 -			echo -n "<option value=\"$i\""
    1.71 -			[ "$repo" == "$i" ] && echo -n " selected"
    1.72 -			echo ">$i</option>"
    1.73 +			echo "<option value=\"$i\">$i</option>"
    1.74  		done)
    1.75 -		<option value="Any" $([ "$repo" == "Any" ] && echo -n "selected")>$(_ 'Any')</option>
    1.76 +		<option value="Any">$(_ 'Any')</option>
    1.77  	</select>
    1.78 +	<script type="text/javascript">document.getElementById('repo').value="$repo"</script>
    1.79  
    1.80  	<input type="submit" name="tag" value="" id="tags"><label for="tags">$(_ 'All tags...')</label>
    1.81  	<input type="submit" name="cat" value="" id="cats"><label for="cats">$(_ 'All categories...')</label>
     2.1 --- a/tazpanel/pkgs.css	Wed Dec 31 05:34:56 2014 +0200
     2.2 +++ b/tazpanel/pkgs.css	Wed Dec 31 15:41:15 2014 +0200
     2.3 @@ -4,61 +4,33 @@
     2.4  #content-sidebar { margin: 20px 144px 20px 20px; }
     2.5  
     2.6  #sidebar {
     2.7 -	/*background-color: #FFF;*/
     2.8 -	/*border: 1pt solid #888;*/
     2.9  	position: fixed;
    2.10  	top: 80px;
    2.11  	right: 5px;
    2.12  	width: 132px;
    2.13  }
    2.14  
    2.15 -#sidebar > a {
    2.16 -	display: block;
    2.17 -	padding: 0;
    2.18 -	margin: 0 0 0 0.5em;
    2.19 -}
    2.20 -
    2.21 -#sidebar .active {
    2.22 -	color: #000;
    2.23 -	font-weight: bold;
    2.24 -}
    2.25 -
    2.26  #sidebar h4 {
    2.27  	margin: 0;
    2.28  	font-size: 16px; color: #222;
    2.29  	text-align: center;
    2.30  }
    2.31  
    2.32 -#sidebar input[type=submit] { display: none; }
    2.33 -
    2.34 -#sidebar label {
    2.35 +.select_wrap {
    2.36  	display: inline-block;
    2.37 -	padding: 0 0 0 0.5em; margin: 0;
    2.38 -	color: #666;
    2.39 -	font-size: small;
    2.40 -	width: 100%;
    2.41 +	vertical-align: top;
    2.42 +	overflow: hidden;
    2.43  }
    2.44  
    2.45 -#sidebar label:hover { color: #000; }
    2.46 -
    2.47 -table.side {
    2.48 -	background-color: #f8f8f8;
    2.49 -	border: none; border-collapse: collapse;
    2.50 -	padding: 0; margin: 0;
    2.51 -	
    2.52 -	border: 1pt solid #888;
    2.53 -	-moz-border-radius: 4px;
    2.54 -	-webkit-border-radius: 4px;
    2.55 -	border-radius: 4px;
    2.56 -}
    2.57 -table.side tr:nth-child(even) {
    2.58 -	background-color: rgba(0,0,0,0.05);
    2.59 +.select_wrap select {
    2.60 +	padding: 5px;
    2.61 +	margin:-5px -20px -5px -5px;
    2.62 +	width: 157px;
    2.63 +	font-size: small;
    2.64  }
    2.65  
    2.66 -#sidebar select {
    2.67 -	margin: 0; padding: 0 0.5em;
    2.68 -	width: 100%;
    2.69 -	font-size: small;
    2.70 +select option:nth-child(even) {
    2.71 +	background-color: rgba(0,0,0,0.05);
    2.72  }
    2.73  
    2.74