ui fixes

robotframework · Apr 24, 2024 · 24d6511 · 24d6511
1 parent c9529e2
commit 24d6511
Show file tree

Hide file tree

Showing 14 changed files with 115 additions and 65 deletions.
diff --git a/public/index.html b/public/index.html
@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <title>Robot Framework</title>
     <meta name=description content="Generic open source automation framework for acceptance testing, acceptance test driven development (ATDD), and robotic process automation (RPA).">
-    <meta name="theme-color" content="#00c0b5">
+    <meta name="theme-color" content="#000000">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <script defer data-domain="robotframework.org" src="https://plausible.io/js/plausible.outbound-links.js"></script>
     <script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>

diff --git a/src/assets/css/elements.css b/src/assets/css/elements.css
@@ -148,4 +148,5 @@ button.bling {
 hr.theme {
     border: solid 2px var(--color-theme);
     border-radius: 4px;
+    margin: 0;
 }
diff --git a/src/assets/css/margins.css b/src/assets/css/margins.css
@@ -227,6 +227,10 @@
     margin-left: var(--size-medium);
     margin-right: var(--size-medium);
 }
+.mx-negative-medium {
+    margin-left: calc(var(--size-medium) * -1);
+    margin-right: calc(var(--size-medium) * -1);
+}
 
 .mx-large {
     margin-left: var(--size-large);

diff --git a/src/assets/css/text.css b/src/assets/css/text.css
@@ -55,7 +55,7 @@ h2 {
     font-size: var(--type-xlarge);
     color: var(--color-theme);
     font-weight: var(--weight-bold);
-    margin-bottom: var(--size-medium);
+    margin-bottom: var(--size-small);
     line-height: var(--line-height-h2);
     text-transform: uppercase;
 }

diff --git a/src/components/Banner.vue b/src/components/Banner.vue
@@ -5,7 +5,7 @@
       <div>FRAME</div>
       <div class="flex">
         WORK
-        <robot-icon size="4.6rem" color="black" style="transform: translate(0.5rem, 1rem);" />
+        <robot-icon class="icon" color="black" style="transform: translate(0.5rem, 1rem);" />
       </div>
     </h1>
   </div>
@@ -40,6 +40,15 @@ export default {
       flex-wrap: wrap;
       font-size: 20vw;
       padding: 14.25vw;
+      transform: translateX(-1.75vw);
+    }
+  }
+  .icon {
+    width: 4.6rem;
+    height: 4.6rem;
+    @media screen and (max-width: 769px) {
+      width: 16.5vw;
+      height: 16.5vw;
     }
   }
 </style>
diff --git a/src/components/Calendar.vue b/src/components/Calendar.vue
@@ -3,8 +3,8 @@
     class="inner-calendar-container card bg-secondary"
     :class="expanded ? 'expanded' : 'minified'"
     ref="container">
-    <div class="flex between px-medium py-xsmall">
-      <h2 class="type-xlarge color-text mb-none">
+    <div class="flex between p-medium">
+      <h2 class="type-large color-text mb-none">
         Events
       </h2>
       <button class="flex middle" @click="filtersOpen = !filtersOpen">
@@ -88,7 +88,7 @@
         </details>
       </article>
     </template>
-    <button v-if="!expanded" class="expand color-text" @click="expand()">
+    <button v-if="!expanded" class="expand color-text" @click="expand($event.target.parentElement)">
       Expand
     </button>
   </div>
@@ -176,10 +176,11 @@ export default {
         return scrollHeight > clientHeight || scrollWidth > clientWidth
       })
     },
