tcsenpai/swingmusic
1
0
Fork 0
mirror of https://github.com/tcsenpai/swingmusic.git synced 2025-07-28 21:51:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

more padding + margin edits

Browse Source
This commit is contained in:
geoffrey45 2022-08-02 03:12:28 +03:00
parent 9e1f73e281
commit e45dd6c2b1
5 changed files with 18 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/assets/css/global.scss
View File

@ -72,13 +72,13 @@ a {
} }
input[type="search"] { input[type="search"] {
height: 2.25rem; height: 2.25rem !important;
} }
.l-container { .l-container {
display: grid; display: grid;
grid-template-columns: min-content 1fr min-content; grid-template-columns: min-content 1fr min-content;
grid-template-rows: 2.5rem 1fr 4rem; grid-template-rows: max-content 1fr max-content;
grid-template-areas: grid-template-areas:
"l-sidebar nav search-input" "l-sidebar nav search-input"
"l-sidebar content r-sidebar" "l-sidebar content r-sidebar"
@ -95,6 +95,7 @@ input[type="search"] {
#tabs { #tabs {
grid-area: tabs; grid-area: tabs;
height: 3.5rem; height: 3.5rem;
margin-top: -$small;
} }
#acontent { #acontent {

2
src/components/FolderView/FolderItem.vue
View File

@ -31,7 +31,7 @@ defineProps<{
grid-template-columns: max-content 1fr; grid-template-columns: max-content 1fr;
padding-right: 1rem; padding-right: 1rem;
align-items: center; align-items: center;
background-color: $gray4; background-color: $gray3;
transition: all 0.2s ease; transition: all 0.2s ease;
border-radius: 0.75rem; border-radius: 0.75rem;

7
src/components/FolderView/FolderList.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="f-container rounded"> <div class="f-container rounded">
<div id="f-items"> <div id="f-items" class="rounded">
<FolderItem <FolderItem
v-for="folder in folders" v-for="folder in folders"
:key="JSON.stringify(folder)" :key="JSON.stringify(folder)"
@ -24,9 +24,8 @@ defineProps<{
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
gap: $medium; gap: $medium;
border-bottom: 1px solid $gray3; padding: $small;
padding: 1rem 0;
padding-top: 0;
margin-bottom: 1rem; margin-bottom: 1rem;
background-color: $gray5;
} }
</style> </style>

12
src/components/RightSideBar/SearchInput.vue
View File

@ -7,7 +7,7 @@
class="rounded" class="rounded"
v-model="search.query" v-model="search.query"
placeholder="Search your library" placeholder="Search your library"
type="text" type="search"
@focus="focusThis()" @focus="focusThis()"
@blur="unfocusThis()" @blur="unfocusThis()"
/> />
@ -33,8 +33,9 @@ function unfocusThis() {
<style lang="scss"> <style lang="scss">
#gsearch-input { #gsearch-input {
display: flex; display: flex;
margin-bottom: $small; height: max-content;
// margin-bottom: $smaller;
@include tablet-landscape { @include tablet-landscape {
display: none; display: none;
} }
@ -44,11 +45,12 @@ function unfocusThis() {
border-radius: 0.4rem; border-radius: 0.4rem;
position: relative; position: relative;
display: flex; display: flex;
gap: $small; background-color: $red;
background-color: $gray4; background-color: $gray4;
.icon { .icon {
width: 2rem; width: 2.25rem;
aspect-ratio: 1;
background-image: url("../../assets/icons/search.svg"); background-image: url("../../assets/icons/search.svg");
background-size: 1.5rem; background-size: 1.5rem;
margin-left: $smaller; margin-left: $smaller;

4
src/components/nav/Search.vue
View File

@ -14,9 +14,13 @@
<style lang="scss"> <style lang="scss">
#nav-search { #nav-search {
// border: solid 1px $gray2;
form { form {
display: flex; display: flex;
gap: $small; gap: $small;
padding: 0;
margin: 0;
input[type="search"] { input[type="search"] {
background-color: $gray5; background-color: $gray5;