normalised and simplified designs of lists

2 files changed, 67 insertions, 98 deletions

diff --git a/app/assets/stylesheets/responsive/_lists_layout.scss b/app/assets/stylesheets/responsive/_lists_layout.scss
index 5561316d3..7d6102bdf 100644
--- a/app/assets/stylesheets/responsive/_lists_layout.scss
+++ b/app/assets/stylesheets/responsive/_lists_layout.scss
@@ -1,19 +1,39 @@
 /* Layout for lists of requests, authorities, users */
 .request_listing,.body_listing,.user_listing {
   overflow:hidden;
-  padding:12px 0 6px;
-  margin:0 0 -1px;
-
-  span.head {
+  margin-top: 1.5em;
+  .head {
     display:block;
-    min-height:32px;
-    margin-bottom:6px;
-    padding:0;
+    margin-bottom: 0.33em;
   }
-
-  span.bottomline {
-    clear:left;
+  .requester {
+    margin-bottom: 0.5em;
+  }
+  .bottomline {
     display:block;
+    margin-bottom: 0.5em;
+    @media( min-width: $main_menu-mobile_menu_cutoff ){
+      margin-bottom: 1.5em;
+    }
+  }
+}
+
+.desc {
+  display:block;
+  float:right;
+  clear:none;
+  overflow:hidden;
+  margin-bottom: 1.5em;
+}
+
+.body_listing, .user_listing {
+  .desc, .bottomline {
+    clear: both;
+    float: none;
+    margin-bottom: 0;
+  }
+  .bottomline {
+    margin-bottom: 1.5em
   }
 }
 
@@ -26,8 +46,7 @@
   .request_right {
     @include grid-column(12);
     @media( min-width: $main_menu-mobile_menu_cutoff ){
-      @include grid-column($columns:4, $float:right);
-      padding-top:5px;
+      @include grid-column($columns:4, $float:right, $collapse: true);
     }
   }
 
@@ -38,18 +57,12 @@
     }
   }
 
-  span.desc {
-    min-height:60px;
+   .desc {
     width:100%;
     @media( min-width: $main_menu-mobile_menu_cutoff ){
-      padding:0 0 0 40px;
+      padding:0 0 0 2em;
     }
   }
 }
 
-span.desc {
-  display:block;
-  float:right;
-  clear:none;
-  overflow:hidden;
-}
+
diff --git a/app/assets/stylesheets/responsive/_lists_style.scss b/app/assets/stylesheets/responsive/_lists_style.scss
index 7e4385d43..5eb448bcd 100644
--- a/app/assets/stylesheets/responsive/_lists_style.scss
+++ b/app/assets/stylesheets/responsive/_lists_style.scss
@@ -1,108 +1,53 @@
 /* Styles for lists of requests, authorities, users */
 .request_listing,.body_listing,.user_listing {
-  font-size:0.9em;
-  border-bottom:1px solid #DDD;
-
+  border-bottom:1px solid #e9e9e9;
+  .head {
+    font-weight:700;
+    font-size: 1.6em; // =h3
+  }
   a {
     text-decoration: none;
-  }
-  span.head {
-    font-weight:700;
-    font-size: 1.5em;
-
-    a {
-      text-decoration:none;
-      font-size:1.3em;
-      margin-top:3px;
-      display:block;
-      margin-bottom:-6px;
-    }
-    a:hover {
+    &:hover,
+    &:active,
+    &:focus {
       text-decoration: underline;
     }
   }
-
 }
 
 .request_listing{
-
-  span.bottomline{
-    font-style:normal;
-    margin-bottom:0;
-    margin-top:12px;
+  .bottomline {
     background-position:top left;
     background-repeat: no-repeat;
-    font-size:1.1em;
-    font-weight:400;
-    min-height:36px;
-    padding:3px 0 0 27px;
+    padding:0 0 0 27px;
   }
-  .requester {
-    padding-bottom:0;
-
-    a:hover {
-      text-decoration: underline;
-    }
-  }
-
-  span.desc {
-    line-height:18px;
-  }
-
-}
-
-.body_listing, .user_listing {
-
-  span.desc, span.bottomline {
-    font-style:normal;
-    font-weight:400;
-    margin:0;
-    padding:0;
-    float: left;
+  .desc {
+    font-style: italic;
   }
 }
 
-span.desc {
-  display:block;
-  float:right;
-  clear:none;
-  font-style:italic;
-  overflow:hidden;
-}
-
-
-.user_listing {
-  padding-top:10px;
-  padding-bottom:0;
-}
-
 .request_icon_line {
   background-repeat:no-repeat;
   background-position:left center;
-  min-height:24px;
-  clear:left;
-  padding:8px 0 10px 42px;
+  padding:0 0 0 42px;
 }
 
 .request_short_listing {
   margin-top:1em;
-
-  h3{
-    font-size:1.2em;
+  h3 {
+    font-size: 1.3em;
+    margin-bottom: 0.33em;
   }
-
-  a{
+  a {
     text-decoration: none;
-  }
-  p {
-    font-size:0.8em;
-    margin-top:-0.8em;
-    margin-bottom:0;
+    &:hover,
+    &:active,
+    &:focus {
+      text-decoration: underline;
+    }
   }
 }
 
-
-
 /* Status lines and icons */
 .icon_waiting_response,.icon_waiting_classification,.icon_waiting_clarification {
   background-image:image-url('status-pending.png');
@@ -152,3 +97,14 @@ span.desc {
   background-image:image-url('status-denied.png');
   color:#C1272D;
 }
+
+#public_body_list {
+  ul {
+    list-style: none outside none;
+    padding-left: 0;
+  }
+  li {
+    line-height: 1.2em;
+    margin-bottom: 0.4em;
+  }
+}