tcsenpai/swingmusic
1
0
Fork 0
mirror of https://github.com/tcsenpai/swingmusic.git synced 2025-06-08 12:15:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

use flex to arrange folder cards

Browse Source
This commit is contained in:
geoffrey45 2021-11-23 10:34:30 +03:00
parent 7584a8a8ea
commit cb1c466ed1
3 changed files with 31 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
jsconfig.json Normal file
View File

2
src/assets/css/global.css
View File

@ -54,7 +54,7 @@ a {
position: absolute; position: absolute;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
background-color: rgba(255, 0, 0, 0.274); background-color: rgba(27, 27, 27, 0.548);
background-image: url(../images/dark-bg.jpg); background-image: url(../images/dark-bg.jpg);
z-index: -1; z-index: -1;
} }

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

@ -1,12 +1,14 @@
<template> <template>
<div class="f-container"> <div class="f-container">
<h3>folders in this directory</h3> <p>folders in this directory</p>
<div id="f-items">
<router-link :to="{ path: '/' }" v-for="folder in folders" :key="folder"> <router-link :to="{ path: '/' }" v-for="folder in folders" :key="folder">
<div class="f-item circular"> <div class="f-item circular">
<span class="f-item-text">{{ folder.name }}</span> <span class="f-item-text">{{ folder.name }}</span>
</div> </div>
</router-link> </router-link>
</div> </div>
</div>
</template> </template>
<script> <script>
@ -25,27 +27,35 @@ export default {
.f-container { .f-container {
margin-bottom: 20em; margin-bottom: 20em;
} }
.f-container h3 {
#f-items {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
border-top: 1px solid var(--seperator);
margin-top: 2em;
}
.f-container p {
text-transform: uppercase; text-transform: uppercase;
font-weight: normal; font-weight: normal;
color: rgba(255, 255, 255, 0.438); color: rgba(255, 255, 255, 0.438);
margin-bottom: 0em; margin-bottom: 0em;
} }
.f-container .f-item { .f-container .f-item {
float: left; width: 11em;
width: 9em; height: 5em;
height: 8em;
/* background-color: #9d020781; */
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center;
position: relative; position: relative;
background-image: url(../../assets/icons/folder.svg); background-image: url(../../assets/icons/folder.svg);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: 1em;
background-size: 30%; background-size: 10% 100%;
margin: 2em 2em 0em 0; margin-top: 1em;
padding: 1em; margin-right: 1em;
/* border: .1em solid var(--seperator); */
background-color: rgba(80, 80, 80, 0.247); background-color: rgba(80, 80, 80, 0.247);
} }
@ -54,16 +64,14 @@ export default {
} }
.f-container .f-item-text { .f-container .f-item-text {
width: calc(100% - 10%);
line-height-step: 2;
position: absolute; position: absolute;
bottom: 0.5em; left: 3em;
text-align: center; text-align: left;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 2; -webkit-line-clamp: 1;
line-clamp: 2; line-clamp: 1;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
} }
</style> </style>