Applying css to home.html and base.html

First test at home.html using bootstrap

Applying css to home.html and base.html
First test at home.html using bootstrap
Matheus Figueiredo
1 parent 8781ee0c
Showing 3 changed files with 98 additions and 78 deletions Show diff stats
src/colab/deprecated/templates/base.html
src/colab/deprecated/templates/home.html
src/colab/static/css/screen.css
@@ -8,7 +8,9 @@
     <link rel="stylesheet" href="{{ STATIC_URL }}third-party/converse.js/converse.css" type="text/css" media="screen, projection" />
-    <script data-main="{{ STATIC_URL }}third-party/dist/css/bootstrap.js" src="{{ STATIC_URL }}third-party/converse.js/Libraries/require-jquery.js"></script>
+    <link rel="stylesheet" href="{{ STATIC_URL }}css/screen.css" type="text/css" media="screen, projection" />
+
+    <script src="{{ STATIC_URL }}third-party/dist/css/bootstrap.js"></script>
     <script data-main="{{ STATIC_URL }}third-party/converse.js/main" src="{{ STATIC_URL }}third-party/converse.js/Libraries/require-jquery.js"></script>
@@ -36,31 +38,33 @@
   </head>
   <body>
-    <div>
-      <div>
+  <div class="container">
+    <div class="row">
+      <div class="col-lg-12">
         {% if not user.is_authenticated %}
-        <span>
+        <span class="col-lg-2 col-lg-offset-9 text-right">
           <a href="{% url 'signup' %}">{% trans "Sign up" %}</a>
         </span>
-        <span>
+        <span class="col-lg-1 text-center">
           <a href="{% url 'login' %}?next={{ request.path }}">{% trans "Login" %}</a>
         </span>
         {% else %}
-        <span>
+        <span class="col-lg-10 text-right">
           {% trans "authenticated as" %} <b>{{ user.username }}</b>
         </span>
-        <span>
+        <span class="col-lg-1 text-center">
           <a href="{% url 'user_profile' user.username %}">
             {% trans "My Profile" %}
           </a>
         </span>
-        <span>
+        <span class="col-lg-1 text-center">
           <a href="{% url 'logout' %}">
             {% trans "Logout" %}
           </a>
         </span>
         {% endif %}
       </div>
+    </div>
       {% block header %}
         <h1><span>{% trans "COLAB" %}</span>
@@ -69,35 +73,34 @@
         </h1>
       {% endblock %}
-      <div>
+      <div class="row vertical-center">
-        <span>
+        <span class="col-lg-1 text-center">
           <a href="{% url 'thread_list' %}">{% trans "Discussions" %}</a>
         </span>
-        <span>
+        <span class="col-lg-1 text-center">
           <a href="http://colab.interlegis.gov.br/wiki" target="_blank">{% trans "Wiki" %}</a>
         </span>
-        <span>
+        <span class="col-lg-1 text-center">
           <a href="http://listas.interlegis.gov.br/mailman/listinfo/" 
              target="_blank">{% trans "Contribute" %}</a>
         </span>
-        <span>
+        <span class="col-lg-2 text-center">
           <a href="http://colab.interlegis.leg.br/newticket"
              target="_blank">{% trans "Report a problem" %}</a>
         </span>
-        <span>
+        <span class="col-lg-1 text-center">
           <a href="{% url "feedzilla_index" %}">{% trans "Planet" %}</a>
         </span>
-        <span>
+        <span class="col-lg-4 col-lg-offset-2 text-right">
           <form action="/search/" method="GET">
-            <input name="q" id="header-searchbox" value="{{ request.GET.q }}"
+            <input name="q" class="col-lg-9" value="{{ request.GET.q }}"
                    type="text" placeholder="{% trans 'Search here...' %}" />
             <input type="submit" value="{% trans 'Search' %}"></input>
           </form>
         </span>
       </div>
-    </div>
     <hr/>
@@ -107,11 +110,16 @@
     <hr/>
-    <div>
+    <div class="row">
       {% block footer %}
-        <p><a href="{% url 'opendata' %}"><img src="{{ STATIC_URL }}img/opendata3.png"/></a></p>
-        <p>{% trans "The contents of this site is published under license" %} <a
-          href="http://creativecommons.org/licenses/by-nc-sa/2.0/br/">{% trans "Creative Commons - attribution, non-commercial" %}</a>
+        <p class="col-lg-12 text-center"><a href="{% url 'opendata' %}"><img src="{{ STATIC_URL }}img/opendata3.png"/></a></p>
+    </div>
+    <div class="row">
+        <p class="col-lg-12 text-center">
+          {% trans "The contents of this site is published under license" %}
+          <a href="http://creativecommons.org/licenses/by-nc-sa/2.0/br/">
+            {% trans "Creative Commons - attribution, non-commercial" %}
+          </a>
         </p>
       {% endblock %}
     </div>
@@ -140,6 +148,6 @@
     });
 </script>
-
+  </div>
   </body>
 </html>
@@ -6,74 +6,86 @@
 {% endblock %}
 {% block header %}
