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