зеркало из https://github.com/nextcloud/news.git
navigation style fixes
This commit is contained in:
Bernhard Posselt
Родитель
6711caea1c
Коммит
e472be4809
132
css/content.css
132
css/content.css
|
|
@ -48,7 +48,7 @@
|
|||
/**
|
||||
* Rules for a single feed item
|
||||
*/
|
||||
.item {
|
||||
#app-content .item {
|
||||
border-top: 1px solid #ccc;
|
||||
min-height: 120px;
|
||||
background-image: linear-gradient(top, #F8F8F8 0, #FFF 84px);
|
||||
|
|
@ -56,19 +56,19 @@
|
|||
cursor: default;
|
||||
}
|
||||
|
||||
.item.viewed {
|
||||
#app-content .item.viewed {
|
||||
border-right: 5px solid #F28627;
|
||||
}
|
||||
|
||||
|
||||
.item:first-child {
|
||||
#app-content .item:first-child {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Utils panel
|
||||
*/
|
||||
.item .star {
|
||||
#app-content .item .star {
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
margin: 2px 0 0 6px;
|
||||
|
|
@ -80,37 +80,37 @@
|
|||
background-image: url('../img/inactive_star.svg');
|
||||
}
|
||||
|
||||
.item .starred,
|
||||
.item .star:hover {
|
||||
#app-content .item .starred,
|
||||
#app-content .item .star:hover {
|
||||
background-image: url('../img/active_star.svg');
|
||||
}
|
||||
|
||||
/**
|
||||
* Heading for compact view
|
||||
*/
|
||||
.compact .item .body,
|
||||
.compact .item .title,
|
||||
.compact .item .author,
|
||||
.compact .item .date,
|
||||
.compact .item .bottom-utils,
|
||||
.item .heading,
|
||||
.item .link {
|
||||
#app-content .compact .item .body,
|
||||
#app-content .compact .item .title,
|
||||
#app-content .compact .item .author,
|
||||
#app-content .compact .item .date,
|
||||
#app-content .compact .item .bottom-utils,
|
||||
#app-content .item .heading,
|
||||
#app-content .item .link {
|
||||
display: none;
|
||||
}
|
||||
.compact .item.open .body,
|
||||
.compact .item.open .author,
|
||||
.compact .item.open .bottom-utils,
|
||||
.compact .item .heading,
|
||||
.item .link {
|
||||
#app-content .compact .item.open .body,
|
||||
#app-content .compact .item.open .author,
|
||||
#app-content .compact .item.open .bottom-utils,
|
||||
#app-content .compact .item .heading,
|
||||
#app-content .item .link {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.heading {
|
||||
#app-content .heading {
|
||||
padding: 5px 20px;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.heading h1 a {
|
||||
#app-content .heading h1 a {
|
||||
font-weight: bold;
|
||||
font-size: 13pt;
|
||||
padding: 0 5px;
|
||||
|
|
@ -118,35 +118,35 @@
|
|||
line-height: 40px;
|
||||
}
|
||||
|
||||
.read .heading h1 a {
|
||||
#app-content .read .heading h1 a {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.compact .item {
|
||||
#app-content .compact .item {
|
||||
padding: 0 !important;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.compact .item .body {
|
||||
#app-content .compact .item .body {
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.compact .item.open .heading {
|
||||
#app-content .compact .item.open .heading {
|
||||
margin-bottom: 15px;
|
||||
border-bottom: 1px dashed #ddd;
|
||||
}
|
||||
|
||||
.heading .star {
|
||||
#app-content .heading .star {
|
||||
float: left;
|
||||
margin: 7px 12px 0 0;
|
||||
}
|
||||
|
||||
.heading .external {
|
||||
#app-content .heading .external {
|
||||
float: left;
|
||||
margin: 8px 12px 0 0;
|
||||
}
|
||||
|
||||
.heading .timeago {
|
||||
#app-content .heading .timeago {
|
||||
display: block;
|
||||
float: right;
|
||||
line-height: 40px;
|
||||
|
|
@ -156,17 +156,17 @@
|
|||
/**
|
||||
* Feed title
|
||||
*/
|
||||
.item .title {
|
||||
#app-content .item .title {
|
||||
font-size: 19px;
|
||||
margin: 4px 182px 4px 42px;
|
||||
font-weight: bold;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.item .title a {
|
||||
#app-content .item .title a {
|
||||
color: #222;
|
||||
}
|
||||
.item .title a:hover {
|
||||
#app-content .item .title a:hover {
|
||||
color: #222;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
|
@ -174,39 +174,39 @@
|
|||
/**
|
||||
* Feed title when read
|
||||
*/
|
||||
.item.read .title {
|
||||
#app-content .item.read .title {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.item.read .title a {
|
||||
#app-content .item.read .title a {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
/**
|
||||
* Author of the item
|
||||
*/
|
||||
.item .author {
|
||||
#app-content .item .author {
|
||||
color: #aaa;
|
||||
font-size: 15px;
|
||||
margin: 3px 0 5px 42px;
|
||||
}
|
||||
|
||||
.item .author a {
|
||||
#app-content .item .author a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.item .author a:hover {
|
||||
#app-content .item .author a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.timestamp {
|
||||
#app-content .timestamp {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Feed timestamp
|
||||
*/
|
||||
.timeago {
|
||||
#app-content .timeago {
|
||||
float: right;
|
||||
color: #aaa;
|
||||
margin: 4px 17px 0 0;
|
||||
|
|
@ -216,11 +216,11 @@
|
|||
/**
|
||||
* Body of the feed item
|
||||
*/
|
||||
.item .enclosure {
|
||||
#app-content .item .enclosure {
|
||||
padding: 14px 42px 0 49px;
|
||||
}
|
||||
|
||||
.item .body {
|
||||
#app-content .item .body {
|
||||
padding: 10px 42px 0 42px;
|
||||
max-width: 770px;
|
||||
font-size: 14px;
|
||||
|
|
@ -230,16 +230,17 @@
|
|||
height: 80px;*/
|
||||
}
|
||||
|
||||
.item .body.opened {
|
||||
#app-content .item .body.opened {
|
||||
|
||||
}
|
||||
|
||||
.item .body p {
|
||||
#app-content .item .body p {
|
||||
line-height: 1.5;
|
||||
margin: 7px 0 14px 0;
|
||||
}
|
||||
|
||||
.item .body img, .item .body table {
|
||||
#app-content .item .body img,
|
||||
#app-content .item .body table {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
overflow: auto;
|
||||
|
|
@ -247,20 +248,21 @@
|
|||
white-space:normal;
|
||||
}
|
||||
|
||||
.item .body > img:first-child,
|
||||
.item .body > div:first-child > img:first-child {
|
||||
#app-content .item .body > img:first-child,
|
||||
#app-content .item .body > div:first-child > img:first-child {
|
||||
padding: 0 14px 0 0;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.item .body h1, .item .body h2 {
|
||||
#app-content .item .body h1,
|
||||
#app-content .item .body h2 {
|
||||
font-size: 17px;
|
||||
font-weight: bold;
|
||||
color: #222;
|
||||
margin: 21px 0 0 0;
|
||||
}
|
||||
|
||||
.item .body h3 {
|
||||
#app-content .item .body h3 {
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
color: #222;
|
||||
|
|
@ -268,57 +270,57 @@
|
|||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.item .body > div {
|
||||
#app-content .item .body > div {
|
||||
margin: 7px 0;
|
||||
}
|
||||
|
||||
.item .body a {
|
||||
#app-content .item .body a {
|
||||
color: #0000ff;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.item .body ul {
|
||||
#app-content .item .body ul {
|
||||
margin: 7px 0;
|
||||
padding-left: 14px;
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
.item .body ol {
|
||||
#app-content .item .body ol {
|
||||
margin: 7px 0;
|
||||
padding-left: 21px;
|
||||
}
|
||||
|
||||
.item .body ul li {
|
||||
#app-content .item .body ul li {
|
||||
cursor: default;
|
||||
line-height: 21px;
|
||||
}
|
||||
|
||||
.item .body pre {
|
||||
#app-content .item .body pre {
|
||||
padding: 7px 7px 7px 14px;
|
||||
background-color: #dadada;
|
||||
border: 1px solid #ccc;
|
||||
margin: 7px 0 14px 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.item .body pre::-webkit-scrollbar {
|
||||
#app-content .item .body pre::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.item .body pre::-webkit-scrollbar-thumb {
|
||||
#app-content .item .body pre::-webkit-scrollbar-thumb {
|
||||
background: #333;
|
||||
}
|
||||
|
||||
.item .body pre::-webkit-scrollbar-track-piece {
|
||||
#app-content .item .body pre::-webkit-scrollbar-track-piece {
|
||||
background: #ddd;
|
||||
}
|
||||
|
||||
.item .body code,
|
||||
.item .body pre {
|
||||
#app-content .item .body code,
|
||||
#app-content .item .body pre {
|
||||
font-family: monospace;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.item .body blockquote {
|
||||
#app-content .item .body blockquote {
|
||||
border-left: 1px solid rgb(210,210,210);
|
||||
margin: 25px 0;
|
||||
padding: 0 0 0 15px;
|
||||
|
|
@ -329,7 +331,7 @@
|
|||
/**
|
||||
* Line with utils at the bottom
|
||||
*/
|
||||
.item .bottom-utils {
|
||||
#app-content .item .bottom-utils {
|
||||
width: 100%;
|
||||
height: 35px;
|
||||
margin: 0;
|
||||
|
|
@ -338,25 +340,25 @@
|
|||
-moz-box-sizing: border-box;
|
||||
}
|
||||
|
||||
.item .bottom-utils ul {
|
||||
#app-content .item .bottom-utils ul {
|
||||
float: right;
|
||||
margin: 0 17px;
|
||||
}
|
||||
|
||||
|
||||
.item .bottom-utils,
|
||||
.item .bottom-utils a {
|
||||
#app-content .item .bottom-utils,
|
||||
#app-content .item .bottom-utils a {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.item:hover .bottom-utils li {
|
||||
#app-content .item:hover .bottom-utils li {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.item .bottom-utils li {
|
||||
#app-content .item .bottom-utils li {
|
||||
padding-left: 25px;
|
||||
}
|
||||
|
||||
.item .bottom-utils li input[type=checkbox]{
|
||||
#app-content .item .bottom-utils li input[type=checkbox]{
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,17 +7,20 @@
|
|||
* @author Bernhard Posselt <dev@bernhard-posselt.com>
|
||||
* @copyright Bernhard Posselt 2014
|
||||
*/
|
||||
.add-new .heading {
|
||||
|
||||
/* add new feed or folder */
|
||||
#app-navigation .add-new .heading {
|
||||
height: 44px;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
padding: 0 0 0 44px;
|
||||
background-position: 14px center;
|
||||
}
|
||||
|
||||
.add-new .heading:hover {
|
||||
#app-navigation .add-new .heading:hover {
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
.add-new .heading button {
|
||||
#app-navigation .add-new .heading button {
|
||||
padding: 0;
|
||||
line-height: 44px;
|
||||
width: 100%;
|
||||
|
|
@ -28,33 +31,33 @@
|
|||
font-weight: normal;
|
||||
}
|
||||
|
||||
.add-new-popup {
|
||||
#app-navigation .add-new-popup {
|
||||
display: none;
|
||||
height: 120px;
|
||||
height: 150px;
|
||||
padding: 15px 10px;
|
||||
box-shadow: inset 0px 0px 10px #dedede;
|
||||
border-top: 1px solid #dedede;
|
||||
border-bottom: 1px solid #dedede;
|
||||
}
|
||||
|
||||
.add-new-popup input[type=text] {
|
||||
#app-navigation .add-new-popup input[type=text] {
|
||||
width: 170px;
|
||||
}
|
||||
|
||||
.add-new-popup select {
|
||||
#app-navigation .add-new-popup select {
|
||||
width: 170px;
|
||||
margin-top: 1px !important;
|
||||
height: 30px;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.add-new-popup input {
|
||||
#app-navigation .add-new-popup input {
|
||||
margin-top: 15px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.add-new-popup input,
|
||||
.add-new-popup select {
|
||||
#app-navigation .add-new-popup input,
|
||||
#app-navigation .add-new-popup select {
|
||||
margin: 0 0 5px 0;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
|
|
@ -63,7 +66,7 @@
|
|||
border-right: 0;
|
||||
}
|
||||
|
||||
.add-new-popup button {
|
||||
#app-navigation .add-new-popup button {
|
||||
margin: 0 0 5px 0;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
|
|
@ -73,66 +76,46 @@
|
|||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.add-new-popup .action-button {
|
||||
#app-navigation .add-new-popup .action-button {
|
||||
width: 30px;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.add-new-popup .back-button {
|
||||
#app-navigation .add-new-popup .back-button {
|
||||
border-radius: 0;
|
||||
background-image: url('../img/delete.svg');
|
||||
}
|
||||
|
||||
.add-new-popup .new-button {
|
||||
#app-navigation .add-new-popup .new-button {
|
||||
border-radius: 0;
|
||||
background-image: url('../img/add.svg');
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
}
|
||||
|
||||
.add-new-popup .create-button {
|
||||
#app-navigation .add-new-popup .create-button {
|
||||
border-radius: 0;
|
||||
background-image: url('../img/mark_read.svg');
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
}
|
||||
|
||||
.add-new-popup .error {
|
||||
#app-navigation .add-new-popup .error {
|
||||
padding: 0 0 10px 0;
|
||||
}
|
||||
|
||||
.starred-icon {
|
||||
/* navigation */
|
||||
#app-navigation .starred-icon {
|
||||
background-image: url('../img/starred.png');
|
||||
}
|
||||
|
||||
.subscriptions-icon {
|
||||
#app-navigation .subscriptions-icon {
|
||||
background-image: url('../img/rss.svg');
|
||||
}
|
||||
|
||||
.unread > a,
|
||||
.unread > .utils .unread-counter {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#app-navigation .with-icon .list-title {
|
||||
padding-left:16px;
|
||||
}
|
||||
|
||||
#app-navigation .with-icon .list-title span {
|
||||
display:none;
|
||||
margin-left:6px;
|
||||
}
|
||||
|
||||
#app-navigation .with-icon .list-title:hover span {
|
||||
display:inline;
|
||||
}
|
||||
|
||||
#app-navigation .with-icon .opened span {
|
||||
display:inline;
|
||||
}
|
||||
|
||||
#app-navigation .unread > a {
|
||||
font-weight: bold;
|
||||
padding-right: 32px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -134,4 +134,6 @@
|
|||
.app-navigation-entry-options li button:focus {
|
||||
opacity: 1;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
/* Loading sign instead of icon by adding the loading class to the list item */
|
||||
|
|
|
|||
|
|
@ -1,5 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1.0" xmlns:cc="http://creativecommons.org/ns#" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:dc="http://purl.org/dc/elements/1.1/">
|
||||
<rect style="color:#000000" fill-opacity="0" height="97.986" width="163.31" y="-32.993" x="-62.897"/>
|
||||
<path d="m3 6c-1.1046 0-2 0.8954-2 2s0.8954 2 2 2 2-0.8954 2-2-0.8954-2-2-2zm5 0c-1.1046 0-2 0.8954-2 2s0.8954 2 2 2 2-0.8954 2-2-0.8954-2-2-2zm5 0c-1.105 0-2 0.8954-2 2s0.895 2 2 2 2-0.8954 2-2-0.895-2-2-2z" fill-rule="evenodd"/>
|
||||
</svg>
|
||||
|
До Ширина: | Высота: | Размер: 660 B |
|
|
@ -10,7 +10,6 @@
|
|||
|
||||
\OCP\Util::addStyle('news', 'bootstrap/tooltip');
|
||||
\OCP\Util::addStyle('news', 'app');
|
||||
\OCP\Util::addStyle('news', 'oc8');
|
||||
\OCP\Util::addStyle('news', 'navigation');
|
||||
\OCP\Util::addStyle('news', 'content');
|
||||
\OCP\Util::addStyle('news', 'settings');
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<li class="add-new">
|
||||
<div class="list-title list-title-with-icon heading">
|
||||
<div class="heading icon-add">
|
||||
<button
|
||||
data-apps-slide-toggle=".add-new-popup"
|
||||
news-focus="[ng-model='feedUrl']">+ <?php p($l->t('Add Website'))?></button>
|
||||
news-focus="[ng-model='feedUrl']"><?php p($l->t('Add Website'))?></button>
|
||||
</div>
|
||||
|
||||
<div class="add-new-popup">
|
||||
|
|
@ -15,19 +15,13 @@
|
|||
<?php p($l->t('Error: folder exists already')); ?>
|
||||
</span>
|
||||
</p>
|
||||
<form>
|
||||
|
||||
<form>
|
||||
<input type="text"
|
||||
ng-model="feedUrl"
|
||||
placeholder="<?php p($l->t('Address')); ?>"
|
||||
name="address"
|
||||
autofocus>
|
||||
<button title="<?php p($l->t('Add')); ?>"
|
||||
class="primary"
|
||||
ng-disabled="!feedUrl.trim()"
|
||||
ng-click="createFeed(feedUrl, folderId.id)"><?php p($l->t('Add')); ?></button>
|
||||
</form>
|
||||
<form>
|
||||
<select name="folder"
|
||||
data-create="<?php p($l->t('New folder')); ?>"
|
||||
title="<?php p($l->t('Folder')); ?>"
|
||||
|
|
@ -59,6 +53,10 @@
|
|||
ng-class="{loading: Navigation.isAddingFolder()}"
|
||||
class="action-button create-button action">
|
||||
</button>
|
||||
<button title="<?php p($l->t('Add')); ?>"
|
||||
class="primary"
|
||||
ng-disabled="!feedUrl.trim()"
|
||||
ng-click="createFeed(feedUrl, folderId.id)"><?php p($l->t('Add')); ?></button>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@
|
|||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="app-navigation-entry-options" ng-class="{'app-navigation-entry-options-open': optionsId == feed.id}">
|
||||
<div class="app-navigation-entry-menu" ng-class="{'app-navigation-entry-menu-open': optionsId == feed.id}">
|
||||
<ul>
|
||||
<li><button class="icon-rename" title="<?php p($l->t('Rename feed')); ?>"></button></li>
|
||||
<li><button class="icon-delete" title="<?php p($l->t('Delete website')); ?>"></button></li>
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче