Adjusting home for mobile devices

Sergio Oliveira
1 parent 45086d05
Showing 2 changed files with 31 additions and 25 deletions Show diff stats
src/colab/deprecated/templates/home.html
src/colab/static/css/screen.css
@@ -6,28 +6,27 @@
 {% endblock %}
 {% block header %}
-  <div class="row">
+  <div class="row hidden-xs hidden-sm">
     <div class="col-lg-2 col-lg-offset-5 text-center">
       <img src="{{ STATIC_URL }}img/logo.png" />
     </div>
   </div>
-  <h3 class="text-center">{% trans "INTERLEGIS COMMUNITIES" %}</h3>
+  <h3 class="text-center hidden-xs hidden-sm">{% trans "INTERLEGIS COMMUNITIES" %}</h3>
 {% endblock %}
 {% block main-content %}
   <div class="row">
-    <div class="col-lg-6">
+    <div class="col-lg-6 col-md-6">
       <h3 class="column-align">
-        {% trans "Latest collaborations" %}
+        {% trans "Latest Collaborations" %}
       </h3>
-      <a class="pull-right" target="_blank"
+      <a class="rss-icon" target="_blank"
          href="{% url 'rss_latest_colab' %}"
          title="{% trans 'RSS - Latest collaborations' %}">
-         <div class="rss-icon"></div>
       </a>
-      <ul>
+      <ul class="message-list">
         {% for doc in latest_docs %}
           {% include "message-preview.html" %}
         {% endfor %}
@@ -40,23 +39,22 @@
     </div>
-    <div class="col-lg-6">
+    <div class="col-lg-6 col-md-6">
       <h3 class="column-align">{% trans "Distribution of Collaborations" %}</h3>
       <div>&nbsp;</div>
     </div>
   </div>
   <div class="row">
-    <div class="col-lg-6">
+    <div class="col-lg-6 col-md-6">
       <h3 class="column-align">
-        {% trans "Discussions Most Relevance" %}
+        {% trans "Most Relevant Discussions" %}
       </h3>
-      <a class="pull-right" target="_blank"
+      <a class="rss-icon" target="_blank"
          href="{% url 'rss_hottest_threads' %}"
          title="{% trans "RSS - Discussions Most Relevance" %}">
-         <div class="rss-icon"></div>
       </a>
-      <ul>
+      <ul class="message-list">
         {% for thread in hottest_threads %}
           {% include "message-preview.html" with doc=thread.latest_message %}
         {% endfor %}
@@ -68,16 +66,15 @@
       <div>&nbsp;</div>
     </div>
-    <div class="col-lg-6">
+    <div class="col-lg-6 col-md-6">
       <h3 class="column-align">
         {% trans "Latest Discussions" %}
       </h3>
-      <a class="pull-right" target="_blank"
+      <a class="rss-icon" target="_blank"
          href="{% url 'rss_latest_threads' %}"
          title="{% trans "RSS - Latest Discussions" %}">
-         <div class="rss-icon"></div>
       </a>
-      <ul>
+      <ul class="message-list">
         {% for thread in latest_threads %}
           {% include "message-preview.html" with doc=thread.latest_message %}
         {% endfor %}
@@ -4,6 +4,11 @@ body {
     padding-top: 70px;
 }
+/* better fit for xm and sm screens */
+h3 {
+    font-size: 160%;
+}
+
 /* Header */
@@ -120,13 +125,18 @@ body {
 .subject img {
     margin-right: 5px;
 }
-/* End of message-preview.html */
-.container {
-    /* Overwritting max-width for better web responsive */
-    /* max-width: 95% !important; */
+/* message-list (ul wrapping preview-message) */
+
+ul.message-list {
+   padding: 0;
 }
+/* End of message-preview.html */
+
+
+
+
 /* Forms */
 .required label:before {
     color: #f00;
@@ -151,14 +161,13 @@ form.signup div.submit {
     background-image: url(../img/rss.png);
     width: 16px;
     height: 16px;
+    display: inline-block;
+    margin-left: 3px;
 }
 .column-align {
     display: inline-block;
-    margin-left: 20px;
-    margin-top: 0;
-    margin-bottom: 10px;
-    vertical-align: middle;
+    margin-bottom: 20px;
 }
 #filters h4 {
	@@ -4,6 +4,11 @@ body {		@@ -4,6 +4,11 @@ body {
4	padding-top: 70px;	4	padding-top: 70px;
5	}	5	}
6		6
		7	+/* better fit for xm and sm screens */
		8	+h3 {
		9	+ font-size: 160%;
		10	+}
		11	+
7	/* Header */	12	/* Header */
8		13
9		14
	@@ -120,13 +125,18 @@ body {		@@ -120,13 +125,18 @@ body {
120	.subject img {	125	.subject img {
121	margin-right: 5px;	126	margin-right: 5px;
122	}	127	}
123	-/* End of message-preview.html */
124		128
125	-.container {
126	- /* Overwritting max-width for better web responsive */
127	- /* max-width: 95% !important; */	129	+/* message-list (ul wrapping preview-message) */
		130	+
		131	+ul.message-list {
		132	+ padding: 0;
128	}	133	}
129		134
		135	+/* End of message-preview.html */
		136	+
		137	+
		138	+
		139	+
130	/* Forms */	140	/* Forms */
131	.required label:before {	141	.required label:before {
132	color: #f00;	142	color: #f00;
	@@ -151,14 +161,13 @@ form.signup div.submit {		@@ -151,14 +161,13 @@ form.signup div.submit {
151	background-image: url(../img/rss.png);	161	background-image: url(../img/rss.png);
152	width: 16px;	162	width: 16px;
153	height: 16px;	163	height: 16px;
		164	+ display: inline-block;
		165	+ margin-left: 3px;
154	}	166	}
155		167
156	.column-align {	168	.column-align {
157	display: inline-block;	169	display: inline-block;
158	- margin-left: 20px;
159	- margin-top: 0;
160	- margin-bottom: 10px;
161	- vertical-align: middle;	170	+ margin-bottom: 20px;
162	}	171	}
163		172
164	#filters h4 {	173	#filters h4 {