-  <div id="header-logo" class="span-24">
-    <img class="center" src="{{ STATIC_URL }}img/logo.png" />
+  <div class="row">
+    <div class="col-lg-2 col-lg-offset-5">
+      <img class="text-center" src="{{ STATIC_URL }}img/logo.png" />
+    </div>
   </div>
-  <hr class="space"/>
-
-  <h2 class="span-24 center">{% trans "INTERLEGIS COMMUNITIES" %}</h2>
+  <h3 class="text-center"><strong>{% trans "INTERLEGIS COMMUNITIES" %}</strong></h3>
 {% endblock %}
 {% block main-content %}
-  <div class="span-12 colborder">
-    <h3>{% trans "Latest collaborations" %}<a class="rss" target="_blank" 
-        href="{% url 'rss_latest_colab' %}" 
-        title="{% trans 'RSS - Latest collaborations' %}">
+  <div class="row">
+    <div class="col-lg-6">
+      <h3>
+        <span class="col-lg-11">{% trans "Latest collaborations" %}</span>
+        <a class="col-lg-1" target="_blank"
+          href="{% url 'rss_latest_colab' %}" 
+          title="{% trans 'RSS - Latest collaborations' %}">
         <img src="{{ STATIC_URL }}img/rss.png" alt="{% trans 'RSS' %}"/></a>
-    </h3>
-    <ul>
-      {% for doc in latest_docs %}
-        {% include "message-preview.html" %}
-      {% endfor %}
-    </ul>
-    <hr class="space"/>
-    <a class="right" href="{% url 'search' %}?o=modified+desc">
-      {% trans "View more collaborations..." %}
-    </a>
-  </div>
-
-  <div class="span-11 last">
-    <h3>{% trans "Distribution of Collaborations" %}</h3>
-    <div id="collabs"></div>
+      </h3>
+      <ul>
+        {% for doc in latest_docs %}
+          {% include "message-preview.html" %}
+        {% endfor %}
+      </ul>
+      <hr />
+      <a class="col-lg-8 col-lg-offset-4 text-right"
+         href="{% url 'search' %}?o=modified+desc">
+        {% trans "View more collaborations..." %}
+      </a>
+    </div>
+   
+    <div class="col-lg-6">
+      <h3>{% trans "Distribution of Collaborations" %}</h3>
+      <div></div>
+    </div>
   </div>
-  <hr class="space"/>
-  <hr/>
+  <hr />
-  <div class="span-12 colborder">
-    <h3>{% trans "Discussions Most Relevance" %}<a class="rss" target="_blank" 
-        href="{% url 'rss_hottest_threads' %}" 
-        title="{% trans "RSS - Discussions Most Relevance" %}">
+  <div class="row">
+    <div class="col-lg-6">
+      <h3>
+        <span class="col-lg-11">{% trans "Discussions Most Relevance" %}</span>
+        <a class="col-lg-1" target="_blank"
+            href="{% url 'rss_hottest_threads' %}" 
+            title="{% trans "RSS - Discussions Most Relevance" %}">
         <img src="{{ STATIC_URL }}img/rss.png" alt="{% trans 'RSS' %}"/></a>
-    </h3>
-    <ul>
-      {% for thread in hottest_threads %}
-        {% include "message-preview.html" with doc=thread.latest_message %}
-      {% endfor %}
-    </ul>
-    <hr class="space"/>
-    <a class="right" href="{% url 'thread_list' %}?order=hottest">
-      {% trans "View more discussions relevance..." %}
-    </a>
-  </div>
-
-  <div class="span-11 last">
-    <h3>{% trans "Latest Discussions" %}<a class="rss" target="_blank" 
-        href="{% url 'rss_latest_threads' %}" 
-        title="{% trans "RSS - Latest Discussions" %}">
+      </h3>
+      <ul>
+        {% for thread in hottest_threads %}
+          {% include "message-preview.html" with doc=thread.latest_message %}
+        {% endfor %}
+      </ul>
+      <hr />
+      <a class="col-lg-8 col-lg-offset-4 text-right"
+         href="{% url 'thread_list' %}?order=hottest">
+        {% trans "View more discussions relevance..." %}
+      </a>
+    </div>
+   
+    <div class="col-lg-6">
+      <h3>
+        <span class="col-lg-11">{% trans "Latest Discussions" %}</span>
+        <a class="col-lg-1" target="_blank"
+           href="{% url 'rss_latest_threads' %}" 
+           title="{% trans "RSS - Latest Discussions" %}">
         <img src="{{ STATIC_URL }}img/rss.png" alt="{% trans 'RSS' %}"/></a>
-    </h3>
-    <ul>
-      {% for thread in latest_threads %}
-        {% include "message-preview.html" with doc=thread.latest_message %}
-      {% endfor %}
-    </ul>
-    <hr class="space"/>
-    <a class="right" href="{% url 'thread_list' %}">
-      {% trans "View more discussions..." %}
-    </a>
+      </h3>
+      <ul>
+        {% for thread in latest_threads %}
+          {% include "message-preview.html" with doc=thread.latest_message %}
+        {% endfor %}
+      </ul>
+      <hr />
+      <a class="col-lg-8 col-lg-offset-4 text-right"
+         href="{% url 'thread_list' %}">
+        {% trans "View more discussions..." %}
+      </a>
+    </div>
   </div>
 {% endblock %}