euscanwww: Fixed CSS stylesheet

Added Twitter Bootstrap and tweaked the layout to use the grid layout

Signed-off-by: volpino <fox91@anche.no>

euscanwww/djeuscan/templates/_base.html

@@ -10,6 +10,7 @@
     <link rel="alternate" type="application/atom+xml" title="Global log" href="{% url "global_feed" %}" />
     {% endblock %}
     {% block css %}
+    <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/bootstrap.min.css" media="screen" title="Normal" />
     <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/style.css" media="screen" title="Normal" />
     {% endblock %}
     {% block javascript %}
@@ -22,12 +23,20 @@
       </a>
       {% block header %}<h1>Ebuild Upstream Scanner (euscan)</h1>{% endblock %}
     </div>
-    <div id="content">
+    <div class="row-fluid">
+      <div class="span10">
+        <div class="row-fluid">
+          <div class="span1"></div>
+          <div id="content" class="rounded span11">
             {% block content %}{% endblock %}
           </div>
-    <div id="menus">
+        </div>
+      </div>
+      <div class="span2">
+        <div class="row-fluid">
+          <div id="menus" class="span11">
             {% block menus %}
-        <div class="menu">
+              <div class="menu rounded">
                 <ul>
                   {% block menu %}
                     <li><a href="{% url "index" %}">Home</a></li>
@@ -70,6 +79,10 @@
               </div>
             {% endblock %}
           </div>
+          <div class="span1"></div>
+        </div>
+      </div>
+    </div>
     <div id="footer">
       <p>
       {% block last_scan %}

euscanwww/djeuscan/templates/euscan/_datatable.html

@@ -24,7 +24,7 @@
 
 {% block menus %}
 {{ block.super }}
-<div class="menu">
+<div class="menu notfirst-menu rounded">
   <ul>
     <li><img src="{{ STATIC_URL }}img/gentoo-icon.png" /> Gentoo</li>
     <li><img src="{{ STATIC_URL }}img/overlay-icon.png" /> Overlays</li>

euscanwww/djeuscan/templates/euscan/package.html

@@ -28,13 +28,13 @@
   {{ package.category }}/{{ package.name }}
 
   {% if user.is_authenticated %}
-    <button class="refresh-button" data-package="{{ package.category }}/{{ package.name }}">
+    <button class="btn refresh-button" data-package="{{ package.category }}/{{ package.name }}">
       Refresh
     </button>
-    <button class="favourite-button {% if favourited %}hide{% endif %}" data-url="{% url "favourite_package" package.category package.name %}">
+    <button class="btn favourite-button {% if favourited %}hide{% endif %}" data-url="{% url "favourite_package" package.category package.name %}">
       Add to favourites
     </button>
-    <button class="unfavourite-button {% if not favourited %}hide{% endif %}" data-url="{% url "unfavourite_package" package.category package.name %}">
+    <button class="btn unfavourite-button {% if not favourited %}hide{% endif %}" data-url="{% url "unfavourite_package" package.category package.name %}">
       Remove from favourites
     </button>
   {% endif %}

euscanwww/djeuscan/templates/euscan/statistics.html

@@ -3,7 +3,6 @@
 {% load url from future %}
 
 {% block content %}
-<h2>What's euscan ?</h2>
 <h2>Statistics</h2>
 
 <h3>Current statistics</h3>

euscanwww/djeuscan/templates/registration/login.html

@@ -22,14 +22,20 @@
       <tr>
         <td></td>
         <td>
-          <input type="submit" value="Login" />
+          <input class="btn pull-right" type="submit" value="Login" />
+        </td>
+      </tr>
+      <tr>
+        <td>&nbsp;</td>
+      </tr>
+      <tr>
+        <td>
+        </td>
+        <td>
+          <a class="pull-right" href="{% url "django.contrib.auth.views.password_reset" %}">Forgot password</a>
         </td>
       </tr>
     </table>
     <input type="hidden" name="next" value="/" />
   </form>
-
-  <a href="{% url "registration.views.register" %}">Register</a>
-  <a href="{% url "django.contrib.auth.views.password_reset" %}">Forgot password</a>
-
 {% endblock %}

euscanwww/djeuscan/templates/registration/registration_form.html

