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-07-27 14:56:52 +01:00
parent 617552a70a
commit 8715f65602
2 changed files with 31 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
template/index.html
View File

@ -173,7 +173,8 @@
</div> </div>
<b-modal id="settings-modal" hide-header hide-footer lazy> <b-modal id="settings-modal" hide-header hide-footer lazy>
<div v-if="settings=='create'"> <div v-if="settings=='create'">
<form action="" @submit.prevent="createFeed(event)"> <p class="cursor-default"><b>New Feed</b></p>
<form action="" @submit.prevent="createFeed(event)" class="mt-4">
<label for="feed-url">URL</label> <label for="feed-url">URL</label>
<input id="feed-url" name="url" type="url" class="form-control" required autocomplete="off"> <input id="feed-url" name="url" type="url" class="form-control" required autocomplete="off">
<label for="feed-folder" class="mt-3">Folder</label> <label for="feed-folder" class="mt-3">Folder</label>
@ -185,20 +186,13 @@
</form> </form>
</div> </div>
<div v-else-if="settings=='manage'"> <div v-else-if="settings=='manage'">
<div class="mb-5"> <p class="cursor-default"><b>Manage Feeds</b></p>
<form action="" @submit.prevent="createFolder(event)"> <div v-for="folder in foldersWithFeeds" class="mt-4" :key="folder.id">
<label for="settings-new-folder">New Folder</label> <div class="list-row d-flex align-items-center">
<div class="input-group"> <div class="w-100 text-truncate" v-if="folder.id">
<input id="settings-new-folder" type="text" class="form-control" name="title" required autocomplete="off"> <span class="icon mr-2">{% inline "folder.svg" %}</span>
<div class="input-group-append"> {{ folder.title }}
<button class="btn btn-default" type="submit">Add</button>
</div>
</div> </div>
</form>
</div>
<div v-for="folder in foldersWithFeeds" class="mb-4" :key="folder.id">
<div class="d-flex align-items-center">
<div class="w-100" v-if="folder.id"><b>{{ folder.title }}</b></div>
<div class="flex-shrink-0" v-if="folder.id"> <div class="flex-shrink-0" v-if="folder.id">
<b-dropdown right no-caret lazy="true" variant="link" class="settings-dropdown" toggle-class="text-decoration-none"> <b-dropdown right no-caret lazy="true" variant="link" class="settings-dropdown" toggle-class="text-decoration-none">
<template v-slot:button-content> <template v-slot:button-content>
@ -214,8 +208,9 @@
</b-dropdown> </b-dropdown>
</div> </div>
</div> </div>
<div v-for="feed in folder.feeds" class="d-flex align-items-center" :key="feed.id"> <div v-for="feed in folder.feeds" class="list-row d-flex align-items-center" :key="feed.id">
<div class="w-100"> <div class="w-100 text-truncate">
<span class="icon mr-2">{% inline "rss.svg" %}</span>
{{ feed.title }} {{ feed.title }}
</div> </div>
<div class="flex-shrink-0"> <div class="flex-shrink-0">

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

@ -30,13 +30,15 @@ select.form-control {
} }
select.form-control:not([multiple]):not([size]) { select.form-control:not([multiple]):not([size]) {
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right .35rem center/.6rem .6rem; background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right .35rem center/.6rem .6rem;
padding-right: 1.2rem; padding-right: 1.2rem;
cursor: pointer;
} }
.form-control:focus { .form-control:focus {
border-color: var(--color-primary); border-color: var(--color-primary);
box-shadow: 0 0 0 2px rgba(0,123,255,.25), inset 0 1px 1px rgba(16,22,26,.2); box-shadow: none; /*0 0 0 2px rgba(0,123,255,.25), inset 0 1px 1px rgba(16,22,26,.2);*/
} }
.btn:focus { .btn:focus {
@ -226,6 +228,23 @@ select.form-control:not([multiple]):not([size]) {
box-shadow: none; box-shadow: none;
} }
.btn-default:focus {
border-color: var(--color-primary);
}
.list-row {
padding-left: .5rem;
padding-right: .5rem;
margin-left: -.5rem;
margin-right: -.5rem;
border-radius: 3px;
cursor: default;
}
.list-row:hover {
background-color: #f8f9fa;
}
.toolbar { .toolbar {
min-height: 2rem !important; min-height: 2rem !important;
max-height: 2rem !important; max-height: 2rem !important;