Merge pull request #3080 from consul/ui-design

[Backport] UI design

app/assets/stylesheets/layout.scss

@@ -434,6 +434,11 @@ a {
   text-transform: uppercase;
 }
 
+.help-text {
+  line-height: rem-calc(20);
+  margin-top: 0;
+}
+
 // 02. Header
 // ----------
 
@@ -450,6 +455,18 @@ header {
     float: left;
     height: $line-height * 1.5;
     margin-left: $line-height / 2;
+    position: relative;
+
+    &::after {
+      color: #808080;
+      content: '\61';
+      font-family: "icons" !important;
+      font-size: $small-font-size;
+      pointer-events: none;
+      position: absolute;
+      right: 2px;
+      top: 9px;
+    }
   }
 
   .external-links {
@@ -941,15 +958,11 @@ footer {
 
   label {
     color: #fff;
-    font-size: $small-font-size;
+    font-size: $tiny-font-size;
     font-weight: normal;
   }
 
   select {
-    background-image: image-url('language_select.png');
-    background-origin: border-box;
-    background-position: right;
-    background-size: 24px 24px;
 
     option {
       background: #fff;
@@ -960,14 +973,16 @@ footer {
   }
 
   .locale-switcher {
-    background-color: transparent;
+    background: #1a1a1a;
     border: 0;
+    border-radius: rem-calc(4);
     color: #fff;
     font-size: $small-font-size;
+    height: $line-height;
     margin-bottom: 0;
+    margin-top: $line-height / 4;
     outline: none;
-    padding-left: rem-calc(3);
-    padding-right: $line-height;
+    padding: 0 $line-height / 4;
     width: auto;
 
     &:focus {
@@ -2508,7 +2523,7 @@ table {
     border-radius: rem-calc(5);
     display: block;
     margin: $line-height / 2 0;
-    padding: 0 $line-height / 2;
+    padding: $line-height / 2;
     position: relative;
 
     .icon-document {

app/views/budgets/investments/milestones/_milestone.html.erb

@@ -29,17 +29,24 @@
     </p>
 
     <% if milestone.documents.present? %>
-      <div class="document-link text-center">
-        <p>
-          <span class="icon-document"></span>&nbsp;
-          <strong><%= t("shared.documentation") %></strong>
-        </p>
-        <% milestone.documents.each do |document| %>
-          <%= link_to document.title,
-                  document.attachment.url,
-                  target: "_blank",
-                  rel: "nofollow" %><br>
-        <% end %>
+      <div class="documents">
+        <div class="document-link text-left small">
+          <p>
+            <strong><%= t("shared.documentation") %></strong>
+          </p>
+
+          <% milestone.documents.each do |document| %>
+              <%= link_to document.title,
+                      document.attachment.url,
+                      target: "_blank",
+                      rel: "nofollow" %><br>
+              <small>
+                <%= document.humanized_content_type %>&nbsp;|&nbsp;
+                <%= number_to_human_size(document.attachment_file_size, precision: 2) %>
+              </small>
+              <br>
+          <% end %>
+        </div>
       </div>
     <% end %>
 

app/views/documents/_additional_documents.html.erb

@@ -1,7 +1,7 @@
 <% if documents.any? %>
   <div class="document-divider no-margin-top margin-bottom padding">
     <div class="row">
-      <div class="small-12 medium-6 column">
+      <div class="small-12 column">
         <div class="additional-document-link">
           <p>
             <strong><%= t('proposals.show.title_external_url') %></strong>