Slight design improvement

ashleyhindle · Jan 2, 2018 · 1540934 · 1540934
1 parent 385f815
commit 1540934
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 16 deletions.
diff --git a/views/index.html.twig b/views/index.html.twig
@@ -12,11 +12,15 @@
                 <span class="right source show-for-medium-up">{{job.sourcename}}</span>
                 <span class="company">{{job.companyname|striptags}}</span>
             </a>
+            <div class="tags">
             {% for tag in job.tags %}
-                {%  if loop.index < 12 %}
+                {%  if loop.index < 5 %}
                     <span class="label radius secondary"><a href="/search/{{ tag|url_encode }}">{{ tag }}</a></span>
+                {% elseif loop.index == 5 %}
+                    ...
                 {% endif %}
             {%  endfor %}
+            </div>
     	</li>
     {% endfor %}
     </ul>

diff --git a/views/layout.html.twig b/views/layout.html.twig
@@ -56,12 +56,12 @@
           js.id = id;
           js.src = "https://platform.twitter.com/widgets.js";
           fjs.parentNode.insertBefore(js, fjs);
-         
+
           t._e = [];
           t.ready = function(f) {
             t._e.push(f);
           };
-         
+
           return t;
         }(document, "script", "twitter-wjs"));
       });
@@ -85,9 +85,9 @@
       <li><a href='https://github.com/ashleyhindle/goremote.io#api'>API</a></li>
       <li><a href='https://goremote.io/rss'>RSS</a></li>
       <li><a href='mailto:hey@goremote.io'>Contact</a></li>
-      <li style="text-align:right;">
+      <li style="text-align:right;float:right;">
         <p>
-          Created by <a href='https://twitter.com/ashleyhindle'>ashleyhindle</a>
+          Created by <a href='https://twitter.com/ashleyhindle'>@ashleyhindle</a>
         </p>
       </li>
     </ul>

diff --git a/views/search.html.twig b/views/search.html.twig
@@ -19,12 +19,16 @@
                 <span class="right source show-for-medium-up">{{job.sourcename}}</span>
                 <span class="company">{{job.companyname}}</span>
             </a>
+            <div class="tags">
             {% for tag in job.tags %}
-                {%  if loop.index < 12 %}
+                {%  if loop.index < 5 %}
                     <span class="label radius secondary"><a href="/search/{{ tag|url_encode }}">{{ tag }}</a></span>
+                {% elseif loop.index == 5 %}
+                    ...
                 {% endif %}
             {%  endfor %}
+            </div>
     	</li>
     {% endfor %}
     </ul>
-{% endblock %}
+{% endblock %}
diff --git a/web/css/app.css b/web/css/app.css
@@ -1,4 +1,4 @@
-#twitter-widget-0 { 
+#twitter-widget-0 {
   margin-top: 8px !important;
   margin-right:5px !important;
 }
@@ -18,26 +18,32 @@ ul {
 }
 
 .job {
-	padding: 3px;
 	border-bottom: 1px solid #bbbbbb;
-	padding: 10px;
+    background-color: #F1F1F1;
+    margin-bottom: 1rem;
 }
 
- .job:nth-of-type(2n) {
- 	background-color: #f7f7f7;
- }
-
+ /*.job:nth-of-type(2n) {*/
+ 	/*background-color: #f7f7f7;*/
+ /*}*/
+/**/
 .job:hover {
 	background-color: #FAFAFA;
 }
 
 .job a {
 	display: block;
+    padding: 0.6rem;
+}
+
+.job .tags {
+    width: 100%;
+    background-color: #BBBBBB;
+    padding: 0.3rem;
 }
 
 .job .company {
 	color: #666666;
-	font-weight: bold;
 	font-size: 0.8rem;
 }
 
@@ -47,6 +53,7 @@ ul {
 
 .job .position {
 	overflow: hidden;
+    font-weight: bold;
 }
 
 .job .date {
@@ -83,4 +90,4 @@ ul {
 .description {
 	border-top: 1px solid #999999;
 	margin-bottom: 1rem;
-}
+}