added screen adaptation for forms

dl-solarity · Oct 6, 2023 · 8f6aad0 · 8f6aad0
1 parent 3edde04
commit 8f6aad0
Show file tree

Hide file tree

Showing 13 changed files with 146 additions and 96 deletions.
diff --git a/assets/styles/_global.scss b/assets/styles/_global.scss
@@ -161,7 +161,6 @@ h3 {
 .block {
   display: flex;
   flex-direction: column;
-  min-height: toRem(400);
   width: 100%;
   border-radius: var(--border-radius-main);
   background: var(--background-primary-main);
@@ -174,16 +173,6 @@ h3 {
   flex-direction: column;
 
   @include respond-to(medium) {
-    padding: toRem(24) toRem(16) toRem(16) toRem(24);
-  }
-}
-
-.form-input,
-.form-output {
-  display: grid;
-  grid-gap: toRem(20);
-
-  @include respond-to(medium) {
-    grid-gap: toRem(24) toRem(16);
+    padding: toRem(24) toRem(16) toRem(24) toRem(16);
   }
 }
diff --git a/assets/styles/_mixins.scss b/assets/styles/_mixins.scss
@@ -139,6 +139,29 @@ $media-breakpoints: (
   }
 }
 
+@mixin solidity-tools-form {
+  display: grid;
+  grid-gap: toRem(40);
+
+  @include respond-to(medium) {
+    grid-gap: toRem(24);
+  }
+}
+
+@mixin solidity-tools-form-part {
+  display: grid;
+  grid-gap: toRem(20);
+
+  @include respond-to(medium) {
+    grid-gap: toRem(16) toRem(24);
+  }
+}
+
+@mixin solidity-tools-form-divider {
+  height: toRem(1);
+  background: var(--border-primary-main);
+}
+
 @mixin page-msg {
   max-width: toRem(420);
   width: 100%;

diff --git a/components/ToolsSidebar.vue b/components/ToolsSidebar.vue
@@ -9,7 +9,7 @@
       <aside class="tools-sidebar__aside">
         <app-logo class="tools-sidebar__logo" />
 
-        <nav>
+        <nav class="tools-sidebar__nav">
           <ul class="tools-sidebar__nav-links-list">
             <li v-for="navLink in navLinks" :key="navLink.title">
               <app-button
@@ -121,7 +121,8 @@ $aside-max-width: toRem(280);
   width: 100%;
   height: $aside-height;
   max-width: $aside-max-width;
-  padding: toRem(24) var(--app-padding-right) toRem(24) var(--app-padding-left);
+  padding: 0 var(--app-padding-right) var(--app-padding-bottom)
+    var(--app-padding-left);
   background: var(--background-primary-main);
 
   @include respond-to(xsmall) {
@@ -130,11 +131,21 @@ $aside-max-width: toRem(280);
 }
 
 .tools-sidebar .tools-sidebar__logo {
+  height: var(--app-height-header);
+
   @include respond-to(medium) {
     display: none;
   }
 }
 
+.tools-sidebar__nav {
+  margin-top: toRem(48);
+
+  @include respond-to(medium) {
+    margin-top: toRem(76);
+  }
+}
+
 .tools-sidebar__nav-links-list {
   display: flex;
   flex-direction: column;
@@ -147,20 +158,13 @@ $aside-max-width: toRem(280);
   transition: none;
 }
 
-.tools-sidebar .tools-sidebar__close-button {
-  display: none;
-
-  @include respond-to(xsmall) {
-    display: grid;
-  }
-}
-
 .tools-sidebar__transition-enter-active {
-  animation: fade-unroll-right 0.2s ease-in-out;
+  animation: fade-unroll-right var(--field-transition-duration) ease-in-out;
 }
 
 .tools-sidebar__transition-leave-active {
-  animation: fade-unroll-right 0.2s ease-in-out reverse;
+  animation: fade-unroll-right var(--field-transition-duration) ease-in-out
+    reverse;
 }
 
 @keyframes fade-unroll-right {

diff --git a/forms/AbiDecodeForm.vue b/forms/AbiDecodeForm.vue
@@ -8,10 +8,12 @@
         <div class="abi-decode-form__options-wrp">
           <checkbox-field
             v-model="form.hasFuncSelector"
+            class="abi-decode-form__checkbox-field"
             :label="$t('abi-decode-form.has-func-selector-label')"
           />
           <radio-button-field
             v-model="form.decodeMode"
+            class="abi-decode-form__radio-button-field"
             :options="decodeModeOptions"
           />
         </div>
@@ -59,7 +61,7 @@
               {{ warningMessage }}
             </p>
           </div>
-          <div class="abi-decode-form__args_wrp">
+          <div v-if="funcArgs.length" class="abi-decode-form__args_wrp">
             <div
               v-for="funcArg in funcArgs"
               :key="funcArg.id"
@@ -400,18 +402,21 @@ watch(() => form, onFormChange, { deep: true })
 <style lang="scss" scoped>
 .abi-decode-form {
   display: grid;
-  gap: toRem(32);
+  grid-gap: toRem(32);
+
+  @include respond-to(medium) {
+    grid-gap: toRem(24);
+  }
 }
 
 .abi-decode-form__output,
 .abi-decode-form__input {
-  display: grid;
-  gap: toRem(20);
+  @include solidity-tools-form-part;
 }
 
 .abi-decode-form__title-wrp {
   display: flex;
-  align-items: center;
+  align-items: baseline;
   gap: inherit;
   flex-wrap: wrap;
 }
@@ -425,25 +430,33 @@ watch(() => form, onFormChange, { deep: true })
   display: flex;
   align-items: center;
   gap: toRem(8);
-  flex-wrap: wrap;
-}
 
-.abi-decode-form__args_wrp {
-  display: grid;
-  grid-gap: toRem(16);
+  @include respond-to(small) {
+    flex-direction: column;
+    width: 100%;
+  }
+}
 
+.abi-decode-form .abi-decode-form__checkbox-field,
+.abi-decode-form .abi-decode-form__radio-button-field {
   @include respond-to(small) {
-    grid-gap: toRem(48);
+    width: 100%;
   }
 }
 
+.abi-decode-form__args_wrp {
+  display: grid;
+  grid-gap: inherit;
+}
+
 .abi-decode-form__arg {
   display: grid;
+  grid-template-columns: minmax(toRem(150), 20%) 1fr;
   grid-gap: toRem(16);
-  grid-template-columns: minmax(toRem(140), 20%) 1fr;
 
   @include respond-to(small) {
     grid-template-columns: auto;
+    grid-gap: toRem(8);
   }
 }
 

diff --git a/forms/AbiEncodeForm.vue b/forms/AbiEncodeForm.vue
@@ -227,31 +227,31 @@ abiEncoding.value = encodeAbi([], [])
 <style lang="scss" scoped>
 .abi-encode-form {
   display: grid;
-  gap: toRem(40);
+  grid-gap: toRem(32);
+
+  @include respond-to(medium) {
+    grid-gap: toRem(24);
+  }
 }
 
 .abi-encode-form__output,
 .abi-encode-form__input {
-  display: grid;
-  gap: toRem(20);
+  @include solidity-tools-form-part;
 }
 
 .abi-encode-form__args_wrp {
   display: grid;
-  grid-gap: toRem(16);
-
-  @include respond-to(small) {
-    grid-gap: toRem(48);
-  }
+  grid-gap: inherit;
 }
 
 .abi-encode-form__arg {
   display: grid;
+  grid-template-columns: minmax(toRem(150), 20%) 1fr;
   grid-gap: toRem(16);
-  grid-template-columns: minmax(toRem(140), 20%) 1fr;
 
   @include respond-to(small) {
     grid-template-columns: auto;
+    grid-gap: toRem(8);
   }
 }
 

diff --git a/forms/Create2AddressForm.vue b/forms/Create2AddressForm.vue
@@ -24,6 +24,7 @@
         />
       </div>
     </div>
+    <div class="create2-address-form__divider" />
     <div class="create2-address-form__output">
       <h3>{{ $t('create2-address-form.output-title') }}</h3>
       <div>
@@ -91,19 +92,16 @@ watch(form, () => {
 
 <style lang="scss" scoped>
 .create2-address-form {
-  display: grid;
-  gap: toRem(40);
+  @include solidity-tools-form;
 }
 
 .create2-address-form__output,
 .create2-address-form__input {
-  display: grid;
-  gap: toRem(20);
+  @include solidity-tools-form-part;
 }
 
-.create2-address-form__input {
-  padding-bottom: toRem(40);
-  border-bottom: toRem(1) solid var(--border-primary-main);
+.create2-address-form__divider {
+  @include solidity-tools-form-divider;
 }
 
 .create2-address-form__input-fields {

diff --git a/forms/CreateAddressForm.vue b/forms/CreateAddressForm.vue
@@ -19,6 +19,7 @@
         />
       </div>
     </div>
+    <div class="create-address-form__divider" />
     <div class="create-address-form__output">
       <h3>{{ $t('create-address-form.output-title') }}</h3>
       <div>
@@ -76,19 +77,16 @@ watch(form, () => {
 
 <style lang="scss" scoped>
 .create-address-form {
-  display: grid;
-  gap: toRem(40);
+  @include solidity-tools-form;
 }
 
 .create-address-form__output,
 .create-address-form__input {
-  display: grid;
-  gap: toRem(20);
+  @include solidity-tools-form-part;
 }
 
-.create-address-form__input {
-  padding-bottom: toRem(40);
-  border-bottom: toRem(1) solid var(--border-primary-main);
+.create-address-form__divider {
+  @include solidity-tools-form-divider;
 }
 
 .create-address-form__input-fields {

diff --git a/forms/DateForm.vue b/forms/DateForm.vue
@@ -19,6 +19,7 @@
         @update:model-value="onUpdateDatetimeFieldTimestamp"
       />
     </div>
+    <div class="date-form__divider" />
     <div class="date-form__output">
       <h3>{{ $t('date-form.output-title') }}</h3>
       <div v-for="(item, idx) in outputItems" :key="idx">
@@ -153,19 +154,16 @@ const outputItems = computed(() => [
 
 <style lang="scss" scoped>
 .date-form {
-  display: grid;
-  gap: toRem(40);
+  @include solidity-tools-form;
 }
 
 .date-form__output,
 .date-form__input {
-  display: grid;
-  gap: toRem(20);
+  @include solidity-tools-form-part;
 }
 
-.date-form__input {
-  padding-bottom: toRem(40);
-  border-bottom: toRem(1) solid var(--border-primary-main);
+.date-form__divider {
+  @include solidity-tools-form-divider;
 }
 
 .date-form__input-fields {