james/yarr
4
0
Fork 0
mirror of https://github.com/nkanaev/yarr.git synced 2025-05-24 00:33:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

ui tweaks

Browse Source
This commit is contained in:
Nazar Kanaev 2020-06-26 13:34:29 +01:00
parent 95b830ee1a
commit 02ad42a52d
4 changed files with 61 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
template/index.html
View File

@ -124,37 +124,52 @@
<button class="btn btn-block btn-outline-secondary mt-3" type="button">Add</button>
</div>
<div v-else-if="settings=='manage'">
<div v-for="folder in foldersWithFeeds">
<p><strong>{{ folder.title || "Uncategorized" }}</strong></p>
<div v-for="feed in folder.feeds">
{{ feed.title }}
<div class="dropdown d-inline-block">
<button class="btn btn-link dropdown-toggle" @click="settingsManageDropdown='feed:'+feed.id">
<img src="./static/images/folder.svg">
</button>
<div class="dropdown-menu show py-0 overflow-hidden"
style="top: 0; left: 0; position: absolute; transform: translate3d(0px, 38px, 0px);"
v-if="settingsManageDropdown=='feed:'+feed.id">
<a href="#" class="dropdown-item px-3"
@click.prevent="moveFeed(feed, null)" v-if="feed.folder_id">---</a>
<a href="#" class="dropdown-item px-3"
v-if="folder.id != feed.folder_id"
v-for="folder in folders"
@click.prevent="moveFeed(feed, folder)">
{{ folder.title }}
</a>
<div v-for="folder in foldersWithFeeds" class="mb-4">
<div><strong>{{ folder.title || "Uncategorized" }}</strong></div>
<div v-for="feed in folder.feeds" class="d-flex align-items-center">
<div class="w-100">
<div class="input-group input-group-sm" v-if="settingsManageEdit=='feed:'+feed.id">
<input type="text" class="form-control" :value="feed.title">
<div class="input-group-append">
<button class="btn btn-outline-secondary">Rename</button>
<button class="btn btn-outline-secondary" @click="settingsManageEdit=null">&times;</button>
</div>
</div>
<span v-else>
{{ feed.title }}
</span>
</div>
<div class="flex-shrink-0">
<div class="dropdown d-inline-block">
<button class="btn btn-link p-1" @click="settingsManageEdit='feed:'+feed.id">
<img src="./static/images/edit.svg">
</button>
<button class="btn btn-link p-1" @click="settingsManageDropdown='feed:'+feed.id">
<img src="./static/images/folder.svg">
</button>
<div class="dropdown-menu show py-0 overflow-hidden"
style="top: 0; left: 0; position: absolute; transform: translate3d(0, 38px, 0px);"
v-if="settingsManageDropdown=='feed:'+feed.id">
<a href="#" class="dropdown-item px-3"
@click.prevent="moveFeed(feed, null)" v-if="feed.folder_id">Uncategorized</a>
<a href="#" class="dropdown-item px-3"
v-if="folder.id != feed.folder_id"
v-for="folder in folders"
@click.prevent="moveFeed(feed, folder)">
{{ folder.title }}
</a>
</div>
</div>
<button class="btn btn-link p-1">
<img src="./static/images/trash-2.svg">
</button>
</div>
<button class="btn btn-link">
<img src="./static/images/trash-2.svg">
</button>
</div>
</div>
<div class="mt-4">
<label for="">New Folder</label>
<div class="input-group mb-3">
<input type="text" class="form-control" v-model="newFolderTitle">
<div class="mt-5">
<label for="settings-new-folder">New Folder</label>
<div class="input-group">
<input id="settings-new-folder" type="text" class="form-control" v-model="newFolderTitle">
<div class="input-group-append">
<button class="btn btn-outline-secondary" @click="newFolderCreate()">Add</button>
</div>

1
template/static/images/edit.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 365 B

1
template/static/javascripts/app.js
View File

@ -34,6 +34,7 @@ var vm = new Vue({
'settingsShow': false,
'settings': 'manage',
'settingsManageDropdown': null,
'settingsManageEdit': null,
'newFolderTitle': null,
}
},

17
template/static/stylesheets/app.css
View File

@ -2,6 +2,23 @@
display: none !important;
}
body {
font-size: 15px !important;
}
.form-control {
transition: none;
}
.form-control:focus {
border-color: #80bdff !important;
box-shadow: inset 0 0 0 2px #80bdff !important;
}
.btn:focus {
box-shadow: none !important;
}
.wrapper {
max-width: 1368px;
margin: 0 auto;