refactor: Make settings panel floating (#105)

* refactor: Make settings panel rounded and floating

* refactor: Remove superflous transition from settings panel

* refactor: Update settings panel slide animation

assets/transitions/slidein.scss

@@ -1,9 +1,12 @@
 .transition-slidein-enter-active,
 .transition-slidein-leave-active {
-  transition: transform 200ms ease-out;
+  @apply transform-gpu transition duration-500 ease-in;
+
+  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
 }
 
 .transition-slidein-enter,
 .transition-slidein-leave-to {
   transform: translateX(100%);
+  opacity: 0;
 }

components/settings/settingsPanel.vue

@@ -1,13 +1,13 @@
 <template>
-  <transition name="settings">
-    <section v-show="processedValue" class="settings-panel sm:w-full md:w-1/2 lg:w-2/5">
+  <section v-show="processedValue" class="settings-panel sm:w-full md:w-1/2 lg:w-2/5">
+    <div class="settings-wrapper">
+      <h1 class="title">
+        <span>{{ $i18n.t('settings.heading') }}</span>
+        <ui-button subtle class="float-right -mt-2 -mr-2" @click="processedValue = false">
+          <close-icon :title="$i18n.t('settings.buttons.close')" />
+        </ui-button>
+      </h1>
       <div class="settings-panel-main">
-        <h1 class="title">
-          <span>{{ $i18n.t('settings.heading') }}</span>
-          <ui-button subtle class="float-right -mt-2 -mr-2" @click="processedValue = false">
-            <close-icon :title="$i18n.t('settings.buttons.close')" />
-          </ui-button>
-        </h1>
         <div class="w-full">
           <transition tag="div" name="tab-transition" mode="out-in" class="overflow-hidden w-full relative">
             <div v-if="activeTab === 1" :key="1" class="settings-tab">
@@ -103,8 +103,8 @@
           <span>{{ $i18n.t('settings.tabs.display') }}</span>
         </div>
       </div>
-    </section>
-  </transition>
+    </div>
+  </section>
 </template>
 
 <script>
@@ -212,21 +212,25 @@ section.settings-panel {
 
 <style lang="scss" scoped>
 section.settings-panel {
-  @apply bg-white h-full fixed shadow w-2/5 flex flex-col;
-  @apply dark:bg-gray-900 dark:text-gray-50;
+  @apply h-full fixed w-2/5 p-0 md:p-4;
 
   z-index: 1001;
   min-width: calc(min(600px, 100%));
-}
 
-div.settings-panel-main {
-  @apply px-4 flex-grow overflow-y-auto;
+  div.settings-wrapper {
+    @apply flex flex-col h-full rounded-none md:rounded-lg overflow-hidden shadow-lg;
+    @apply bg-white dark:bg-gray-900 dark:text-gray-50;
 
-  & > .title {
-    @apply text-xl mt-4 mb-3 uppercase font-bold;
+    div.settings-panel-main {
+      @apply px-4 flex-grow overflow-y-auto pb-2;
+    }
   }
 }
 
+.title {
+  @apply px-4 text-xl mt-4 mb-3 uppercase font-bold;
+}
+
 div.settings-panel-menubar {
   @apply flex-none h-12 flex flex-row;
 }