Making message list responsive

Sergio Oliveira
1 parent 95684c95
Showing 3 changed files with 29 additions and 11 deletions Show diff stats
src/colab/deprecated/templates/base.html
src/colab/static/css/screen.css
src/super_archives/templates/message-list.html
@@ -2,6 +2,7 @@
 {% load i18n browserid conversejs %}
 <html>
   <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="{{ STATIC_URL }}third-party/bootstrap/css/bootstrap.css" type="text/css" media="screen, projection" />
+
+
+body {
+    font-size: 15px;
+}
+
 /* Header */
 #header-searchbox {
     width: 280px;
@@ -39,9 +45,10 @@
     background-color: #2183b3;
     padding: 2px 4px;
     border-radius: 5px;
-    font-size: 90%;
+    font-size: 85%;
     color: #fff;
-    margin-right: 5px;
+    margin-right: 4px;
+    margin-left: 4px;
     line-height: 2;
     white-space: nowrap;
 }
@@ -120,12 +127,24 @@ form.signup div.submit {
     vertical-align: middle;
 }
-.unstyled-list ul, ul.none {
+#filters h4 {
+    margin-top: 25px;
+}
+
+ul.unstyled-list {
     list-style-type: none;
     padding: 3px 0;
     margin: 10px 0;
 }
+ul.unstyled-list li {
+    min-height: 30px;
+}
+
+ul.unstyled-list .glyphicon-chevron-right {
+    font-size: 85%;
+}
+
 ul.indent {
     padding-left: 1.5em;
 }
@@ -7,11 +7,11 @@
   <hr/>
   <div class="row">
-    <div class="col-lg-2">
+    <div id="filters" class="hidden-xs hidden-sm col-md-2 col-lg-2">
       <h3>{% trans "Filters" %}</h3>
       <h4>{% trans "Sort by" %}</h4>
-      <ul class="none">
+      <ul class="unstyled-list">
         <li {% ifequal order_by "hottest" %} title="{% trans "Remove filter" %}" {% endifequal %}>
          <span class="glyphicon glyphicon-chevron-right"></span> <a href="{% ifequal order_by "hottest" %} {% append_to_get order="",p=1 %} {% else %} {% append_to_get order='hottest',p=1 %} {% endifequal %}">{% trans "Relevance" %}</a></li>
         <li {% ifequal order_by "latest" %} title="{% trans "Remove filter" %}" {% endifequal %}>
@@ -19,10 +19,8 @@
             {% trans "Recent activity" %}</a></li>
       </ul>
-      <div class="row">&nbsp;</div>
-
       <h4>{% trans "Lists" %}</h4>
-      <ul class="none">
+      <ul class="unstyled-list">
         {% for list in lists %}
           <li {% if list.name == selected_list %} title="{% trans "Remove filter" %}" class="selected" {% endif %}>
             <span class="glyphicon {% if list.name == selected_list %}glyphicon-remove{% else %}glyphicon-chevron-right{% endif %}"></span> <a href="{% ifnotequal list.name selected_list %} {% append_to_get list=list.name,p=1 %} {% else %} {% append_to_get list="",p=1 %}
@@ -31,8 +29,8 @@
       </ul>
     </div>
-    <div class="col-lg-10 last">
-      <ul>
+    <div class="col-xs-12 col-sm-12 col-md-10 col-lg-10">
+      <ul class="unstyled-list">
         {% for thread in threads.object_list %}
           {% include "message-preview.html" with doc=thread.latest_message %}
         {% empty %}
@@ -48,7 +46,7 @@
     <div class="row">
       {% if n_results %}
-        <div class="col-lg-10 col-lg-offset-2 text-center">
+        <div class="col-xm-12 col-sm-12 col-md-10 col-lg-10 col-lg-offset-2 text-center">
           {% if threads.has_previous %}
             <a href="{% append_to_get p=threads.previous_page_number %}">{% trans "Previous" %}</a>
           {% endif %}
	@@ -2,6 +2,7 @@		@@ -2,6 +2,7 @@
2	{% load i18n browserid conversejs %}	2	{% load i18n browserid conversejs %}
3	<html>	3	<html>
4	<head>	4	<head>
		5	+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
5		6
6	<link rel="stylesheet" href="{{ STATIC_URL }}third-party/bootstrap/css/bootstrap.css" type="text/css" media="screen, projection" />	7	<link rel="stylesheet" href="{{ STATIC_URL }}third-party/bootstrap/css/bootstrap.css" type="text/css" media="screen, projection" />
7		8