@appscode/design-system 2.0.23-alpha.1 → 2.0.23-alpha.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appscode/design-system",
-  "version": "2.0.23-alpha.1",
+  "version": "2.0.23-alpha.3",
   "description": "A design system for Appscode websites and dashboards made using Bulma",
   "main": "main.scss",
   "scripts": {

package/vue-components/styles/components/editor/_filtered-file-editor.scss

@@ -23,7 +23,7 @@
 // }
 
 .ac-preview {
-  padding-inline: 20px;
+  // padding-inline: 20px;
   // position: fixed;
   // width: calc(100% - 90px);
   // height: 100%;

package/vue-components/styles/components/ui-builder/_ui-builder.scss

@@ -144,6 +144,17 @@
   }
 }
 
+.footer-bottom-fixed {
+  position: fixed!important;
+  bottom: 8px!important;
+  width: calc(100% - 280px);
+  border-top: 1px solid $primary-90;
+  padding-top: 8px;
+  margin-left: -20px;
+  margin-right: -20px;
+  padding-inline: 20px;
+}
+
 // nested elements end
 
 // .table-wrapper {

package/vue-components/v3/editor/FilteredFileEditor.vue

@@ -124,15 +124,12 @@ watch(
 </script>
 
 <template>
-  <div class="ac-preview is-not-fixed pl-20 pr-20">
+  <div class="ac-preview is-not-fixed">
     <div class="ac-preview-inner">
       <!-- preview body start  -->
-      <div
-        class="ac-preview-body mt-0"
-        :class="{
-          'is-justify-content-center': isYamlsEmpty && !isPreviewLoading,
-        }"
-      >
+      <div class="ac-preview-body mt-0" :class="{
+        'is-justify-content-center': isYamlsEmpty && !isPreviewLoading,
+      }">
         <strong v-if="isYamlsEmpty && !isPreviewLoading">
           No Data Available
           <i class="pl-5 fa fa-exclamation-circle" aria-hidden="true"></i>
@@ -141,19 +138,12 @@ watch(
           <div v-if="!isPreviewLoading && previewYamls" class="left-content">
             <div class="ac-files ac-hscrollbar ac-vscrollbar pt-0">
               <ul v-if="!isPreviewLoading">
-                <li
-                  v-for="(previewYaml, idx) in filteredYamls"
-                  :key="previewYaml.name + idx"
-                  :class="{ 'is-active': activeKey === previewYaml.uid }"
-                  :title="previewYaml.name"
-                  data-testid="filtered-file-editor-file-name"
-                >
+                <li v-for="(previewYaml, idx) in filteredYamls" :key="previewYaml.name + idx"
+                  :class="{ 'is-active': activeKey === previewYaml.uid }" :title="previewYaml.name"
+                  data-testid="filtered-file-editor-file-name">
                   <a @click.prevent="setActivePreview(previewYaml.uid)">
                     <span>
-                      <img
-                        src="~@appscode/design-system-images/icons/file-icon.svg"
-                        alt=""
-                      />
+                      <img src="~@appscode/design-system-images/icons/file-icon.svg" alt="" />
                     </span>
                     <span>{{ previewYaml.name }}</span>
                   </a>
@@ -164,20 +154,11 @@ watch(
           </div>
           <div class="right-content" data-testid="filtered-file-editor-content">
             <resource-loader v-if="isPreviewLoading" />
-            <strong v-else-if="isYamlsNotSelected"
-              >Selecet a data from sidebar</strong
-            >
+            <strong v-else-if="isYamlsNotSelected">Selecet a data from sidebar</strong>
             <strong v-else-if="hideValue"> *************** </strong>
-            <editor
-              v-else
-              v-model="activeFile.content"
-              :original-value="originalValue"
-              :language="activeFile.type"
-              :read-only="isEditorReadOnly"
-              :editor-height="editorHeight"
-              :show-minimap="showMinimap"
-              :word-wrap="wordWrap"
-            />
+            <editor v-else v-model="activeFile.content" :original-value="originalValue" :language="activeFile.type"
+              :read-only="isEditorReadOnly" :editor-height="editorHeight" :show-minimap="showMinimap"
+              :word-wrap="wordWrap" />
           </div>
         </template>
       </div>