Merge branch 'development' of...

Merge branch 'development' of forge.grandlyon.com:web-et-numerique/web-et-numerique-internet/data.grandlyon.com/web-portal/components/custom-apps/web-app into development

src/app/dataset-detail/components/dataset-api/dataset-api.component.scss

@@ -62,9 +62,7 @@ h4 {
 
   .resource-item {
     background-color: white;
-    padding: 0.5rem;
-    padding-left: 0;
-    padding-bottom: 0;
+    padding-top: 0.5rem;
     border-radius: 8px;
 
     @media screen and (min-width: $tablet) {
@@ -77,17 +75,16 @@ h4 {
 
   .resource-description {
     padding-bottom: 0.5rem;
-    padding-left: 0.5rem;
-    padding-top: 1rem;
+
+    @media screen and (max-width: $tablet) {
+      padding: 1rem 0.7rem 1.5rem 0.7rem;
+      border-bottom: 1px solid $grey-background-color;
+    }
 
     span {
       font-weight: 600;
       line-height: 1;
       font-size: 1rem;
-
-      @media screen and (min-width: $tablet) {
-        padding-left: 1.5rem;
-      }
     }
   }
 }

src/app/dataset-detail/components/dataset-api/resources-queryable/resource-queryable/resource-queryable.component.scss

@@ -79,18 +79,10 @@
     margin-left: 0.5rem;
     position: relative;
     margin-right: 0.5rem;
-    height: 3.5rem;
-    flex-grow: 1;
-    margin-top: 0.5rem;
+    height: 2.75rem;
+    width: 2.75rem;
     border-color: $grey-super-light-color;
 
-    @media screen and (min-width: $tablet) {
-      height: 2.75rem;
-      width: 2.75rem;
-      margin-top: 0;
-      flex-grow: 0;
-    }
-
     svg {
       position: absolute;
       width: 1.25rem;
@@ -204,6 +196,14 @@
       justify-content: unset;
     }
 
+    @media screen and (max-width: $tablet) {
+
+      .button {
+        margin-top: 0.5rem;
+        margin-left: 0;
+      }
+    }
+
     .resource-download-icon,
     .tooltip {
       margin-left: 0;

src/app/dataset-detail/components/dataset-api/resources-queryable/resources-queryable.component.scss

@@ -12,8 +12,8 @@
 
 .resource {
   background-color: white;
-  padding: 0.75rem;
-  padding-left: 1rem;
+  padding: 0 0.75rem 0.75rem 0.75rem;
+  margin-top: 0.75rem;
   position: relative;
   border-left: 2px solid white;
 
@@ -37,7 +37,6 @@
   }
 
   @media screen and (min-width: $tablet) {
-    padding-left: 1.5rem;
     margin-right: unset;
   }
 
@@ -54,7 +53,6 @@
 .resource-title {
   display: flex;
   align-items: center;
-  flex-wrap: wrap;
   cursor: pointer;
 }
 

src/app/dataset-detail/components/dataset-downloads/dataset-downloads.component.scss

@@ -23,7 +23,8 @@
   flex-direction: column;
   padding: 2rem 1.25rem 1.25rem 1.25rem;
   max-width: 100vw;
-  justify-content: center;;
+  justify-content: center;
+  ;
 
   @media screen and (min-width: $tablet) {
     max-width: unset;
@@ -71,7 +72,7 @@
   margin-bottom: 1.5rem;
   border-bottom: 2px solid $grey-background-color;
   background-color: white;
-  padding: 2.5rem;
+  padding: 1.7rem 2rem;
   box-shadow: 0 6px 12px 0 rgba(129, 128, 128, 0.1);
   border-radius: 8px;
 }
@@ -89,7 +90,7 @@
   margin-bottom: 1.5rem;
   border-bottom: 2px solid $grey-background-color;
   background-color: white;
-  padding: 2.5rem;
+  padding: 1.7rem 2rem;
   box-shadow: 0 6px 12px 0 rgba(129, 128, 128, 0.1);
   border-radius: 8px;
 
@@ -103,7 +104,6 @@
     box-shadow: 0 6px 12px 0 rgba(129, 128, 128, 0.1);
     border-radius: 8px;
     align-self: flex-start;
-    padding: 2.5rem;
     margin-left: 1rem;
   }
 }
@@ -140,6 +140,7 @@
 .resource-static-files {
   border-bottom: 1px solid #f2f2f2;
 }
+
 .resource-downloadable-files:last-of-type .resource-download-item-wrapper:last-of-type,
 .resource-static-files:last-of-type {
   border-bottom: none;