@@ -11,7 +11,7 @@
       <tr>
         <td></td>
         <td>
-          <input type="submit" value="Send activation email" />
+          <input class="btn pull-right" type="submit" value="Send activation email" />
         </td>
       </tr>
     </form>

euscanwww/htdocs/css/style.css

@@ -1,86 +1,67 @@
-body
-{
-  margin: 0;
-  padding: 0;
+body {
     font-size: 0.8em;
     font-family: Dejavu, Verdana, "Bitstream Vera Sans", "Lucida Grande", "Trebuchet MS", sans-serif;
     color: #535353;
     background: #D2D0D4;
 }
 
-img
-{
+img {
     border: none;
 }
 
-h1
-{
+h1 {
     margin-top: 0;
-  color: #369;
+    color: #333;
     font-size: 1.6em;
+    width: 20em;
+    margin-left: auto;
+    margin-right: auto;
 }
 
-a:link, a:visited
-{
+a:link, a:visited {
     text-decoration: none;
     font-weight: bold;
     color: #ff8c00;
 }
 
-a:hover, a:active
-{
+a:hover, a:active {
     font-weight: bold;
     color: #ff4500;
     text-decoration: underline;
 }
 
 #header {
-    /* background: url(http://packages.gentoo.org/media/packages_gentoo_logo.jpg) no-repeat;
-    background-color: #46347C; */
     width: 100%;
     height: 30px;
     margin: 0;
     padding: 0;
     background: url(../img/gentoo-header-bar-bg.png) repeat-x;
+    margin-bottom: 20px;
 }
 
-#header #logo
-{
+#header #logo {
     float: left;
 }
 
 #content {
-    background: #F0F0F0;
-    padding: 10px;
-    margin-top: 10px;
-/*    margin-right: auto;
-    margin-left: auto;
-*/
-    margin-left: 20px;
-    /* margin-left: 20%; */
-    margin-right: 250px;
-    /* max-width: 60em; */
-
     border: 1px solid #67539B;
     background: #FEFEFE;
 
-    -webkit-border-radius: 10px;
-    -moz-border-radius: 10px;
-    border-radius: 10px;
+    padding: 20px;
+
+    min-height: 350px;
 }
 
 .menu {
-    -webkit-border-radius: 10px;
-    -moz-border-radius: 10px;
-    border-radius: 10px;
     border: 1px solid #67539B;
-}
-
-.menu {
-    width:100%;
-    margin-top: 30px;
     background: #8076A1;
     color: #FFF;
+    padding-top: 5px;
+    padding-bottom: 5px;
+}
+
+.notfirst-menu {
+    margin-top: 10px;
 }
 
 .menu a {
@@ -103,28 +84,6 @@ a:hover, a:active
     border: none;
 }
 
-#menus {
-    width: 200px;
-    position:absolute;
-    top:30px;
-    right:20px;
-
-/*
-    position: fixed;
-    right: 10px;
-    top: 2em;
-    width: 20%;
-*/
-}
-
-/*
-code, pre{
-    background-color:transparent;
-    font-family:"Courier New",Courier,monospace;
-    font-size:small;
-}
-*/
-
 a {
     color: #3F4C66;
 }
@@ -158,18 +117,6 @@ dd {
     padding: 5px;
 }
 
-
-h1 {
-    color: #000;
-    width: 20em;
-    margin-left: auto;
-    margin-right: auto;
-}
-
-.ok {
-    color:#15B100;
-}
-
 hr {
     margin: 0.3em 1em 0.3em 1em;
     height: 1px;
@@ -204,7 +151,7 @@ th {
     font-size: 0.8em;
     width: 100%;
     margin: 0;
-    margin-top: 10px;
+    margin-top: 20px;
     color: #FFF;
 }
 
@@ -213,8 +160,7 @@ th {
     margin: 5px;
 }
 
-.err,.ok,.inf
-{
+.err, .ok, .inf {
     margin: 5px;
     margin-left: auto;
     margin-right: auto;
@@ -281,3 +227,9 @@ th {
 .hide {
     display: none;
 }
+
+.rounded {
+    -webkit-border-radius: 10px;
+    -moz-border-radius: 10px;
+    border-radius: 10px;
+}