-    expand() {
+    expand(target) {
       if (!this.expanded) {
         setTimeout(() => {
-          this.$refs.container.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
+          const bottomVisible = (window.innerHeight - target.getBoundingClientRect().bottom) > 30
+          if (!bottomVisible) this.$refs.container.scrollIntoView({ behavior: 'smooth', block: 'end' })
         }, 1)
       }
       this.expanded = true
@@ -218,6 +219,16 @@ export default {
       height: 80vh;
     }
   }
+  .inner-calendar-container:not(.expanded)::after {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    content: '';
+    pointer-events: none;
+    background: linear-gradient(transparent 80%, #1a1a1a 100%);
+  }
 
   .title {
     display: block;
@@ -267,6 +278,13 @@ export default {
     background-color: color-mix(in srgb, var(--color-bg) 70%, transparent);
     font-size: 1.25rem;
     backdrop-filter: blur(2px);
+    z-index: 2;
+  }
+  details > summary {
+    list-style: none;
+  }
+  details > summary::-webkit-details-marker {
+    display: none;
   }
   summary {
     display: block;

diff --git a/src/components/NavMobile.vue b/src/components/NavMobile.vue
@@ -1,36 +1,55 @@
 <template>
+  <div
+    class="navbar row between bg-black color-white px-medium py-xsmall"
+    :class="isOpen ? 'open' : ''">
+    <div class="flex middle">
+      <robot-icon size="2rem" @click="scrollTo(null, 400)" />
+      <div class="font-title ml-xsmall">
+        ROBOT FRAMEWORK
+      </div>
+    </div>
+    <button
+      class="hamburger"
+      :class="isOpen ? 'open' : ''"
+      @click="isOpen = !isOpen; docsOpen = false;">
+      <span></span>
+      <span></span>
+      <span></span>
+      <span></span>
+    </button>
+  </div>
   <transition name="fade">
     <div
       v-if="isOpen"
-      class="menu bg-black pt-xlarge pb-large pr-small" style="padding-left: 3.75rem">
+      class="menu bg-black pt-xlarge pb-large pr-small" style="padding-left: 4.25rem">
       <transition :name="docsOpen ? 'fade-left' : 'fade-right'" mode="out-in">
         <div v-if="!docsOpen" key="1" class="mt-small">
           <div
             v-for="item in $tm('navbar.items')"
             :key="item.name">
             <button
               :name="`go-to-${item.name}`"
-              class="mb-small mt-xsmall color-white font-title type-uppercase"
+              class="mb-xsmall mt-xsmall color-white font-title type-uppercase"
               @click="scrollTo(item.id, 400); isOpen = false">
               {{ item.name }}
             </button>
           </div>
           <div>
             <button
-              class="flex middle mt-medium color-white font-title type-uppercase"
+              class="flex middle mt-large mb-small color-theme font-title type-uppercase type-large"
               style="margin-left: -0.5rem"
               @click="docsOpen = true">
-              <chevron-icon direction="right" color="white" size="2rem" />
+              <chevron-icon direction="right" color="theme" size="1.5rem" />
               <div>
-                {{ $t('navbar.dropdownDocs.name') }}
+                DOCS
               </div>
             </button>
           </div>
         </div>
         <div v-else key="3" class="mt-medium">
-          <button class="type-uppercase font-title flex middle mb-medium" style="margin-left: -0.5rem" @click="docsOpen = false">
-            <chevron-icon direction="left" color="white" size="2rem" />
-            {{ $t('navbar.dropdownDocs.name') }}
+          <button class="type-uppercase font-title color-theme type-large flex middle mb-medium" style="margin-left: -0.5rem" @click="docsOpen = false">
+            <chevron-icon direction="left" color="theme" size="1.5rem" />
+            DOCS
           </button>
           <div
             v-for="({ name, url, description }, i) in $tm('navbar.dropdownDocs.items')"
@@ -48,25 +67,6 @@
       </transition>
     </div>
   </transition>
-  <div
-    class="navbar row between bg-black color-white"
-    :class="isOpen ? 'open' : ''">
-    <div class="flex middle">
-      <robot-icon size="2rem" class="ml-small" @click="scrollTo(null, 400)" />
-      <div class="font-title ml-xsmall">
-        ROBOT FRAMEWORK
-      </div>
-    </div>
-    <button
-      class="hamburger"
-      :class="isOpen ? 'open' : ''"
-      @click="isOpen = !isOpen; docsOpen = false;">
-      <span></span>
-      <span></span>
-      <span></span>
-      <span></span>
-    </button>
-  </div>
   <transition name="opacity">
     <div
       v-if="isOpen"
@@ -150,7 +150,7 @@ export default {
 }
 
 .hamburger {
-  margin: 1rem;
+  margin: 0.5rem;
   width: 2rem;
   height: 1.5rem;
   position: relative;

diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
@@ -44,14 +44,13 @@
         <transition name="fade">
           <div
             v-if="docsDropdownOpen"
-            class="dropdown-container bg-black color-white p-large card">
+            class="dropdown-container bg-black color-white p-large pt-xsmall card">
             <div
-              v-for="({ name, url, description, large }, i) in $tm('navbar.dropdownDocs.items')"
+              v-for="({ name, url, description }, i) in $tm('navbar.dropdownDocs.items')"
               :key="name"
-              :class="large ? 'border-bottom-white border-thin pb-small mb-small' : 'mt-medium'">
+              class="mt-medium">
               <a :href="url"
                 class="type-no-underline"
-                :class="large ? 'type-xlarge' : ''"
                 @click="linkClick(name)">
                 {{ name }}
               </a>

diff --git a/src/components/News.vue b/src/components/News.vue
@@ -4,8 +4,8 @@
     :class="expanded ? 'expanded' : ''"
     :style="{opacity: news.length === 0 ? 0.5 : 1}"
     ref="container">
-    <div class="flex between px-medium py-xsmall">
-      <h2 class="type-xlarge color-text mb-none">
+    <div class="flex between p-medium">
+      <h2 class="type-large color-text mb-none">
         News
       </h2>
       <a href="https://seu2.cleverreach.com/f/362604-365504/" class="newsletter">
@@ -33,7 +33,7 @@
         </div>
       </article>
     </template>
-    <button v-if="!expanded" class="expand color-text" @click="expand()">
+    <button v-if="!expanded" class="expand color-text" @click="expand($event.target.parentElement)">
       Expand
     </button>
   </div>
@@ -68,10 +68,11 @@ export default {
         }
       })
     },
-    expand() {
+    expand(target) {
       this.expanded = true
       setTimeout(() => {
-        this.$refs.container.scrollIntoView({ behavior: 'smooth', block: 'center' })
+        const bottomVisible = (window.innerHeight - target?.getBoundingClientRect()?.bottom) > 30
+        if (!bottomVisible) this.$refs.container.scrollIntoView({ behavior: 'smooth', block: 'end' })
       }, 1)
     }
   }
@@ -90,6 +91,16 @@ export default {
       height: 80vh;
     }
   }
+  .inner-news-container:not(.expanded)::after {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    content: '';
+    pointer-events: none;
+    background: linear-gradient(transparent 80%, #1a1a1a 100%);
+  }
   img.main {
     width: 100%;
     border-radius: 0.25rem;
@@ -100,8 +111,8 @@ export default {
     width: 100%;
     text-align: center;
     padding-block: 0.75rem;
-    background-color: color-mix(in srgb, var(--color-bg) 70%, transparent);
     font-size: 1.25rem;
     backdrop-filter: blur(2px);
+    z-index: 2;
   }
 </style>
diff --git a/src/components/PageSection.vue b/src/components/PageSection.vue
@@ -45,21 +45,26 @@ export default {
     visibility: hidden;
     pointer-events: none;
   }
-  .body {
-    margin-bottom: 2rem;
-  }
   @media screen and (max-width: 1024px) {
+    .section-container {
+      margin-top: 2rem;
+      margin-bottom: 4rem;
+    }
     h2::before {
       margin-top: -30px;
       height: 30px;
     }
-    .section-container {
-      padding: 1rem;
+    h2 {
+      padding-inline: 1.5rem;
     }
   }
   @media screen and (min-width: 1025px) {
+    .section-container {
+      margin-top: 1rem;
+      margin-bottom: 4rem;
+    }
     .title {
-      padding-left: 0.5rem;
+      padding-left: 1rem;
     }
     .body {
       padding-right: 1rem;

diff --git a/src/components/ResourceBox.vue b/src/components/ResourceBox.vue
@@ -2,7 +2,7 @@
   <div>
     <div
       class="bg-grey-dark color-white card"
-      :class="$store.state.isMobile ? 'p-small pt-medium sharp' : 'p-large'">
+      :class="$store.state.isMobile ? 'p-medium pt-medium sharp' : 'p-large'">
       <div class="row">
         <button
           v-for="({ name, key }, i) in $tm('resources.tabs')"

diff --git a/src/components/TabBox.vue b/src/components/TabBox.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     class="bg-grey-dark card"
-    :class="$store.state.isMobile ? 'p-small pt-medium sharp' : 'p-large'">
+    :class="$store.state.isMobile ? 'p-medium pt-medium sharp' : 'p-large'">
     <!-- tab buttons -->
     <div class="row">
       <button

diff --git a/src/content/english/main.js b/src/content/english/main.js
@@ -53,7 +53,7 @@ export default () => ({
         {
           name: 'Public API',
           url: 'https://robot-framework.readthedocs.io/en/stable/',
-          description: 'Extending the framework'
+          description: 'Write extensions'
         }
       ]
     }