chylex/Nextcloud-News
1
0
Fork 0
mirror of https://github.com/chylex/Nextcloud-News.git synced 2025-04-09 10:15:44 +02:00
Code

add title ellipsis, fix

Browse Source
This commit is contained in:
Bernhard Posselt 2014-09-09 21:36:00 +02:00
parent daaf87749d
commit e9d37abf6d
3 changed files with 97 additions and 69 deletions

126
css/content.css
View File

@ -52,6 +52,11 @@
#app-content .item {
min-height: 120px;
cursor: default;
border-top: 1px solid #eee;
}
#app-content .item:first-child {
border-top: 0;
}
/**
@ -59,39 +64,56 @@
*/
#app-content .utils {
width: 100%;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
line-height: 40px;
line-height: 52px;
box-sizing: border-box;
padding: 5px 40px;
}
#app-content .utils ul {
width: 100%;
line-height: 40px;
height: 40px;
list-style-type: none;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: flex;
margin: 0;
padding: 0;
}
#app-content .utils li {
display: inline-block;
line-height: 40px;
height: 40px;
padding-right: 15px;
vertical-align: middle;
}
#app-content .utils button {
#app-content .utils .util {
padding: 5px 15px 5px 0;
}
#app-content .utils button,
#app-content .utils .external {
padding: 0;
margin: 5px;
margin: 0;
height: 30px;
width: 30px;
border: 0;
float: left;
background-color: transparent;
background-size: 100%;
background-repeat: no-repeat;
}
#app-content .utils .external,
#app-content .utils .menu button,
#app-content .utils .icon-toggle {
display: inline-block;
opacity: 0.3;
}
#app-content .utils .external:hover,
#app-content .utils .menu button:hover,
#app-content .utils .icon-toggle:hover,
#app-content .utils .icon-toggle.keep-unread {
opacity: 1;
}
#app-content .utils .star {
background-image: url('../img/inactive_star.svg');
}
@ -101,6 +123,45 @@
background-image: url('../img/active_star.svg');
}
/**
* Article title
*/
#app-content .utils .title {
width: 100%;
}
#app-content .utils .title a {
display: block;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
width: 100%;
padding: 0 20px;
line-height: 40px;
display: inline-block;
color: #222;
font-weight: bold;
font-size: 19px;
}
#app-content .utils .title a:hover {
text-decoration: underline;
}
#app-content .read .utils .title a {
font-weight: normal;
color: #888;
}
/**
* Timestamp
*/
#app-content .date {
color: #aaa;
font-size: 15px;
white-space: nowrap;
}
/**
* Actual content
*/
@ -108,49 +169,6 @@
padding: 30px 45px 30px 45px;
}
/**
* Article title
*/
#app-content .title {
font-size: 19px;
line-height: 25px;
margin-right: 200px;
font-weight: bold;
word-wrap: break-word;
display: inline-block;
}
#app-content .title a {
color: #222;
}
#app-content .title a:hover {
color: #222;
text-decoration: underline;
}
#app-content .read .title {
font-weight: normal;
}
#app-content .read .title a {
color: #888;
}
/**
* Timestamp
*/
#app-content .date {
float: right;
display: block;
color: #aaa;
line-height: 25px;
margin-right: 20px;
font-size: 15px;
}
/**
* Enclosure
*/

1
db/feed.php
View File

@ -101,6 +101,7 @@ class Feed extends Entity implements IAPI, \JsonSerializable {
return $serialized;
}
public function toAPI() {
return $this->serializeFields([
'id',

39
templates/part.content.expand.php
View File

@ -6,27 +6,36 @@
<div class="utils">
<ul>
<li ng-click="Content.toggleStar(item.id)">
<li ng-click="Content.toggleStar(item.id)" class="util">
<button class="star svg" ng-class="{'starred': item.starred}" title="<?php p($l->t('Star')); ?>"></button>
</li>
<li ng-click="Content.toggleKeepUnread(item.id)">
<button class="star svg" ng-class="{'starred': item.keepUnread}" title="<?php p($l->t('Keep unread')); ?>"></button>
<li class="util">
<a class="external icon-link"
target="_blank"
ng-href="{{ item.url }}"
title="<?php p($l->t('Open website')) ?>">
</a>
</li>
<li ng-click="Content.toggleKeepUnread(item.id)" class="util">
<button class="icon-toggle" ng-class="{'keep-unread': item.keepUnread}" title="<?php p($l->t('Keep unread')); ?>"></button>
</li>
<li class="title">
<h1>
<a target="_blank" ng-click="item.hide=!item.hide">
{{ item.title }}
</a>
</h1>
</li>
<li class="date">
<time title="{{ item.pubDate*1000|date:'yyyy-MM-dd HH:mm:ss' }}"
datetime="{{ item.pubDate*1000|date:'yyyy-MM-ddTHH:mm:ssZ' }}">
{{ Content.getRelativeDate(item.pubDate) }}
</time>
</li>
</ul>
</div>
<div class="article">
<time class="date" title="{{ item.pubDate*1000|date:'yyyy-MM-dd HH:mm:ss' }}"
datetime="{{ item.pubDate*1000|date:'yyyy-MM-ddTHH:mm:ssZ' }}"">
{{ Content.getRelativeDate(item.pubDate) }}
</time>
<h1 class="title">
<a target="_blank" ng-href="{{ item.url }}">
{{ item.title }}
</a>
</h1>
<div class="article" ng-hide="item.hide">
<h2 class="author">
<span>
<?php p($l->t('from')) ?>