feat: mobile

adobe · Sep 24, 2024 · d287f08 · d287f08
1 parent f2d37d5
commit d287f08
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 32 deletions.
diff --git a/tools/rum/elements/daterange-picker.js b/tools/rum/elements/daterange-picker.js
@@ -27,6 +27,7 @@ const STYLES = `
     display: grid;
     align-items: end;
     gap: var(--spacing-l);
+    font-size: var(--type-body-s-size);
   }
 
   .input-wrapper, .daterange-wrapper {
@@ -44,7 +45,6 @@ const STYLES = `
     cursor: pointer;
     transition: border-color 0.2s, background-color 0.2s;
     border-radius: 4px;
-    min-width: 200px;
   }
 
   input ~ ul li {
@@ -70,7 +70,6 @@ const STYLES = `
 
   .input-wrapper {
     display: none;
-    min-width: 500px;
     background-color: white;
   }
 
@@ -108,6 +107,15 @@ const STYLES = `
     display: none;
   }
 
+  .date-field {
+    display: block;
+    margin-top: 0;
+  }
+
+  .date-field label {
+    display: block;
+  }
+
   @media (width >= 740px) {
     .input-wrapper {
       grid-template-columns: repeat(2, 1fr);
@@ -119,9 +127,25 @@ const STYLES = `
   }
 
   @media (width >= 900px) {
+    .daterange-wrapper {
+      font-size: var(--type-body-l-size);
+    }
+
+    input {
+      min-width: 200px;
+    }
+
+    .input-wrapper {
+      min-width: 500px;
+    }
+
     input[data-custom='true'] ~ .input-wrapper {
       grid-template-columns: minmax(0, 1fr);
     }
+
+    .date-field label {
+      margin-bottom: 0.5em;
+    }
   }
 
   @media (width >= 1200px) {
@@ -130,16 +154,6 @@ const STYLES = `
       position: absolute;
     }
   }
-
- .date-field {
-    display: block;
-    margin-top: 0;
-  }
-
-  .date-field label {
-    display: block;
-    margin-bottom: 0.5em;
-  }
 `;
 
 const TEMPLATE = `
@@ -189,6 +203,7 @@ export default class TimeRangePicker extends HTMLElement {
     const section = document.createRange().createContextualFragment(TEMPLATE);
 
     const sul = section.querySelector('ul');
+    const ul = this.querySelector('ul');
     const options = this.querySelectorAll('ul li');
 
     options.forEach((option) => {
@@ -199,6 +214,8 @@ export default class TimeRangePicker extends HTMLElement {
       sul.appendChild(option);
     });
 
+    ul.remove();
+
     this.shadowRoot.innerHTML = '';
 
     this.shadowRoot.appendChild(style);

diff --git a/tools/rum/explorer.html b/tools/rum/explorer.html
@@ -48,17 +48,15 @@
           <div class="output">
             <div class="title">
               <url-selector>www.aem.live</url-selector>
-              <div>
-                <daterange-picker id="view">
-                  <ul hidden>
-                    <li data-value="week">Last week</li>
-                    <li data-value="month" aria-selected="true">Last month</li>
-                    <li data-value="year">Last year</li>
-                    <li data-value="custom">Custom</li>
-                  </ul>
-                </daterange-picker>                
-                <incognito-checkbox></incognito-checkbox>
-              </div>
+              <daterange-picker id="view">
+                <ul hidden>
+                  <li data-value="week">Last week</li>
+                  <li data-value="month" aria-selected="true">Last month</li>
+                  <li data-value="year">Last year</li>
+                  <li data-value="custom">Custom</li>
+                </ul>
+              </daterange-picker>
+              <incognito-checkbox></incognito-checkbox>
             </div>
             <div class="key-metrics">
               <ul>

diff --git a/tools/rum/rum-slicer.css b/tools/rum/rum-slicer.css
@@ -67,9 +67,12 @@ main li.score-poor, vitals-facet div[data-value^="poor"] label {
   background-color: var(--light-red);
 }
 
-/* heading */
-main .title div {
+main .title {
+  padding-top: 8px;
   display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-flow: row wrap;
   gap: 1ch;
 }
 
@@ -83,6 +86,15 @@ main .title select {
   font: inherit;
 }
 
+main .title > * {
+  flex: 2 0px;
+}
+
+main .title daterange-picker {
+  flex: 1 100%;
+  order: 3;
+}
+
 main .title incognito-checkbox {
   display: none;
   margin-bottom: 10px;
@@ -93,13 +105,6 @@ main .title incognito-checkbox[mode="incognito"] {
   display: inline-block;
 }
 
-main .title {
-  padding-top: 8px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
 main .title url-selector {
   margin-top: 8px;
   margin-bottom: 8px;
@@ -108,6 +113,7 @@ main .title url-selector {
   display: flex;
   align-items: center;
   width: 100%;
+  flex-grow: 50;
 }
 
 main .title url-selector img {
@@ -822,6 +828,19 @@ facet-sidebar[aria-disabled="true"] div.quick-filter {
 }
 
 @media (min-width: 900px) {
+  main .title {
+    flex-wrap: nowrap;
+  }
+
+  main .title > * {
+    flex: 3 0;
+  }
+
+  main .title daterange-picker {
+    flex: unset;
+    order: unset;
+  }
+
   main .title url-selector input {
     font-size: var(--type-heading-xl-size);
   }