btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

refactor: remove footer on narrow screens (#2202)

Browse Source 
Co-authored-by: Liyas Thomas <liyascthomas@gmail.com>
This commit is contained in:
Joel Jacob Stephen
2022-03-29 12:25:54 +05:30
committed by GitHub
parent 414469e5e9
commit 89c7127b17
5 changed files with 274 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
packages/hoppscotch-app/layouts/default.vue
View File

@@ -43,7 +43,6 @@
class="hide-scrollbar !overflow-auto flex flex-col fixed inset-x-0 bottom-0 z-10"
>
<AppSidenav />
<AppFooter />
</Pane>
</Splitpanes>
</div>
@@ -119,11 +118,22 @@ function updateThemes() {
const themeColor = useSetting("THEME_COLOR")
const bgColor = useSetting("BG_COLOR")
const fontSize = useSetting("FONT_SIZE")
const EXPAND_NAVIGATION = useSetting("EXPAND_NAVIGATION")
const spacerClass = computed(() => {
if (fontSize.value === "small") return "spacer-small"
if (fontSize.value === "large") return "spacer-large"
return "spacer-medium"
if (fontSize.value === "small" && EXPAND_NAVIGATION.value)
return "spacer-small"
if (fontSize.value === "medium" && EXPAND_NAVIGATION.value)
return "spacer-medium"
if (fontSize.value === "large" && EXPAND_NAVIGATION.value)
return "spacer-large"
if (
(fontSize.value === "small" ||
fontSize.value === "medium" ||
fontSize.value === "large") &&
!EXPAND_NAVIGATION.value
)
return "spacer-expand"
})
// Initially apply
@@ -262,28 +272,36 @@ export default defineComponent({
<style scoped>
.spacer-small {
margin-bottom: 6.1rem;
margin-bottom: 4.2rem;
}
.spacer-medium {
margin-bottom: 6.9rem;
margin-bottom: 4.8rem;
}
.spacer-large {
margin-bottom: 7.8rem;
margin-bottom: 5.5rem;
}
.spacer-expand {
margin-bottom: 2.9rem;
}
@media screen and (min-width: 768px) {
.spacer-small {
margin-bottom: 0rem;
margin-bottom: 0;
}
.spacer-medium {
margin-bottom: 0rem;
margin-bottom: 0;
}
.spacer-large {
margin-bottom: 0rem;
margin-bottom: 0;
}
.spacer-expand {
margin-bottom: 0;
}
}
</style>