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