mirror of
https://github.com/chylex/Nextcloud-News.git
synced 2025-04-14 07:15:43 +02:00
Fix design of Explore page
Signed-off-by: Jan C. Borchardt <hey@jancborchardt.net>
This commit is contained in:
Jan C. Borchardt
Sean Molenaar
parent
1fcab6e6c6
commit
d575bf52bb
109
css/explore.css
109
css/explore.css
@ -1,109 +0,0 @@
|
||||
/**
|
||||
* Nextcloud - News
|
||||
*
|
||||
* This file is licensed under the Affero General Public License version 3 or
|
||||
* later. See the COPYING file.
|
||||
*
|
||||
* @author Bernhard Posselt <dev@bernhard-posselt.com>
|
||||
* @copyright Bernhard Posselt 2014
|
||||
*/
|
||||
|
||||
/**
|
||||
* Explore styles
|
||||
*/
|
||||
.explore #app-content-wrapper {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#explore {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 45px 0 45px 45px;
|
||||
}
|
||||
|
||||
|
||||
#explore .grid-item {
|
||||
float: left;
|
||||
width: 300px;
|
||||
border-collapse: collapse;
|
||||
border: 1px solid #ccc;
|
||||
margin: 0 25px 25px 0;
|
||||
}
|
||||
|
||||
#explore h1 {
|
||||
font-size: 13pt;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 center;
|
||||
background-size: 24px 24px;
|
||||
padding: 5px 0 0 35px;
|
||||
}
|
||||
|
||||
#explore h1 a {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
#explore h1 a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#explore .category-wrapper {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#explore .category {
|
||||
font-weight: normal;
|
||||
font-size: 10pt;
|
||||
color: var(--color-primary-text);
|
||||
background-color: var(--color-primary);
|
||||
padding: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#explore .grid-item-content {
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
#explore .explore-logo {
|
||||
text-align: center;
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
#explore .explore-logo img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#explore .explore-subscribe {
|
||||
padding-top: 15px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#explore .explore-content {
|
||||
padding-top: 25px;
|
||||
}
|
||||
|
||||
#explore .explore-filter {
|
||||
text-align: right;
|
||||
padding: 0 30px 30px;
|
||||
}
|
||||
|
||||
#explore .explore-filter input,
|
||||
#explore .explore-filter select {
|
||||
margin-left: 10px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#explore .explore-filter input {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
#explore .explore-footer {
|
||||
clear: both;
|
||||
margin: 75px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#explore .explore-footer a {
|
||||
font-size: 11pt;
|
||||
color: #0000AA;
|
||||
text-decoration: underline;
|
||||
}
|
||||
64
css/explore.scss
Normal file
64
css/explore.scss
Normal file
@ -0,0 +1,64 @@
|
||||
/**
|
||||
* Nextcloud - News
|
||||
*
|
||||
* This file is licensed under the Affero General Public License version 3 or
|
||||
* later. See the COPYING file.
|
||||
*
|
||||
* @author Bernhard Posselt <dev@bernhard-posselt.com>
|
||||
* @copyright 2020, Jan C. Borchardt, https://jancborchardt.net
|
||||
* @copyright Bernhard Posselt 2014
|
||||
*/
|
||||
|
||||
/**
|
||||
* Explore styles
|
||||
*/
|
||||
.explore #app-content-wrapper {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#explore {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 45px 0 45px 45px;
|
||||
|
||||
.grid-item {
|
||||
width: 300px;
|
||||
border: 2px solid var(--color-border);
|
||||
border-radius: var(--border-radius-large);
|
||||
margin: 0 24px 24px 0;
|
||||
padding: 24px;
|
||||
|
||||
.explore-title {
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 center;
|
||||
background-size: 24px;
|
||||
padding-left: 32px;
|
||||
|
||||
a {
|
||||
word-wrap: break-word;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.explore-logo {
|
||||
text-align: center;
|
||||
margin-top: 25px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.explore-subscribe {
|
||||
margin-top: 16px;
|
||||
max-width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,53 +1,26 @@
|
||||
<?php print_unescaped($this->inc('part.content.warnings')) ?>
|
||||
|
||||
<div id="explore">
|
||||
<!--<div class="explore-filter">
|
||||
<label>
|
||||
<input ng-model="Explore.filter" type="search" placeholder="<?php p(addslashes($l->t('filter'))) ?>" news-auto-focus>
|
||||
</label>
|
||||
</div>-->
|
||||
|
||||
|
||||
<div class="explore-filter">
|
||||
<label for="explorelanguagecode"><?php p($l->t('Language')) ?>: </label>
|
||||
<select id="explorelanguagecode" name="explorelanguagecode"
|
||||
ng-change="Explore.showLanguage(Explore.selectedLanguageCode)"
|
||||
ng-options="language as language for language in Explore.getSupportedLanguageCodes()"
|
||||
ng-model="Explore.selectedLanguageCode"></select>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div ng-repeat="entry in Explore.feeds | filter:Explore.filter | orderBy:'-votes'" ng-show="!Explore.feedExists(entry.feed)" class="explore-feed grid-item" news-refresh-masonry>
|
||||
<div class="category-wrapper">
|
||||
<div class="category">
|
||||
{{ entry.category }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid-item-content">
|
||||
<h1 ng-show="entry.favicon"
|
||||
ng-style="{ backgroundImage: 'url(' + entry.favicon + ')'}">
|
||||
<a target="_blank" rel="noreferrer" ng-href="{{ entry.url }}">{{ entry.title }}</a>
|
||||
</h1>
|
||||
<h1 ng-hide="entry.favicon" class="icon-rss">
|
||||
{{ entry.title }}
|
||||
</h1>
|
||||
<div style="clear:both"></div>
|
||||
<div class="explore-content">
|
||||
<p>{{ entry.description }}</p>
|
||||
<h2 ng-show="entry.favicon"
|
||||
class="explore-title"
|
||||
ng-style="{ backgroundImage: 'url(' + entry.favicon + ')'}">
|
||||
<a target="_blank" rel="noreferrer" ng-href="{{ entry.url }}">{{ entry.title }}</a>
|
||||
</h2>
|
||||
<h2 ng-hide="entry.favicon" class="icon-rss explore-title">
|
||||
{{ entry.title }}
|
||||
</h2>
|
||||
<div class="explore-content">
|
||||
<p>{{ entry.description }}</p>
|
||||
|
||||
<div class="explore-logo">
|
||||
<img ng-src="{{ entry.image }}" ng-if="entry.image">
|
||||
</div>
|
||||
</div>
|
||||
<div class="explore-subscribe">
|
||||
<button ng-click="Explore.subscribeTo(entry.feed)">
|
||||
<?php p($l->t('Subscribe')) ?>
|
||||
</button>
|
||||
<div ng-if="entry.image" class="explore-logo">
|
||||
<img ng-src="{{ entry.image }}" >
|
||||
</div>
|
||||
</div>
|
||||
<button class="explore-subscribe" ng-click="Explore.subscribeTo(entry.feed)">
|
||||
<?php p($l->t('Subscribe to')) ?> {{ entry.title }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="explore-footer">
|
||||
<a target="_blank" rel="noreferrer" href="https://github.com/nextcloud/news/tree/master/docs/explore"><?php p($l->t('Got more awesome feeds? Share them with us!')) ?></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user