use the whole section line for showing/hiding content
[opensuse:software-o-o.git] / app / views / download / html.erb
1 <%
2 def gradient(top, mid, btm)
3   "  background: #{mid};\n" +
4   "  background: -webkit-gradient(linear, left top, left bottom, from(#{top}), to(#{btm}));\n" +
5   "  background: -moz-linear-gradient(top,  #{top},  #{btm});\n" +
6   "  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#{top}', endColorstr='#{btm}');"
7 end
8 %>
9 <!DOCTYPE html>
10 <html>
11 <head>
12 <style>
13 body {
14   font: 0.8em "DejaVu Sans", "Bitstream Vera Sans", Verdana, sans-serif;
15   margin: 16px;
16   margin-top: 0px;
17   padding: 0;
18 }
19 .soo_line {
20   color: #480;
21   clear: both;
22   border-bottom: 1px solid #CCC;
23   padding-top: 10px;
24   font-size: 1.1em;
25   display: none;
26   cursor: pointer;
27 }
28 .soo_line span {
29   float: right;
30 }
31 .soo_line_visible {
32   display: block;
33 }
34 .soo_button {
35   display: block;
36   float: left;
37   cursor: pointer;
38   border: 1px solid transparent;
39   padding: 3px 5px;
40   margin: 0 .5em 0 0;
41   -moz-border-radius: 8px;
42   border-radius: 8px;
43 }
44 .soo_button:hover, .soo_button_chosen {
45   border: 1px solid #BE7;
46 <%= gradient('#FCFCFC','#F0F0F0','#E4E4E4')%>
47 }
48 .soo_button p {
49   font-size: 0.75em;
50   text-align: center;
51   margin: 0;
52 }
53 .soo_ymplink, .soo_pkglink {
54   color: white;
55   display: block;
56   margin: 6px;
57   line-height: 24px;
58   font-weight: bolder;
59   float: left;
60   text-decoration: none;
61   height: 24px;
62   text-align: center;
63   -moz-border-radius: 12px;
64   border-radius: 12px;
65   padding-left: 8px;
66   padding-right: 8px;
67 }
68 .soo_ymplink {
69 <%= gradient('#9D0','#7B0','#580') %>
70   border: 1px solid #490;
71   min-width: 112px;
72   font-size: 0.85em;
73 }
74 .soo_pkglink {
75 <%= gradient('#09D','#07B','#058') %>
76   border: 1px solid #049;
77   min-width: 64px;
78   font-size: 0.75em;
79 }
80 pre {
81   background: #EEE;
82   border: 1px dotted #888;
83   padding: 4px;
84   margin-left: 2em;
85   font-size: 1.2em;
86   overflow-x: auto;
87 }
88 pre a {
89   text-decoration: none;
90   color: #008;
91 }
92 .soo_distro {
93   display: none;
94 }
95 </style>
96 <%= javascript_include_tag "http://static.opensuse.org/themes/bento/js/jquery.js" %>
97 <script type="text/javascript">
98 $(function(){
99   $('.soo_button').click(function(){
100     $('.soo_line').show();
101     $('.soo_button').removeClass('soo_button_chosen');
102     $(this).addClass('soo_button_chosen');
103     $('.soo_distro').hide();
104     var distro = $(this).attr('id').replace('soo_button_','');
105     $('.soo_distro_' + distro).show();
106     if (distro == 'openSUSE' || distro == 'SLE') {
107       $('#soo_ymp').show();
108       $('#soo_section_ymp').show();  $('#soo_section_toggle_ymp span').text('(hide)');
109       $('#soo_section_repo').hide(); $('#soo_section_toggle_repo span').text('(show)');
110       $('#soo_section_pkg').hide();  $('#soo_section_toggle_pkg span').text('(show)');
111     } else {
112       $('#soo_ymp').hide();
113       $('#soo_section_ymp').hide();  $('#soo_section_toggle_ymp span').text('(show)');
114       $('#soo_section_repo').show(); $('#soo_section_toggle_repo span').text('(hide)');
115       $('#soo_section_pkg').hide();  $('#soo_section_toggle_pkg span').text('(show)');
116     }
117   });
118
119   $('.soo_line').click(function(){
120       $('#' + $(this).attr('id').replace('toggle_', '')).toggle();
121       $(this).children('span').text($(this).children('span').text() == '(hide)' ? '(show)' : '(hide)');
122   });
123
124 // try to detect distro via user agent
125   if (navigator.userAgent.indexOf('CentOS') > 0 ) $('#soo_button_CentOS').click();
126   if (navigator.userAgent.indexOf('Debian') > 0 ) $('#soo_button_Debian').click();
127   if (navigator.userAgent.indexOf('Fedora') > 0 ) $('#soo_button_Fedora').click();
128   if (navigator.userAgent.indexOf('Mandriva') > 0 ) $('#soo_button_Mandriva').click();
129   if (navigator.userAgent.indexOf('Mageia') > 0 ) $('#soo_button_Mageia').click();
130   if (navigator.userAgent.indexOf('Red Hat') > 0 ) $('#soo_button_RHEL').click();
131   if (navigator.userAgent.indexOf('Scientific') > 0 ) $('#soo_button_SL').click();
132   if (navigator.userAgent.indexOf('SUSE') > 0 ) $('#soo_button_openSUSE').click();
133   if (navigator.userAgent.indexOf('buntu') > 0 ) $('#soo_button_Ubuntu').click();
134 });
135 </script>
136 </head>
137 <body>
138
139 <div class="soo_box">
140   <p class="soo_line soo_line_visible">Select Your Operating System</p>
141   <% @flavors.each do |flavor| %>
142   <div class="soo_button" id="soo_button_<%= flavor %>"><img src="<%= image_path('download/' + flavor.downcase + '.png') %>" alt="<%= flavor %>" /><p><%= flavor %></p></div>
143   <% end %>
144 </div>
145
146 <div id="soo_ymp" class="soo_box">
147   <p class="soo_line" id="soo_section_toggle_ymp">Install using One Click Install<span></span></p>
148   <div id="soo_section_ymp">
149   <% @data.select {|k,v| v.has_key?(:ymp)}.each do |k,v| %>
150   <a class="soo_ymplink soo_distro soo_distro_<%= v[:flavor] %> soo_distro_<%= k %>" href="<%= v[:ymp] %>"><%= k.gsub('_', '&nbsp;') %></a>
151   <% end %>
152   </div>
153 </div>
154
155 <div id="soo_repo" class="soo_box">
156   <p class="soo_line" id="soo_section_toggle_repo">Add repository and install manually<span></span></p>
157   <div id="soo_section_repo">
158   <% @data.select {|k,v| v.has_key?(:repo)}.each do |k,v| %>
159   <div class="soo_repoinfo soo_distro soo_distro_<%= v[:flavor] %> soo_distro_<%= k %>">
160   <p>For <strong><%= k.gsub('_', '&nbsp;') %></strong> run the following as <strong>root</strong>:</p>
161   <pre><%=
162     case v[:flavor]
163       when 'openSUSE', 'SLE'
164         "zypper addrepo #{v[:repo]}#{@prj}.repo\nzypper refresh\nzypper install #{@pkg}"
165       when 'CentOS', 'Fedora', 'RHEL', 'SL'
166         "cd /etc/yum/repos.d/\nwget #{v[:repo]}#{@prj}.repo\nyum update\nyum install #{@pkg}"
167       when 'Debian', 'Ubuntu'
168         "echo 'deb #{v[:repo]} ./' > /etc/apt/sources.list\napt-get update\napt-get install #{@pkg}"
169       when 'Mageia', 'Mandriva'
170         "urpmi.addmedia #{@prj} #{v[:repo]}\nurpmi.update -a\nurpmi #{@pkg}"
171       else
172         '?'
173     end
174   %></pre>
175   </div>
176   <% end %>
177   </div>
178 </div>
179
180 <div id="soo_pkg" class="soo_box">
181   <p class="soo_line" id="soo_section_toggle_pkg">Grab binary packages directly<span></span></p>
182   <div id="soo_section_pkg">
183   <table>
184   <% @data.select {|k,v| v.has_key?(:pkg)}.each do |k,v| %>
185   <tr class="soo_pkginfo soo_distro soo_distro_<%= v[:flavor] %> soo_distro_<%= k %>"><td>Packages for <strong><%= k.gsub('_', '&nbsp;') %></strong>:</td>
186   <td>
187   <% v[:pkg].each do |k,v| %>
188   <a class="soo_pkglink" href="<%= v %>"><%= k %></a>
189   <% end %>
190   </td>
191   </tr>
192   <% end %>
193   </table>
194   </div>
195 </div>
196
197 </body>
198 </html>