Fixing some Grid and adding message-preview css

Matheus Figueiredo
1 parent eb3a4dca
Showing 3 changed files with 113 additions and 39 deletions Show diff stats
src/colab/deprecated/templates/base.html
src/colab/deprecated/templates/home.html
src/colab/static/css/screen.css
@@ -40,30 +40,28 @@
   <body>
   <div class="container">
     <div class="row">
-      <div class="col-lg-12">
-        {% if not user.is_authenticated %}
-        <span class="col-lg-2 col-lg-offset-9 text-right">
-          <a href="{% url 'signup' %}">{% trans "Sign up" %}</a>
-        </span>
-        <span class="col-lg-1 text-center">
-          <a href="{% url 'login' %}?next={{ request.path }}">{% trans "Login" %}</a>
-        </span>
-        {% else %}
-        <span class="col-lg-10 text-right">
-          {% trans "authenticated as" %} <b>{{ user.username }}</b>
-        </span>
-        <span class="col-lg-1 text-center">
-          <a href="{% url 'user_profile' user.username %}">
-            {% trans "My Profile" %}
-          </a>
-        </span>
-        <span class="col-lg-1 text-center">
-          <a href="{% url 'logout' %}">
-            {% trans "Logout" %}
-          </a>
-        </span>
-        {% endif %}
+     {% if not user.is_authenticated %}
+      <div class="col-lg-2 col-lg-offset-9 text-right">
+        <a href="{% url 'signup' %}">{% trans "Sign up" %}</a>
+      </div>
+      <div class="col-lg-1 text-center">
+        <a href="{% url 'login' %}?next={{ request.path }}">{% trans "Login" %}</a>
+      </div>
+      {% else %}
+      <div class="col-lg-10 text-right">
+        {% trans "authenticated as" %} <b>{{ user.username }}</b>
       </div>
+      <div class="col-lg-1 text-center">
+        <a href="{% url 'user_profile' user.username %}">
+          {% trans "My Profile" %}
+        </a>
+      </div>
+      <div class="col-lg-1 text-center">
+        <a href="{% url 'logout' %}">
+          {% trans "Logout" %}
+        </a>
+      </div>
+        {% endif %}
     </div>
       {% block header %}
@@ -73,7 +71,7 @@
         </h1>
       {% endblock %}
-      <div class="row vertical-center">
+      <div id="header-menu" class="row">
         <span class="col-lg-1 text-center">
           <a href="{% url 'thread_list' %}">{% trans "Discussions" %}</a>
@@ -95,14 +93,14 @@
         <span class="col-lg-4 col-lg-offset-2 text-right">
           <form action="/search/" method="GET">
-            <input name="q" class="col-lg-9" value="{{ request.GET.q }}"
+            <input name="q" id="header-searchbox" value="{{ request.GET.q }}"
                    type="text" placeholder="{% trans 'Search here...' %}" />
             <input type="submit" value="{% trans 'Search' %}"></input>
           </form>
         </span>
       </div>
-    <hr/>
+    <hr id="header-hr"/>
     <div>
       {% block main-content %} {% endblock %}
@@ -20,8 +20,8 @@
   <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"
+        <span>{% trans "Latest collaborations" %}</span>
+        <a class="pull-right" target="_blank"
           href="{% url 'rss_latest_colab' %}" 
           title="{% trans 'RSS - Latest collaborations' %}">
         <img src="{{ STATIC_URL }}img/rss.png" alt="{% trans 'RSS' %}"/></a>
@@ -31,8 +31,7 @@
           {% include "message-preview.html" %}
         {% endfor %}
       </ul>
-      <hr />
-      <a class="col-lg-8 col-lg-offset-4 text-right"
+      <a class="pull-right"
          href="{% url 'search' %}?o=modified+desc">
         {% trans "View more collaborations..." %}
       </a>
@@ -49,8 +48,8 @@
   <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"
+        <span>{% trans "Discussions Most Relevance" %}</span>
+        <a class="pull-right" target="_blank"
             href="{% url 'rss_hottest_threads' %}" 
             title="{% trans "RSS - Discussions Most Relevance" %}">
         <img src="{{ STATIC_URL }}img/rss.png" alt="{% trans 'RSS' %}"/></a>
@@ -60,8 +59,7 @@
           {% include "message-preview.html" with doc=thread.latest_message %}
         {% endfor %}
       </ul>
-      <hr />
-      <a class="col-lg-8 col-lg-offset-4 text-right"
+      <a class="pull-right"
          href="{% url 'thread_list' %}?order=hottest">
         {% trans "View more discussions relevance..." %}
       </a>
