euscanwww: Fixed CSS stylesheet

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

Signed-off-by: volpino <fox91@anche.no>
This commit is contained in:
volpino 2012-06-29 14:13:25 +02:00
parent d7bf130fda
commit e9c03fbded
8 changed files with 133 additions and 154 deletions

View File

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

View File

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

View File

@ -28,13 +28,13 @@
{{ package.category }}/{{ package.name }} {{ package.category }}/{{ package.name }}
{% if user.is_authenticated %} {% 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 Refresh
</button> </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 Add to favourites
</button> </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 Remove from favourites
</button> </button>
{% endif %} {% endif %}

View File

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

View File

@ -22,14 +22,20 @@
<tr> <tr>
<td></td> <td></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> </td>
</tr> </tr>
</table> </table>
<input type="hidden" name="next" value="/" /> <input type="hidden" name="next" value="/" />
</form> </form>
<a href="{% url "registration.views.register" %}">Register</a>
<a href="{% url "django.contrib.auth.views.password_reset" %}">Forgot password</a>
{% endblock %} {% endblock %}

View File

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

File diff suppressed because one or more lines are too long

View File

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