nextcloud
/
bookmarks
mirror of https://github.com/nextcloud/bookmarks
0
0
Fork 0
Code Issues Releases Wiki Activity

Grid view: Add a subtle border-radius

This commit is contained in:
Marcel Klehr 2019-08-26 20:07:25 +02:00
parent a279647806
commit ecaad7184e
1 changed files with 36 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
src/components/BookmarksList.vue
View File

@ -1,34 +1,37 @@
<template>
<div
:class="{'bookmarkslist': true, 'bookmarkslist--gridview': viewMode === 'grid'}"
>
<CreateBookmark v-if="newBookmark" />
<CreateFolder v-if="newFolder" />
<template v-if="$route.name === 'folder' || $route.name === 'home'">
<Folder
v-for="folder in folderChildren"
:key="'f' + folder.id"
:folder="folder"
/>
</template>
<template v-if="bookmarks.length">
<Bookmark
v-for="bookmark in bookmarks"
:key="'b' + bookmark.id"
:bookmark="bookmark"
/>
</template>
<div
v-else-if="!loading && !folderChildren.length"
class="bookmarkslist__empty"
>
<h2>No bookmarks here</h2>
<p>Try changing your query or add some using the button on the left.</p>
</div>
<div v-if="loading" class="bookmarkslist__loading">
<span class="icon-loading" />
</div>
</div>
<div
:class="{
bookmarkslist: true,
'bookmarkslist--gridview': viewMode === 'grid'
}"
>
<CreateBookmark v-if="newBookmark" />
<CreateFolder v-if="newFolder" />
<template v-if="$route.name === 'folder' || $route.name === 'home'">
<Folder
v-for="folder in folderChildren"
:key="'f' + folder.id"
:folder="folder"
/>
</template>
<template v-if="bookmarks.length">
<Bookmark
v-for="bookmark in bookmarks"
:key="'b' + bookmark.id"
:bookmark="bookmark"
/>
</template>
<div
v-else-if="!loading && !folderChildren.length"
class="bookmarkslist__empty"
>
<h2>No bookmarks here</h2>
<p>Try changing your query or add some using the button on the left.</p>
</div>
<div v-if="loading" class="bookmarkslist__loading">
<span class="icon-loading" />
</div>
</div>
</template>
<script>
@ -96,8 +99,8 @@ export default {
display: flex;
flex-flow: wrap;
}
.bookmarkslist--gridview > .folder,
.bookmarkslist--gridview > .bookmark,
.folder--gridview,
.bookmark--gridview,
.bookmarkslist--gridview > .create-folder,
.bookmarkslist--gridview > .create-bookmark {
width: 200px;
@ -109,5 +112,6 @@ export default {
margin: 10px 0 0 10px;
border: 1px solid var(--color-border);
box-shadow: #efefef7d 0px 0 13px 0px inset;
border-radius: var(--border-radius);
}
</style>