tazpanel rev 312
add visual sections to pages
| author | Aleksej Bobylev <al.bobylev@gmail.com> |
|---|---|
| date | Thu May 17 14:52:15 2012 +0300 (2012-05-17) |
| parents | 3e9acc16f728 |
| children | f7ff0751c098 |
| files | index.cgi installer.cgi network.cgi settings.cgi styles/default/style.css |
line diff
1.1 --- a/index.cgi Thu May 17 14:02:41 2012 +0300 1.2 +++ b/index.cgi Thu May 17 14:52:15 2012 +0300 1.3 @@ -41,13 +41,14 @@ 1.4 break 1.5 done 1.6 } 1.7 + 1.8 + 1.9 # OK status in table 1.10 ok_status_t() { 1.11 echo " <td>[<span class='diff-add'> OK </span>]</td></tr>" 1.12 } 1.13 1.14 1.15 - 1.16 # 1.17 # Things to do before displaying the page 1.18 # 1.19 @@ -119,6 +120,7 @@ 1.20 echo '</pre>' 1.21 fi ;; 1.22 1.23 + 1.24 *\ terminal\ *|*\ cmd\ *) 1.25 # Cmdline terminal. 1.26 commands='cat du help ls ping pwd who wget' 1.27 @@ -126,6 +128,7 @@ 1.28 TITLE=$(gettext 'TazPanel - Terminal') 1.29 xhtml_header 1.30 cat << EOT 1.31 +<section> 1.32 <form method="get" action="$SCRIPT_NAME"> 1.33 <div class="box"> 1.34 root@$(hostname):~# <input autofocus type="text" name="cmd" style="width: 80%;" /> 1.35 @@ -157,7 +160,10 @@ 1.36 eval_gettext 'Unknown command: $cmd' && echo 1.37 eval_gettext 'Commands: $commands' ;; 1.38 esac 1.39 - echo '</pre>' ;; 1.40 + echo '</pre></section>' 1.41 + ;; 1.42 + 1.43 + 1.44 *\ top\ *) 1.45 TITLE=$(gettext 'TazPanel - Process activity') 1.46 xhtml_header 1.47 @@ -184,6 +190,7 @@ 1.48 -e s"#PID.*\([^']\)#<span class='top'>\0</span>#"g 1.49 echo '</pre>' ;; 1.50 1.51 + 1.52 *\ debug\ *) 1.53 TITLE=$(gettext 'TazPanel - Debug') 1.54 xhtml_header 1.55 @@ -194,6 +201,7 @@ 1.56 EOT 1.57 ;; 1.58 1.59 + 1.60 *\ report\ *) 1.61 TITLE=$(gettext 'TazPanel - System report') 1.62 [ -d /var/cache/slitaz ] || mkdir -p /var/cache/slitaz 1.63 @@ -319,6 +327,8 @@ 1.64 <a href="http://bugs.slitaz.org/">bugs.slitaz.org</a></p> 1.65 EOT 1.66 ;; 1.67 + 1.68 + 1.69 *) 1.70 # 1.71 # Default xHTML content 1.72 @@ -341,6 +351,7 @@ 1.73 <img src="$IMAGES/text.png" />$(gettext 'Create a report')</a> 1.74 </div> 1.75 1.76 +<section> 1.77 <h3>$(gettext 'Summary')</h3> 1.78 <div id="summary"> 1.79 <table> 1.80 @@ -363,10 +374,14 @@ 1.81 </table> 1.82 <!-- Close summary --> 1.83 </div> 1.84 +</section> 1.85 1.86 +<section> 1.87 <h4>$(gettext 'Network status')</h4> 1.88 $(list_network_interfaces) 1.89 +</section> 1.90 1.91 +<section> 1.92 <h4>$(gettext 'Filesystem usage statistics')</h4> 1.93 EOT 1.94 # Disk stats (management is done as hardware.cgi) 1.95 @@ -396,15 +411,14 @@ 1.96 cat << EOT 1.97 </tbody> 1.98 </table> 1.99 -EOT 1.100 +</section> 1.101 1.102 - 1.103 - cat << EOT 1.104 +<section> 1.105 <h3>$(gettext 'Panel Activity')</h3> 1.106 <pre id="panel-activity"> 1.107 $(cat $LOG_FILE | tail -n 8 | sort -r | syntax_highlighter activity) 1.108 </pre> 1.109 - 1.110 +</section> 1.111 EOT 1.112 ;; 1.113 esac
2.1 --- a/installer.cgi Thu May 17 14:02:41 2012 +0300 2.2 +++ b/installer.cgi Thu May 17 14:52:15 2012 +0300 2.3 @@ -151,7 +151,7 @@ 2.4 select_install() 2.5 { 2.6 cat <<EOT 2.7 -<div class="box"> 2.8 +<section> 2.9 <h4>$(gettext 'Install')</h4> 2.10 2.11 <p>$(gettext "Install SliTaz on a partition of your hard disk drive. If you \ 2.12 @@ -162,25 +162,27 @@ 2.13 <p>$(gettext "Before installation, you may need to create or resize partitions \ 2.14 on your hard disk drive in order to make space for SliTaz GNU/Linux. You can \ 2.15 graphically manage your partitions with Gparted")</p> 2.16 -</div> 2.17 -<p><a class="button" href="$SCRIPT_NAME?page=partitioning">$(gettext "Install \ 2.18 + 2.19 +<a class="button" href="$SCRIPT_NAME?page=partitioning">$(gettext "Install \ 2.20 SliTaz")</a> 2.21 +</section> 2.22 EOT 2.23 } 2.24 2.25 select_upgrade() 2.26 { 2.27 cat <<EOT 2.28 -<div class="box"> 2.29 +<section> 2.30 <h4>$(gettext 'Upgrade')</h4> 2.31 2.32 <p>$(gettext "Upgrade an already installed SliTaz system on your hard disk \ 2.33 drive. Your /home /etc /var/www directories will be kept, all other \ 2.34 directories will be removed. Any additional packages added to your old Slitaz \ 2.35 system will be updated as long you have an active internet connection.")</p> 2.36 -</div> 2.37 -<p><a class="button" href="$SCRIPT_NAME?page=upgrade">$(gettext "Upgrade \ 2.38 -SliTaz")</a></p> 2.39 + 2.40 +<a class="button" href="$SCRIPT_NAME?page=upgrade">$(gettext "Upgrade \ 2.41 +SliTaz")</a> 2.42 +</section> 2.43 EOT 2.44 } 2.45
3.1 --- a/network.cgi Thu May 17 14:02:41 2012 +0300 3.2 +++ b/network.cgi Thu May 17 14:52:15 2012 +0300 3.3 @@ -147,6 +147,7 @@ 3.4 <p>$(gettext "Here you can configure a wired connection using DHCP to \ 3.5 automatically get a random IP or configure a static/fixed IP")</p> 3.6 3.7 +<section> 3.8 <h3>$(gettext 'Configuration')</h3> 3.9 <form method="get" action="$SCRIPT_NAME"> 3.10 <input type="hidden" name="eth" /> 3.11 @@ -184,7 +185,9 @@ 3.12 <input type="submit" name="dhcp" value="$(gettext 'Activate (DHCP)')"> 3.13 <input type="submit" name="disable" value="$(gettext 'Disable')"> 3.14 </form> 3.15 +</section> 3.16 3.17 +<section> 3.18 <h3>$(gettext 'Configuration file')</h3> 3.19 3.20 <p>$(gettext "These values are the ethernet settings in the main \ 3.21 @@ -194,6 +197,7 @@ 3.22 </pre> 3.23 <a class="button" href="index.cgi?file=/etc/network.conf&action=edit"> 3.24 <img src="$IMAGES/edit.png" />$(gettext 'Manual Edit')</a> 3.25 +</section> 3.26 EOT 3.27 ;; 3.28 *\ wifi\ *) 3.29 @@ -237,6 +241,7 @@ 3.30 WIFI_KEY_TYPE="$(GET keytype)" 3.31 fi 3.32 cat << EOT 3.33 +<section> 3.34 <h3>$(gettext 'Connection')</h3> 3.35 <form method="get" action="$SCRIPT_NAME"> 3.36 <input type="hidden" name="connect-wifi" /> 3.37 @@ -262,7 +267,9 @@ 3.38 $(table_end) 3.39 <input type="submit" name="wifi" value="$(gettext 'Configure')" /> 3.40 </form> 3.41 +</section> 3.42 3.43 +<section> 3.44 <h3>$(gettext 'Configuration file')</h3> 3.45 3.46 <p>$(gettext "These values are the wifi settings in the main /etc/network.conf \ 3.47 @@ -272,10 +279,13 @@ 3.48 3.49 <a class="button" href="index.cgi?file=/etc/network.conf&action=edit"> 3.50 <img src="$IMAGES/edit.png" />$(gettext 'Manual Edit')</a> 3.51 +</section> 3.52 3.53 +<section> 3.54 <h3>$(gettext 'Output of iwconfig')</h3> 3.55 3.56 <pre>$(iwconfig)</pre> 3.57 +</section> 3.58 EOT 3.59 ;; 3.60 *) 3.61 @@ -287,6 +297,7 @@ 3.62 3.63 <p>$(gettext 'Manage network connections and services')</p> 3.64 3.65 +<section> 3.66 <div id="actions"> 3.67 <div class="float-left"> 3.68 <a class="button" href="$SCRIPT_NAME?start"> 3.69 @@ -305,44 +316,58 @@ 3.70 </div> 3.71 3.72 $(list_network_interfaces) 3.73 +</section> 3.74 3.75 +<section> 3.76 <h3 id="hosts">$(gettext 'Hosts')</h3> 3.77 3.78 <pre>$(cat /etc/hosts)</pre> 3.79 3.80 <a class="button" href="index.cgi?file=/etc/hosts&action=edit"> 3.81 <img src="$IMAGES/edit.png" />$(gettext 'Edit hosts')</a> 3.82 +</section> 3.83 3.84 +<section> 3.85 <h3>$(gettext 'Hostname')</h3> 3.86 3.87 <form method="get" name="$SCRIPT_NAME"> 3.88 <input type="text" name="hostname" value="$hostname" /> 3.89 <input type="submit" value="$(gettext 'Change hostname')" /> 3.90 </form> 3.91 +</section> 3.92 3.93 - 3.94 +<section> 3.95 <h3 id="ifconfig">$(gettext 'Output of ifconfig')</h3> 3.96 3.97 <pre>$(ifconfig)</pre> 3.98 +</section> 3.99 3.100 +<section> 3.101 <h3 id="routing">$(gettext 'Routing table')</h3> 3.102 3.103 <pre>$(route -n)</pre> 3.104 +</section> 3.105 3.106 +<section> 3.107 <h3 id="dns">$(gettext 'Domain name resolution')</h3> 3.108 3.109 <pre>$(cat /etc/resolv.conf)</pre> 3.110 +</section> 3.111 3.112 +<section> 3.113 <h3 id="arp">$(gettext 'ARP table')</h3> 3.114 3.115 <pre>$(arp)</pre> 3.116 +</section> 3.117 3.118 +<section> 3.119 <h3 id="connections">$(gettext 'IP Connections')</h3> 3.120 3.121 <pre> 3.122 $(netstat -anp 2> /dev/null | sed -e '/UNIX domain sockets/,$d' \ 3.123 -e 's#\([0-9]*\)/#<a href="boot.cgi?daemons=pid=\1">\1</a>/#') 3.124 </pre> 3.125 +</section> 3.126 EOT 3.127 ;; 3.128 esac
4.1 --- a/settings.cgi Thu May 17 14:02:41 2012 +0300 4.2 +++ b/settings.cgi Thu May 17 14:52:15 2012 +0300 4.3 @@ -146,6 +146,7 @@ 4.4 </p> 4.5 </form> 4.6 4.7 +<section> 4.8 <h4>$(gettext 'Add a new user')</h4> 4.9 4.10 <form method="get" action="$SCRIPT_NAME"> 4.11 @@ -159,14 +160,19 @@ 4.12 <input type="submit" value="$(gettext 'Create user')" /></td></tr> 4.13 </table> 4.14 </form> 4.15 +</section> 4.16 4.17 +<section> 4.18 <h4>$(gettext 'Current user sessions')</h4> 4.19 4.20 <pre>$(who)</pre> 4.21 +</section> 4.22 4.23 +<section> 4.24 <h4>$(gettext 'Last user sessions')</h4> 4.25 4.26 <pre>$(last)</pre> 4.27 +</section> 4.28 EOT 4.29 ;; 4.30 *) 4.31 @@ -183,6 +189,7 @@ 4.32 <img src="$IMAGES/users.png" />$(gettext 'Manage users')</a> 4.33 </div> 4.34 4.35 +<section> 4.36 <h3>$(gettext 'System time')</h3> 4.37 4.38 <table> 4.39 @@ -192,11 +199,13 @@ 4.40 </table> 4.41 <a class="button" href="$SCRIPT_NAME?rdate">$(gettext 'Sync online')</a> 4.42 <a class="button" href="$SCRIPT_NAME?hwclock">$(gettext 'Set hardware clock')</a> 4.43 +</section> 4.44 EOT 4.45 # 4.46 # Locale settings 4.47 # 4.48 cat << EOT 4.49 +<section> 4.50 <h3 id="locale">$(gettext 'System language')</h3> 4.51 <p> 4.52 EOT 4.53 @@ -224,7 +233,9 @@ 4.54 </select> 4.55 <input type="submit" value="$(gettext 'Activate')" /> 4.56 </form> 4.57 +</section> 4.58 4.59 +<section> 4.60 <h3 id="keymap">$(gettext 'Console keymap')</h3> 4.61 <p> 4.62 EOT 4.63 @@ -270,7 +281,9 @@ 4.64 </select> 4.65 <input type="submit" value="$(gettext 'Activate')" /> 4.66 </form> 4.67 +</section> 4.68 4.69 +<section> 4.70 <h2>$(gettext 'Panel configuration')</h2> 4.71 4.72 <form method="get" action="$SCRIPT_NAME"> 4.73 @@ -300,6 +313,7 @@ 4.74 $(gettext 'TazPanel provides a debuging mode and page:') 4.75 <a href="/index.cgi?debug">debug</a> 4.76 </p> 4.77 +</section> 4.78 EOT 4.79 ;; 4.80 esac
5.1 --- a/styles/default/style.css Thu May 17 14:02:41 2012 +0300 5.2 +++ b/styles/default/style.css Thu May 17 14:52:15 2012 +0300 5.3 @@ -144,6 +144,7 @@ 5.4 #sidebar h4 { margin: 0 0 2px 12px; } 5.5 #sidebar ul { list-style-type: none; padding: 0; } 5.6 5.7 + 5.8 /* Content */ 5.9 5.10 #content { margin: 20px; } 5.11 @@ -221,6 +222,7 @@ 5.12 float: right; 5.13 } 5.14 5.15 + 5.16 /* Table */ 5.17 5.18 table { 5.19 @@ -344,9 +346,9 @@ 5.20 /* Round corner */ 5.21 5.22 #loading, table, pre, input[type=submit], .debug, .box, 5.23 -.button, div.scroll, .outbox { 5.24 - /*-moz-border-radius: 4px; 5.25 - -webkit-border-radius: 4px; */ 5.26 +.button, div.scroll, .outbox, section { 5.27 + -moz-border-radius: 4px; 5.28 + -webkit-border-radius: 4px; 5.29 border-radius: 4px; 5.30 } 5.31 5.32 @@ -399,3 +401,17 @@ 5.33 -ms-transition: all 0.3s ease-in-out; 5.34 transition: all 0.3s ease-in-out; 5.35 } 5.36 + 5.37 +section { 5.38 + margin: 20pt -0.7em; 5.39 + padding: 0.7em; 5.40 + background-color: #fdfdfd; 5.41 + border: 1px solid #ddd; 5.42 + border-radius: 1em; 5.43 + /*box-shadow: 0 0 3pt 2pt #eee;*/ 5.44 +} 5.45 +section h4 { 5.46 + margin: 0 0 0.5em 0; 5.47 +} 5.48 +section h3 { 5.49 + margin: 0 0 0.5em 0;