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