@@ -69,8 +67,8 @@
     <div class="col-lg-6">
       <h3>
-        <span class="col-lg-11">{% trans "Latest Discussions" %}</span>
-        <a class="col-lg-1" target="_blank"
+        <span>{% trans "Latest Discussions" %}</span>
+        <a class="pull-right" target="_blank"
            href="{% url 'rss_latest_threads' %}" 
            title="{% trans "RSS - Latest Discussions" %}">
         <img src="{{ STATIC_URL }}img/rss.png" alt="{% trans 'RSS' %}"/></a>
@@ -80,9 +78,7 @@
           {% 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' %}">
+      <a class="pull-right" href="{% url 'thread_list' %}">
         {% trans "View more discussions..." %}
       </a>
     </div>
@@ -0,0 +1,80 @@
+/* Header */
+
+#header-searchbox {
+    width: 290px;
+}
+
+#header-menu {
+    line-height: 33px;
+}
+
+#header-hr{
+    margin-top: 0;
+}
+
+/* From message-preview.html*/
+.quiet {
+    color: #999;
+    font-size: 95%;
+}
+
+.preview-message {
+    white-space: nowrap;
+    overflow: hidden;
+    line-height: 28px;
+    border-bottom: solid 1px #ddd;
+}
+
+.preview-message a {
+    text-decoration: none;
+}
+
+.preview-message img {
+    margin-right: 5px;
+}
+
+.tag {
+    text-decoration: none;
+    background-color: #2183b3;
+    padding: 2px 4px;
+    border-radius: 5px;
+    font-size: 90%;
+    color: #fff;
+    margin-right: 5px;
+    line-height: 2;
+    white-space: nowrap;
+}
+
+.tag:hover,
+.tag:focus {
+    background-color: #21b6e6;
+    color: #fff;
+}
+
+.tag-cloud .size-1 {
+    font-size: 90%;
+}
+.tag-cloud .size-2 {
+    font-size: 100%;
+}
+.tag-cloud .size-3 {
+    font-size: 130%;
+}
+.tag-cloud .size-4 {
+    font-size: 150%;
+}
+
+.subject,
+.subject a {
+    color: #000;
+}
+
+.subject a:hover,
+.subject a:focus {
+    text-decoration: underline;
+    color: #335;
+}
+
+.subject img {
+    margin-right: 5px;
+}
@@ -0,0 +1,80 @@		@@ -0,0 +1,80 @@
	1	+/* Header */
	2	+
	3	+#header-searchbox {
	4	+ width: 290px;
	5	+}
	6	+
	7	+#header-menu {
	8	+ line-height: 33px;
	9	+}
	10	+
	11	+#header-hr{
	12	+ margin-top: 0;
	13	+}
	14	+
	15	+/* From message-preview.html*/
	16	+.quiet {
	17	+ color: #999;
	18	+ font-size: 95%;
	19	+}
	20	+
	21	+.preview-message {
	22	+ white-space: nowrap;
	23	+ overflow: hidden;
	24	+ line-height: 28px;
	25	+ border-bottom: solid 1px #ddd;
	26	+}
	27	+
	28	+.preview-message a {
	29	+ text-decoration: none;
	30	+}
	31	+
	32	+.preview-message img {
	33	+ margin-right: 5px;
	34	+}
	35	+
	36	+.tag {
	37	+ text-decoration: none;
	38	+ background-color: #2183b3;
	39	+ padding: 2px 4px;
	40	+ border-radius: 5px;
	41	+ font-size: 90%;
	42	+ color: #fff;
	43	+ margin-right: 5px;
	44	+ line-height: 2;
	45	+ white-space: nowrap;
	46	+}
	47	+
	48	+.tag:hover,
	49	+.tag:focus {
	50	+ background-color: #21b6e6;
	51	+ color: #fff;
	52	+}
	53	+
	54	+.tag-cloud .size-1 {
	55	+ font-size: 90%;
	56	+}
	57	+.tag-cloud .size-2 {
	58	+ font-size: 100%;
	59	+}
	60	+.tag-cloud .size-3 {
	61	+ font-size: 130%;
	62	+}
	63	+.tag-cloud .size-4 {
	64	+ font-size: 150%;
	65	+}
	66	+
	67	+.subject,
	68	+.subject a {
	69	+ color: #000;
	70	+}
	71	+
	72	+.subject a:hover,
	73	+.subject a:focus {
	74	+ text-decoration: underline;
	75	+ color: #335;
	76	+}
	77	+
	78	+.subject img {
	79	+ margin-right: 5px;
	80	+}